refactor: replace action log sheet with dialog component and update related references

surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx

@@ -451,7 +451,7 @@ export default function NewChatPage() {
 	}, [params.search_space_id]);
 
 	// Unified store for agent-action rows (the same react-query cache
-	// the agent-actions sheet, the inline Revert button, and the
+	// the agent-actions dialog, the inline Revert button, and the
 	// per-turn Revert button all read). Hydrates from
 	// ``GET /threads/{id}/actions`` and is updated incrementally by the
 	// SSE handlers + revert-batch results below — no atom side-channel.

surfsense_web/app/dashboard/[search_space_id]/user-settings/components/AgentStatusContent.tsx

@@ -137,7 +137,7 @@ const FLAG_GROUPS: FlagGroup[] = [
 	{
 		id: "tier5",
 		title: "Tier 5 — Audit + revert",
-		subtitle: "Action log + revert route used by the Agent Actions sheet.",
+		subtitle: "Action log + revert route used by the Agent Actions dialog.",
 		flags: [
 			{
 				key: "enable_action_log",

surfsense_web/atoms/agent/action-log-dialog.atom.ts

@@ -0,0 +1,19 @@
+import { atom } from "jotai";
+
+interface ActionLogDialogState {
+	open: boolean;
+	threadId: number | null;
+}
+
+export const actionLogDialogAtom = atom<ActionLogDialogState>({
+	open: false,
+	threadId: null,
+});
+
+export const openActionLogDialogAtom = atom(null, (_get, set, threadId: number) => {
+	set(actionLogDialogAtom, { open: true, threadId });
+});
+
+export const closeActionLogDialogAtom = atom(null, (_get, set) => {
+	set(actionLogDialogAtom, { open: false, threadId: null });
+});

surfsense_web/atoms/agent/action-log-sheet.atom.ts

@@ -1,19 +0,0 @@
-import { atom } from "jotai";
-
-interface ActionLogSheetState {
-	open: boolean;
-	threadId: number | null;
-}
-
-export const actionLogSheetAtom = atom<ActionLogSheetState>({
-	open: false,
-	threadId: null,
-});
-
-export const openActionLogSheetAtom = atom(null, (_get, set, threadId: number) => {
-	set(actionLogSheetAtom, { open: true, threadId });
-});
-
-export const closeActionLogSheetAtom = atom(null, (_get, set) => {
-	set(actionLogSheetAtom, { open: false, threadId: null });
-});

surfsense_web/components/agent-action-log/action-log-button.tsx

@@ -3,7 +3,7 @@
 import { useAtomValue, useSetAtom } from "jotai";
 import { Workflow } from "lucide-react";
 import { useCallback } from "react";
-import { openActionLogSheetAtom } from "@/atoms/agent/action-log-sheet.atom";
+import { openActionLogDialogAtom } from "@/atoms/agent/action-log-dialog.atom";
 import { agentFlagsAtom } from "@/atoms/agent/agent-flags-query.atom";
 import { Button } from "@/components/ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
@@ -13,7 +13,7 @@ interface ActionLogButtonProps {
 }
 
 /**
- * Header button that opens the agent action log sheet for the current
+ * Header button that opens the agent action log dialog for the current
  * thread. Renders nothing when:
  *   - the action log feature flag is off (graceful no-op for older
  *     deployments), OR
@@ -21,7 +21,7 @@ interface ActionLogButtonProps {
  */
 export function ActionLogButton({ threadId }: ActionLogButtonProps) {
 	const { data: flags } = useAtomValue(agentFlagsAtom);
-	const open = useSetAtom(openActionLogSheetAtom);
+	const open = useSetAtom(openActionLogDialogAtom);
 
 	const enabled = !!flags?.enable_action_log && !flags?.disable_new_agent_stack;
 

surfsense_web/components/agent-action-log/action-log-dialog.tsx

@@ -2,19 +2,19 @@
 
 import { useQueryClient } from "@tanstack/react-query";
 import { useAtom, useAtomValue } from "jotai";
-import { RefreshCcw, Workflow, } from "lucide-react";
+import { RefreshCcw, Workflow } from "lucide-react";
 import { useCallback } from "react";
-import { actionLogSheetAtom } from "@/atoms/agent/action-log-sheet.atom";
+import { actionLogDialogAtom } from "@/atoms/agent/action-log-dialog.atom";
 import { agentFlagsAtom } from "@/atoms/agent/agent-flags-query.atom";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
-	Sheet,
+	Dialog,
-	SheetContent,
+	DialogContent,
-	SheetDescription,
+	DialogDescription,
-	SheetHeader,
+	DialogTitle,
-	SheetTitle,
+} from "@/components/ui/dialog";
-} from "@/components/ui/sheet";
+import { Separator } from "@/components/ui/separator";
 import { Skeleton } from "@/components/ui/skeleton";
 import { agentActionsQueryKey, useAgentActionsQuery } from "@/hooks/use-agent-actions-query";
 import { ActionLogItem } from "./action-log-item";
@@ -64,8 +64,8 @@ function LoadingState() {
 	);
 }
 
-export function ActionLogSheet() {
+export function ActionLogDialog() {
-	const [state, setState] = useAtom(actionLogSheetAtom);
+	const [state, setState] = useAtom(actionLogDialogAtom);
 	const queryClient = useQueryClient();
 
 	const { data: flags } = useAtomValue(agentFlagsAtom);
@@ -78,6 +78,13 @@ export function ActionLogSheet() {
 		{ enabled: state.open && actionLogEnabled }
 	);
 
+	const handleOpenChange = useCallback(
+		(open: boolean) => {
+			setState((current) => (open ? { ...current, open } : { open: false, threadId: null }));
+		},
+		[setState]
+	);
+
 	const handleRevertSuccess = useCallback(() => {
 		if (threadId !== null) {
 			queryClient.invalidateQueries({ queryKey: agentActionsQueryKey(threadId) });
@@ -85,24 +92,22 @@ export function ActionLogSheet() {
 	}, [queryClient, threadId]);
 
 	return (
-		<Sheet open={state.open} onOpenChange={(open) => setState((s) => ({ ...s, open }))}>
+		<Dialog open={state.open} onOpenChange={handleOpenChange}>
-			<SheetContent
+			<DialogContent className="select-none flex h-[90vh] max-h-[640px] w-[95vw] max-w-[900px] flex-col gap-0 overflow-hidden p-0 [--card:var(--popover)] md:h-[80vh]">
-				side="right"
+				<div className="shrink-0 px-6 pb-3 pt-6 pr-28">
-				className="flex h-full w-full flex-col gap-0 overflow-hidden p-0 sm:max-w-md select-none"
+					<div className="flex items-center gap-2">
-			>
+						<DialogTitle className="text-lg font-semibold">Agent actions</DialogTitle>
-				<SheetHeader className="shrink-0 px-4 py-4">
+						{data?.total !== undefined && data.total > 0 ? (
-					<div className="flex items-center gap-2 pr-24">
-						<SheetTitle className="text-base font-semibold">Agent actions</SheetTitle>
-						{data?.total !== undefined && data.total > 0 && (
 							<Badge variant="secondary" className="text-[10px]">
 								{data.total}
 							</Badge>
-						)}
+						) : null}
 					</div>
-					<SheetDescription className="sr-only">
+					<DialogDescription className="sr-only">
 						Audit trail of every tool call the agent made in this thread.
-					</SheetDescription>
+					</DialogDescription>
-				</SheetHeader>
+					<Separator className="mt-4" />
+				</div>
 
 				<Button
 					size="sm"
@@ -135,7 +140,7 @@ export function ActionLogSheet() {
 					) : items.length === 0 ? (
 						<EmptyState />
 					) : (
-						<div className="flex flex-col gap-2 p-3">
+						<div className="flex flex-col gap-2 px-4 pb-4">
 							{items.map((action) => (
 								<ActionLogItem
 									key={action.id}
@@ -144,15 +149,15 @@ export function ActionLogSheet() {
 									onRevertSuccess={handleRevertSuccess}
 								/>
 							))}
-							{data?.has_more && (
+							{data?.has_more ? (
 								<p className="py-2 text-center text-[11px] text-muted-foreground">
 									Showing {items.length} of {data.total}. Older actions are paginated.
 								</p>
-							)}
+							) : null}
 						</div>
 					)}
 				</div>
-			</SheetContent>
+			</DialogContent>
-		</Sheet>
+		</Dialog>
 	);
 }

surfsense_web/components/agent-action-log/action-log-item.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ChevronRight, RotateCcw, ShieldOff, Undo2 } from "lucide-react";
+import { Check, ChevronRight, Copy, RotateCcw, Undo2 } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
 import {
@@ -16,7 +16,6 @@ import {
 } from "@/components/ui/alert-dialog";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Separator } from "@/components/ui/separator";
 import { getToolDisplayName, getToolIcon } from "@/contracts/enums/toolIcons";
 import { type AgentAction, agentActionsApiService } from "@/lib/apis/agent-actions-api.service";
 import { AppError } from "@/lib/error";
@@ -29,10 +28,55 @@ interface ActionLogItemProps {
 	onRevertSuccess: () => void;
 }
 
+function formatPrimitiveValue(value: unknown) {
+	if (value === null) return "null";
+	if (value === undefined) return "undefined";
+	if (typeof value === "string") return value;
+	if (typeof value === "number" || typeof value === "boolean") return String(value);
+	return JSON.stringify(value, null, 2);
+}
+
+function ArgumentValue({ value }: { value: unknown }) {
+	const formatted = formatPrimitiveValue(value);
+	const isBlockValue =
+		typeof value === "object" ||
+		(typeof value === "string" && (value.includes("\n") || value.length > 120));
+
+	if (isBlockValue) {
+		return (
+			<pre className="mt-2 whitespace-pre-wrap break-words bg-popover px-4 py-3 text-[11px] leading-relaxed text-popover-foreground/80">
+				{formatted}
+			</pre>
+		);
+	}
+
+	return (
+		<p className="mt-1 break-words font-mono text-[11px] leading-relaxed text-popover-foreground/80">
+			{formatted}
+		</p>
+	);
+}
+
+function StructuredArguments({ args }: { args: Record<string, unknown> }) {
+	return (
+		<div className="divide-y divide-popover-border border-t border-popover-border">
+			{Object.entries(args).map(([key, value]) => (
+				<div key={key} className="bg-popover">
+					<div className="px-4 py-3">
+						<p className="font-mono text-[10px] font-medium text-muted-foreground">{key}</p>
+						<ArgumentValue value={value} />
+					</div>
+				</div>
+			))}
+		</div>
+	);
+}
+
 export function ActionLogItem({ action, threadId, onRevertSuccess }: ActionLogItemProps) {
 	const [isExpanded, setIsExpanded] = useState(false);
 	const [isReverting, setIsReverting] = useState(false);
 	const [confirmOpen, setConfirmOpen] = useState(false);
+	const [copiedSection, setCopiedSection] = useState<"arguments" | null>(null);
 
 	const isAlreadyReverted = action.reverted_by_action_id !== null;
 	const isRevertAction = action.is_revert_action;
@@ -42,11 +86,22 @@ export function ActionLogItem({ action, threadId, onRevertSuccess }: ActionLogIt
 	const displayName = getToolDisplayName(action.tool_name);
 
 	const argsPreview = action.args ? JSON.stringify(action.args, null, 2) : null;
-	const truncatedArgs =
-		argsPreview && argsPreview.length > 600 ? `${argsPreview.slice(0, 600)}…` : argsPreview;
 
 	const canRevert = action.reversible && !isAlreadyReverted && !isRevertAction && !hasError;
 
+	const handleCopyArguments = async () => {
+		if (!argsPreview) return;
+
+		try {
+			await navigator.clipboard.writeText(argsPreview);
+			setCopiedSection("arguments");
+			toast.success("Arguments copied");
+			window.setTimeout(() => setCopiedSection(null), 1200);
+		} catch {
+			toast.error("Failed to copy arguments.");
+		}
+	};
+
 	const handleRevert = async () => {
 		setIsReverting(true);
 		try {
@@ -70,7 +125,7 @@ export function ActionLogItem({ action, threadId, onRevertSuccess }: ActionLogIt
 	return (
 		<div
 			className={cn(
-				"rounded-lg border bg-card transition-colors",
+				"overflow-hidden rounded-lg border border-popover-border bg-popover text-popover-foreground transition-colors",
 				isAlreadyReverted && "opacity-70"
 			)}
 		>
@@ -78,10 +133,10 @@ export function ActionLogItem({ action, threadId, onRevertSuccess }: ActionLogIt
 				type="button"
 				variant="ghost"
 				onClick={() => setIsExpanded((v) => !v)}
-				className="h-auto w-full items-start justify-start gap-3 p-3 text-left hover:bg-accent hover:text-accent-foreground"
+				className="h-auto w-full items-start justify-start gap-3 rounded-none p-3 text-left hover:bg-accent hover:text-accent-foreground"
 				aria-expanded={isExpanded}
 			>
-				<div className="flex size-8 shrink-0 items-center justify-center rounded-md bg-muted">
+				<div className="flex size-8 shrink-0 items-center justify-center rounded-md bg-accent">
 					{isRevertAction ? (
 						<Undo2 className="size-4 text-muted-foreground" />
 					) : (
@@ -102,7 +157,10 @@ export function ActionLogItem({ action, threadId, onRevertSuccess }: ActionLogIt
 							</Badge>
 						)}
 						{!isRevertAction && action.reversible && !isAlreadyReverted && (
-							<Badge variant="outline" className="text-[10px]">
+							<Badge
+								variant="secondary"
+								className="border-0 bg-neutral-200 px-1.5 py-0.5 text-[10px] text-neutral-700 dark:bg-neutral-700 dark:text-neutral-200"
+							>
 								Reversible
 							</Badge>
 						)}
@@ -116,55 +174,69 @@ export function ActionLogItem({ action, threadId, onRevertSuccess }: ActionLogIt
 				</div>
 				<ChevronRight
 					className={cn(
-						"size-4 shrink-0 text-muted-foreground transition-transform",
+						"size-4 shrink-0 self-center text-muted-foreground transition-transform",
 						isExpanded && "rotate-90"
 					)}
 				/>
 			</Button>
 
 			{isExpanded && (
-				<div className="flex flex-col gap-3 border-t bg-muted/20 p-3">
+				<div className="flex flex-col border-t border-popover-border bg-accent/80">
-					{truncatedArgs && (
+					{action.args && argsPreview && (
-						<div>
+						<div className="border-b border-popover-border">
-							<p className="mb-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+							<div className="flex items-center justify-between px-4 py-2">
+								<p className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
 									Arguments
 								</p>
-							<pre className="max-h-48 overflow-auto rounded-md bg-background p-2 text-[11px] text-foreground/80">
+								<Button
-								{truncatedArgs}
+									type="button"
-							</pre>
+									size="sm"
+									variant="ghost"
+									onClick={handleCopyArguments}
+									className="size-6 rounded-lg p-0 text-muted-foreground hover:bg-popover hover:text-popover-foreground"
+									aria-label={
+										copiedSection === "arguments" ? "Arguments copied" : "Copy arguments"
+									}
+								>
+									{copiedSection === "arguments" ? (
+										<Check className="size-3" />
+									) : (
+										<Copy className="size-3" />
+									)}
+								</Button>
+							</div>
+							<StructuredArguments args={action.args} />
 						</div>
 					)}
 					{action.error && (
-						<div>
+						<div className="border-b border-popover-border">
-							<p className="mb-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+							<p className="px-4 py-2 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
 								Error
 							</p>
-							<pre className="max-h-32 overflow-auto rounded-md bg-destructive/10 p-2 text-[11px] text-destructive">
+							<pre className="max-h-32 overflow-auto border-t border-popover-border bg-destructive/10 px-4 py-3 text-[11px] text-destructive">
 								{JSON.stringify(action.error, null, 2)}
 							</pre>
 						</div>
 					)}
 					{action.reverse_descriptor && (
-						<div>
+						<div className="border-b border-popover-border">
-							<p className="mb-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+							<p className="px-4 py-2 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
 								Reverse plan
 							</p>
-							<pre className="max-h-32 overflow-auto rounded-md bg-background p-2 text-[11px] text-foreground/80">
+							<pre className="max-h-32 overflow-auto border-t border-popover-border bg-popover px-4 py-3 text-[11px] text-popover-foreground/80">
 								{JSON.stringify(action.reverse_descriptor, null, 2)}
 							</pre>
 						</div>
 					)}
 
-					<Separator />
+					<div className="flex items-center justify-between px-4 py-3">
-
-					<div className="flex items-center justify-between">
 						<p className="text-[10px] text-muted-foreground">
 							Action ID: <span className="font-mono">{action.id}</span>
 						</p>
 						{canRevert ? (
 							<AlertDialog open={confirmOpen} onOpenChange={setConfirmOpen}>
 								<AlertDialogTrigger asChild>
-									<Button size="sm" variant="outline" className="gap-1.5">
+									<Button size="sm" variant="secondary" className="gap-1.5">
 										<RotateCcw className="size-3.5" />
 										Revert
 									</Button>
@@ -186,6 +258,7 @@ export function ActionLogItem({ action, threadId, onRevertSuccess }: ActionLogIt
 												handleRevert();
 											}}
 											disabled={isReverting}
+											className="bg-secondary text-secondary-foreground hover:bg-secondary/80 focus-visible:ring-0"
 										>
 											{isReverting ? "Reverting…" : "Revert"}
 										</AlertDialogAction>
@@ -194,7 +267,6 @@ export function ActionLogItem({ action, threadId, onRevertSuccess }: ActionLogIt
 							</AlertDialog>
 						) : (
 							<div className="flex items-center gap-1.5 text-[11px] text-muted-foreground">
-								<ShieldOff className="size-3.5" />
 								{isAlreadyReverted
 									? "Already reverted"
 									: isRevertAction

surfsense_web/components/assistant-ui/revert-turn-button.tsx

@@ -5,7 +5,7 @@
  * assistant turn that has at least one reversible action.
  *
  * The button reads from the unified ``useAgentActionsQuery`` cache
- * (the SAME react-query cache the agent-actions sheet and the inline
+ * (the SAME react-query cache the agent-actions dialog and the inline
  * Revert button consume) filtered by ``chat_turn_id``. It shows a
  * confirmation dialog summarising "N reversible / M total" and, on
  * confirm, calls ``POST /threads/{id}/revert-turn/{chat_turn_id}``.

surfsense_web/components/layout/providers/LayoutDataProvider.tsx

@@ -22,7 +22,7 @@ import {
 } from "@/atoms/settings/settings-dialog.atoms";
 import { removeChatTabAtom, syncChatTabAtom, type Tab } from "@/atoms/tabs/tabs.atom";
 import { currentUserAtom } from "@/atoms/user/user-query.atoms";
-import { ActionLogSheet } from "@/components/agent-action-log/action-log-sheet";
+import { ActionLogDialog } from "@/components/agent-action-log/action-log-dialog";
 import { AnnouncementsDialog } from "@/components/announcements/AnnouncementsDialog";
 import { SearchSpaceSettingsDialog } from "@/components/settings/search-space-settings-dialog";
 import { TeamDialog } from "@/components/settings/team-dialog";
@@ -893,8 +893,8 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 			<TeamDialog searchSpaceId={Number(searchSpaceId)} />
 			<AnnouncementsDialog />
 
-			{/* Agent action log + revert sheet */}
+			{/* Agent action log + revert dialog */}
-			<ActionLogSheet />
+			<ActionLogDialog />
 		</>
 	);
 }

surfsense_web/features/chat-messages/timeline/tool-registry/fallback/use-tool-action.ts

@@ -10,7 +10,7 @@ import { useAgentActionsQuery } from "@/hooks/use-agent-actions-query";
  * Resolve the ``AgentActionLog`` row for a given tool-call card. Tries
  * three lookup strategies, in priority order, against the unified
  * ``useAgentActionsQuery`` cache (the same react-query cache the
- * agent-actions sheet consumes — keeps the card and the sheet in
+ * agent-actions dialog consumes — keeps the card and the dialog in
  * lockstep across reload, navigation, live stream, post-stream
  * reversibility flips, and explicit revert clicks).
  *

surfsense_web/hooks/use-agent-actions-query.ts

@@ -35,12 +35,12 @@ const dbg = (...args: unknown[]) => {
  * * the per-turn "Revert turn" button under each assistant message
  * * the edit-from-position pre-flight that decides whether to show
  *   the confirmation dialog
- * * the agent-actions sheet
+ * * the agent-actions dialog
  *
  * The cache is hydrated by ``GET /threads/{id}/actions`` (sized to
  * 200, the server max) and updated incrementally by helpers that turn
  * SSE events / revert RPC responses into ``setQueryData`` mutations.
- * That keeps the card and the sheet in lockstep on every code path —
+ * That keeps the card and the dialog in lockstep on every code path —
  * page reload, navigation, live stream, post-stream reversibility flip,
  * and explicit revert clicks.
  */
@@ -72,7 +72,7 @@ export interface ActionLogSseEvent {
  *
  * The SSE payload is a strict subset of ``AgentAction``; missing
  * fields (``args``, ``reverse_descriptor``, ``user_id``) are filled
- * with ``null`` placeholders. The next refetch (sheet open, user
+ * with ``null`` placeholders. The next refetch (dialog open, user
  * focus, route stale) backfills them — but the inline Revert button
  * only reads the fields the SSE payload carries, so it lights up
  * immediately.
@@ -251,7 +251,7 @@ export function applyRevertTurnResultsToCache(
 }
 
 /**
- * Read-side hook used by the card, the turn button, the sheet, and
+ * Read-side hook used by the card, the turn button, the dialog, and
  * the edit-from-position pre-flight.
  *
  * Returns the raw query state plus convenience selectors so consumers