@tonyclaw/llm-inspector 1.16.4 → 1.16.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.output/nitro.json +1 -1
- package/.output/public/assets/CompareDrawer-C1w4KUGZ.js +1 -0
- package/.output/public/assets/ReplayDialog-DR2Sgq_g.js +1 -0
- package/.output/public/assets/RequestAnatomy-DAre35kj.js +1 -0
- package/.output/public/assets/ResponseView-ackes7_g.js +1 -0
- package/.output/public/assets/StreamingChunkSequence-GrXwIGKA.js +1 -0
- package/.output/public/assets/index-BGzHFOEX.css +1 -0
- package/.output/public/assets/index-DX88k9br.js +101 -0
- package/.output/public/assets/json-viewer-C_QUhGeu.js +14 -0
- package/.output/public/assets/{main-DbWwVQFh.js → main-CDMdNDY_.js} +1 -1
- package/.output/server/_libs/lucide-react.mjs +104 -84
- package/.output/server/_ssr/CompareDrawer-ftkJxyk6.mjs +1040 -0
- package/.output/server/_ssr/ReplayDialog-DcmE3lj5.mjs +321 -0
- package/.output/server/_ssr/RequestAnatomy-rK_LNMdG.mjs +351 -0
- package/.output/server/_ssr/ResponseView-CbQ4n-aJ.mjs +601 -0
- package/.output/server/_ssr/StreamingChunkSequence-84FZkIzv.mjs +301 -0
- package/.output/server/_ssr/{index-C-z-fZtq.mjs → index-CDjLoMsk.mjs} +1026 -2455
- package/.output/server/_ssr/index.mjs +2 -2
- package/.output/server/_ssr/json-viewer-B-qpM5xC.mjs +510 -0
- package/.output/server/_ssr/{router-CNM9Kbi0.mjs → router-BrdjOUEW.mjs} +24 -14
- package/.output/server/{_tanstack-start-manifest_v-BWfLeIsC.mjs → _tanstack-start-manifest_v-DmOZEcJ3.mjs} +1 -1
- package/.output/server/index.mjs +68 -26
- package/package.json +1 -1
- package/src/components/OnboardingBanner.tsx +2 -2
- package/src/components/ProxyViewer.tsx +38 -26
- package/src/components/ProxyViewerContainer.tsx +3 -24
- package/src/components/proxy-viewer/ConversationGroup.tsx +1 -1
- package/src/components/proxy-viewer/ConversationHeader.tsx +4 -1
- package/src/components/proxy-viewer/LogEntry.tsx +213 -181
- package/src/components/proxy-viewer/LogEntryHeader.tsx +134 -36
- package/src/components/proxy-viewer/ThreadConnector.tsx +17 -2
- package/src/components/proxy-viewer/TurnGroup.tsx +94 -71
- package/src/components/proxy-viewer/anatomy/RequestAnatomy.tsx +98 -0
- package/src/components/proxy-viewer/anatomy/SegmentBar.tsx +196 -0
- package/src/components/proxy-viewer/anatomy/tokenEstimate.ts +53 -0
- package/src/components/proxy-viewer/anatomy/types.ts +39 -0
- package/src/components/proxy-viewer/anatomy/useAnatomyJump.ts +114 -0
- package/src/components/proxy-viewer/formats/anthropic/ContentBlocks.tsx +3 -23
- package/src/components/proxy-viewer/formats/anthropic/thinkingExtract.ts +21 -0
- package/src/components/proxy-viewer/formats/openai/ResponseView.tsx +5 -3
- package/src/components/proxy-viewer/lazy.ts +37 -0
- package/src/components/proxy-viewer/log-formats/anthropic.ts +146 -0
- package/src/components/proxy-viewer/log-formats/openai.ts +127 -0
- package/src/components/proxy-viewer/log-formats/types.ts +7 -0
- package/src/components/proxy-viewer/log-formats/unknown.ts +4 -0
- package/src/components/proxy-viewer/logEntryVisibility.ts +39 -0
- package/src/components/proxy-viewer/useKeyboardNavigation.ts +190 -0
- package/src/components/proxy-viewer/viewerState.ts +8 -0
- package/src/components/ui/crab-variants.tsx +11 -0
- package/src/components/ui/json-expansion-button.tsx +56 -0
- package/src/components/ui/json-viewer-bulk.ts +97 -0
- package/src/components/ui/json-viewer.tsx +58 -183
- package/src/lib/utils.ts +2 -3
- package/src/routes/api/logs.stream.ts +26 -16
- package/.output/public/assets/index-DRRCmu5p.css +0 -1
- package/.output/public/assets/index-X7CHS7fS.js +0 -107
|
@@ -0,0 +1,321 @@
|
|
|
1
|
+
import { r as reactExports, j as jsxRuntimeExports } from "../_libs/react.mjs";
|
|
2
|
+
import { D as Dialog, b as DialogContent, d as DialogHeader, e as DialogTitle, T as Tabs, h as TabsList, i as TabsTrigger, j as TabsContent, k as TooltipProvider, l as Tooltip, m as TooltipTrigger, n as TooltipContent, o as Button } from "./index-CDjLoMsk.mjs";
|
|
3
|
+
import { ResponseView } from "./ResponseView-CbQ4n-aJ.mjs";
|
|
4
|
+
import "./router-BrdjOUEW.mjs";
|
|
5
|
+
import "../_libs/modelcontextprotocol__server.mjs";
|
|
6
|
+
import "../_libs/jszip.mjs";
|
|
7
|
+
import "./json-viewer-B-qpM5xC.mjs";
|
|
8
|
+
import { s as RotateCcw } from "../_libs/lucide-react.mjs";
|
|
9
|
+
import { d as object, c as boolean, n as number, b as string } from "../_libs/zod.mjs";
|
|
10
|
+
import "../_libs/swr.mjs";
|
|
11
|
+
import "../_libs/use-sync-external-store.mjs";
|
|
12
|
+
import "../_libs/dequal.mjs";
|
|
13
|
+
import "../_libs/clsx.mjs";
|
|
14
|
+
import "../_libs/tailwind-merge.mjs";
|
|
15
|
+
import "../_libs/class-variance-authority.mjs";
|
|
16
|
+
import "../_libs/radix-ui__react-dialog.mjs";
|
|
17
|
+
import "../_libs/radix-ui__primitive.mjs";
|
|
18
|
+
import "../_libs/radix-ui__react-compose-refs.mjs";
|
|
19
|
+
import "../_libs/radix-ui__react-context.mjs";
|
|
20
|
+
import "../_libs/radix-ui__react-id.mjs";
|
|
21
|
+
import "../_libs/@radix-ui/react-use-layout-effect+[...].mjs";
|
|
22
|
+
import "../_libs/@radix-ui/react-use-controllable-state+[...].mjs";
|
|
23
|
+
import "../_libs/@radix-ui/react-dismissable-layer+[...].mjs";
|
|
24
|
+
import "../_libs/radix-ui__react-primitive.mjs";
|
|
25
|
+
import "../_libs/react-dom.mjs";
|
|
26
|
+
import "util";
|
|
27
|
+
import "async_hooks";
|
|
28
|
+
import "stream";
|
|
29
|
+
import "crypto";
|
|
30
|
+
import "../_libs/radix-ui__react-slot.mjs";
|
|
31
|
+
import "../_libs/@radix-ui/react-use-callback-ref+[...].mjs";
|
|
32
|
+
import "../_libs/@radix-ui/react-use-escape-keydown+[...].mjs";
|
|
33
|
+
import "../_libs/radix-ui__react-focus-scope.mjs";
|
|
34
|
+
import "../_libs/radix-ui__react-portal.mjs";
|
|
35
|
+
import "../_libs/radix-ui__react-presence.mjs";
|
|
36
|
+
import "../_libs/radix-ui__react-focus-guards.mjs";
|
|
37
|
+
import "../_libs/react-remove-scroll.mjs";
|
|
38
|
+
import "tslib";
|
|
39
|
+
import "../_libs/react-remove-scroll-bar.mjs";
|
|
40
|
+
import "../_libs/react-style-singleton.mjs";
|
|
41
|
+
import "../_libs/get-nonce.mjs";
|
|
42
|
+
import "../_libs/use-sidecar.mjs";
|
|
43
|
+
import "../_libs/use-callback-ref.mjs";
|
|
44
|
+
import "../_libs/aria-hidden.mjs";
|
|
45
|
+
import "../_libs/diff.mjs";
|
|
46
|
+
import "../_libs/tanstack__react-virtual.mjs";
|
|
47
|
+
import "../_libs/tanstack__virtual-core.mjs";
|
|
48
|
+
import "../_libs/radix-ui__react-select.mjs";
|
|
49
|
+
import "../_libs/radix-ui__number.mjs";
|
|
50
|
+
import "../_libs/radix-ui__react-collection.mjs";
|
|
51
|
+
import "../_libs/radix-ui__react-direction.mjs";
|
|
52
|
+
import "../_libs/radix-ui__react-popper.mjs";
|
|
53
|
+
import "../_libs/floating-ui__react-dom.mjs";
|
|
54
|
+
import "../_libs/floating-ui__dom.mjs";
|
|
55
|
+
import "../_libs/floating-ui__core.mjs";
|
|
56
|
+
import "../_libs/floating-ui__utils.mjs";
|
|
57
|
+
import "../_libs/radix-ui__react-arrow.mjs";
|
|
58
|
+
import "../_libs/radix-ui__react-use-size.mjs";
|
|
59
|
+
import "../_libs/radix-ui__react-use-previous.mjs";
|
|
60
|
+
import "../_libs/@radix-ui/react-visually-hidden+[...].mjs";
|
|
61
|
+
import "../_libs/radix-ui__react-tabs.mjs";
|
|
62
|
+
import "../_libs/radix-ui__react-roving-focus.mjs";
|
|
63
|
+
import "../_libs/radix-ui__react-tooltip.mjs";
|
|
64
|
+
import "../_libs/tanstack__react-router.mjs";
|
|
65
|
+
import "../_libs/tiny-warning.mjs";
|
|
66
|
+
import "../_libs/tanstack__router-core.mjs";
|
|
67
|
+
import "../_libs/cookie-es.mjs";
|
|
68
|
+
import "../_libs/tanstack__history.mjs";
|
|
69
|
+
import "../_libs/tiny-invariant.mjs";
|
|
70
|
+
import "../_libs/seroval.mjs";
|
|
71
|
+
import "../_libs/seroval-plugins.mjs";
|
|
72
|
+
import "node:stream/web";
|
|
73
|
+
import "node:stream";
|
|
74
|
+
import "../_libs/isbot.mjs";
|
|
75
|
+
import "node:fs";
|
|
76
|
+
import "node:fs/promises";
|
|
77
|
+
import "node:buffer";
|
|
78
|
+
import "node:path";
|
|
79
|
+
import "../_libs/conf.mjs";
|
|
80
|
+
import "node:util";
|
|
81
|
+
import "node:process";
|
|
82
|
+
import "node:crypto";
|
|
83
|
+
import "node:assert";
|
|
84
|
+
import "../_libs/dot-prop.mjs";
|
|
85
|
+
import "../_libs/env-paths.mjs";
|
|
86
|
+
import "node:os";
|
|
87
|
+
import "../_libs/atomically.mjs";
|
|
88
|
+
import "../_libs/stubborn-fs.mjs";
|
|
89
|
+
import "../_libs/stubborn-utils.mjs";
|
|
90
|
+
import "../_libs/when-exit.mjs";
|
|
91
|
+
import "../_libs/ajv.mjs";
|
|
92
|
+
import "../_libs/fast-deep-equal.mjs";
|
|
93
|
+
import "../_libs/json-schema-traverse.mjs";
|
|
94
|
+
import "../_libs/fast-uri.mjs";
|
|
95
|
+
import "../_libs/ajv-formats.mjs";
|
|
96
|
+
import "../_libs/debounce-fn.mjs";
|
|
97
|
+
import "../_libs/mimic-function.mjs";
|
|
98
|
+
import "../_libs/semver.mjs";
|
|
99
|
+
import "../_libs/uint8array-extras.mjs";
|
|
100
|
+
import "node:child_process";
|
|
101
|
+
import "../_libs/readable-stream.mjs";
|
|
102
|
+
import "events";
|
|
103
|
+
import "node:string_decoder";
|
|
104
|
+
import "../_libs/process-nextick-args.mjs";
|
|
105
|
+
import "../_libs/isarray.mjs";
|
|
106
|
+
import "../_libs/safe-buffer.mjs";
|
|
107
|
+
import "buffer";
|
|
108
|
+
import "../_libs/core-util-is.mjs";
|
|
109
|
+
import "../_libs/inherits.mjs";
|
|
110
|
+
import "../_libs/util-deprecate.mjs";
|
|
111
|
+
import "../_libs/lie.mjs";
|
|
112
|
+
import "../_libs/immediate.mjs";
|
|
113
|
+
import "../_libs/setimmediate.mjs";
|
|
114
|
+
import "../_libs/pako.mjs";
|
|
115
|
+
import "../_libs/react-markdown.mjs";
|
|
116
|
+
import "../_libs/devlop.mjs";
|
|
117
|
+
import "../_libs/unified.mjs";
|
|
118
|
+
import "../_libs/bail.mjs";
|
|
119
|
+
import "../_libs/extend.mjs";
|
|
120
|
+
import "../_libs/is-plain-obj.mjs";
|
|
121
|
+
import "../_libs/trough.mjs";
|
|
122
|
+
import "../_libs/vfile.mjs";
|
|
123
|
+
import "../_libs/vfile-message.mjs";
|
|
124
|
+
import "../_libs/unist-util-stringify-position.mjs";
|
|
125
|
+
import "node:url";
|
|
126
|
+
import "../_libs/remark-parse.mjs";
|
|
127
|
+
import "../_libs/mdast-util-from-markdown.mjs";
|
|
128
|
+
import "../_libs/micromark-util-decode-numeric-character-reference+[...].mjs";
|
|
129
|
+
import "../_libs/micromark-util-decode-string.mjs";
|
|
130
|
+
import "../_libs/decode-named-character-reference+[...].mjs";
|
|
131
|
+
import "../_libs/character-entities.mjs";
|
|
132
|
+
import "../_libs/micromark-util-normalize-identifier+[...].mjs";
|
|
133
|
+
import "../_libs/micromark.mjs";
|
|
134
|
+
import "../_libs/micromark-util-combine-extensions+[...].mjs";
|
|
135
|
+
import "../_libs/micromark-util-chunked.mjs";
|
|
136
|
+
import "../_libs/micromark-factory-space.mjs";
|
|
137
|
+
import "../_libs/micromark-util-character.mjs";
|
|
138
|
+
import "../_libs/micromark-core-commonmark.mjs";
|
|
139
|
+
import "../_libs/micromark-util-classify-character+[...].mjs";
|
|
140
|
+
import "../_libs/micromark-util-resolve-all.mjs";
|
|
141
|
+
import "../_libs/micromark-util-subtokenize.mjs";
|
|
142
|
+
import "../_libs/micromark-factory-destination.mjs";
|
|
143
|
+
import "../_libs/micromark-factory-label.mjs";
|
|
144
|
+
import "../_libs/micromark-factory-title.mjs";
|
|
145
|
+
import "../_libs/micromark-factory-whitespace.mjs";
|
|
146
|
+
import "../_libs/micromark-util-html-tag-name.mjs";
|
|
147
|
+
import "../_libs/mdast-util-to-string.mjs";
|
|
148
|
+
import "../_libs/remark-rehype.mjs";
|
|
149
|
+
import "../_libs/mdast-util-to-hast.mjs";
|
|
150
|
+
import "../_libs/ungap__structured-clone.mjs";
|
|
151
|
+
import "../_libs/micromark-util-sanitize-uri.mjs";
|
|
152
|
+
import "../_libs/unist-util-position.mjs";
|
|
153
|
+
import "../_libs/trim-lines.mjs";
|
|
154
|
+
import "../_libs/unist-util-visit.mjs";
|
|
155
|
+
import "../_libs/unist-util-visit-parents.mjs";
|
|
156
|
+
import "../_libs/unist-util-is.mjs";
|
|
157
|
+
import "../_libs/hast-util-to-jsx-runtime.mjs";
|
|
158
|
+
import "../_libs/comma-separated-tokens.mjs";
|
|
159
|
+
import "../_libs/property-information.mjs";
|
|
160
|
+
import "../_libs/space-separated-tokens.mjs";
|
|
161
|
+
import "../_libs/style-to-js.mjs";
|
|
162
|
+
import "../_libs/style-to-object.mjs";
|
|
163
|
+
import "../_libs/inline-style-parser.mjs";
|
|
164
|
+
import "../_libs/hast-util-whitespace.mjs";
|
|
165
|
+
import "../_libs/estree-util-is-identifier-name.mjs";
|
|
166
|
+
import "../_libs/html-url-attributes.mjs";
|
|
167
|
+
import "../_libs/radix-ui__react-separator.mjs";
|
|
168
|
+
import "../_libs/radix-ui__react-collapsible.mjs";
|
|
169
|
+
import "../_libs/radix-ui__react-scroll-area.mjs";
|
|
170
|
+
const ReplayResultSchema = object({
|
|
171
|
+
success: boolean(),
|
|
172
|
+
error: string().optional(),
|
|
173
|
+
responseStatus: number().optional(),
|
|
174
|
+
responseText: string().optional(),
|
|
175
|
+
inputTokens: number().optional(),
|
|
176
|
+
outputTokens: number().optional(),
|
|
177
|
+
elapsedMs: number().optional(),
|
|
178
|
+
streaming: boolean().optional()
|
|
179
|
+
});
|
|
180
|
+
function ReplayDialog({ log, open, onOpenChange }) {
|
|
181
|
+
const [modifiedBody, setModifiedBody] = reactExports.useState(() => {
|
|
182
|
+
return log.rawRequestBody ?? "{}";
|
|
183
|
+
});
|
|
184
|
+
const [replayResult, setReplayResult] = reactExports.useState(null);
|
|
185
|
+
const [loading, setLoading] = reactExports.useState(false);
|
|
186
|
+
const [error, setError] = reactExports.useState(null);
|
|
187
|
+
async function handleReplay() {
|
|
188
|
+
setLoading(true);
|
|
189
|
+
setError(null);
|
|
190
|
+
setReplayResult(null);
|
|
191
|
+
try {
|
|
192
|
+
const res = await fetch(`/api/logs/${log.id}/replay`, {
|
|
193
|
+
method: "POST",
|
|
194
|
+
headers: { "Content-Type": "application/json" },
|
|
195
|
+
body: JSON.stringify({ modifiedBody })
|
|
196
|
+
});
|
|
197
|
+
const json = await res.json();
|
|
198
|
+
const parsed = ReplayResultSchema.safeParse(json);
|
|
199
|
+
if (!parsed.success) {
|
|
200
|
+
setError("Invalid response from server");
|
|
201
|
+
setLoading(false);
|
|
202
|
+
return;
|
|
203
|
+
}
|
|
204
|
+
const data = parsed.data;
|
|
205
|
+
setReplayResult(data);
|
|
206
|
+
if (!data.success) {
|
|
207
|
+
setError(data.error ?? "Replay failed");
|
|
208
|
+
}
|
|
209
|
+
} catch (err) {
|
|
210
|
+
setError(err instanceof Error ? err.message : "Network error");
|
|
211
|
+
} finally {
|
|
212
|
+
setLoading(false);
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
function handleClose() {
|
|
216
|
+
setReplayResult(null);
|
|
217
|
+
setError(null);
|
|
218
|
+
onOpenChange(false);
|
|
219
|
+
}
|
|
220
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx(Dialog, { open, onOpenChange: handleClose, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogContent, { className: "max-w-4xl max-h-[85vh] overflow-auto", children: [
|
|
221
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogTitle, { className: "flex items-center gap-2", children: [
|
|
222
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(RotateCcw, { className: "size-4" }),
|
|
223
|
+
"Replay Request #",
|
|
224
|
+
log.id
|
|
225
|
+
] }) }),
|
|
226
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs(Tabs, { defaultValue: "modified", children: [
|
|
227
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs(TabsList, { children: [
|
|
228
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "modified", children: "Modified Request" }),
|
|
229
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "original", children: "Original Response" }),
|
|
230
|
+
replayResult && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "replay", children: "Replay Response" })
|
|
231
|
+
] }),
|
|
232
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs(TabsContent, { value: "modified", className: "space-y-4", children: [
|
|
233
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
|
|
234
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-sm font-medium mb-2 block", children: "Request Body (JSON)" }),
|
|
235
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
|
|
236
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
237
|
+
"textarea",
|
|
238
|
+
{
|
|
239
|
+
className: "w-full h-64 p-3 font-mono text-xs bg-muted rounded-md border border-input resize-none focus:outline-none focus:ring-2 focus:ring-ring",
|
|
240
|
+
value: modifiedBody,
|
|
241
|
+
onChange: (e) => setModifiedBody(e.target.value),
|
|
242
|
+
spellCheck: false
|
|
243
|
+
}
|
|
244
|
+
) }),
|
|
245
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Edit the request body before re-sending to the provider" })
|
|
246
|
+
] }) })
|
|
247
|
+
] }),
|
|
248
|
+
error !== null && error !== "" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-destructive bg-destructive/10 px-3 py-2 rounded-md", children: error }),
|
|
249
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
250
|
+
Button,
|
|
251
|
+
{
|
|
252
|
+
onClick: () => {
|
|
253
|
+
void handleReplay();
|
|
254
|
+
},
|
|
255
|
+
disabled: loading,
|
|
256
|
+
children: loading ? "Replaying..." : "Replay"
|
|
257
|
+
}
|
|
258
|
+
) }),
|
|
259
|
+
replayResult && replayResult.success && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tabs, { defaultValue: "parsed", children: [
|
|
260
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs(TabsList, { children: [
|
|
261
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "parsed", children: "Response" }),
|
|
262
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "raw", children: "Raw Response" })
|
|
263
|
+
] }),
|
|
264
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "parsed", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
265
|
+
ResponseView,
|
|
266
|
+
{
|
|
267
|
+
responseText: replayResult.responseText ?? null,
|
|
268
|
+
responseStatus: replayResult.responseStatus ?? null,
|
|
269
|
+
streaming: replayResult.streaming ?? false,
|
|
270
|
+
inputTokens: replayResult.inputTokens ?? null,
|
|
271
|
+
outputTokens: replayResult.outputTokens ?? null,
|
|
272
|
+
apiFormat: log.apiFormat
|
|
273
|
+
}
|
|
274
|
+
) }),
|
|
275
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw", children: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "font-mono text-xs whitespace-pre-wrap bg-muted p-3 rounded-md max-h-96 overflow-auto", children: replayResult.responseText ?? "No response" }) })
|
|
276
|
+
] })
|
|
277
|
+
] }),
|
|
278
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "original", children: log.responseText !== null ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tabs, { defaultValue: "parsed", children: [
|
|
279
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs(TabsList, { children: [
|
|
280
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "parsed", children: "Response" }),
|
|
281
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "raw", children: "Raw Response" })
|
|
282
|
+
] }),
|
|
283
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "parsed", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
284
|
+
ResponseView,
|
|
285
|
+
{
|
|
286
|
+
responseText: log.responseText,
|
|
287
|
+
responseStatus: log.responseStatus,
|
|
288
|
+
streaming: log.streaming,
|
|
289
|
+
inputTokens: log.inputTokens,
|
|
290
|
+
outputTokens: log.outputTokens,
|
|
291
|
+
cacheCreationInputTokens: log.cacheCreationInputTokens,
|
|
292
|
+
cacheReadInputTokens: log.cacheReadInputTokens,
|
|
293
|
+
apiFormat: log.apiFormat
|
|
294
|
+
}
|
|
295
|
+
) }),
|
|
296
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw", children: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "font-mono text-xs whitespace-pre-wrap bg-muted p-3 rounded-md max-h-96 overflow-auto", children: log.responseText }) })
|
|
297
|
+
] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground italic", children: "No original response" }) }),
|
|
298
|
+
replayResult && replayResult.success && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "replay", children: replayResult.responseText !== null ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tabs, { defaultValue: "parsed", children: [
|
|
299
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs(TabsList, { children: [
|
|
300
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "parsed", children: "Response" }),
|
|
301
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "raw", children: "Raw Response" })
|
|
302
|
+
] }),
|
|
303
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "parsed", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
304
|
+
ResponseView,
|
|
305
|
+
{
|
|
306
|
+
responseText: replayResult.responseText ?? null,
|
|
307
|
+
responseStatus: replayResult.responseStatus ?? null,
|
|
308
|
+
streaming: replayResult.streaming ?? false,
|
|
309
|
+
inputTokens: replayResult.inputTokens ?? null,
|
|
310
|
+
outputTokens: replayResult.outputTokens ?? null,
|
|
311
|
+
apiFormat: log.apiFormat
|
|
312
|
+
}
|
|
313
|
+
) }),
|
|
314
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw", children: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "font-mono text-xs whitespace-pre-wrap bg-muted p-3 rounded-md max-h-96 overflow-auto", children: replayResult.responseText }) })
|
|
315
|
+
] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground italic", children: "No replay response" }) })
|
|
316
|
+
] })
|
|
317
|
+
] }) });
|
|
318
|
+
}
|
|
319
|
+
export {
|
|
320
|
+
ReplayDialog
|
|
321
|
+
};
|
|
@@ -0,0 +1,351 @@
|
|
|
1
|
+
import { r as reactExports, j as jsxRuntimeExports } from "../_libs/react.mjs";
|
|
2
|
+
import { k as TooltipProvider, f as formatTokens, c as cn, l as Tooltip, m as TooltipTrigger, n as TooltipContent } from "./index-CDjLoMsk.mjs";
|
|
3
|
+
import "./router-BrdjOUEW.mjs";
|
|
4
|
+
import "../_libs/modelcontextprotocol__server.mjs";
|
|
5
|
+
import "../_libs/jszip.mjs";
|
|
6
|
+
import { J as Info } from "../_libs/lucide-react.mjs";
|
|
7
|
+
import "../_libs/swr.mjs";
|
|
8
|
+
import "../_libs/use-sync-external-store.mjs";
|
|
9
|
+
import "../_libs/dequal.mjs";
|
|
10
|
+
import "../_libs/clsx.mjs";
|
|
11
|
+
import "../_libs/tailwind-merge.mjs";
|
|
12
|
+
import "../_libs/class-variance-authority.mjs";
|
|
13
|
+
import "../_libs/radix-ui__react-dialog.mjs";
|
|
14
|
+
import "../_libs/radix-ui__primitive.mjs";
|
|
15
|
+
import "../_libs/radix-ui__react-compose-refs.mjs";
|
|
16
|
+
import "../_libs/radix-ui__react-context.mjs";
|
|
17
|
+
import "../_libs/radix-ui__react-id.mjs";
|
|
18
|
+
import "../_libs/@radix-ui/react-use-layout-effect+[...].mjs";
|
|
19
|
+
import "../_libs/@radix-ui/react-use-controllable-state+[...].mjs";
|
|
20
|
+
import "../_libs/@radix-ui/react-dismissable-layer+[...].mjs";
|
|
21
|
+
import "../_libs/radix-ui__react-primitive.mjs";
|
|
22
|
+
import "../_libs/react-dom.mjs";
|
|
23
|
+
import "util";
|
|
24
|
+
import "async_hooks";
|
|
25
|
+
import "stream";
|
|
26
|
+
import "crypto";
|
|
27
|
+
import "../_libs/radix-ui__react-slot.mjs";
|
|
28
|
+
import "../_libs/@radix-ui/react-use-callback-ref+[...].mjs";
|
|
29
|
+
import "../_libs/@radix-ui/react-use-escape-keydown+[...].mjs";
|
|
30
|
+
import "../_libs/radix-ui__react-focus-scope.mjs";
|
|
31
|
+
import "../_libs/radix-ui__react-portal.mjs";
|
|
32
|
+
import "../_libs/radix-ui__react-presence.mjs";
|
|
33
|
+
import "../_libs/radix-ui__react-focus-guards.mjs";
|
|
34
|
+
import "../_libs/react-remove-scroll.mjs";
|
|
35
|
+
import "tslib";
|
|
36
|
+
import "../_libs/react-remove-scroll-bar.mjs";
|
|
37
|
+
import "../_libs/react-style-singleton.mjs";
|
|
38
|
+
import "../_libs/get-nonce.mjs";
|
|
39
|
+
import "../_libs/use-sidecar.mjs";
|
|
40
|
+
import "../_libs/use-callback-ref.mjs";
|
|
41
|
+
import "../_libs/aria-hidden.mjs";
|
|
42
|
+
import "../_libs/diff.mjs";
|
|
43
|
+
import "../_libs/tanstack__react-virtual.mjs";
|
|
44
|
+
import "../_libs/tanstack__virtual-core.mjs";
|
|
45
|
+
import "../_libs/radix-ui__react-select.mjs";
|
|
46
|
+
import "../_libs/radix-ui__number.mjs";
|
|
47
|
+
import "../_libs/radix-ui__react-collection.mjs";
|
|
48
|
+
import "../_libs/radix-ui__react-direction.mjs";
|
|
49
|
+
import "../_libs/radix-ui__react-popper.mjs";
|
|
50
|
+
import "../_libs/floating-ui__react-dom.mjs";
|
|
51
|
+
import "../_libs/floating-ui__dom.mjs";
|
|
52
|
+
import "../_libs/floating-ui__core.mjs";
|
|
53
|
+
import "../_libs/floating-ui__utils.mjs";
|
|
54
|
+
import "../_libs/radix-ui__react-arrow.mjs";
|
|
55
|
+
import "../_libs/radix-ui__react-use-size.mjs";
|
|
56
|
+
import "../_libs/radix-ui__react-use-previous.mjs";
|
|
57
|
+
import "../_libs/@radix-ui/react-visually-hidden+[...].mjs";
|
|
58
|
+
import "../_libs/zod.mjs";
|
|
59
|
+
import "../_libs/radix-ui__react-tabs.mjs";
|
|
60
|
+
import "../_libs/radix-ui__react-roving-focus.mjs";
|
|
61
|
+
import "../_libs/radix-ui__react-tooltip.mjs";
|
|
62
|
+
import "../_libs/tanstack__react-router.mjs";
|
|
63
|
+
import "../_libs/tiny-warning.mjs";
|
|
64
|
+
import "../_libs/tanstack__router-core.mjs";
|
|
65
|
+
import "../_libs/cookie-es.mjs";
|
|
66
|
+
import "../_libs/tanstack__history.mjs";
|
|
67
|
+
import "../_libs/tiny-invariant.mjs";
|
|
68
|
+
import "../_libs/seroval.mjs";
|
|
69
|
+
import "../_libs/seroval-plugins.mjs";
|
|
70
|
+
import "node:stream/web";
|
|
71
|
+
import "node:stream";
|
|
72
|
+
import "../_libs/isbot.mjs";
|
|
73
|
+
import "node:fs";
|
|
74
|
+
import "node:fs/promises";
|
|
75
|
+
import "node:buffer";
|
|
76
|
+
import "node:path";
|
|
77
|
+
import "../_libs/conf.mjs";
|
|
78
|
+
import "node:util";
|
|
79
|
+
import "node:process";
|
|
80
|
+
import "node:crypto";
|
|
81
|
+
import "node:assert";
|
|
82
|
+
import "../_libs/dot-prop.mjs";
|
|
83
|
+
import "../_libs/env-paths.mjs";
|
|
84
|
+
import "node:os";
|
|
85
|
+
import "../_libs/atomically.mjs";
|
|
86
|
+
import "../_libs/stubborn-fs.mjs";
|
|
87
|
+
import "../_libs/stubborn-utils.mjs";
|
|
88
|
+
import "../_libs/when-exit.mjs";
|
|
89
|
+
import "../_libs/ajv.mjs";
|
|
90
|
+
import "../_libs/fast-deep-equal.mjs";
|
|
91
|
+
import "../_libs/json-schema-traverse.mjs";
|
|
92
|
+
import "../_libs/fast-uri.mjs";
|
|
93
|
+
import "../_libs/ajv-formats.mjs";
|
|
94
|
+
import "../_libs/debounce-fn.mjs";
|
|
95
|
+
import "../_libs/mimic-function.mjs";
|
|
96
|
+
import "../_libs/semver.mjs";
|
|
97
|
+
import "../_libs/uint8array-extras.mjs";
|
|
98
|
+
import "node:child_process";
|
|
99
|
+
import "../_libs/readable-stream.mjs";
|
|
100
|
+
import "events";
|
|
101
|
+
import "node:string_decoder";
|
|
102
|
+
import "../_libs/process-nextick-args.mjs";
|
|
103
|
+
import "../_libs/isarray.mjs";
|
|
104
|
+
import "../_libs/safe-buffer.mjs";
|
|
105
|
+
import "buffer";
|
|
106
|
+
import "../_libs/core-util-is.mjs";
|
|
107
|
+
import "../_libs/inherits.mjs";
|
|
108
|
+
import "../_libs/util-deprecate.mjs";
|
|
109
|
+
import "../_libs/lie.mjs";
|
|
110
|
+
import "../_libs/immediate.mjs";
|
|
111
|
+
import "../_libs/setimmediate.mjs";
|
|
112
|
+
import "../_libs/pako.mjs";
|
|
113
|
+
const ROLE_COLOR_CLASSES = {
|
|
114
|
+
system: "bg-sky-500/70",
|
|
115
|
+
user: "bg-emerald-500/70",
|
|
116
|
+
assistant: "bg-violet-500/70",
|
|
117
|
+
tool: "bg-amber-500/70",
|
|
118
|
+
tools: "bg-slate-500/70"
|
|
119
|
+
};
|
|
120
|
+
const ROLE_FOCUS_RING = {
|
|
121
|
+
system: "focus-visible:ring-sky-300",
|
|
122
|
+
user: "focus-visible:ring-emerald-300",
|
|
123
|
+
assistant: "focus-visible:ring-violet-300",
|
|
124
|
+
tool: "focus-visible:ring-amber-300",
|
|
125
|
+
tools: "focus-visible:ring-slate-300"
|
|
126
|
+
};
|
|
127
|
+
const MAX_VISIBLE_SEGMENTS = 12;
|
|
128
|
+
const MIN_SEGMENT_PERCENT = 1;
|
|
129
|
+
const TOOLTIP_PREVIEW_LIMIT = 80;
|
|
130
|
+
const LABEL_TRUNCATE_LIMIT = 24;
|
|
131
|
+
function truncateLabel(label) {
|
|
132
|
+
if (label.length <= LABEL_TRUNCATE_LIMIT) return label;
|
|
133
|
+
return `${label.slice(0, LABEL_TRUNCATE_LIMIT - 1)}…`;
|
|
134
|
+
}
|
|
135
|
+
function truncatePreview(text) {
|
|
136
|
+
const singleLine = text.replace(/\s+/g, " ").trim();
|
|
137
|
+
if (singleLine.length <= TOOLTIP_PREVIEW_LIMIT) return singleLine;
|
|
138
|
+
return `${singleLine.slice(0, TOOLTIP_PREVIEW_LIMIT)}…`;
|
|
139
|
+
}
|
|
140
|
+
const SegmentBar = reactExports.memo(function SegmentBar2({
|
|
141
|
+
segments,
|
|
142
|
+
totalTokens,
|
|
143
|
+
onActivate
|
|
144
|
+
}) {
|
|
145
|
+
const total = reactExports.useMemo(() => {
|
|
146
|
+
if (totalTokens > 0) return totalTokens;
|
|
147
|
+
return segments.reduce((sum, s) => sum + s.size, 0);
|
|
148
|
+
}, [segments, totalTokens]);
|
|
149
|
+
const visibleSegments = segments.slice(0, MAX_VISIBLE_SEGMENTS);
|
|
150
|
+
const overflowSegments = segments.slice(MAX_VISIBLE_SEGMENTS);
|
|
151
|
+
const overflowSize = overflowSegments.reduce((sum, s) => sum + s.size, 0);
|
|
152
|
+
const overflowCount = overflowSegments.length;
|
|
153
|
+
const overflowStartIndex = MAX_VISIBLE_SEGMENTS;
|
|
154
|
+
const overflowEndIndex = overflowStartIndex + overflowCount - 1;
|
|
155
|
+
const hasOverflow = overflowCount > 0;
|
|
156
|
+
const visibleTotal = reactExports.useMemo(
|
|
157
|
+
() => visibleSegments.reduce((sum, s) => sum + s.size, 0),
|
|
158
|
+
[visibleSegments]
|
|
159
|
+
);
|
|
160
|
+
const ariaLabel = reactExports.useMemo(
|
|
161
|
+
() => `Request anatomy: ~${formatTokens(total)} tokens across ${segments.length} segment${segments.length === 1 ? "" : "s"}`,
|
|
162
|
+
[segments.length, total]
|
|
163
|
+
);
|
|
164
|
+
if (segments.length === 0 || total <= 0) {
|
|
165
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { role: "img", "aria-label": ariaLabel, className: "h-6" });
|
|
166
|
+
}
|
|
167
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { delayDuration: 150, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { role: "img", "aria-label": ariaLabel, className: "flex flex-col gap-1.5", children: [
|
|
168
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
169
|
+
"div",
|
|
170
|
+
{
|
|
171
|
+
className: "relative flex h-6 w-full overflow-hidden rounded border border-border/40 bg-muted/30",
|
|
172
|
+
"data-testid": "anatomy-segment-bar",
|
|
173
|
+
children: [
|
|
174
|
+
visibleSegments.map((segment, index) => {
|
|
175
|
+
const rawPercent = total > 0 ? segment.size / total * 100 : 0;
|
|
176
|
+
const percent = Math.max(MIN_SEGMENT_PERCENT, rawPercent);
|
|
177
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
|
|
178
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
179
|
+
"button",
|
|
180
|
+
{
|
|
181
|
+
type: "button",
|
|
182
|
+
role: "button",
|
|
183
|
+
tabIndex: 0,
|
|
184
|
+
onClick: () => onActivate?.(segment),
|
|
185
|
+
onKeyDown: (e) => {
|
|
186
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
187
|
+
e.preventDefault();
|
|
188
|
+
onActivate?.(segment);
|
|
189
|
+
}
|
|
190
|
+
},
|
|
191
|
+
"data-anatomy-path": segment.path,
|
|
192
|
+
"aria-label": `${segment.label}, ~${formatTokens(segment.size)} tokens`,
|
|
193
|
+
className: cn(
|
|
194
|
+
"h-full border-r border-background/80 last:border-r-0",
|
|
195
|
+
"opacity-90 hover:opacity-100 focus:opacity-100",
|
|
196
|
+
"focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-background",
|
|
197
|
+
ROLE_COLOR_CLASSES[segment.role],
|
|
198
|
+
ROLE_FOCUS_RING[segment.role]
|
|
199
|
+
),
|
|
200
|
+
style: { width: `${percent}%` }
|
|
201
|
+
}
|
|
202
|
+
) }),
|
|
203
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs(TooltipContent, { side: "bottom", className: "max-w-sm text-xs p-2 space-y-0.5", children: [
|
|
204
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "font-semibold", children: [
|
|
205
|
+
segment.label,
|
|
206
|
+
" · ~",
|
|
207
|
+
formatTokens(segment.size),
|
|
208
|
+
" tokens"
|
|
209
|
+
] }),
|
|
210
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-muted-foreground", children: [
|
|
211
|
+
segment.characters.toLocaleString(),
|
|
212
|
+
" chars"
|
|
213
|
+
] }),
|
|
214
|
+
segment.text.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-muted-foreground/90 break-words whitespace-pre-wrap", children: truncatePreview(segment.text) })
|
|
215
|
+
] })
|
|
216
|
+
] }, `${segment.path}-${index}`);
|
|
217
|
+
}),
|
|
218
|
+
hasOverflow && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
|
|
219
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
220
|
+
"div",
|
|
221
|
+
{
|
|
222
|
+
role: "img",
|
|
223
|
+
"aria-label": `${overflowCount} additional segments`,
|
|
224
|
+
className: "flex h-full items-center justify-center bg-muted-foreground/30 px-1.5 text-[10px] font-mono text-background",
|
|
225
|
+
style: {
|
|
226
|
+
width: `${Math.max(MIN_SEGMENT_PERCENT, overflowSize / total * 100)}%`
|
|
227
|
+
},
|
|
228
|
+
children: [
|
|
229
|
+
"… +",
|
|
230
|
+
overflowCount
|
|
231
|
+
]
|
|
232
|
+
}
|
|
233
|
+
) }),
|
|
234
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs(TooltipContent, { side: "bottom", className: "text-xs", children: [
|
|
235
|
+
overflowCount,
|
|
236
|
+
" more segment",
|
|
237
|
+
overflowCount === 1 ? "" : "s",
|
|
238
|
+
" (indices",
|
|
239
|
+
" ",
|
|
240
|
+
overflowStartIndex,
|
|
241
|
+
"–",
|
|
242
|
+
overflowEndIndex,
|
|
243
|
+
")"
|
|
244
|
+
] })
|
|
245
|
+
] })
|
|
246
|
+
]
|
|
247
|
+
}
|
|
248
|
+
),
|
|
249
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex w-full gap-1 text-[10px] text-muted-foreground", children: [
|
|
250
|
+
visibleSegments.map((segment, index) => {
|
|
251
|
+
const rawPercent = total > 0 ? segment.size / total * 100 : 0;
|
|
252
|
+
const percent = Math.max(MIN_SEGMENT_PERCENT, rawPercent);
|
|
253
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
254
|
+
"div",
|
|
255
|
+
{
|
|
256
|
+
className: "flex flex-col gap-0.5 truncate",
|
|
257
|
+
style: { width: `${percent}%` },
|
|
258
|
+
title: `${segment.label} · ~${formatTokens(segment.size)} tokens`,
|
|
259
|
+
children: [
|
|
260
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate font-mono text-foreground/80", children: truncateLabel(segment.label) }),
|
|
261
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "truncate font-mono text-muted-foreground/70", children: [
|
|
262
|
+
"~",
|
|
263
|
+
formatTokens(segment.size)
|
|
264
|
+
] })
|
|
265
|
+
]
|
|
266
|
+
},
|
|
267
|
+
`label-${segment.path}-${index}`
|
|
268
|
+
);
|
|
269
|
+
}),
|
|
270
|
+
hasOverflow && /* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
271
|
+
"div",
|
|
272
|
+
{
|
|
273
|
+
className: "flex flex-col gap-0.5 truncate text-muted-foreground",
|
|
274
|
+
style: { width: `${Math.max(MIN_SEGMENT_PERCENT, overflowSize / total * 100)}%` },
|
|
275
|
+
children: [
|
|
276
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "truncate font-mono text-foreground/60", children: [
|
|
277
|
+
"… +",
|
|
278
|
+
overflowCount
|
|
279
|
+
] }),
|
|
280
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "truncate font-mono text-muted-foreground/60", children: [
|
|
281
|
+
"~",
|
|
282
|
+
formatTokens(overflowSize)
|
|
283
|
+
] })
|
|
284
|
+
]
|
|
285
|
+
}
|
|
286
|
+
)
|
|
287
|
+
] }),
|
|
288
|
+
visibleTotal < total * 0.1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-0" })
|
|
289
|
+
] }) });
|
|
290
|
+
});
|
|
291
|
+
const DIVERGENCE_AMBER_THRESHOLD = 0.25;
|
|
292
|
+
function RequestAnatomy({
|
|
293
|
+
parsed,
|
|
294
|
+
inputTokens,
|
|
295
|
+
onSegmentActivate,
|
|
296
|
+
segments: providedSegments
|
|
297
|
+
}) {
|
|
298
|
+
const segments = reactExports.useMemo(() => providedSegments ?? null, [providedSegments]);
|
|
299
|
+
const total = reactExports.useMemo(() => (segments ?? []).reduce((sum, s) => sum + s.size, 0), [segments]);
|
|
300
|
+
const showDivergenceWarning = reactExports.useMemo(() => {
|
|
301
|
+
if (segments === null || segments === void 0) return false;
|
|
302
|
+
if (inputTokens === null) return false;
|
|
303
|
+
if (total === 0) return false;
|
|
304
|
+
const ratio = Math.abs(inputTokens - total) / Math.max(inputTokens, total);
|
|
305
|
+
return ratio >= DIVERGENCE_AMBER_THRESHOLD;
|
|
306
|
+
}, [inputTokens, segments, total]);
|
|
307
|
+
const summaryColorClass = reactExports.useMemo(() => {
|
|
308
|
+
if (inputTokens === null) return "text-muted-foreground";
|
|
309
|
+
if (showDivergenceWarning) return "text-amber-400";
|
|
310
|
+
return "text-muted-foreground";
|
|
311
|
+
}, [inputTokens, showDivergenceWarning]);
|
|
312
|
+
if (segments === null || segments === void 0) {
|
|
313
|
+
return null;
|
|
314
|
+
}
|
|
315
|
+
if (segments.length === 0) {
|
|
316
|
+
return null;
|
|
317
|
+
}
|
|
318
|
+
if (parsed === null && providedSegments === void 0) {
|
|
319
|
+
return null;
|
|
320
|
+
}
|
|
321
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { delayDuration: 150, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 py-3 space-y-2", "data-testid": "anatomy-root", children: [
|
|
322
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-xs", children: [
|
|
323
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums text-foreground", children: [
|
|
324
|
+
"~",
|
|
325
|
+
formatTokens(total),
|
|
326
|
+
" tokens"
|
|
327
|
+
] }),
|
|
328
|
+
inputTokens !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: cn("font-mono tabular-nums", summaryColorClass), children: [
|
|
329
|
+
"(server: ",
|
|
330
|
+
formatTokens(inputTokens),
|
|
331
|
+
")"
|
|
332
|
+
] }),
|
|
333
|
+
showDivergenceWarning && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
|
|
334
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
335
|
+
"button",
|
|
336
|
+
{
|
|
337
|
+
type: "button",
|
|
338
|
+
className: "inline-flex items-center text-amber-400 hover:text-amber-300",
|
|
339
|
+
"aria-label": "Token estimate diverges from server",
|
|
340
|
+
children: /* @__PURE__ */ jsxRuntimeExports.jsx(Info, { className: "size-3.5" })
|
|
341
|
+
}
|
|
342
|
+
) }),
|
|
343
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "max-w-xs text-xs", children: "Bar uses a token estimate heuristic (~4 ASCII chars / token, ~1 CJK / emoji char per token). The server's reported value is the source of truth for cost." })
|
|
344
|
+
] })
|
|
345
|
+
] }),
|
|
346
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(SegmentBar, { segments, totalTokens: total, onActivate: onSegmentActivate })
|
|
347
|
+
] }) });
|
|
348
|
+
}
|
|
349
|
+
export {
|
|
350
|
+
RequestAnatomy
|
|
351
|
+
};
|