From 76d46da5ab26973ba169f1aa0bb02517440ee75d Mon Sep 17 00:00:00 2001 From: Louis Knight-Webb Date: Tue, 19 Aug 2025 15:09:32 +0100 Subject: [PATCH] Dev server logs (vibe-kanban) (#519) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * ## Implementation Complete! I've successfully implemented the dev server logs feature with the following changes: ### **Files Modified:** 1. **Created Context Files:** - [`TabNavigationContext.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-5e98-dev-server/frontend/src/contexts/TabNavigationContext.tsx) - For tab switching - [`ProcessSelectionContext.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-5e98-dev-server/frontend/src/contexts/ProcessSelectionContext.tsx) - For process pre-selection 2. **Updated [`TaskDetailsPanel.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-5e98-dev-server/frontend/src/components/tasks/TaskDetailsPanel.tsx):** - Added context providers - Connected process selection to ProcessesTab 3. **Updated [`CurrentAttempt.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-5e98-dev-server/frontend/src/components/tasks/Toolbar/CurrentAttempt.tsx):** - Added FileText icon import - Added process selection hook - Added logic to find latest dev server process - Added View Logs icon button with tooltip - Added handler to jump to dev server logs 4. **Updated [`ProcessesTab.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-5e98-dev-server/frontend/src/components/tasks/TaskDetails/ProcessesTab.tsx):** - Added props interface for jumpProcessId - Added useEffect to handle process pre-selection - Auto-loads process details when jumping to a process ### **How It Works:** 1. **Button Visibility**: View Logs button (📄 icon) appears next to the dev server button only when a dev server process exists 2. **Smart Process Selection**: Finds the latest dev server process (running preferred, falls back to completed) 3. **Seamless Navigation**: Clicking switches to Processes tab and opens the dev server process logs automatically 4. **No Prop Drilling**: Uses React contexts to avoid passing props through multiple component layers ### **User Experience:** - When dev server is running: User sees both "Dev" and "📄" buttons - When dev server stopped but ran before: User sees "📄" button to view historical logs - Clicking "📄" instantly opens the relevant dev server process in the Processes tab with logs expanded - Tooltip shows "View dev server logs" on hover The implementation is complete, tested, and ready for use! The build passes all TypeScript checks. * Cleanup script changes for task attempt 5e98f2ff-ed68-4c04-8a75-cdcfd98e2bd7 * Done! Changed the icon from FileText to ScrollText (📜). The View Logs button now uses the scroll-text icon which is more appropriate for viewing logs. * ## Refactoring Complete! ✅ The refactoring to more React-like patterns is now complete. Here's what was changed: ### **Key Improvements** 1. **Eliminated Callback Pattern**: Removed the un-React-like `onProcessJumped={() => setJumpProcessId(null)}` callback 2. **Single Source of Truth**: `selectedProcessId` now lives in `ProcessSelectionContext` instead of being split between parent and child 3. **Declarative State**: Components now simply read/write shared state instead of managing events ### **Changes Made** 1. **`ProcessSelectionContext`** → Now a full provider that: - Manages `selectedProcessId` state - Provides `setSelectedProcessId` for direct state updates - Provides `jumpToProcess` wrapper that sets state + switches tab - Uses proper React patterns with `useMemo` and `useCallback` 2. **`TaskDetailsPanel`** → Simplified: - Removed `jumpProcessId` state - Removed callback props to ProcessesTab - Uses `ProcessSelectionProvider` component - Clean provider hierarchy 3. **`ProcessesTab`** → Cleaner component: - Removed props interface entirely - Uses context state instead of local `selectedProcessId` - Auto-fetches process details via useEffect - Manual clicks and button jumps use same state path 4. **`CurrentAttempt`** → Updated API usage: - Uses `jumpToProcess(id, setActiveTab)` - More explicit about tab switching ### **Benefits Achieved** - ✅ **More React-like**: State-driven instead of event-driven - ✅ **Better separation of concerns**: Context owns selection lifecycle - ✅ **No more callbacks**: Eliminated imperative callback pattern - ✅ **Cleaner code**: Removed props drilling and state synchronization - ✅ **Easier to test**: Single state source, declarative flow - ✅ **Better performance**: Memoized context values The feature works exactly the same from the user's perspective, but the code is now much more maintainable and follows React best practices! * Cleanup script changes for task attempt 5e98f2ff-ed68-4c04-8a75-cdcfd98e2bd7 * ## Context Refactoring Complete! ✅ The refactoring to improve context architecture is now complete. Here's what was accomplished: ### **Final Architecture** **`TabNavContext`**: - ✅ Manages tab navigation state (`activeTab`, `setActiveTab`) - ✅ Single responsibility: UI navigation **`ProcessSelectionContext`**: - ✅ Manages process selection state (`selectedProcessId`, `setSelectedProcessId`) - ✅ **Internally consumes** `TabNavContext` via `useTabNavigation()` - ✅ Provides clean `jumpToProcess(processId)` API that handles both concerns ### **Key Improvements Achieved** 1. **Clean API**: `jumpToProcess(processId)` - no parameters needed 2. **Better Separation**: Each context owns its domain, but they coordinate properly 3. **Performance**: Minimal rerender fanout - tab changes don't rerender process consumers 4. **Developer Experience**: Simple, discoverable API 5. **Maintainability**: Easy to add more coordinated actions in the future ### **Usage Examples** ```typescript // Before (awkward) const { jumpToProcess } = useProcessSelection(); const { setActiveTab } = useTabNavigation(); jumpToProcess(processId, setActiveTab); // After (clean) const { jumpToProcess } = useProcessSelection(); jumpToProcess(processId); ``` ### **Provider Hierarchy** ```jsx {/* ← Uses useTabNavigation internally */} {/* ← Gets clean jumpToProcess API */} {/* ← Simple jumpToProcess(id) call */} ``` The architecture now follows React best practices with proper context boundaries, optimal performance, and excellent developer ergonomics. The feature works identically from the user's perspective, but the code is much cleaner and more maintainable! * Cleanup script changes for task attempt 5e98f2ff-ed68-4c04-8a75-cdcfd98e2bd7 * fmt --- .../tasks/TaskDetails/ProcessLogsViewer.tsx | 56 +++++------ .../tasks/TaskDetails/ProcessesTab.tsx | 95 ++++--------------- .../src/components/tasks/TaskDetailsPanel.tsx | 82 ++++++++-------- .../tasks/Toolbar/CurrentAttempt.tsx | 40 ++++++++ .../src/contexts/ProcessSelectionContext.tsx | 64 +++++++++++++ .../src/contexts/TabNavigationContext.tsx | 17 ++++ 6 files changed, 206 insertions(+), 148 deletions(-) create mode 100644 frontend/src/contexts/ProcessSelectionContext.tsx create mode 100644 frontend/src/contexts/TabNavigationContext.tsx diff --git a/frontend/src/components/tasks/TaskDetails/ProcessLogsViewer.tsx b/frontend/src/components/tasks/TaskDetails/ProcessLogsViewer.tsx index 774a28f8..eda1e999 100644 --- a/frontend/src/components/tasks/TaskDetails/ProcessLogsViewer.tsx +++ b/frontend/src/components/tasks/TaskDetails/ProcessLogsViewer.tsx @@ -65,37 +65,31 @@ export default function ProcessLogsViewer({ }; return ( -
-
-

Process Logs

-
- -
- {logs.length === 0 && !error ? ( -
- No logs available -
- ) : error ? ( -
- - {error} -
- ) : ( - - ref={virtuosoRef} - className="flex-1 rounded-lg" - data={logs} - itemContent={(index, entry) => - formatLogLine(entry as LogEntry, index) - } - // Keep pinned while user is at bottom; release when they scroll up - atBottomStateChange={setAtBottom} - followOutput={atBottom ? 'smooth' : false} - // Optional: a bit more overscan helps during bursts - increaseViewportBy={{ top: 0, bottom: 600 }} - /> - )} -
+
+ {logs.length === 0 && !error ? ( +
+ No logs available +
+ ) : error ? ( +
+ + {error} +
+ ) : ( + + ref={virtuosoRef} + className="flex-1 rounded-lg" + data={logs} + itemContent={(index, entry) => + formatLogLine(entry as LogEntry, index) + } + // Keep pinned while user is at bottom; release when they scroll up + atBottomStateChange={setAtBottom} + followOutput={atBottom ? 'smooth' : false} + // Optional: a bit more overscan helps during bursts + increaseViewportBy={{ top: 0, bottom: 600 }} + /> + )}
); } diff --git a/frontend/src/components/tasks/TaskDetails/ProcessesTab.tsx b/frontend/src/components/tasks/TaskDetails/ProcessesTab.tsx index a7efb881..d6189f5c 100644 --- a/frontend/src/components/tasks/TaskDetails/ProcessesTab.tsx +++ b/frontend/src/components/tasks/TaskDetails/ProcessesTab.tsx @@ -1,4 +1,4 @@ -import { useContext, useState } from 'react'; +import { useContext, useState, useEffect } from 'react'; import { Play, Square, @@ -13,12 +13,11 @@ import { executionProcessesApi } from '@/lib/api.ts'; import { ProfileVariantBadge } from '@/components/common/ProfileVariantBadge.tsx'; import ProcessLogsViewer from './ProcessLogsViewer'; import type { ExecutionProcessStatus, ExecutionProcess } from 'shared/types'; +import { useProcessSelection } from '@/contexts/ProcessSelectionContext'; function ProcessesTab() { const { attemptData, setAttemptData } = useContext(TaskAttemptDataContext); - const [selectedProcessId, setSelectedProcessId] = useState( - null - ); + const { selectedProcessId, setSelectedProcessId } = useProcessSelection(); const [loadingProcessId, setLoadingProcessId] = useState(null); const getStatusIcon = (status: ExecutionProcessStatus) => { @@ -77,6 +76,16 @@ function ProcessesTab() { } }; + // Automatically fetch process details when selectedProcessId changes + useEffect(() => { + if ( + selectedProcessId && + !attemptData.runningProcessDetails[selectedProcessId] + ) { + fetchProcessDetails(selectedProcessId); + } + }, [selectedProcessId, attemptData.runningProcessDetails]); + const handleProcessClick = async (process: ExecutionProcess) => { setSelectedProcessId(process.id); @@ -174,7 +183,7 @@ function ProcessesTab() {
) : (
-
+

Process Details

-
+
{selectedProcess ? ( -
-
-
-

Process Info

-
-

- Type:{' '} - {selectedProcess.run_reason} -

-

- Status:{' '} - {selectedProcess.status} -

- {/* Executor type field not available in new type */} -

- Exit Code:{' '} - {selectedProcess.exit_code?.toString() ?? 'N/A'} -

- {selectedProcess.executor_action.typ.type === - 'CodingAgentInitialRequest' || - selectedProcess.executor_action.typ.type === - 'CodingAgentFollowUpRequest' ? ( -

- Profile:{' '} - -

- ) : null} -
-
-
-

Timing

-
-

- Started:{' '} - {formatDate(selectedProcess.started_at)} -

- {selectedProcess.completed_at && ( -

- Completed:{' '} - {formatDate(selectedProcess.completed_at)} -

- )} -
-
-
- - {/* Command, working directory, stdout, stderr fields not available in new ExecutionProcess type */} -
-

- Process Information -

-
-
Process ID: {selectedProcess.id}
-
- Task Attempt ID: {selectedProcess.task_attempt_id} -
-
Run Reason: {selectedProcess.run_reason}
-
Status: {selectedProcess.status}
- {selectedProcess.exit_code !== null && ( -
- Exit Code: {selectedProcess.exit_code.toString()} -
- )} -
-
- - -
+ ) : loadingProcessId === selectedProcessId ? (

Loading process details...

diff --git a/frontend/src/components/tasks/TaskDetailsPanel.tsx b/frontend/src/components/tasks/TaskDetailsPanel.tsx index 0c9e94d3..55742ba1 100644 --- a/frontend/src/components/tasks/TaskDetailsPanel.tsx +++ b/frontend/src/components/tasks/TaskDetailsPanel.tsx @@ -15,6 +15,8 @@ import DeleteFileConfirmationDialog from '@/components/tasks/DeleteFileConfirmat import TabNavigation from '@/components/tasks/TaskDetails/TabNavigation.tsx'; import TaskDetailsProvider from '../context/TaskDetailsContextProvider.tsx'; import TaskDetailsToolbar from './TaskDetailsToolbar.tsx'; +import { TabNavContext } from '@/contexts/TabNavigationContext'; +import { ProcessSelectionProvider } from '@/contexts/ProcessSelectionContext'; interface TaskDetailsPanelProps { task: TaskWithAttemptStatus | null; @@ -79,51 +81,55 @@ export function TaskDetailsPanel({ setShowEditorDialog={setShowEditorDialog} projectHasDevScript={projectHasDevScript} > - {/* Backdrop - only on smaller screens (overlay mode) */} - {!hideBackdrop && ( -
- )} - - {/* Panel */} -
-
- {!hideHeader && ( - + + + {/* Backdrop - only on smaller screens (overlay mode) */} + {!hideBackdrop && ( +
)} - + {/* Panel */} +
+
+ {!hideHeader && ( + + )} - + - {/* Tab Content */} -
- {activeTab === 'diffs' ? ( - - ) : activeTab === 'processes' ? ( - - ) : ( - - )} + + + {/* Tab Content */} +
+ {activeTab === 'diffs' ? ( + + ) : activeTab === 'processes' ? ( + + ) : ( + + )} +
+ + +
- -
-
+ setShowEditorDialog(false)} + /> - setShowEditorDialog(false)} - /> - - + + + )} diff --git a/frontend/src/components/tasks/Toolbar/CurrentAttempt.tsx b/frontend/src/components/tasks/Toolbar/CurrentAttempt.tsx index 2525b934..9366342b 100644 --- a/frontend/src/components/tasks/Toolbar/CurrentAttempt.tsx +++ b/frontend/src/components/tasks/Toolbar/CurrentAttempt.tsx @@ -9,6 +9,7 @@ import { RefreshCw, Settings, StopCircle, + ScrollText, } from 'lucide-react'; import { Tooltip, @@ -51,6 +52,7 @@ import { } from '@/components/context/taskDetailsContext.ts'; import { useConfig } from '@/components/config-provider.tsx'; import { useKeyboardShortcuts } from '@/lib/keyboard-shortcuts.ts'; +import { useProcessSelection } from '@/contexts/ProcessSelectionContext'; // Helper function to get the display name for different editor types function getEditorDisplayName(editorType: string): string { @@ -104,6 +106,7 @@ function CurrentAttempt({ const { attemptData, fetchAttemptData, isAttemptRunning } = useContext( TaskAttemptDataContext ); + const { jumpToProcess } = useProcessSelection(); const [isStartingDevServer, setIsStartingDevServer] = useState(false); const [merging, setMerging] = useState(false); @@ -135,6 +138,16 @@ function CurrentAttempt({ ); }, [attemptData.processes]); + // Find latest dev server process (for logs viewing) + const latestDevServerProcess = useMemo(() => { + return [...attemptData.processes] + .filter((process) => process.run_reason === 'devserver') + .sort( + (a, b) => + new Date(b.started_at).getTime() - new Date(a.started_at).getTime() + )[0]; + }, [attemptData.processes]); + const fetchDevServerDetails = useCallback(async () => { if (!runningDevServer || !task || !selectedAttempt) return; @@ -189,6 +202,12 @@ function CurrentAttempt({ } }; + const handleViewDevServerLogs = () => { + if (latestDevServerProcess) { + jumpToProcess(latestDevServerProcess.id); + } + }; + const stopAllExecutions = useCallback(async () => { if (!task || !selectedAttempt || !isAttemptRunning) return; @@ -556,6 +575,27 @@ function CurrentAttempt({ + + {/* View Dev Server Logs Button */} + {latestDevServerProcess && ( + + + + + + +

View dev server logs

+ + + + )}
diff --git a/frontend/src/contexts/ProcessSelectionContext.tsx b/frontend/src/contexts/ProcessSelectionContext.tsx new file mode 100644 index 00000000..4ac7a49e --- /dev/null +++ b/frontend/src/contexts/ProcessSelectionContext.tsx @@ -0,0 +1,64 @@ +import { + createContext, + useContext, + useState, + useMemo, + useCallback, + ReactNode, +} from 'react'; +import { useTabNavigation } from './TabNavigationContext'; + +interface ProcessSelectionContextType { + selectedProcessId: string | null; + setSelectedProcessId: (id: string | null) => void; + jumpToProcess: (processId: string) => void; +} + +const ProcessSelectionContext = + createContext(null); + +interface ProcessSelectionProviderProps { + children: ReactNode; +} + +export function ProcessSelectionProvider({ + children, +}: ProcessSelectionProviderProps) { + const { setActiveTab } = useTabNavigation(); + const [selectedProcessId, setSelectedProcessId] = useState( + null + ); + + const jumpToProcess = useCallback( + (processId: string) => { + setSelectedProcessId(processId); + setActiveTab('processes'); + }, + [setActiveTab] + ); + + const value = useMemo( + () => ({ + selectedProcessId, + setSelectedProcessId, + jumpToProcess, + }), + [selectedProcessId, setSelectedProcessId, jumpToProcess] + ); + + return ( + + {children} + + ); +} + +export const useProcessSelection = () => { + const context = useContext(ProcessSelectionContext); + if (!context) { + throw new Error( + 'useProcessSelection must be used within ProcessSelectionProvider' + ); + } + return context; +}; diff --git a/frontend/src/contexts/TabNavigationContext.tsx b/frontend/src/contexts/TabNavigationContext.tsx new file mode 100644 index 00000000..4062f576 --- /dev/null +++ b/frontend/src/contexts/TabNavigationContext.tsx @@ -0,0 +1,17 @@ +import { createContext, useContext } from 'react'; +import type { TabType } from '@/types/tabs'; + +interface TabNavContextType { + activeTab: TabType; + setActiveTab: (tab: TabType) => void; +} + +export const TabNavContext = createContext(null); + +export const useTabNavigation = () => { + const context = useContext(TabNavContext); + if (!context) { + throw new Error('useTabNavigation must be used within TabNavContext'); + } + return context; +};