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.
This commit is contained in:
Louis Knight-Webb
2026-01-15 17:05:30 +00:00
committed by GitHub
parent ede1511a50
commit af8298744d
2 changed files with 11 additions and 19 deletions

View File

@@ -7,19 +7,19 @@ import {
RIGHT_MAIN_PANEL_MODES, RIGHT_MAIN_PANEL_MODES,
} from '@/stores/useUiPreferencesStore'; } from '@/stores/useUiPreferencesStore';
import { useWorkspaceContext } from '@/contexts/WorkspaceContext'; import { useWorkspaceContext } from '@/contexts/WorkspaceContext';
import { useLogsPanel } from '@/contexts/LogsPanelContext';
interface PreviewControlsContainerProps { interface PreviewControlsContainerProps {
attemptId?: string; attemptId?: string;
onViewProcessInPanel?: (processId: string) => void;
className?: string; className?: string;
} }
export function PreviewControlsContainer({ export function PreviewControlsContainer({
attemptId, attemptId,
onViewProcessInPanel,
className, className,
}: PreviewControlsContainerProps) { }: PreviewControlsContainerProps) {
const { repos } = useWorkspaceContext(); const { repos } = useWorkspaceContext();
const { viewProcessInPanel } = useLogsPanel();
const setRightMainPanelMode = useUiPreferencesStore( const setRightMainPanelMode = useUiPreferencesStore(
(s) => s.setRightMainPanelMode (s) => s.setRightMainPanelMode
); );
@@ -41,17 +41,14 @@ export function PreviewControlsContainer({
const { logs, error: logsError } = useLogStream(activeProcess?.id ?? ''); const { logs, error: logsError } = useLogStream(activeProcess?.id ?? '');
const handleViewFullLogs = useCallback( const handleViewFullLogs = useCallback(() => {
(processId?: string) => { const targetId = activeProcess?.id;
const targetId = processId ?? activeProcess?.id; if (targetId) {
if (targetId && onViewProcessInPanel) { viewProcessInPanel(targetId);
onViewProcessInPanel(targetId); } else {
} else { setRightMainPanelMode(RIGHT_MAIN_PANEL_MODES.LOGS);
setRightMainPanelMode(RIGHT_MAIN_PANEL_MODES.LOGS); }
} }, [activeProcess?.id, viewProcessInPanel, setRightMainPanelMode]);
},
[activeProcess?.id, onViewProcessInPanel, setRightMainPanelMode]
);
const handleTabChange = useCallback((processId: string) => { const handleTabChange = useCallback((processId: string) => {
setActiveProcessId(processId); setActiveProcessId(processId);

View File

@@ -4,7 +4,6 @@ import { ProcessListContainer } from '@/components/ui-new/containers/ProcessList
import { PreviewControlsContainer } from '@/components/ui-new/containers/PreviewControlsContainer'; import { PreviewControlsContainer } from '@/components/ui-new/containers/PreviewControlsContainer';
import { GitPanelContainer } from '@/components/ui-new/containers/GitPanelContainer'; import { GitPanelContainer } from '@/components/ui-new/containers/GitPanelContainer';
import { useChangesView } from '@/contexts/ChangesViewContext'; import { useChangesView } from '@/contexts/ChangesViewContext';
import { useLogsPanel } from '@/contexts/LogsPanelContext';
import { useWorkspaceContext } from '@/contexts/WorkspaceContext'; import { useWorkspaceContext } from '@/contexts/WorkspaceContext';
import type { Workspace, RepoWithTargetBranch } from 'shared/types'; import type { Workspace, RepoWithTargetBranch } from 'shared/types';
import { import {
@@ -27,7 +26,6 @@ export function RightSidebar({
repos, repos,
}: RightSidebarProps) { }: RightSidebarProps) {
const { selectFile } = useChangesView(); const { selectFile } = useChangesView();
const { viewProcessInPanel } = useLogsPanel();
const { diffs } = useWorkspaceContext(); const { diffs } = useWorkspaceContext();
const { setExpanded } = useExpandedAll(); const { setExpanded } = useExpandedAll();
@@ -81,10 +79,7 @@ export function RightSidebar({
return ( return (
<div className="flex flex-col h-full"> <div className="flex flex-col h-full">
<div className="flex-[7] min-h-0 overflow-hidden"> <div className="flex-[7] min-h-0 overflow-hidden">
<PreviewControlsContainer <PreviewControlsContainer attemptId={selectedWorkspace?.id} />
attemptId={selectedWorkspace?.id}
onViewProcessInPanel={viewProcessInPanel}
/>
</div> </div>
<div className="flex-[3] min-h-0 overflow-hidden"> <div className="flex-[3] min-h-0 overflow-hidden">
<GitPanelContainer <GitPanelContainer