Skip to content

🤖 fix: scope debug modal json scrolling #1759

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ammario merged 1 commit into from
Jan 19, 2026
Merged

🤖 fix: scope debug modal json scrolling #1759

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 19 additions & 14 deletions src/browser/components/DebugLlmRequestModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,12 @@ import { Button } from "@/browser/components/ui/button";
import { useCopyToClipboard } from "@/browser/hooks/useCopyToClipboard";
import { copyToClipboard } from "@/browser/utils/clipboard";

const JsonOutput: React.FC<{ children: React.ReactNode }> = ({ children }) => (
<div className="bg-code-bg text-text mt-3 max-h-[40vh] w-full max-w-full min-w-0 overflow-auto rounded-sm">
<pre className="min-w-max p-3 font-mono text-xs leading-relaxed whitespace-pre">{children}</pre>
</div>
);

interface DebugLlmRequestModalProps {
workspaceId: string;
open: boolean;
Expand Down Expand Up @@ -73,8 +79,8 @@ export const DebugLlmRequestModal: React.FC<DebugLlmRequestModalProps> = ({

return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent maxWidth="900px" maxHeight="85vh" className="gap-5">
<DialogHeader className="space-y-3">
<DialogContent maxWidth="900px" maxHeight="85vh" className="min-w-0 gap-5 overflow-x-hidden">
<DialogHeader className="min-w-0 space-y-3">
<div className="flex flex-wrap items-start justify-between gap-3">
<div className="space-y-1">
<DialogTitle>Last LLM request</DialogTitle>
Expand Down Expand Up @@ -112,7 +118,7 @@ export const DebugLlmRequestModal: React.FC<DebugLlmRequestModalProps> = ({
</div>
</DialogHeader>

<div className="space-y-4">
<div className="min-w-0 space-y-4">
{error && <div className="text-danger-soft text-sm">{error}</div>}

{loading && !snapshot && (
Expand All @@ -126,7 +132,7 @@ export const DebugLlmRequestModal: React.FC<DebugLlmRequestModalProps> = ({
)}

{snapshot && (
<div className="space-y-4">
<div className="min-w-0 space-y-4">
<div className="border-border-light bg-foreground/5 rounded-md border p-3 text-xs">
<div className="text-muted flex flex-wrap items-center gap-x-2 gap-y-1">
<span className="text-foreground font-mono">{snapshot.providerName}</span>
Expand Down Expand Up @@ -162,8 +168,11 @@ export const DebugLlmRequestModal: React.FC<DebugLlmRequestModalProps> = ({
)}
</div>

<div className="space-y-3">
<details open className="border-border-light bg-modal-bg rounded-md border p-3">
<div className="min-w-0 space-y-3">
<details
open
className="border-border-light bg-modal-bg min-w-0 rounded-md border p-3"
>
<summary className="text-foreground cursor-pointer text-sm font-medium">
System message
</summary>
Expand All @@ -172,22 +181,18 @@ export const DebugLlmRequestModal: React.FC<DebugLlmRequestModalProps> = ({
</pre>
</details>

<details className="border-border-light bg-modal-bg rounded-md border p-3">
<details className="border-border-light bg-modal-bg min-w-0 rounded-md border p-3">
<summary className="text-foreground cursor-pointer text-sm font-medium">
Messages
</summary>
<pre className="bg-code-bg text-text mt-3 max-h-[40vh] overflow-auto rounded-sm p-3 font-mono text-xs leading-relaxed whitespace-pre-wrap">
{JSON.stringify(snapshot.messages, null, 2)}
</pre>
<JsonOutput>{JSON.stringify(snapshot.messages, null, 2)}</JsonOutput>
</details>

<details className="border-border-light bg-modal-bg rounded-md border p-3">
<details className="border-border-light bg-modal-bg min-w-0 rounded-md border p-3">
<summary className="text-foreground cursor-pointer text-sm font-medium">
Full JSON
</summary>
<pre className="bg-code-bg text-text mt-3 max-h-[40vh] overflow-auto rounded-sm p-3 font-mono text-xs leading-relaxed whitespace-pre-wrap">
{json}
</pre>
<JsonOutput>{json}</JsonOutput>
</details>
</div>
</div>
Expand Down
Loading