diff --git a/desktop/src/features/channels/ui/AgentSessionThreadPanel.tsx b/desktop/src/features/channels/ui/AgentSessionThreadPanel.tsx index 31996f24c2..4aaa1085d3 100644 --- a/desktop/src/features/channels/ui/AgentSessionThreadPanel.tsx +++ b/desktop/src/features/channels/ui/AgentSessionThreadPanel.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { ArrowLeft, CircleDot, Octagon, TerminalSquare, X } from "lucide-react"; +import { CircleDot, Octagon, Settings, TerminalSquare, X } from "lucide-react"; import { toast } from "sonner"; import { ManagedAgentSessionPanel } from "@/features/agents/ui/ManagedAgentSessionPanel"; @@ -12,9 +12,11 @@ import { useStickToBottom } from "@/shared/hooks/useStickToBottom"; import { cn } from "@/shared/lib/cn"; import { AuxiliaryPanelHeader, + AuxiliaryPanelHeaderActions, AuxiliaryPanelHeaderGroup, AuxiliaryPanelTitle, auxiliaryPanelContentPaddingClass, + auxiliaryPanelHeaderPaddingClass, } from "@/shared/layout/AuxiliaryPanelHeader"; import { Badge } from "@/shared/ui/badge"; import { Button } from "@/shared/ui/button"; @@ -28,6 +30,12 @@ import { import { THREAD_PANEL_MIN_WIDTH_PX } from "@/shared/hooks/useThreadPanelWidth"; import { Switch } from "@/shared/ui/switch"; import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui/tooltip"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/shared/ui/dropdown-menu"; import type { ChannelAgentSessionAgent } from "./useChannelAgentSessions"; type AgentSessionThreadPanelProps = { @@ -63,6 +71,7 @@ export function AgentSessionThreadPanel({ const { ref: scrollRef, onScroll } = useStickToBottom(); const rawFeedScopeKey = `${agent.pubkey}:${channel?.id ?? "all"}`; + const rawFeedSwitchId = React.useId(); const [rawFeedState, setRawFeedState] = React.useState(() => ({ scopeKey: rawFeedScopeKey, show: false, @@ -96,7 +105,7 @@ export function AgentSessionThreadPanel({ } const agentHeaderActions = ( -
+ {isLive && isWorking ? ( @@ -104,32 +113,57 @@ export function AgentSessionThreadPanel({ ) : null} {isLive ? ( -
- - -
+ { + event.preventDefault(); + handleRawFeedChange(!showRawFeed); + }} + title={ + showRawFeed + ? "Hide raw JSON-RPC payloads." + : channel + ? "Show raw JSON-RPC payloads for this channel." + : "Show raw JSON-RPC payloads for this agent." + } + > + + + event.stopPropagation()} + /> + + + ) : null} {isLive && isWorking ? ( @@ -167,23 +201,16 @@ export function AgentSessionThreadPanel({ > -
+ ); const agentHeaderContent = ( <> - - + {showRawFeed ? "Raw ACP Activity" : "Activity"} @@ -199,7 +226,7 @@ export function AgentSessionThreadPanel({ className={cn( "min-h-0 flex-1 overflow-y-auto px-3 pb-4", isSplitLayout && auxiliaryPanelContentPaddingClass, - !isSplitLayout && (isFloatingOverlay ? "pt-4" : "pt-[3.25rem]"), + !isSplitLayout && (isFloatingOverlay ? "pt-4" : "pt-13"), )} >