From af8298744dca35b11398c4ed9f5c257061371794 Mon Sep 17 00:00:00 2001 From: Louis Knight-Webb Date: Thu, 15 Jan 2026 17:05:30 +0000 Subject: [PATCH] Fix 'View Full Logs' button passing click event instead of process ID (Vibe Kanban) (#2080) * The fix is complete. Here's a summary of the changes: **Problem**: Clicking "View Full Logs" button opened the logs panel but showed "Select a process to view logs" error because the process ID wasn't being passed to the logs panel context. **Root cause**: In `PreviewControlsContainer.tsx`, when `onViewProcessInPanel` was provided but `targetId` was falsy, the fallback path only switched the panel mode without setting which process to display. **Solution**: Modified `PreviewControlsContainer.tsx` to use `viewProcessInPanel` directly from the `LogsPanelContext` instead of relying on the prop. This ensures the process ID is always properly set when switching to the logs panel. **Changes made**: 1. `frontend/src/components/ui-new/containers/PreviewControlsContainer.tsx`: - Added import for `useLogsPanel` hook - Removed `onViewProcessInPanel` prop from interface - Use `viewProcessInPanel` from context directly - Updated `handleViewFullLogs` to call the context function 2. `frontend/src/components/ui-new/containers/RightSidebar.tsx`: - Removed unused `useLogsPanel` import - Removed `viewProcessInPanel` from destructuring - Removed `onViewProcessInPanel` prop from `PreviewControlsContainer` usage * All checks pass. The diagnostic logging is now in place. Here's a summary: ## Diagnostic Logging Added **Frontend** (`frontend/src/hooks/useLogStream.ts`): - Logs when WebSocket connection is opened with process ID - Logs successful connection - Logs errors with process ID - Logs close events with code and reason **Backend** (`crates/server/src/routes/execution_processes.rs`): - Logs when checking stream for an exec_id - Logs warning if no stream found - Logs when stream is found and WebSocket is being upgraded **Backend** (`crates/services/src/services/container.rs`): - Logs when looking up msg_store - Logs if in-memory store is found - Logs if falling back to DB - Logs DB record count or warnings if no logs found **Backend** (`crates/local-deployment/src/container.rs`): - Logs when creating a new store for a process - Logs when store is inserted into the map with map size ## Next Steps Run `pnpm run dev:qa`, reproduce the issue by: 1. Starting a dev server in a workspace 2. Clicking "View Full Logs" Then share the logs from: - **Browser console** (look for `[useLogStream]` messages) - **Backend terminal** (look for `stream_raw_logs`, `track_child_msgs_in_store` messages) * Cleanup script changes for workspace 5963230a-5419-40d6-89e9-b26519d38291 * The fix is complete. The issue was that `handleViewFullLogs` accepted an optional `processId` parameter, but when used as a button `onClick` handler, it received the click event instead. Since the click event object is truthy, the `??` operator didn't fall through to `activeProcess?.id`, causing the event object to be passed to `viewProcessInPanel()`. The fix removes the parameter so the function always uses `activeProcess?.id` directly. You can now test by running `pnpm run dev:qa` and clicking "View Full Logs" - it should correctly open the logs panel with the dev server logs. * All diagnostic logs have been removed. The fix is complete and all checks pass. --- .../containers/PreviewControlsContainer.tsx | 23 ++++++++----------- .../ui-new/containers/RightSidebar.tsx | 7 +----- 2 files changed, 11 insertions(+), 19 deletions(-) diff --git a/frontend/src/components/ui-new/containers/PreviewControlsContainer.tsx b/frontend/src/components/ui-new/containers/PreviewControlsContainer.tsx index 5551634f..45ebbc62 100644 --- a/frontend/src/components/ui-new/containers/PreviewControlsContainer.tsx +++ b/frontend/src/components/ui-new/containers/PreviewControlsContainer.tsx @@ -7,19 +7,19 @@ import { RIGHT_MAIN_PANEL_MODES, } from '@/stores/useUiPreferencesStore'; import { useWorkspaceContext } from '@/contexts/WorkspaceContext'; +import { useLogsPanel } from '@/contexts/LogsPanelContext'; interface PreviewControlsContainerProps { attemptId?: string; - onViewProcessInPanel?: (processId: string) => void; className?: string; } export function PreviewControlsContainer({ attemptId, - onViewProcessInPanel, className, }: PreviewControlsContainerProps) { const { repos } = useWorkspaceContext(); + const { viewProcessInPanel } = useLogsPanel(); const setRightMainPanelMode = useUiPreferencesStore( (s) => s.setRightMainPanelMode ); @@ -41,17 +41,14 @@ export function PreviewControlsContainer({ const { logs, error: logsError } = useLogStream(activeProcess?.id ?? ''); - const handleViewFullLogs = useCallback( - (processId?: string) => { - const targetId = processId ?? activeProcess?.id; - if (targetId && onViewProcessInPanel) { - onViewProcessInPanel(targetId); - } else { - setRightMainPanelMode(RIGHT_MAIN_PANEL_MODES.LOGS); - } - }, - [activeProcess?.id, onViewProcessInPanel, setRightMainPanelMode] - ); + const handleViewFullLogs = useCallback(() => { + const targetId = activeProcess?.id; + if (targetId) { + viewProcessInPanel(targetId); + } else { + setRightMainPanelMode(RIGHT_MAIN_PANEL_MODES.LOGS); + } + }, [activeProcess?.id, viewProcessInPanel, setRightMainPanelMode]); const handleTabChange = useCallback((processId: string) => { setActiveProcessId(processId); diff --git a/frontend/src/components/ui-new/containers/RightSidebar.tsx b/frontend/src/components/ui-new/containers/RightSidebar.tsx index 4850b213..7788dd1c 100644 --- a/frontend/src/components/ui-new/containers/RightSidebar.tsx +++ b/frontend/src/components/ui-new/containers/RightSidebar.tsx @@ -4,7 +4,6 @@ import { ProcessListContainer } from '@/components/ui-new/containers/ProcessList import { PreviewControlsContainer } from '@/components/ui-new/containers/PreviewControlsContainer'; import { GitPanelContainer } from '@/components/ui-new/containers/GitPanelContainer'; import { useChangesView } from '@/contexts/ChangesViewContext'; -import { useLogsPanel } from '@/contexts/LogsPanelContext'; import { useWorkspaceContext } from '@/contexts/WorkspaceContext'; import type { Workspace, RepoWithTargetBranch } from 'shared/types'; import { @@ -27,7 +26,6 @@ export function RightSidebar({ repos, }: RightSidebarProps) { const { selectFile } = useChangesView(); - const { viewProcessInPanel } = useLogsPanel(); const { diffs } = useWorkspaceContext(); const { setExpanded } = useExpandedAll(); @@ -81,10 +79,7 @@ export function RightSidebar({ return (
- +