Fix: Delete Worktree Crash + PR Comments + Dev Server UX Improvements (#792)

* Changes from fix/delete-worktree-hotifx * fix: Improve bot detection and prevent UI overflow issues - Include GitHub app-initiated comments in bot detection - Wrap handleQuickCreateSession with useCallback to fix dependency issues - Truncate long branch names in agent header to prevent layout overflow * feat: Support GitHub App comments in PR review and fix session filtering * feat: Return invalidation result from delete session handler
2026-03-18 10:23:07 +00:00 · 2026-02-21 11:07:16 -08:00
parent 3ddf26f666
commit f3edfbf24e
14 changed files with 395 additions and 170 deletions
--- a/apps/ui/src/components/dialogs/pr-comment-resolution-dialog.tsx
+++ b/apps/ui/src/components/dialogs/pr-comment-resolution-dialog.tsx
@@ -248,39 +248,22 @@ function CommentRow({
  return (
    <div
      className={cn(
-        'flex items-start gap-3 p-3 rounded-lg border border-border transition-colors cursor-pointer',
+        'flex items-start gap-3 p-3 rounded-lg border border-border transition-colors',
+        needsExpansion ? 'cursor-pointer' : 'cursor-default',
        isSelected ? 'bg-accent/50 border-primary/30' : 'hover:bg-accent/30'
      )}
-      onClick={onToggle}
+      onClick={needsExpansion ? () => setIsExpanded((prev) => !prev) : undefined}
    >
      <Checkbox
        checked={isSelected}
        onCheckedChange={() => onToggle()}
-        className="mt-0.5"
+        className="mt-0.5 shrink-0"
        onClick={(e) => e.stopPropagation()}
      />

      <div className="flex-1 min-w-0">
        {/* Header: disclosure triangle + author + file location + tags */}
        <div className="flex items-start gap-1.5 flex-wrap mb-1">
-          {/* Disclosure triangle - always shown, toggles expand/collapse */}
-          {needsExpansion ? (
-            <button
-              type="button"
-              onClick={handleExpandToggle}
-              className="mt-0.5 shrink-0 text-muted-foreground hover:text-foreground transition-colors"
-              title={isExpanded ? 'Collapse comment' : 'Expand comment'}
-            >
-              {isExpanded ? (
-                <ChevronDown className="h-3.5 w-3.5" />
-              ) : (
-                <ChevronDown className="h-3.5 w-3.5 -rotate-90" />
-              )}
-            </button>
-          ) : (
-            <span className="mt-0.5 shrink-0 w-3.5 h-3.5" />
-          )}
-
          <div className="flex items-center gap-2 flex-wrap flex-1 min-w-0">
            <div className="flex items-center gap-1.5">
              {comment.avatarUrl ? (
@@ -304,6 +287,12 @@ function CommentRow({
              </div>
            )}

+            {comment.isBot && (
+              <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-purple-500/10 text-purple-500">
+                Bot
+              </span>
+            )}
+
            {comment.isOutdated && (
              <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-yellow-500/10 text-yellow-500">
                Outdated
@@ -347,27 +336,47 @@ function CommentRow({
              </button>
            )}

-            {/* Expand detail button */}
-            <button
-              type="button"
-              onClick={handleExpandDetail}
-              className="ml-auto shrink-0 text-muted-foreground hover:text-foreground transition-colors p-0.5 rounded hover:bg-muted"
-              title="View full comment details"
-            >
-              <Maximize2 className="h-3.5 w-3.5" />
-            </button>
+            <div className="ml-auto shrink-0 flex items-center gap-1">
+              {/* Disclosure triangle - toggles expand/collapse */}
+              {needsExpansion ? (
+                <button
+                  type="button"
+                  onClick={handleExpandToggle}
+                  className="text-muted-foreground hover:text-foreground transition-colors p-0.5 rounded hover:bg-muted"
+                  title={isExpanded ? 'Collapse comment' : 'Expand comment'}
+                >
+                  {isExpanded ? (
+                    <ChevronDown className="h-3.5 w-3.5" />
+                  ) : (
+                    <ChevronDown className="h-3.5 w-3.5 -rotate-90" />
+                  )}
+                </button>
+              ) : (
+                <span className="w-4 h-4" />
+              )}
+
+              {/* Expand detail button */}
+              <button
+                type="button"
+                onClick={handleExpandDetail}
+                className="text-muted-foreground hover:text-foreground transition-colors p-0.5 rounded hover:bg-muted"
+                title="View full comment details"
+              >
+                <Maximize2 className="h-3.5 w-3.5" />
+              </button>
+            </div>
          </div>
        </div>

        {/* Comment body - collapsible, rendered as markdown */}
        {isExpanded ? (
-          <div className="pl-5" onClick={(e) => e.stopPropagation()}>
+          <div onClick={(e) => e.stopPropagation()}>
            <Markdown className="text-sm [&_p]:text-muted-foreground [&_li]:text-muted-foreground">
              {comment.body}
            </Markdown>
          </div>
        ) : (
-          <div className="pl-5 line-clamp-2">
+          <div className="line-clamp-2">
            <Markdown className="text-sm [&_p]:text-muted-foreground [&_li]:text-muted-foreground [&_p]:my-0 [&_ul]:my-0 [&_ol]:my-0 [&_h1]:text-sm [&_h2]:text-sm [&_h3]:text-sm [&_h4]:text-sm [&_h1]:my-0 [&_h2]:my-0 [&_h3]:my-0 [&_h4]:my-0 [&_pre]:my-0 [&_blockquote]:my-0">
              {comment.body}
            </Markdown>
@@ -375,7 +384,7 @@ function CommentRow({
        )}

        {/* Date row */}
-        <div className="flex items-center mt-1 pl-5">
+        <div className="flex items-center mt-1">
          <div className="flex flex-col">
            <div className="text-xs text-muted-foreground">{formatDate(comment.createdAt)}</div>
            <div className="text-xs text-muted-foreground/70">{formatTime(comment.createdAt)}</div>
@@ -440,6 +449,11 @@ function CommentDetailDialog({ comment, open, onOpenChange }: CommentDetailDialo

              {/* Badges */}
              <div className="flex items-center gap-1.5 ml-auto">
+                {comment.isBot && (
+                  <span className="px-2 py-0.5 text-xs font-medium rounded bg-purple-500/10 text-purple-500">
+                    Bot
+                  </span>
+                )}
                {comment.isOutdated && (
                  <span className="px-2 py-0.5 text-xs font-medium rounded bg-yellow-500/10 text-yellow-500">
                    Outdated
@@ -850,7 +864,7 @@ export function PRCommentResolutionDialog({
    <Dialog open={open} onOpenChange={handleOpenChange}>
      <DialogContent className="max-w-3xl max-h-[80vh] flex flex-col">
        <DialogHeader>
-          <div className="flex items-center justify-between">
+          <div className="flex items-center justify-between pr-10">
            <DialogTitle className="flex items-center gap-2">
              <MessageSquare className="h-5 w-5 text-blue-500" />
              Manage PR Review Comments
--- a/apps/ui/src/components/session-manager.tsx
+++ b/apps/ui/src/components/session-manager.tsx
@@ -19,7 +19,7 @@ import {
  ArchiveRestore,
 } from 'lucide-react';
 import { Spinner } from '@/components/ui/spinner';
-import { cn } from '@/lib/utils';
+import { cn, pathsEqual } from '@/lib/utils';
 import type { SessionListItem } from '@/types/electron';
 import { useKeyboardShortcutsConfig } from '@/hooks/use-keyboard-shortcuts';
 import { getElectronAPI } from '@/lib/electron';
@@ -93,6 +93,7 @@ interface SessionManagerProps {
  currentSessionId: string | null;
  onSelectSession: (sessionId: string | null) => void;
  projectPath: string;
+  workingDirectory?: string; // Current worktree path for scoping sessions
  isCurrentSessionThinking?: boolean;
  onQuickCreateRef?: React.MutableRefObject<(() => Promise<void>) | null>;
 }
@@ -101,6 +102,7 @@ export function SessionManager({
  currentSessionId,
  onSelectSession,
  projectPath,
+  workingDirectory,
  isCurrentSessionThinking = false,
  onQuickCreateRef,
 }: SessionManagerProps) {
@@ -153,6 +155,7 @@ export function SessionManager({
    if (result.data) {
      await checkRunningSessions(result.data);
    }
+    return result;
  }, [queryClient, refetchSessions, checkRunningSessions]);

  // Check running state on initial load (runs only once when sessions first load)
@@ -177,6 +180,9 @@ export function SessionManager({
    return () => clearInterval(interval);
  }, [sessions, runningSessions.size, isCurrentSessionThinking, checkRunningSessions]);

+  // Effective working directory for session creation (worktree path or project path)
+  const effectiveWorkingDirectory = workingDirectory || projectPath;
+
  // Create new session with random name
  const handleCreateSession = async () => {
    const api = getElectronAPI();
@@ -184,7 +190,7 @@ export function SessionManager({

    const sessionName = newSessionName.trim() || generateRandomSessionName();

-    const result = await api.sessions.create(sessionName, projectPath, projectPath);
+    const result = await api.sessions.create(sessionName, projectPath, effectiveWorkingDirectory);

    if (result.success && result.session?.id) {
      setNewSessionName('');
@@ -195,19 +201,19 @@ export function SessionManager({
  };

  // Create new session directly with a random name (one-click)
-  const handleQuickCreateSession = async () => {
+  const handleQuickCreateSession = useCallback(async () => {
    const api = getElectronAPI();
    if (!api?.sessions) return;

    const sessionName = generateRandomSessionName();

-    const result = await api.sessions.create(sessionName, projectPath, projectPath);
+    const result = await api.sessions.create(sessionName, projectPath, effectiveWorkingDirectory);

    if (result.success && result.session?.id) {
      await invalidateSessions();
      onSelectSession(result.session.id);
    }
-  };
+  }, [effectiveWorkingDirectory, projectPath, invalidateSessions, onSelectSession]);

  // Expose the quick create function via ref for keyboard shortcuts
  useEffect(() => {
@@ -219,7 +225,7 @@ export function SessionManager({
        onQuickCreateRef.current = null;
      }
    };
-  }, [onQuickCreateRef, projectPath]);
+  }, [onQuickCreateRef, handleQuickCreateSession]);

  // Rename session
  const handleRenameSession = async (sessionId: string) => {
@@ -292,10 +298,11 @@ export function SessionManager({

    const result = await api.sessions.delete(sessionId);
    if (result.success) {
-      await invalidateSessions();
+      const refetchResult = await invalidateSessions();
      if (currentSessionId === sessionId) {
-        // Switch to another session or create a new one
-        const activeSessionsList = sessions.filter((s) => !s.isArchived);
+        // Switch to another session using fresh data, excluding the deleted session
+        const freshSessions = refetchResult?.data ?? [];
+        const activeSessionsList = freshSessions.filter((s) => !s.isArchived && s.id !== sessionId);
        if (activeSessionsList.length > 0) {
          onSelectSession(activeSessionsList[0].id);
        }
@@ -318,8 +325,16 @@ export function SessionManager({
    setIsDeleteAllArchivedDialogOpen(false);
  };

-  const activeSessions = sessions.filter((s) => !s.isArchived);
-  const archivedSessions = sessions.filter((s) => s.isArchived);
+  // Filter sessions by current working directory (worktree scoping)
+  const scopedSessions = sessions.filter((s) => {
+    const sessionDir = s.workingDirectory || s.projectPath;
+    // Match sessions whose workingDirectory matches the current effective directory
+    // Use pathsEqual for cross-platform path normalization (trailing slashes, separators)
+    return pathsEqual(sessionDir, effectiveWorkingDirectory);
+  });
+
+  const activeSessions = scopedSessions.filter((s) => !s.isArchived);
+  const archivedSessions = scopedSessions.filter((s) => s.isArchived);
  const displayedSessions = activeTab === 'active' ? activeSessions : archivedSessions;

  return (
--- a/apps/ui/src/components/views/agent-view.tsx
+++ b/apps/ui/src/components/views/agent-view.tsx
@@ -20,9 +20,13 @@ import { AgentInputArea } from './agent-view/input-area';
 const LG_BREAKPOINT = 1024;

 export function AgentView() {
-  const { currentProject } = useAppStore();
+  const { currentProject, getCurrentWorktree } = useAppStore();
  const [input, setInput] = useState('');
  const [currentTool, setCurrentTool] = useState<string | null>(null);
+
+  // Get the current worktree to scope sessions and agent working directory
+  const currentWorktree = currentProject ? getCurrentWorktree(currentProject.path) : null;
+  const effectiveWorkingDirectory = currentWorktree?.path || currentProject?.path;
  // Initialize session manager state - starts as true to match SSR
  // Then updates on mount based on actual screen size to prevent hydration mismatch
  const [showSessionManager, setShowSessionManager] = useState(true);
@@ -52,9 +56,10 @@ export function AgentView() {
  // Guard to prevent concurrent invocations of handleCreateSessionFromEmptyState
  const createSessionInFlightRef = useRef(false);

-  // Session management hook
+  // Session management hook - scoped to current worktree
  const { currentSessionId, handleSelectSession } = useAgentSession({
    projectPath: currentProject?.path,
+    workingDirectory: effectiveWorkingDirectory,
  });

  // Use the Electron agent hook (only if we have a session)
@@ -71,7 +76,7 @@ export function AgentView() {
    clearServerQueue,
  } = useElectronAgent({
    sessionId: currentSessionId || '',
-    workingDirectory: currentProject?.path,
+    workingDirectory: effectiveWorkingDirectory,
    model: modelSelection.model,
    thinkingLevel: modelSelection.thinkingLevel,
    onToolUse: (toolName) => {
@@ -229,6 +234,7 @@ export function AgentView() {
            currentSessionId={currentSessionId}
            onSelectSession={handleSelectSession}
            projectPath={currentProject.path}
+            workingDirectory={effectiveWorkingDirectory}
            isCurrentSessionThinking={isProcessing}
            onQuickCreateRef={quickCreateSessionRef}
          />
@@ -248,6 +254,7 @@ export function AgentView() {
          showSessionManager={showSessionManager}
          onToggleSessionManager={() => setShowSessionManager(!showSessionManager)}
          onClearChat={handleClearChat}
+          worktreeBranch={currentWorktree?.branch}
        />

        {/* Messages */}
--- a/apps/ui/src/components/views/agent-view/components/agent-header.tsx
+++ b/apps/ui/src/components/views/agent-view/components/agent-header.tsx
@@ -1,4 +1,4 @@
-import { Bot, PanelLeftClose, PanelLeft, Wrench, Trash2 } from 'lucide-react';
+import { Bot, PanelLeftClose, PanelLeft, Wrench, Trash2, GitBranch } from 'lucide-react';
 import { Button } from '@/components/ui/button';

 interface AgentHeaderProps {
@@ -11,6 +11,7 @@ interface AgentHeaderProps {
  showSessionManager: boolean;
  onToggleSessionManager: () => void;
  onClearChat: () => void;
+  worktreeBranch?: string;
 }

 export function AgentHeader({
@@ -23,6 +24,7 @@ export function AgentHeader({
  showSessionManager,
  onToggleSessionManager,
  onClearChat,
+  worktreeBranch,
 }: AgentHeaderProps) {
  return (
    <div className="flex items-center justify-between px-6 py-4 border-b border-border bg-card/50 backdrop-blur-sm">
@@ -32,10 +34,18 @@ export function AgentHeader({
        </div>
        <div>
          <h1 className="text-lg font-semibold text-foreground">AI Agent</h1>
-          <p className="text-sm text-muted-foreground">
-            {projectName}
-            {currentSessionId && !isConnected && ' - Connecting...'}
-          </p>
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <span>
+              {projectName}
+              {currentSessionId && !isConnected && ' - Connecting...'}
+            </span>
+            {worktreeBranch && (
+              <span className="inline-flex items-center gap-1 text-xs bg-muted/50 px-2 py-0.5 rounded-full border border-border">
+                <GitBranch className="w-3 h-3 shrink-0" />
+                <span className="max-w-[180px] truncate">{worktreeBranch}</span>
+              </span>
+            )}
+          </div>
        </div>
      </div>

--- a/apps/ui/src/components/views/agent-view/hooks/use-agent-session.ts
+++ b/apps/ui/src/components/views/agent-view/hooks/use-agent-session.ts
@@ -6,6 +6,7 @@ const logger = createLogger('AgentSession');

 interface UseAgentSessionOptions {
  projectPath: string | undefined;
+  workingDirectory?: string; // Current worktree path for per-worktree session persistence
 }

 interface UseAgentSessionResult {
@@ -13,49 +14,56 @@ interface UseAgentSessionResult {
  handleSelectSession: (sessionId: string | null) => void;
 }

-export function useAgentSession({ projectPath }: UseAgentSessionOptions): UseAgentSessionResult {
+export function useAgentSession({
+  projectPath,
+  workingDirectory,
+}: UseAgentSessionOptions): UseAgentSessionResult {
  const { setLastSelectedSession, getLastSelectedSession } = useAppStore();
  const [currentSessionId, setCurrentSessionId] = useState<string | null>(null);

  // Track if initial session has been loaded
  const initialSessionLoadedRef = useRef(false);

+  // Use workingDirectory as the persistence key so sessions are scoped per worktree
+  const persistenceKey = workingDirectory || projectPath;
+
  // Handle session selection with persistence
  const handleSelectSession = useCallback(
    (sessionId: string | null) => {
      setCurrentSessionId(sessionId);
-      // Persist the selection for this project
-      if (projectPath) {
-        setLastSelectedSession(projectPath, sessionId);
+      // Persist the selection for this worktree/project
+      if (persistenceKey) {
+        setLastSelectedSession(persistenceKey, sessionId);
      }
    },
-    [projectPath, setLastSelectedSession]
+    [persistenceKey, setLastSelectedSession]
  );

-  // Restore last selected session when switching to Agent view or when project changes
+  // Restore last selected session when switching to Agent view or when worktree changes
  useEffect(() => {
-    if (!projectPath) {
+    if (!persistenceKey) {
      // No project, reset
      setCurrentSessionId(null);
      initialSessionLoadedRef.current = false;
      return;
    }

-    // Only restore once per project
+    // Only restore once per persistence key
    if (initialSessionLoadedRef.current) return;
    initialSessionLoadedRef.current = true;

-    const lastSessionId = getLastSelectedSession(projectPath);
+    const lastSessionId = getLastSelectedSession(persistenceKey);
    if (lastSessionId) {
      logger.info('Restoring last selected session:', lastSessionId);
      setCurrentSessionId(lastSessionId);
    }
-  }, [projectPath, getLastSelectedSession]);
+  }, [persistenceKey, getLastSelectedSession]);

-  // Reset initialSessionLoadedRef when project changes
+  // Reset when worktree/project changes - clear current session and allow restore
  useEffect(() => {
    initialSessionLoadedRef.current = false;
-  }, [projectPath]);
+    setCurrentSessionId(null);
+  }, [persistenceKey]);

  return {
    currentSessionId,
--- a/apps/ui/src/components/views/board-view.tsx
+++ b/apps/ui/src/components/views/board-view.tsx
@@ -486,6 +486,11 @@ export function BoardView() {
    } else {
      // Specific worktree selected - find it by path
      found = worktrees.find((w) => !w.isMain && pathsEqual(w.path, currentWorktreePath));
+      // If the selected worktree no longer exists (e.g. just deleted),
+      // fall back to main to prevent rendering with undefined worktree
+      if (!found) {
+        found = worktrees.find((w) => w.isMain);
+      }
    }
    if (!found) return undefined;
    // Ensure all required WorktreeInfo fields are present
@@ -1953,6 +1958,16 @@ export function BoardView() {
        }
        defaultDeleteBranch={getDefaultDeleteBranch(currentProject.path)}
        onDeleted={(deletedWorktree, _deletedBranch) => {
+          // If the deleted worktree was currently selected, immediately reset to main
+          // to prevent the UI from trying to render a non-existent worktree view
+          if (
+            currentWorktreePath !== null &&
+            pathsEqual(currentWorktreePath, deletedWorktree.path)
+          ) {
+            const mainBranch = worktrees.find((w) => w.isMain)?.branch || 'main';
+            setCurrentWorktree(currentProject.path, null, mainBranch);
+          }
+
          // Reset features that were assigned to the deleted worktree (by branch)
          hookFeatures.forEach((feature) => {
            // Match by branch name since worktreePath is no longer stored
--- a/apps/ui/src/components/views/board-view/hooks/use-board-actions.ts
+++ b/apps/ui/src/components/views/board-view/hooks/use-board-actions.ts
@@ -217,9 +217,14 @@ export function useBoardActions({
      const needsTitleGeneration =
        !titleWasGenerated && !featureData.title.trim() && featureData.description.trim();

-      const initialStatus = featureData.initialStatus || 'backlog';
+      const {
+        initialStatus: requestedStatus,
+        workMode: _workMode,
+        ...restFeatureData
+      } = featureData;
+      const initialStatus = requestedStatus || 'backlog';
      const newFeatureData = {
-        ...featureData,
+        ...restFeatureData,
        title: titleWasGenerated ? titleForBranch : featureData.title,
        titleGenerating: needsTitleGeneration,
        status: initialStatus,
@@ -1161,10 +1166,15 @@ export function useBoardActions({

  const handleDuplicateFeature = useCallback(
    async (feature: Feature, asChild: boolean = false) => {
-      // Copy all feature data, stripping id, status (handled by create), and runtime/state fields
+      // Copy all feature data, stripping id, status (handled by create), and runtime/state fields.
+      // Also strip initialStatus and workMode which are transient creation parameters that
+      // should not carry over to duplicates (initialStatus: 'in_progress' would cause
+      // the duplicate to immediately appear in "In Progress" instead of "Backlog").
      const {
        id: _id,
        status: _status,
+        initialStatus: _initialStatus,
+        workMode: _workMode,
        startedAt: _startedAt,
        error: _error,
        summary: _summary,
@@ -1212,6 +1222,8 @@ export function useBoardActions({
        const {
          id: _id,
          status: _status,
+          initialStatus: _initialStatus,
+          workMode: _workMode,
          startedAt: _startedAt,
          error: _error,
          summary: _summary,
--- a/apps/ui/src/components/views/board-view/worktree-panel/components/worktree-actions-dropdown.tsx
+++ b/apps/ui/src/components/views/board-view/worktree-panel/components/worktree-actions-dropdown.tsx
@@ -399,29 +399,57 @@ export function WorktreeActionsDropdown({
                  Open in Browser
                </DropdownMenuItem>
              )}
-            <DropdownMenuItem onClick={() => onViewDevServerLogs(worktree)} className="text-xs">
-              <ScrollText className="w-3.5 h-3.5 mr-2" />
-              View Logs
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              onClick={() => onStopDevServer(worktree)}
-              className="text-xs text-destructive focus:text-destructive"
-            >
-              <Square className="w-3.5 h-3.5 mr-2" />
-              Stop Dev Server
-            </DropdownMenuItem>
+            {/* Stop Dev Server - split button: click main area to stop, chevron for view logs */}
+            <DropdownMenuSub>
+              <div className="flex items-center">
+                <DropdownMenuItem
+                  onClick={() => onStopDevServer(worktree)}
+                  className="text-xs flex-1 pr-0 rounded-r-none text-destructive focus:text-destructive"
+                >
+                  <Square className="w-3.5 h-3.5 mr-2" />
+                  Stop Dev Server
+                </DropdownMenuItem>
+                <DropdownMenuSubTrigger className="text-xs px-1 rounded-l-none border-l border-border/30 h-8" />
+              </div>
+              <DropdownMenuSubContent>
+                <DropdownMenuItem onClick={() => onViewDevServerLogs(worktree)} className="text-xs">
+                  <ScrollText className="w-3.5 h-3.5 mr-2" />
+                  View Dev Server Logs
+                </DropdownMenuItem>
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
            <DropdownMenuSeparator />
          </>
        ) : (
          <>
-            <DropdownMenuItem
-              onClick={() => onStartDevServer(worktree)}
-              disabled={isStartingDevServer}
-              className="text-xs"
-            >
-              <Play className={cn('w-3.5 h-3.5 mr-2', isStartingDevServer && 'animate-pulse')} />
-              {isStartingDevServer ? 'Starting...' : 'Start Dev Server'}
-            </DropdownMenuItem>
+            {/* Start Dev Server - split button: click main area to start, chevron for view logs */}
+            <DropdownMenuSub>
+              <div className="flex items-center">
+                <DropdownMenuItem
+                  onClick={() => onStartDevServer(worktree)}
+                  disabled={isStartingDevServer}
+                  className="text-xs flex-1 pr-0 rounded-r-none"
+                >
+                  <Play
+                    className={cn('w-3.5 h-3.5 mr-2', isStartingDevServer && 'animate-pulse')}
+                  />
+                  {isStartingDevServer ? 'Starting...' : 'Start Dev Server'}
+                </DropdownMenuItem>
+                <DropdownMenuSubTrigger
+                  className={cn(
+                    'text-xs px-1 rounded-l-none border-l border-border/30 h-8',
+                    isStartingDevServer && 'opacity-50 cursor-not-allowed'
+                  )}
+                  disabled={isStartingDevServer}
+                />
+              </div>
+              <DropdownMenuSubContent>
+                <DropdownMenuItem onClick={() => onViewDevServerLogs(worktree)} className="text-xs">
+                  <ScrollText className="w-3.5 h-3.5 mr-2" />
+                  View Dev Server Logs
+                </DropdownMenuItem>
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
            <DropdownMenuSeparator />
          </>
        )}
--- a/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-dev-servers.ts
+++ b/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-dev-servers.ts
@@ -456,13 +456,20 @@ export function useDevServers({ projectPath }: UseDevServersOptions) {
          });
          // Start port detection timeout
          startPortDetectionTimer(key);
-          toast.success('Dev server started, detecting port...');
+          toast.success('Dev server started, detecting port...', {
+            description: 'Logs are now visible in the dev server panel.',
+          });
        } else {
-          toast.error(result.error || 'Failed to start dev server');
+          toast.error(result.error || 'Failed to start dev server', {
+            description: 'Check the dev server logs panel for details.',
+          });
        }
      } catch (error) {
        logger.error('Start dev server failed:', error);
-        toast.error('Failed to start dev server');
+        toast.error('Failed to start dev server', {
+          description:
+            error instanceof Error ? error.message : 'Check the dev server logs panel for details.',
+        });
      } finally {
        setIsStartingDevServer(false);
      }
--- a/apps/ui/src/components/views/board-view/worktree-panel/worktree-panel.tsx
+++ b/apps/ui/src/components/views/board-view/worktree-panel/worktree-panel.tsx
@@ -659,6 +659,18 @@ export function WorktreePanel({
    // Keep logPanelWorktree set for smooth close animation
  }, []);

+  // Wrap handleStartDevServer to auto-open the logs panel so the user
+  // can see output immediately (including failure reasons)
+  const handleStartDevServerAndShowLogs = useCallback(
+    async (worktree: WorktreeInfo) => {
+      // Open logs panel immediately so output is visible from the start
+      setLogPanelWorktree(worktree);
+      setLogPanelOpen(true);
+      await handleStartDevServer(worktree);
+    },
+    [handleStartDevServer]
+  );
+
  // Handle opening the push to remote dialog
  const handlePushNewBranch = useCallback((worktree: WorktreeInfo) => {
    setPushToRemoteWorktree(worktree);
@@ -937,7 +949,7 @@ export function WorktreePanel({
            onResolveConflicts={onResolveConflicts}
            onMerge={handleMerge}
            onDeleteWorktree={onDeleteWorktree}
-            onStartDevServer={handleStartDevServer}
+            onStartDevServer={handleStartDevServerAndShowLogs}
            onStopDevServer={handleStopDevServer}
            onOpenDevServerUrl={handleOpenDevServerUrl}
            onViewDevServerLogs={handleViewDevServerLogs}
@@ -1181,7 +1193,7 @@ export function WorktreePanel({
            onResolveConflicts={onResolveConflicts}
            onMerge={handleMerge}
            onDeleteWorktree={onDeleteWorktree}
-            onStartDevServer={handleStartDevServer}
+            onStartDevServer={handleStartDevServerAndShowLogs}
            onStopDevServer={handleStopDevServer}
            onOpenDevServerUrl={handleOpenDevServerUrl}
            onViewDevServerLogs={handleViewDevServerLogs}
@@ -1288,7 +1300,7 @@ export function WorktreePanel({
                onResolveConflicts={onResolveConflicts}
                onMerge={handleMerge}
                onDeleteWorktree={onDeleteWorktree}
-                onStartDevServer={handleStartDevServer}
+                onStartDevServer={handleStartDevServerAndShowLogs}
                onStopDevServer={handleStopDevServer}
                onOpenDevServerUrl={handleOpenDevServerUrl}
                onViewDevServerLogs={handleViewDevServerLogs}
@@ -1375,7 +1387,7 @@ export function WorktreePanel({
                      onResolveConflicts={onResolveConflicts}
                      onMerge={handleMerge}
                      onDeleteWorktree={onDeleteWorktree}
-                      onStartDevServer={handleStartDevServer}
+                      onStartDevServer={handleStartDevServerAndShowLogs}
                      onStopDevServer={handleStopDevServer}
                      onOpenDevServerUrl={handleOpenDevServerUrl}
                      onViewDevServerLogs={handleViewDevServerLogs}
--- a/apps/ui/src/lib/electron.ts
+++ b/apps/ui/src/lib/electron.ts
@@ -339,6 +339,8 @@ export interface PRReviewComment {
  side?: string;
  /** The commit ID the comment was made on */
  commitId?: string;
+  /** Whether the comment author is a bot/app account */
+  isBot?: boolean;
 }

 export interface GitHubAPI {
--- a/apps/ui/src/types/electron.d.ts
+++ b/apps/ui/src/types/electron.d.ts
@@ -69,6 +69,7 @@ export interface SessionListItem {
  id: string;
  name: string;
  projectPath: string;
+  workingDirectory?: string; // The worktree/directory this session runs in
  createdAt: string;
  updatedAt: string;
  messageCount: number;