Dev server logs (vibe-kanban) (#519)

* ## 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
<TabNavContext.Provider>
  <ProcessSelectionProvider>  {/* ← Uses useTabNavigation internally */}
    <ProcessesTab />           {/* ← Gets clean jumpToProcess API */}
    <CurrentAttempt />         {/* ← Simple jumpToProcess(id) call */}
  </ProcessSelectionProvider>
</TabNavContext.Provider>
```

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

frontend/src/components/tasks/TaskDetails/ProcessLogsViewer.tsx

@@ -65,37 +65,31 @@ export default function ProcessLogsViewer({
   };
 
   return (
-    <div className="flex flex-col flex-1 min-h-0 space-y-3">
-      <div className="flex-shrink-0">
-        <h3 className="text-sm font-medium">Process Logs</h3>
-      </div>
-
-      <div className="border rounded-lg bg-card flex-1 min-h-0 flex flex-col">
-        {logs.length === 0 && !error ? (
-          <div className="p-4 text-center text-muted-foreground text-sm">
-            No logs available
-          </div>
-        ) : error ? (
-          <div className="p-4 text-center text-destructive text-sm">
-            <AlertCircle className="h-4 w-4 inline mr-2" />
-            {error}
-          </div>
-        ) : (
-          <Virtuoso<LogEntry>
-            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 }}
-          />
-        )}
-      </div>
+    <div className="h-full">
+      {logs.length === 0 && !error ? (
+        <div className="p-4 text-center text-muted-foreground text-sm">
+          No logs available
+        </div>
+      ) : error ? (
+        <div className="p-4 text-center text-destructive text-sm">
+          <AlertCircle className="h-4 w-4 inline mr-2" />
+          {error}
+        </div>
+      ) : (
+        <Virtuoso<LogEntry>
+          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 }}
+        />
+      )}
     </div>
   );
 }

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<string | null>(
-    null
-  );
+  const { selectedProcessId, setSelectedProcessId } = useProcessSelection();
   const [loadingProcessId, setLoadingProcessId] = useState<string | null>(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() {
         </div>
       ) : (
         <div className="flex-1 flex flex-col min-h-0">
-          <div className="flex items-center justify-between p-4 border-b flex-shrink-0">
+          <div className="flex items-center justify-between px-4 py-2 border-b flex-shrink-0">
             <h2 className="text-lg font-semibold">Process Details</h2>
             <button
               onClick={() => setSelectedProcessId(null)}
@@ -184,81 +193,9 @@ function ProcessesTab() {
               Back to list
             </button>
           </div>
-          <div className="flex-1 flex flex-col min-h-0 overflow-hidden p-4 pb-20">
+          <div className="flex-1">
             {selectedProcess ? (
-              <div className="flex-1 flex flex-col min-h-0 space-y-4">
-                <div className="grid grid-cols-2 gap-4 flex-shrink-0">
-                  <div>
-                    <h3 className="font-medium text-sm mb-2">Process Info</h3>
-                    <div className="space-y-1 text-sm">
-                      <p>
-                        <span className="font-medium">Type:</span>{' '}
-                        {selectedProcess.run_reason}
-                      </p>
-                      <p>
-                        <span className="font-medium">Status:</span>{' '}
-                        {selectedProcess.status}
-                      </p>
-                      {/* Executor type field not available in new type */}
-                      <p>
-                        <span className="font-medium">Exit Code:</span>{' '}
-                        {selectedProcess.exit_code?.toString() ?? 'N/A'}
-                      </p>
-                      {selectedProcess.executor_action.typ.type ===
-                        'CodingAgentInitialRequest' ||
-                      selectedProcess.executor_action.typ.type ===
-                        'CodingAgentFollowUpRequest' ? (
-                        <p>
-                          <span className="font-medium">Profile:</span>{' '}
-                          <ProfileVariantBadge
-                            profileVariant={
-                              selectedProcess.executor_action.typ
-                                .profile_variant_label
-                            }
-                          />
-                        </p>
-                      ) : null}
-                    </div>
-                  </div>
-                  <div>
-                    <h3 className="font-medium text-sm mb-2">Timing</h3>
-                    <div className="space-y-1 text-sm">
-                      <p>
-                        <span className="font-medium">Started:</span>{' '}
-                        {formatDate(selectedProcess.started_at)}
-                      </p>
-                      {selectedProcess.completed_at && (
-                        <p>
-                          <span className="font-medium">Completed:</span>{' '}
-                          {formatDate(selectedProcess.completed_at)}
-                        </p>
-                      )}
-                    </div>
-                  </div>
-                </div>
-
-                {/* Command, working directory, stdout, stderr fields not available in new ExecutionProcess type */}
-                <div className="flex-shrink-0">
-                  <h3 className="font-medium text-sm mb-2">
-                    Process Information
-                  </h3>
-                  <div className="bg-muted/50 p-3 rounded-md font-mono text-sm">
-                    <div>Process ID: {selectedProcess.id}</div>
-                    <div>
-                      Task Attempt ID: {selectedProcess.task_attempt_id}
-                    </div>
-                    <div>Run Reason: {selectedProcess.run_reason}</div>
-                    <div>Status: {selectedProcess.status}</div>
-                    {selectedProcess.exit_code !== null && (
-                      <div>
-                        Exit Code: {selectedProcess.exit_code.toString()}
-                      </div>
-                    )}
-                  </div>
-                </div>
-
-                <ProcessLogsViewer processId={selectedProcess.id} />
-              </div>
+              <ProcessLogsViewer processId={selectedProcess.id} />
             ) : loadingProcessId === selectedProcessId ? (
               <div className="text-center text-muted-foreground">
                 <p>Loading process details...</p>

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 && (
-            <div className={getBackdropClasses()} onClick={onClose} />
-          )}
-
-          {/* Panel */}
-          <div className={className || getTaskPanelClasses()}>
-            <div className="flex flex-col h-full">
-              {!hideHeader && (
-                <TaskDetailsHeader
-                  onClose={onClose}
-                  onEditTask={onEditTask}
-                  onDeleteTask={onDeleteTask}
-                  hideCloseButton={hideBackdrop}
-                />
+          <TabNavContext.Provider value={{ activeTab, setActiveTab }}>
+            <ProcessSelectionProvider>
+              {/* Backdrop - only on smaller screens (overlay mode) */}
+              {!hideBackdrop && (
+                <div className={getBackdropClasses()} onClick={onClose} />
               )}
 
-              <TaskDetailsToolbar />
+              {/* Panel */}
+              <div className={className || getTaskPanelClasses()}>
+                <div className="flex flex-col h-full">
+                  {!hideHeader && (
+                    <TaskDetailsHeader
+                      onClose={onClose}
+                      onEditTask={onEditTask}
+                      onDeleteTask={onDeleteTask}
+                      hideCloseButton={hideBackdrop}
+                    />
+                  )}
 
-              <TabNavigation
-                activeTab={activeTab}
-                setActiveTab={setActiveTab}
-              />
+                  <TaskDetailsToolbar />
 
-              {/* Tab Content */}
-              <div className="flex-1 flex flex-col min-h-0">
-                {activeTab === 'diffs' ? (
-                  <DiffTab />
-                ) : activeTab === 'processes' ? (
-                  <ProcessesTab />
-                ) : (
-                  <LogsTab />
-                )}
+                  <TabNavigation
+                    activeTab={activeTab}
+                    setActiveTab={setActiveTab}
+                  />
+
+                  {/* Tab Content */}
+                  <div className="flex-1 flex flex-col min-h-0">
+                    {activeTab === 'diffs' ? (
+                      <DiffTab />
+                    ) : activeTab === 'processes' ? (
+                      <ProcessesTab />
+                    ) : (
+                      <LogsTab />
+                    )}
+                  </div>
+
+                  <TaskFollowUpSection />
+                </div>
               </div>
 
-              <TaskFollowUpSection />
-            </div>
-          </div>
+              <EditorSelectionDialog
+                isOpen={showEditorDialog}
+                onClose={() => setShowEditorDialog(false)}
+              />
 
-          <EditorSelectionDialog
-            isOpen={showEditorDialog}
-            onClose={() => setShowEditorDialog(false)}
-          />
-
-          <DeleteFileConfirmationDialog />
+              <DeleteFileConfirmationDialog />
+            </ProcessSelectionProvider>
+          </TabNavContext.Provider>
         </TaskDetailsProvider>
       )}
     </>

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({
               </TooltipContent>
             </Tooltip>
           </TooltipProvider>
+
+          {/* View Dev Server Logs Button */}
+          {latestDevServerProcess && (
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="outline"
+                    size="xs"
+                    onClick={handleViewDevServerLogs}
+                    className="gap-1"
+                  >
+                    <ScrollText className="h-3 w-3" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>View dev server logs</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          )}
         </div>
 
         <div className="flex items-center gap-2 flex-wrap">

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<ProcessSelectionContextType | null>(null);
+
+interface ProcessSelectionProviderProps {
+  children: ReactNode;
+}
+
+export function ProcessSelectionProvider({
+  children,
+}: ProcessSelectionProviderProps) {
+  const { setActiveTab } = useTabNavigation();
+  const [selectedProcessId, setSelectedProcessId] = useState<string | null>(
+    null
+  );
+
+  const jumpToProcess = useCallback(
+    (processId: string) => {
+      setSelectedProcessId(processId);
+      setActiveTab('processes');
+    },
+    [setActiveTab]
+  );
+
+  const value = useMemo(
+    () => ({
+      selectedProcessId,
+      setSelectedProcessId,
+      jumpToProcess,
+    }),
+    [selectedProcessId, setSelectedProcessId, jumpToProcess]
+  );
+
+  return (
+    <ProcessSelectionContext.Provider value={value}>
+      {children}
+    </ProcessSelectionContext.Provider>
+  );
+}
+
+export const useProcessSelection = () => {
+  const context = useContext(ProcessSelectionContext);
+  if (!context) {
+    throw new Error(
+      'useProcessSelection must be used within ProcessSelectionProvider'
+    );
+  }
+  return context;
+};

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<TabNavContextType | null>(null);
+
+export const useTabNavigation = () => {
+  const context = useContext(TabNavContext);
+  if (!context) {
+    throw new Error('useTabNavigation must be used within TabNavContext');
+  }
+  return context;
+};