Bug fixes and stability improvements (#815)

* fix(copilot): correct tool.execution_complete event handling The CopilotProvider was using incorrect event type and data structure for tool execution completion events from the @github/copilot-sdk, causing tool call outputs to be empty. Changes: - Update event type from 'tool.execution_end' to 'tool.execution_complete' - Fix data structure to use nested result.content instead of flat result - Fix error structure to use error.message instead of flat error - Add success field to match SDK event structure - Add tests for empty and missing result handling This aligns with the official @github/copilot-sdk v0.1.16 types defined in session-events.d.ts. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * test(copilot): add edge case test for error with code field Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * refactor(copilot): improve error handling and code quality Code review improvements: - Extract magic string '[ERROR]' to TOOL_ERROR_PREFIX constant - Add null-safe error handling with direct error variable assignment - Include error codes in error messages for better debugging - Add JSDoc documentation for tool.execution_complete handler - Update tests to verify error codes are displayed - Add missing tool_use_id assertion in error test These changes improve: - Code maintainability (no magic strings) - Debugging experience (error codes now visible) - Type safety (explicit null checks) - Test coverage (verify error code formatting) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * Changes from fix/bug-fixes-1-0 * test(copilot): add edge case test for error with code field Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * Changes from fix/bug-fixes-1-0 * fix: Handle detached HEAD state in worktree discovery and recovery * fix: Remove unused isDevServerStarting prop and md: breakpoint classes * fix: Add missing dependency and sanitize persisted cache data * feat: Ensure NODE_ENV is set to test in vitest configs * feat: Configure Playwright to run only E2E tests * fix: Improve PR tracking and dev server lifecycle management * feat: Add settings-based defaults for planning mode, model config, and custom providers. Fixes #816 * feat: Add worktree and branch selector to graph view * fix: Add timeout and error handling for worktree HEAD ref resolution * fix: use absolute icon path and place icon outside asar on Linux The hicolor icon theme index only lists sizes up to 512x512, so an icon installed only at 1024x1024 is invisible to GNOME/KDE's theme resolver, causing both the app launcher and taskbar to show a generic icon. Additionally, BrowserWindow.icon cannot be read by the window manager when the file is inside app.asar. - extraResources: copy logo_larger.png to resources/ (outside asar) so it lands at /opt/Automaker/resources/logo_larger.png on install - linux.desktop.Icon: set to the absolute resources path, bypassing the hicolor theme lookup and its size constraints entirely - icon-manager.ts: on Linux production use process.resourcesPath so BrowserWindow receives a real filesystem path the WM can read directly Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: use linux.desktop.entry for custom desktop Icon field electron-builder v26 rejects arbitrary keys in linux.desktop — the correct schema wraps custom .desktop overrides inside desktop.entry. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: set desktop name on Linux so taskbar uses the correct app icon Without app.setDesktopName(), the window manager cannot associate the running Electron process with automaker.desktop. GNOME/KDE fall back to _NET_WM_ICON which defaults to Electron's own bundled icon. Calling app.setDesktopName('automaker.desktop') before any window is created sets the _GTK_APPLICATION_ID hint and XDG app_id so the WM picks up the desktop entry's Icon for the taskbar. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Fix: memory and context views mobile friendly (#818) * Changes from fix/memory-and-context-mobile-friendly * fix: Improve file extension detection and add path traversal protection * refactor: Extract file extension utilities and add path traversal guards Code review improvements: - Extract isMarkdownFilename and isImageFilename to shared image-utils.ts - Remove duplicated code from context-view.tsx and memory-view.tsx - Add path traversal guard for context fixture utilities (matching memory) - Add 7 new tests for context fixture path traversal protection - Total 61 tests pass Addresses code review feedback from PR #813 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * test: Add e2e tests for profiles crud and board background persistence * Update apps/ui/playwright.config.ts Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * fix: Add robust test navigation handling and file filtering * fix: Format NODE_OPTIONS configuration on single line * test: Update profiles and board background persistence tests * test: Replace iPhone 13 Pro with Pixel 5 for mobile test consistency * Update apps/ui/src/components/views/context-view.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * chore: Remove test project directory * feat: Filter context files by type and improve mobile menu visibility --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * fix: Improve test reliability and localhost handling * chore: Use explicit TEST_USE_EXTERNAL_BACKEND env var for server cleanup * feat: Add E2E/CI mock mode for provider factory and auth verification * feat: Add remoteBranch parameter to pull and rebase operations * chore: Enhance E2E testing setup with worker isolation and auth state management - Updated .gitignore to include worker-specific test fixtures. - Modified e2e-tests.yml to implement test sharding for improved CI performance. - Refactored global setup to authenticate once and save session state for reuse across tests. - Introduced worker-isolated fixture paths to prevent conflicts during parallel test execution. - Improved test navigation and loading handling for better reliability. - Updated various test files to utilize new auth state management and fixture paths. * fix: Update Playwright configuration and improve test reliability - Increased the number of workers in Playwright configuration for better parallelism in CI environments. - Enhanced the board background persistence test to ensure dropdown stability by waiting for the list to populate before interaction, improving test reliability. * chore: Simplify E2E test configuration and enhance mock implementations - Updated e2e-tests.yml to run tests in a single shard for streamlined CI execution. - Enhanced unit tests for worktree list handling by introducing a mock for execGitCommand, improving test reliability and coverage. - Refactored setup functions to better manage command mocks for git operations in tests. - Improved error handling in mkdirSafe function to account for undefined stats in certain environments. * refactor: Improve test configurations and enhance error handling - Updated Playwright configuration to clear VITE_SERVER_URL, ensuring the frontend uses the Vite proxy and preventing cookie domain mismatches. - Enhanced MergeRebaseDialog logic to normalize selectedBranch for better handling of various ref formats. - Improved global setup with a more robust backend health check, throwing an error if the backend is not healthy after retries. - Refactored project creation tests to handle file existence checks more reliably. - Added error handling for missing E2E source fixtures to guide setup process. - Enhanced memory navigation to handle sandbox dialog visibility more effectively. * refactor: Enhance Git command execution and improve test configurations - Updated Git command execution to merge environment paths correctly, ensuring proper command execution context. - Refactored the Git initialization process to handle errors more gracefully and ensure user configuration is set before creating the initial commit. - Improved test configurations by updating Playwright test identifiers for better clarity and consistency across different project states. - Enhanced cleanup functions in tests to handle directory removal more robustly, preventing errors during test execution. * fix: Resolve React hooks errors from duplicate instances in dependency tree * style: Format alias configuration for improved readability --------- Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Co-authored-by: DhanushSantosh <dhanushsantoshs05@gmail.com> Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
2026-03-17 22:13:08 +00:00 · 2026-02-27 17:03:29 -08:00
parent 70d400793b
commit 0196911d59
234 changed files with 15881 additions and 2916 deletions
--- a/apps/ui/src/components/views/board-view.tsx
+++ b/apps/ui/src/components/views/board-view.tsx
@@ -34,6 +34,7 @@ import type {
  BacklogPlanResult,
  FeatureStatusWithPipeline,
  FeatureTemplate,
+  ReasoningEffort,
 } from '@automaker/types';
 import { pathsEqual } from '@/lib/utils';
 import { toast } from 'sonner';
@@ -977,23 +978,27 @@ export function BoardView() {

  // Helper that creates a feature and immediately starts it (used by conflict handlers and the Make button)
  const handleAddAndStartFeature = useCallback(
-    async (featureData: Parameters<typeof handleAddFeature>[0]) => {
-      // Capture existing feature IDs before adding
-      const featuresBeforeIds = new Set(useAppStore.getState().features.map((f) => f.id));
+    async (featureData: Parameters<typeof handleAddFeature>[0]): Promise<string | null> => {
+      let createdFeatureId: string | null = null;
      try {
        // Create feature directly with in_progress status to avoid brief backlog flash
-        await handleAddFeature({ ...featureData, initialStatus: 'in_progress' });
+        const createdFeature = await handleAddFeature({
+          ...featureData,
+          initialStatus: 'in_progress',
+        });
+        createdFeatureId = createdFeature?.id ?? null;
      } catch (error) {
        logger.error('Failed to create feature:', error);
        toast.error('Failed to create feature', {
          description: error instanceof Error ? error.message : 'An error occurred',
        });
-        return;
+        return null;
      }

-      // Find the newly created feature by looking for an ID that wasn't in the original set
      const latestFeatures = useAppStore.getState().features;
-      const newFeature = latestFeatures.find((f) => !featuresBeforeIds.has(f.id));
+      const newFeature = createdFeatureId
+        ? latestFeatures.find((f) => f.id === createdFeatureId)
+        : undefined;

      if (newFeature) {
        try {
@@ -1010,6 +1015,8 @@ export function BoardView() {
          description: 'The feature was created but could not be started automatically.',
        });
      }
+
+      return createdFeatureId;
    },
    [handleAddFeature, handleStartImplementation]
  );
@@ -1018,7 +1025,12 @@ export function BoardView() {
  const handleQuickAdd = useCallback(
    async (
      description: string,
-      modelEntry: { model: string; thinkingLevel?: string; reasoningEffort?: string }
+      modelEntry: {
+        model: string;
+        thinkingLevel?: string;
+        reasoningEffort?: string;
+        providerId?: string;
+      }
    ) => {
      // Generate a title from the first line of the description
      const title = description.split('\n')[0].substring(0, 100);
@@ -1032,7 +1044,8 @@ export function BoardView() {
        skipTests: defaultSkipTests,
        model: resolveModelString(modelEntry.model) as ModelAlias,
        thinkingLevel: (modelEntry.thinkingLevel as ThinkingLevel) || 'none',
-        reasoningEffort: modelEntry.reasoningEffort,
+        reasoningEffort: modelEntry.reasoningEffort as ReasoningEffort,
+        providerId: modelEntry.providerId,
        branchName: addFeatureUseSelectedWorktreeBranch ? selectedWorktreeBranch : undefined,
        priority: 2,
        planningMode: useAppStore.getState().defaultPlanningMode ?? 'skip',
@@ -1053,7 +1066,12 @@ export function BoardView() {
  const handleQuickAddAndStart = useCallback(
    async (
      description: string,
-      modelEntry: { model: string; thinkingLevel?: string; reasoningEffort?: string }
+      modelEntry: {
+        model: string;
+        thinkingLevel?: string;
+        reasoningEffort?: string;
+        providerId?: string;
+      }
    ) => {
      // Generate a title from the first line of the description
      const title = description.split('\n')[0].substring(0, 100);
@@ -1067,7 +1085,8 @@ export function BoardView() {
        skipTests: defaultSkipTests,
        model: resolveModelString(modelEntry.model) as ModelAlias,
        thinkingLevel: (modelEntry.thinkingLevel as ThinkingLevel) || 'none',
-        reasoningEffort: modelEntry.reasoningEffort,
+        reasoningEffort: modelEntry.reasoningEffort as ReasoningEffort,
+        providerId: modelEntry.providerId,
        branchName: addFeatureUseSelectedWorktreeBranch ? selectedWorktreeBranch : undefined,
        priority: 2,
        planningMode: useAppStore.getState().defaultPlanningMode ?? 'skip',
@@ -1104,6 +1123,8 @@ export function BoardView() {
      title: prInfo.title,
      // Pass the worktree's branch so features are created on the correct worktree
      headRefName: worktree.branch,
+      // Pass the PR URL so features are created with prUrl set
+      url: prInfo.url,
    });
    setShowPRCommentDialog(true);
  }, []);
@@ -1132,11 +1153,22 @@ export function BoardView() {
        priority: 1,
        planningMode: 'skip' as const,
        requirePlanApproval: false,
+        dependencies: [],
      };

-      await handleAddAndStartFeature(featureData);
+      const createdFeatureId = await handleAddAndStartFeature(featureData);
+
+      // Set prUrl on the created feature if the PR has a URL
+      if (prInfo.url && createdFeatureId) {
+        updateFeature(createdFeatureId, { prUrl: prInfo.url });
+        try {
+          await persistFeatureUpdate(createdFeatureId, { prUrl: prInfo.url });
+        } catch (error) {
+          logger.error('Failed to persist PR URL on created feature:', error);
+        }
+      }
    },
-    [handleAddAndStartFeature, defaultSkipTests]
+    [handleAddAndStartFeature, defaultSkipTests, updateFeature, persistFeatureUpdate]
  );

  // Handler for resolving conflicts - opens dialog to select remote branch, then creates a feature
--- a/apps/ui/src/components/views/board-view/components/kanban-card/agent-info-panel.tsx
+++ b/apps/ui/src/components/views/board-view/components/kanban-card/agent-info-panel.tsx
@@ -13,6 +13,7 @@ import { getProviderIconForModel } from '@/components/ui/provider-icon';
 import { useFeature, useAgentOutput } from '@/hooks/queries';
 import { queryKeys } from '@/lib/query-keys';
 import { getFirstNonEmptySummary } from '@/lib/summary-selection';
+import { useAppStore } from '@/store/app-store';

 /**
 * Formats thinking level for compact display
@@ -64,6 +65,21 @@ export const AgentInfoPanel = memo(function AgentInfoPanel({
  const queryClient = useQueryClient();
  const [isSummaryDialogOpen, setIsSummaryDialogOpen] = useState(false);
  const [isTodosExpanded, setIsTodosExpanded] = useState(false);
+
+  // Get providers from store for provider-aware model name display
+  // This allows formatModelName to show provider-specific model names (e.g., "GLM 4.7" instead of "Sonnet 4.5")
+  // when a feature was executed using a Claude-compatible provider
+  const claudeCompatibleProviders = useAppStore((state) => state.claudeCompatibleProviders);
+
+  // Memoize the format options to avoid recreating the object on every render
+  const modelFormatOptions = useMemo(
+    () => ({
+      providerId: feature.providerId,
+      claudeCompatibleProviders,
+    }),
+    [feature.providerId, claudeCompatibleProviders]
+  );
+
  // Track real-time task status updates from WebSocket events
  const [taskStatusMap, setTaskStatusMap] = useState<
    Map<string, 'pending' | 'in_progress' | 'completed'>
@@ -74,7 +90,7 @@ export const AgentInfoPanel = memo(function AgentInfoPanel({
  const [lastWsEventTimestamp, setLastWsEventTimestamp] = useState<number | null>(null);

  // Determine if we should poll for updates
-  const shouldFetchData = feature.status !== 'backlog';
+  const shouldFetchData = feature.status !== 'backlog' && feature.status !== 'merge_conflict';

  // Track whether we're receiving WebSocket events (within threshold)
  // Use a state to trigger re-renders when the WebSocket connection becomes stale
@@ -242,9 +258,7 @@ export const AgentInfoPanel = memo(function AgentInfoPanel({
    return agentInfo?.todos || [];
  }, [
    freshPlanSpec,
-    feature.planSpec?.tasks,
-    feature.planSpec?.tasksCompleted,
-    feature.planSpec?.currentTaskId,
+    feature.planSpec,
    agentInfo?.todos,
    taskStatusMap,
    taskSummaryMap,
@@ -314,7 +328,7 @@ export const AgentInfoPanel = memo(function AgentInfoPanel({
  }, [feature.id, shouldListenToEvents]);

  // Model/Preset Info for Backlog Cards
-  if (feature.status === 'backlog') {
+  if (feature.status === 'backlog' || feature.status === 'merge_conflict') {
    const provider = getProviderFromModel(feature.model);
    const isCodex = provider === 'codex';
    const isClaude = provider === 'claude';
@@ -327,7 +341,9 @@ export const AgentInfoPanel = memo(function AgentInfoPanel({
              const ProviderIcon = getProviderIconForModel(feature.model);
              return <ProviderIcon className="w-3 h-3" />;
            })()}
-            <span className="font-medium">{formatModelName(feature.model ?? DEFAULT_MODEL)}</span>
+            <span className="font-medium">
+              {formatModelName(feature.model ?? DEFAULT_MODEL, modelFormatOptions)}
+            </span>
          </div>
          {isClaude && feature.thinkingLevel && feature.thinkingLevel !== 'none' ? (
            <div className="flex items-center gap-1 text-purple-400">
@@ -373,7 +389,9 @@ export const AgentInfoPanel = memo(function AgentInfoPanel({
                const ProviderIcon = getProviderIconForModel(feature.model);
                return <ProviderIcon className="w-3 h-3" />;
              })()}
-              <span className="font-medium">{formatModelName(feature.model ?? DEFAULT_MODEL)}</span>
+              <span className="font-medium">
+                {formatModelName(feature.model ?? DEFAULT_MODEL, modelFormatOptions)}
+              </span>
            </div>
            {agentInfo?.currentPhase && (
              <div
--- a/apps/ui/src/components/views/board-view/components/kanban-card/card-actions.tsx
+++ b/apps/ui/src/components/views/board-view/components/kanban-card/card-actions.tsx
@@ -39,7 +39,7 @@ export const CardActions = memo(function CardActions({
  feature,
  isCurrentAutoTask,
  isRunningTask = false,
-  hasContext: _hasContext,
+  hasContext = false,
  shortcutKey,
  isSelectionMode = false,
  onEdit,
@@ -54,6 +54,8 @@ export const CardActions = memo(function CardActions({
  onViewPlan,
  onApprovePlan,
 }: CardActionsProps) {
+  const showBacklogLogsButton = hasContext && !!onViewOutput;
+
  // Hide all actions when in selection mode
  if (isSelectionMode) {
    return null;
@@ -243,7 +245,7 @@ export const CardActions = memo(function CardActions({
                      onViewOutput();
                    }}
                    onPointerDown={(e) => e.stopPropagation()}
-                    data-testid={`view-output-inprogress-${feature.id}`}
+                    data-testid={`view-output-${feature.id}`}
                  >
                    <FileText className="w-3 h-3" />
                  </Button>
@@ -348,6 +350,7 @@ export const CardActions = memo(function CardActions({
      {!isCurrentAutoTask &&
        isRunningTask &&
        (feature.status === 'backlog' ||
+          feature.status === 'merge_conflict' ||
          feature.status === 'interrupted' ||
          feature.status === 'ready') && (
          <>
@@ -395,6 +398,7 @@ export const CardActions = memo(function CardActions({
      {!isCurrentAutoTask &&
        !isRunningTask &&
        (feature.status === 'backlog' ||
+          feature.status === 'merge_conflict' ||
          feature.status === 'interrupted' ||
          feature.status === 'ready') && (
          <>
@@ -412,6 +416,22 @@ export const CardActions = memo(function CardActions({
              <Edit className="w-3 h-3 mr-1" />
              Edit
            </Button>
+            {showBacklogLogsButton && (
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-7 text-xs px-2"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onViewOutput();
+                }}
+                onPointerDown={(e) => e.stopPropagation()}
+                data-testid={`view-output-backlog-${feature.id}`}
+                title="View Logs"
+              >
+                <FileText className="w-3 h-3" />
+              </Button>
+            )}
            {feature.planSpec?.content && onViewPlan && (
              <Button
                variant="outline"
@@ -440,8 +460,12 @@ export const CardActions = memo(function CardActions({
                onPointerDown={(e) => e.stopPropagation()}
                data-testid={`make-${feature.id}`}
              >
-                <PlayCircle className="w-3 h-3 mr-1" />
-                Make
+                {feature.status === 'merge_conflict' ? (
+                  <RotateCcw className="w-3 h-3 mr-1" />
+                ) : (
+                  <PlayCircle className="w-3 h-3 mr-1" />
+                )}
+                {feature.status === 'merge_conflict' ? 'Restart' : 'Make'}
              </Button>
            )}
          </>
--- a/apps/ui/src/components/views/board-view/components/kanban-card/card-badges.tsx
+++ b/apps/ui/src/components/views/board-view/components/kanban-card/card-badges.tsx
@@ -3,7 +3,7 @@ import { memo, useEffect, useMemo, useState } from 'react';
 import { Feature, useAppStore } from '@/store/app-store';
 import { cn } from '@/lib/utils';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
-import { AlertCircle, Lock, Hand, Sparkles, SkipForward } from 'lucide-react';
+import { AlertCircle, AlertTriangle, Lock, Hand, Sparkles, SkipForward } from 'lucide-react';
 import { getBlockingDependencies } from '@automaker/dependency-resolver';
 import { useShallow } from 'zustand/react/shallow';
 import { usePipelineConfig } from '@/hooks/queries/use-pipeline';
@@ -18,33 +18,61 @@ interface CardBadgesProps {

 /**
 * CardBadges - Shows error badges below the card header
- * Note: Blocked/Lock badges are now shown in PriorityBadges for visual consistency
+ * Note: Merge conflict badge is aligned with the top badge row for visual consistency
 */
 export const CardBadges = memo(function CardBadges({ feature }: CardBadgesProps) {
-  if (!feature.error) {
+  const showMergeConflict = feature.status === 'merge_conflict';
+  const mergeConflictOffsetClass = feature.priority ? 'left-9' : 'left-2';
+  if (!feature.error && !showMergeConflict) {
    return null;
  }

  return (
-    <div className="flex flex-wrap items-center gap-1.5 px-3 pt-1.5 min-h-[24px]">
+    <>
+      {/* Merge conflict badge */}
+      {showMergeConflict && (
+        <div className={cn('absolute top-2 z-10', mergeConflictOffsetClass)}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div
+                className={cn(
+                  uniformBadgeClass,
+                  'bg-[var(--status-warning-bg)] border-[var(--status-warning)]/40 text-[var(--status-warning)]'
+                )}
+                data-testid={`merge-conflict-badge-${feature.id}`}
+              >
+                <AlertTriangle className="w-3.5 h-3.5" />
+              </div>
+            </TooltipTrigger>
+            <TooltipContent side="bottom" className="text-xs max-w-[250px]">
+              <p>Merge Conflict: automatic merge failed and requires manual resolution</p>
+            </TooltipContent>
+          </Tooltip>
+        </div>
+      )}
+
      {/* Error badge */}
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <div
-            className={cn(
-              uniformBadgeClass,
-              'bg-[var(--status-error-bg)] border-[var(--status-error)]/40 text-[var(--status-error)]'
-            )}
-            data-testid={`error-badge-${feature.id}`}
-          >
-            <AlertCircle className="w-3.5 h-3.5" />
-          </div>
-        </TooltipTrigger>
-        <TooltipContent side="bottom" className="text-xs max-w-[250px]">
-          <p>{feature.error}</p>
-        </TooltipContent>
-      </Tooltip>
-    </div>
+      {feature.error && (
+        <div className="flex flex-wrap items-center gap-1.5 px-3 pt-1.5 min-h-[24px]">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div
+                className={cn(
+                  uniformBadgeClass,
+                  'bg-[var(--status-error-bg)] border-[var(--status-error)]/40 text-[var(--status-error)]'
+                )}
+                data-testid={`error-badge-${feature.id}`}
+              >
+                <AlertCircle className="w-3.5 h-3.5" />
+              </div>
+            </TooltipTrigger>
+            <TooltipContent side="bottom" className="text-xs max-w-[250px]">
+              <p>{feature.error}</p>
+            </TooltipContent>
+          </Tooltip>
+        </div>
+      )}
+    </>
  );
 });

--- a/apps/ui/src/components/views/board-view/components/kanban-card/card-header.tsx
+++ b/apps/ui/src/components/views/board-view/components/kanban-card/card-header.tsx
@@ -1,4 +1,4 @@
-import { memo, useState } from 'react';
+import { memo, useState, useMemo } from 'react';
 import type { DraggableAttributes, DraggableSyntheticListeners } from '@dnd-kit/core';
 import { Feature } from '@/store/app-store';
 import { cn } from '@/lib/utils';
@@ -30,6 +30,7 @@ import { CountUpTimer } from '@/components/ui/count-up-timer';
 import { formatModelName, DEFAULT_MODEL } from '@/lib/agent-context-parser';
 import { DeleteConfirmDialog } from '@/components/ui/delete-confirm-dialog';
 import { getProviderIconForModel } from '@/components/ui/provider-icon';
+import { useAppStore } from '@/store/app-store';

 function DuplicateMenuItems({
  onDuplicate,
@@ -107,6 +108,7 @@ interface CardHeaderProps {
  isDraggable: boolean;
  isCurrentAutoTask: boolean;
  isSelectionMode?: boolean;
+  hasContext?: boolean;
  onEdit: () => void;
  onDelete: () => void;
  onViewOutput?: () => void;
@@ -123,6 +125,7 @@ export const CardHeaderSection = memo(function CardHeaderSection({
  isDraggable,
  isCurrentAutoTask,
  isSelectionMode = false,
+  hasContext = false,
  onEdit,
  onDelete,
  onViewOutput,
@@ -135,6 +138,21 @@ export const CardHeaderSection = memo(function CardHeaderSection({
 }: CardHeaderProps) {
  const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false);
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+  const showBacklogLogsButton = hasContext && !!onViewOutput;
+
+  // Get providers from store for provider-aware model name display
+  // This allows formatModelName to show provider-specific model names (e.g., "GLM 4.7" instead of "Sonnet 4.5")
+  // when a feature was executed using a Claude-compatible provider
+  const claudeCompatibleProviders = useAppStore((state) => state.claudeCompatibleProviders);
+
+  // Memoize the format options to avoid recreating the object on every render
+  const modelFormatOptions = useMemo(
+    () => ({
+      providerId: feature.providerId,
+      claudeCompatibleProviders,
+    }),
+    [feature.providerId, claudeCompatibleProviders]
+  );

  const handleDeleteClick = (e: React.MouseEvent) => {
    e.stopPropagation();
@@ -207,7 +225,9 @@ export const CardHeaderSection = memo(function CardHeaderSection({
                  <div className="px-2 py-1.5 text-[10px] text-muted-foreground border-t mt-1 pt-1.5">
                    <div className="flex items-center gap-1">
                      <ProviderIcon className="w-3 h-3" />
-                      <span>{formatModelName(feature.model ?? DEFAULT_MODEL)}</span>
+                      <span>
+                        {formatModelName(feature.model ?? DEFAULT_MODEL, modelFormatOptions)}
+                      </span>
                    </div>
                  </div>
                );
@@ -221,6 +241,7 @@ export const CardHeaderSection = memo(function CardHeaderSection({
      {!isCurrentAutoTask &&
        !isSelectionMode &&
        (feature.status === 'backlog' ||
+          feature.status === 'merge_conflict' ||
          feature.status === 'interrupted' ||
          feature.status === 'ready') && (
          <div className="absolute top-2 right-2 flex items-center gap-1">
@@ -238,6 +259,22 @@ export const CardHeaderSection = memo(function CardHeaderSection({
            >
              <GitFork className="w-4 h-4" />
            </Button>
+            {showBacklogLogsButton && (
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-6 w-6 p-0 hover:bg-white/10 text-muted-foreground hover:text-foreground"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onViewOutput?.();
+                }}
+                onPointerDown={(e) => e.stopPropagation()}
+                data-testid={`logs-backlog-${feature.id}`}
+                title="Logs"
+              >
+                <FileText className="w-4 h-4" />
+              </Button>
+            )}
            <Button
              variant="ghost"
              size="sm"
@@ -444,7 +481,9 @@ export const CardHeaderSection = memo(function CardHeaderSection({
                    <div className="px-2 py-1.5 text-[10px] text-muted-foreground border-t mt-1 pt-1.5">
                      <div className="flex items-center gap-1">
                        <ProviderIcon className="w-3 h-3" />
-                        <span>{formatModelName(feature.model ?? DEFAULT_MODEL)}</span>
+                        <span>
+                          {formatModelName(feature.model ?? DEFAULT_MODEL, modelFormatOptions)}
+                        </span>
                      </div>
                    </div>
                  );
--- a/apps/ui/src/components/views/board-view/components/kanban-card/kanban-card.tsx
+++ b/apps/ui/src/components/views/board-view/components/kanban-card/kanban-card.tsx
@@ -131,6 +131,7 @@ export const KanbanCard = memo(function KanbanCard({
    !!isCurrentAutoTask &&
    !isInExecutionState &&
    (feature.status === 'backlog' ||
+      feature.status === 'merge_conflict' ||
      feature.status === 'ready' ||
      feature.status === 'interrupted');
  // Show running visual treatment for both fully confirmed and stale-status running tasks
@@ -149,6 +150,7 @@ export const KanbanCard = memo(function KanbanCard({
    !isSelectionMode &&
    !isRunningWithStaleStatus &&
    (feature.status === 'backlog' ||
+      feature.status === 'merge_conflict' ||
      feature.status === 'interrupted' ||
      feature.status === 'ready' ||
      feature.status === 'waiting_approval' ||
@@ -194,7 +196,10 @@ export const KanbanCard = memo(function KanbanCard({
  const cardStyle = getCardBorderStyle(cardBorderEnabled, cardBorderOpacity);

  // Only allow selection for features matching the selection target
-  const isSelectable = isSelectionMode && feature.status === selectionTarget;
+  const isSelectable =
+    isSelectionMode &&
+    (feature.status === selectionTarget ||
+      (selectionTarget === 'backlog' && feature.status === 'merge_conflict'));

  const wrapperClasses = cn(
    'relative select-none outline-none transition-transform duration-200 ease-out',
@@ -275,6 +280,7 @@ export const KanbanCard = memo(function KanbanCard({
        isDraggable={isDraggable}
        isCurrentAutoTask={isActivelyRunning}
        isSelectionMode={isSelectionMode}
+        hasContext={hasContext}
        onEdit={onEdit}
        onDelete={onDelete}
        onViewOutput={onViewOutput}
--- a/apps/ui/src/components/views/board-view/components/list-view/row-actions.tsx
+++ b/apps/ui/src/components/views/board-view/components/list-view/row-actions.tsx
@@ -144,6 +144,7 @@ function getPrimaryAction(
  if (
    isRunningTask &&
    (feature.status === 'backlog' ||
+      feature.status === 'merge_conflict' ||
      feature.status === 'ready' ||
      feature.status === 'interrupted') &&
    handlers.onForceStop
@@ -156,11 +157,14 @@ function getPrimaryAction(
    };
  }

-  // Backlog - implement is primary
-  if (feature.status === 'backlog' && handlers.onImplement) {
+  // Backlog-like statuses - implement/restart is primary
+  if (
+    (feature.status === 'backlog' || feature.status === 'merge_conflict') &&
+    handlers.onImplement
+  ) {
    return {
-      icon: PlayCircle,
-      label: 'Make',
+      icon: feature.status === 'merge_conflict' ? RotateCcw : PlayCircle,
+      label: feature.status === 'merge_conflict' ? 'Restart' : 'Make',
      onClick: handlers.onImplement,
      variant: 'primary',
    };
@@ -293,13 +297,16 @@ export const RowActions = memo(function RowActions({

  // Use controlled or uncontrolled state
  const open = isOpen ?? internalOpen;
-  const setOpen = (value: boolean) => {
-    if (onOpenChange) {
-      onOpenChange(value);
-    } else {
-      setInternalOpen(value);
-    }
-  };
+  const setOpen = useCallback(
+    (value: boolean) => {
+      if (onOpenChange) {
+        onOpenChange(value);
+      } else {
+        setInternalOpen(value);
+      }
+    },
+    [onOpenChange]
+  );

  const handleOpenChange = useCallback(
    (newOpen: boolean) => {
@@ -425,68 +432,77 @@ export const RowActions = memo(function RowActions({
          )}

          {/* Backlog actions */}
-          {!isCurrentAutoTask && !isRunningTask && feature.status === 'backlog' && (
-            <>
-              <MenuItem icon={Edit} label="Edit" onClick={withClose(handlers.onEdit)} />
-              {feature.planSpec?.content && handlers.onViewPlan && (
-                <MenuItem icon={Eye} label="View Plan" onClick={withClose(handlers.onViewPlan)} />
-              )}
-              {handlers.onImplement && (
-                <MenuItem
-                  icon={PlayCircle}
-                  label="Make"
-                  onClick={withClose(handlers.onImplement)}
-                  variant="primary"
-                />
-              )}
-              {handlers.onSpawnTask && (
-                <MenuItem
-                  icon={GitFork}
-                  label="Spawn Sub-Task"
-                  onClick={withClose(handlers.onSpawnTask)}
-                />
-              )}
-              {handlers.onDuplicate && (
-                <DropdownMenuSub>
-                  <div className="flex items-center">
-                    <DropdownMenuItem
-                      onClick={withClose(handlers.onDuplicate)}
-                      className="flex-1 pr-0 rounded-r-none"
-                    >
-                      <Copy className="w-4 h-4 mr-2" />
-                      Duplicate
-                    </DropdownMenuItem>
-                    {handlers.onDuplicateAsChild && (
-                      <DropdownMenuSubTrigger className="px-1 rounded-l-none border-l border-border/30 h-8" />
-                    )}
-                  </div>
-                  {handlers.onDuplicateAsChild && (
-                    <DropdownMenuSubContent>
-                      <MenuItem
-                        icon={GitFork}
-                        label="Duplicate as Child"
-                        onClick={withClose(handlers.onDuplicateAsChild)}
-                      />
-                      {handlers.onDuplicateAsChildMultiple && (
-                        <MenuItem
-                          icon={Repeat}
-                          label="Duplicate as Child ×N"
-                          onClick={withClose(handlers.onDuplicateAsChildMultiple)}
-                        />
+          {!isCurrentAutoTask &&
+            !isRunningTask &&
+            (feature.status === 'backlog' || feature.status === 'merge_conflict') && (
+              <>
+                <MenuItem icon={Edit} label="Edit" onClick={withClose(handlers.onEdit)} />
+                {handlers.onViewOutput && (
+                  <MenuItem
+                    icon={FileText}
+                    label="View Logs"
+                    onClick={withClose(handlers.onViewOutput)}
+                  />
+                )}
+                {feature.planSpec?.content && handlers.onViewPlan && (
+                  <MenuItem icon={Eye} label="View Plan" onClick={withClose(handlers.onViewPlan)} />
+                )}
+                {handlers.onImplement && (
+                  <MenuItem
+                    icon={feature.status === 'merge_conflict' ? RotateCcw : PlayCircle}
+                    label={feature.status === 'merge_conflict' ? 'Restart' : 'Make'}
+                    onClick={withClose(handlers.onImplement)}
+                    variant="primary"
+                  />
+                )}
+                {handlers.onSpawnTask && (
+                  <MenuItem
+                    icon={GitFork}
+                    label="Spawn Sub-Task"
+                    onClick={withClose(handlers.onSpawnTask)}
+                  />
+                )}
+                {handlers.onDuplicate && (
+                  <DropdownMenuSub>
+                    <div className="flex items-center">
+                      <DropdownMenuItem
+                        onClick={withClose(handlers.onDuplicate)}
+                        className="flex-1 pr-0 rounded-r-none"
+                      >
+                        <Copy className="w-4 h-4 mr-2" />
+                        Duplicate
+                      </DropdownMenuItem>
+                      {handlers.onDuplicateAsChild && (
+                        <DropdownMenuSubTrigger className="px-1 rounded-l-none border-l border-border/30 h-8" />
                      )}
-                    </DropdownMenuSubContent>
-                  )}
-                </DropdownMenuSub>
-              )}
-              <DropdownMenuSeparator />
-              <MenuItem
-                icon={Trash2}
-                label="Delete"
-                onClick={withClose(handlers.onDelete)}
-                variant="destructive"
-              />
-            </>
-          )}
+                    </div>
+                    {handlers.onDuplicateAsChild && (
+                      <DropdownMenuSubContent>
+                        <MenuItem
+                          icon={GitFork}
+                          label="Duplicate as Child"
+                          onClick={withClose(handlers.onDuplicateAsChild)}
+                        />
+                        {handlers.onDuplicateAsChildMultiple && (
+                          <MenuItem
+                            icon={Repeat}
+                            label="Duplicate as Child ×N"
+                            onClick={withClose(handlers.onDuplicateAsChildMultiple)}
+                          />
+                        )}
+                      </DropdownMenuSubContent>
+                    )}
+                  </DropdownMenuSub>
+                )}
+                <DropdownMenuSeparator />
+                <MenuItem
+                  icon={Trash2}
+                  label="Delete"
+                  onClick={withClose(handlers.onDelete)}
+                  variant="destructive"
+                />
+              </>
+            )}

          {/* In Progress actions - starting/running (no error, force stop available) - mirrors running task actions */}
          {!isCurrentAutoTask &&
--- a/apps/ui/src/components/views/board-view/components/list-view/status-badge.tsx
+++ b/apps/ui/src/components/views/board-view/components/list-view/status-badge.tsx
@@ -23,6 +23,12 @@ const BASE_STATUS_DISPLAY: Record<string, StatusDisplay> = {
    bgClass: 'bg-[var(--status-backlog)]/15',
    borderClass: 'border-[var(--status-backlog)]/30',
  },
+  merge_conflict: {
+    label: 'Merge Conflict',
+    colorClass: 'text-[var(--status-warning)]',
+    bgClass: 'bg-[var(--status-warning)]/15',
+    borderClass: 'border-[var(--status-warning)]/30',
+  },
  in_progress: {
    label: 'In Progress',
    colorClass: 'text-[var(--status-in-progress)]',
@@ -204,6 +210,7 @@ export function getStatusLabel(
 export function getStatusOrder(status: FeatureStatusWithPipeline): number {
  const baseOrder: Record<string, number> = {
    backlog: 0,
+    merge_conflict: 0,
    in_progress: 1,
    waiting_approval: 2,
    verified: 3,
--- a/apps/ui/src/components/views/board-view/dialogs/add-feature-dialog.tsx
+++ b/apps/ui/src/components/views/board-view/dialogs/add-feature-dialog.tsx
@@ -24,16 +24,11 @@ import {
 import { Play, Cpu, FolderKanban, Settings2 } from 'lucide-react';
 import { useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
-import { cn } from '@/lib/utils';
-import { modelSupportsThinking } from '@/lib/utils';
+import { cn, normalizeModelEntry } from '@/lib/utils';
 import { useAppStore } from '@/store/app-store';
 import type { ThinkingLevel, PlanningMode, Feature, FeatureImage } from '@/store/types';
 import type { ReasoningEffort, PhaseModelEntry, AgentModel } from '@automaker/types';
-import {
-  supportsReasoningEffort,
-  normalizeThinkingLevelForModel,
-  getThinkingLevelsForModel,
-} from '@automaker/types';
+import { normalizeThinkingLevelForModel, getThinkingLevelsForModel } from '@automaker/types';
 import {
  PrioritySelector,
  WorkModeSelector,
@@ -90,6 +85,7 @@ type FeatureData = {
  model: AgentModel;
  thinkingLevel: ThinkingLevel;
  reasoningEffort: ReasoningEffort;
+  providerId?: string;
  branchName: string;
  priority: number;
  planningMode: PlanningMode;
@@ -327,13 +323,7 @@ export function AddFeatureDialog({
    }

    const finalCategory = category || 'Uncategorized';
-    const selectedModel = modelEntry.model;
-    const normalizedThinking = modelSupportsThinking(selectedModel)
-      ? modelEntry.thinkingLevel || 'none'
-      : 'none';
-    const normalizedReasoning = supportsReasoningEffort(selectedModel)
-      ? modelEntry.reasoningEffort || 'none'
-      : 'none';
+    const normalizedEntry = normalizeModelEntry(modelEntry);

    // For 'current' mode, use empty string (work on current branch)
    // For 'auto' mode, use empty string (will be auto-generated in use-board-actions)
@@ -381,9 +371,10 @@ export function AddFeatureDialog({
      imagePaths,
      textFilePaths,
      skipTests,
-      model: selectedModel,
-      thinkingLevel: normalizedThinking,
-      reasoningEffort: normalizedReasoning,
+      model: normalizedEntry.model,
+      thinkingLevel: normalizedEntry.thinkingLevel,
+      reasoningEffort: normalizedEntry.reasoningEffort,
+      providerId: normalizedEntry.providerId,
      branchName: finalBranchName,
      priority,
      planningMode,
--- a/apps/ui/src/components/views/board-view/dialogs/agent-output-modal.constants.ts
+++ b/apps/ui/src/components/views/board-view/dialogs/agent-output-modal.constants.ts
@@ -0,0 +1,41 @@
+/**
+ * Constants for AgentOutputModal component
+ * Centralizes magic numbers, timeouts, and configuration values
+ */
+
+export const MODAL_CONSTANTS = {
+  // Auto-scroll threshold for detecting when user is at bottom
+  AUTOSCROLL_THRESHOLD: 50,
+
+  // Delay for closing modal after successful completion
+  MODAL_CLOSE_DELAY_MS: 1500,
+
+  // Modal height constraints for different viewports
+  HEIGHT_CONSTRAINTS: {
+    MOBILE_MAX_DVH: '85dvh',
+    SMALL_MAX_VH: '80vh',
+    TABLET_MAX_VH: '85vh',
+  },
+
+  // Modal width constraints for different viewports
+  WIDTH_CONSTRAINTS: {
+    MOBILE_MAX_CALC: 'calc(100% - 2rem)',
+    SMALL_MAX_VW: '60vw',
+    TABLET_MAX_VW: '90vw',
+    TABLET_MAX_WIDTH: '1200px',
+  },
+
+  // View modes
+  VIEW_MODES: {
+    SUMMARY: 'summary',
+    PARSED: 'parsed',
+    RAW: 'raw',
+    CHANGES: 'changes',
+  } as const,
+
+  // Component heights (complete Tailwind class fragments for template interpolation)
+  COMPONENT_HEIGHTS: {
+    SMALL_MIN: 'sm:min-h-[200px]',
+    SMALL_MAX: 'sm:max-h-[60vh]',
+  },
+} as const;
--- a/apps/ui/src/components/views/board-view/dialogs/agent-output-modal.tsx
+++ b/apps/ui/src/components/views/board-view/dialogs/agent-output-modal.tsx
@@ -26,6 +26,7 @@ import { useAgentOutput, useFeature } from '@/hooks/queries';
 import { cn } from '@/lib/utils';
 import type { AutoModeEvent } from '@/types/electron';
 import type { BacklogPlanEvent } from '@automaker/types';
+import { MODAL_CONSTANTS } from './agent-output-modal.constants';

 interface AgentOutputModalProps {
  open: boolean;
@@ -257,7 +258,8 @@ export function AgentOutputModal({
    if (!summaryScrollRef.current) return;

    const { scrollTop, scrollHeight, clientHeight } = summaryScrollRef.current;
-    const isAtBottom = scrollHeight - scrollTop - clientHeight < 50;
+    const isAtBottom =
+      scrollHeight - scrollTop - clientHeight < MODAL_CONSTANTS.AUTOSCROLL_THRESHOLD;
    setSummaryAutoScroll(isAtBottom);
  };

@@ -440,7 +442,7 @@ export function AgentOutputModal({
    return () => {
      unsubscribe();
    };
-  }, [open, featureId, isBacklogPlan]);
+  }, [open, featureId, isBacklogPlan, onClose]);

  // Listen to backlog plan events and update output
  useEffect(() => {
--- a/apps/ui/src/components/views/board-view/dialogs/backlog-plan-dialog.tsx
+++ b/apps/ui/src/components/views/board-view/dialogs/backlog-plan-dialog.tsx
@@ -140,6 +140,7 @@ export function BacklogPlanDialog({
    setPrompt('');
    onClose();
  }, [
+    logger,
    projectPath,
    prompt,
    modelOverride,
--- a/apps/ui/src/components/views/board-view/dialogs/edit-feature-dialog.tsx
+++ b/apps/ui/src/components/views/board-view/dialogs/edit-feature-dialog.tsx
@@ -24,10 +24,9 @@ import {
 import { GitBranch, Cpu, FolderKanban, Settings2 } from 'lucide-react';
 import { useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
-import { cn, modelSupportsThinking } from '@/lib/utils';
+import { cn, migrateModelId, normalizeModelEntry } from '@/lib/utils';
 import { Feature, ModelAlias, ThinkingLevel, PlanningMode } from '@/store/app-store';
 import type { ReasoningEffort, PhaseModelEntry, DescriptionHistoryEntry } from '@automaker/types';
-import { migrateModelId } from '@automaker/types';
 import {
  PrioritySelector,
  WorkModeSelector,
@@ -41,7 +40,6 @@ import type { WorkMode } from '../shared';
 import { PhaseModelSelector } from '@/components/views/settings-view/model-defaults/phase-model-selector';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { DependencyTreeDialog } from './dependency-tree-dialog';
-import { supportsReasoningEffort } from '@automaker/types';

 interface EditFeatureDialogProps {
  feature: Feature | null;
@@ -56,6 +54,7 @@ interface EditFeatureDialogProps {
      model: ModelAlias;
      thinkingLevel: ThinkingLevel;
      reasoningEffort: ReasoningEffort;
+      providerId?: string;
      imagePaths: DescriptionImagePath[];
      textFilePaths: DescriptionTextFilePath[];
      branchName: string; // Can be empty string to use current branch
@@ -109,11 +108,14 @@ export function EditFeatureDialog({
  );

  // Model selection state - migrate legacy model IDs to canonical format
-  const [modelEntry, setModelEntry] = useState<PhaseModelEntry>(() => ({
-    model: migrateModelId(feature?.model) || 'claude-opus',
-    thinkingLevel: feature?.thinkingLevel || 'none',
-    reasoningEffort: feature?.reasoningEffort || 'none',
-  }));
+  const [modelEntry, setModelEntry] = useState<PhaseModelEntry>(() =>
+    normalizeModelEntry({
+      model: migrateModelId(feature?.model) || 'claude-opus',
+      thinkingLevel: feature?.thinkingLevel || 'none',
+      reasoningEffort: feature?.reasoningEffort || 'none',
+      providerId: feature?.providerId,
+    })
+  );

  // Track the source of description changes for history
  const [descriptionChangeSource, setDescriptionChangeSource] = useState<
@@ -161,11 +163,14 @@ export function EditFeatureDialog({
      setPreEnhancementDescription(null);
      setLocalHistory(feature.descriptionHistory ?? []);
      // Reset model entry - migrate legacy model IDs
-      setModelEntry({
-        model: migrateModelId(feature.model) || 'claude-opus',
-        thinkingLevel: feature.thinkingLevel || 'none',
-        reasoningEffort: feature.reasoningEffort || 'none',
-      });
+      setModelEntry(
+        normalizeModelEntry({
+          model: migrateModelId(feature.model) || 'claude-opus',
+          thinkingLevel: feature.thinkingLevel || 'none',
+          reasoningEffort: feature.reasoningEffort || 'none',
+          providerId: feature.providerId,
+        })
+      );
      // Reset dependency state
      setParentDependencies(feature.dependencies ?? []);
      const childDeps = allFeatures
@@ -202,19 +207,14 @@ export function EditFeatureDialog({
    if (!editingFeature) return;

    // Validate branch selection for custom mode
-    const isBranchSelectorEnabled = editingFeature.status === 'backlog';
+    const isBranchSelectorEnabled =
+      editingFeature.status === 'backlog' || editingFeature.status === 'merge_conflict';
    if (isBranchSelectorEnabled && workMode === 'custom' && !editingFeature.branchName?.trim()) {
      toast.error('Please select a branch name');
      return;
    }

-    const selectedModel = modelEntry.model;
-    const normalizedThinking: ThinkingLevel = modelSupportsThinking(selectedModel)
-      ? (modelEntry.thinkingLevel ?? 'none')
-      : 'none';
-    const normalizedReasoning: ReasoningEffort = supportsReasoningEffort(selectedModel)
-      ? (modelEntry.reasoningEffort ?? 'none')
-      : 'none';
+    const normalizedEntry = normalizeModelEntry(modelEntry);

    // For 'current' mode, use empty string (work on current branch)
    // For 'auto' mode, use empty string (will be auto-generated in use-board-actions)
@@ -232,9 +232,10 @@ export function EditFeatureDialog({
      category: editingFeature.category,
      description: editingFeature.description,
      skipTests: editingFeature.skipTests ?? false,
-      model: selectedModel,
-      thinkingLevel: normalizedThinking,
-      reasoningEffort: normalizedReasoning,
+      model: normalizedEntry.model,
+      thinkingLevel: normalizedEntry.thinkingLevel,
+      reasoningEffort: normalizedEntry.reasoningEffort,
+      providerId: normalizedEntry.providerId,
      imagePaths: editingFeature.imagePaths ?? [],
      textFilePaths: editingFeature.textFilePaths ?? [],
      branchName: finalBranchName,
@@ -557,7 +558,9 @@ export function EditFeatureDialog({
                branchSuggestions={branchSuggestions}
                branchCardCounts={branchCardCounts}
                currentBranch={currentBranch}
-                disabled={editingFeature.status !== 'backlog'}
+                disabled={
+                  editingFeature.status !== 'backlog' && editingFeature.status !== 'merge_conflict'
+                }
                testIdPrefix="edit-feature-work-mode"
              />
            </div>
@@ -627,7 +630,8 @@ export function EditFeatureDialog({
              hotkeyActive={!!editingFeature}
              data-testid="confirm-edit-feature"
              disabled={
-                editingFeature.status === 'backlog' &&
+                (editingFeature.status === 'backlog' ||
+                  editingFeature.status === 'merge_conflict') &&
                workMode === 'custom' &&
                !editingFeature.branchName?.trim()
              }
--- a/apps/ui/src/components/views/board-view/dialogs/event-content-formatter.ts
+++ b/apps/ui/src/components/views/board-view/dialogs/event-content-formatter.ts
@@ -0,0 +1,138 @@
+/**
+ * Event content formatting utilities for AgentOutputModal
+ * Extracts the complex switch statement logic from the main component
+ */
+
+import type { AutoModeEvent } from '@/types/electron';
+import type { BacklogPlanEvent } from '@automaker/types';
+
+/**
+ * Format auto mode event content for display
+ */
+export function formatAutoModeEventContent(event: AutoModeEvent): string {
+  switch (event.type) {
+    case 'auto_mode_progress':
+      return event.content || '';
+
+    case 'auto_mode_tool': {
+      const toolName = event.tool || 'Unknown Tool';
+      const toolInput = event.input ? JSON.stringify(event.input, null, 2) : '';
+      return `\n🔧 Tool: ${toolName}\n${toolInput ? `Input: ${toolInput}\n` : ''}`;
+    }
+
+    case 'auto_mode_phase': {
+      const phaseEmoji = event.phase === 'planning' ? '📋' : event.phase === 'action' ? '⚡' : '✅';
+      return `\n${phaseEmoji} ${event.message}\n`;
+    }
+
+    case 'auto_mode_error':
+      return `\n❌ Error: ${event.error}\n`;
+
+    case 'auto_mode_ultrathink_preparation':
+      return formatUltrathinkPreparation(event);
+
+    case 'planning_started': {
+      if ('mode' in event && 'message' in event) {
+        const modeLabel = event.mode === 'lite' ? 'Lite' : event.mode === 'spec' ? 'Spec' : 'Full';
+        return `\n📋 Planning Mode: ${modeLabel}\n${event.message}\n`;
+      }
+      return '';
+    }
+
+    case 'plan_approval_required':
+      return '\n⏸️ Plan generated - waiting for your approval...\n';
+
+    case 'plan_approved':
+      return event.hasEdits
+        ? '\n✅ Plan approved (with edits) - continuing to implementation...\n'
+        : '\n✅ Plan approved - continuing to implementation...\n';
+
+    case 'plan_auto_approved':
+      return '\n✅ Plan auto-approved - continuing to implementation...\n';
+
+    case 'plan_revision_requested': {
+      const revisionEvent = event as Extract<AutoModeEvent, { type: 'plan_revision_requested' }>;
+      return `\n🔄 Revising plan based on your feedback (v${revisionEvent.planVersion})...\n`;
+    }
+
+    case 'auto_mode_task_started': {
+      const taskEvent = event as Extract<AutoModeEvent, { type: 'auto_mode_task_started' }>;
+      return `\n▶ Starting ${taskEvent.taskId}: ${taskEvent.taskDescription}\n`;
+    }
+
+    case 'auto_mode_task_complete': {
+      const taskEvent = event as Extract<AutoModeEvent, { type: 'auto_mode_task_complete' }>;
+      return `\n✓ ${taskEvent.taskId} completed (${taskEvent.tasksCompleted}/${taskEvent.tasksTotal})\n`;
+    }
+
+    case 'auto_mode_phase_complete': {
+      const phaseEvent = event as Extract<AutoModeEvent, { type: 'auto_mode_phase_complete' }>;
+      return `\n🏁 Phase ${phaseEvent.phaseNumber} complete\n`;
+    }
+
+    case 'auto_mode_feature_complete': {
+      const emoji = event.passes ? '✅' : '⚠️';
+      return `\n${emoji} Task completed: ${event.message}\n`;
+    }
+
+    default:
+      return '';
+  }
+}
+
+/**
+ * Format backlog plan event content for display
+ */
+export function formatBacklogPlanEventContent(event: BacklogPlanEvent): string {
+  switch (event.type) {
+    case 'backlog_plan_progress':
+      return `\n🧭 ${event.content || 'Backlog plan progress update'}\n`;
+
+    case 'backlog_plan_error':
+      return `\n❌ Backlog plan error: ${event.error || 'Unknown error'}\n`;
+
+    case 'backlog_plan_complete':
+      return '\n✅ Backlog plan completed\n';
+
+    default:
+      return `\nℹ️ ${event.type}\n`;
+  }
+}
+
+/**
+ * Format ultrathink preparation details
+ */
+function formatUltrathinkPreparation(
+  event: AutoModeEvent & {
+    warnings?: string[];
+    recommendations?: string[];
+    estimatedCost?: number;
+    estimatedTime?: string;
+  }
+): string {
+  let prepContent = '\n🧠 Ultrathink Preparation\n';
+
+  if (event.warnings && event.warnings.length > 0) {
+    prepContent += '\n⚠️ Warnings:\n';
+    event.warnings.forEach((warning: string) => {
+      prepContent += `  • ${warning}\n`;
+    });
+  }
+
+  if (event.recommendations && event.recommendations.length > 0) {
+    prepContent += '\n💡 Recommendations:\n';
+    event.recommendations.forEach((rec: string) => {
+      prepContent += `  • ${rec}\n`;
+    });
+  }
+
+  if (event.estimatedCost !== undefined) {
+    prepContent += `\n💰 Estimated Cost: ~$${event.estimatedCost.toFixed(2)} per execution\n`;
+  }
+
+  if (event.estimatedTime) {
+    prepContent += `\n⏱️ Estimated Time: ${event.estimatedTime}\n`;
+  }
+
+  return prepContent;
+}
--- a/apps/ui/src/components/views/board-view/dialogs/mass-edit-dialog.tsx
+++ b/apps/ui/src/components/views/board-view/dialogs/mass-edit-dialog.tsx
@@ -22,7 +22,7 @@ import {
 import type { WorkMode } from '../shared';
 import { PhaseModelSelector } from '@/components/views/settings-view/model-defaults/phase-model-selector';
 import type { PhaseModelEntry } from '@automaker/types';
-import { cn } from '@/lib/utils';
+import { cn, normalizeModelEntry } from '@/lib/utils';

 interface MassEditDialogProps {
  open: boolean;
@@ -181,7 +181,9 @@ export function MassEditDialog({
      });
      setModel(getInitialValue(selectedFeatures, 'model', 'claude-sonnet') as ModelAlias);
      setThinkingLevel(getInitialValue(selectedFeatures, 'thinkingLevel', 'none') as ThinkingLevel);
-      setProviderId(undefined); // Features don't store providerId, but we track it after selection
+      setProviderId(
+        getInitialValue(selectedFeatures, 'providerId', undefined) as string | undefined
+      );
      setPlanningMode(getInitialValue(selectedFeatures, 'planningMode', 'skip') as PlanningMode);
      setRequirePlanApproval(getInitialValue(selectedFeatures, 'requirePlanApproval', false));
      setPriority(getInitialValue(selectedFeatures, 'priority', 2));
@@ -207,8 +209,23 @@ export function MassEditDialog({
  const handleApply = async () => {
    const updates: Partial<Feature> = {};

-    if (applyState.model) updates.model = model;
-    if (applyState.thinkingLevel) updates.thinkingLevel = thinkingLevel;
+    if (applyState.model || applyState.thinkingLevel) {
+      const normalizedEntry = normalizeModelEntry({
+        model,
+        thinkingLevel,
+        providerId,
+      });
+
+      if (applyState.model) {
+        updates.model = normalizedEntry.model;
+        updates.providerId = normalizedEntry.providerId;
+      }
+
+      if (applyState.thinkingLevel) {
+        updates.thinkingLevel = normalizedEntry.thinkingLevel;
+      }
+    }
+
    if (applyState.planningMode) updates.planningMode = planningMode;
    if (applyState.requirePlanApproval) updates.requirePlanApproval = requirePlanApproval;
    if (applyState.priority) updates.priority = priority;
--- a/apps/ui/src/components/views/board-view/dialogs/merge-rebase-dialog.tsx
+++ b/apps/ui/src/components/views/board-view/dialogs/merge-rebase-dialog.tsx
@@ -192,15 +192,9 @@ export function MergeRebaseDialog({
      const api = getHttpApiClient();

      if (selectedStrategy === 'rebase') {
-        // First fetch the remote to ensure we have latest refs
-        try {
-          await api.worktree.pull(worktree.path, selectedRemote);
-        } catch {
-          // Fetch may fail if no upstream - that's okay, we'll try rebase anyway
-        }
-
-        // Attempt the rebase operation
-        const result = await api.worktree.rebase(worktree.path, selectedBranch);
+        // Attempt the rebase operation - the rebase service fetches from the remote
+        // before rebasing to ensure we have up-to-date refs
+        const result = await api.worktree.rebase(worktree.path, selectedBranch, selectedRemote);

        if (result.success) {
          toast.success(`Rebased onto ${selectedBranch}`, {
@@ -223,9 +217,26 @@ export function MergeRebaseDialog({
          setStep('select');
        }
      } else {
-        // Merge strategy - attempt to merge the remote branch
-        // Use the pull endpoint for merging remote branches
-        const result = await api.worktree.pull(worktree.path, selectedRemote, true);
+        // Merge strategy - merge the selected remote branch into the current branch.
+        // selectedBranch may be a full ref (e.g. refs/remotes/origin/main); normalize to short name
+        // for 'git pull <remote> <branch>'.
+        let remoteBranchShortName = selectedBranch;
+        const remotePrefix = `refs/remotes/${selectedRemote}/`;
+        if (selectedBranch.startsWith(remotePrefix)) {
+          remoteBranchShortName = selectedBranch.slice(remotePrefix.length);
+        } else if (selectedBranch.startsWith(`${selectedRemote}/`)) {
+          remoteBranchShortName = selectedBranch.slice(selectedRemote.length + 1);
+        } else if (selectedBranch.startsWith('refs/heads/')) {
+          remoteBranchShortName = selectedBranch.slice('refs/heads/'.length);
+        } else if (selectedBranch.startsWith('refs/')) {
+          remoteBranchShortName = selectedBranch.slice('refs/'.length);
+        }
+        const result = await api.worktree.pull(
+          worktree.path,
+          selectedRemote,
+          true,
+          remoteBranchShortName
+        );

        if (result.success && result.result) {
          if (result.result.hasConflicts) {
--- a/apps/ui/src/components/views/board-view/dialogs/stash-changes-dialog.tsx
+++ b/apps/ui/src/components/views/board-view/dialogs/stash-changes-dialog.tsx
@@ -510,9 +510,12 @@ export function StashChangesDialog({
              A descriptive message helps identify this stash later. Press{' '}
              <kbd className="px-1 py-0.5 text-[10px] bg-muted rounded border">
                {typeof navigator !== 'undefined' &&
-                ((navigator as any).userAgentData?.platform || navigator.platform || '').includes(
-                  'Mac'
-                )
+                (
+                  (navigator as Navigator & { userAgentData?: { platform?: string } }).userAgentData
+                    ?.platform ||
+                  navigator.platform ||
+                  ''
+                ).includes('Mac')
                  ? '⌘'
                  : 'Ctrl'}
                +Enter
--- 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
@@ -25,6 +25,18 @@ const logger = createLogger('BoardActions');

 const MAX_DUPLICATES = 50;

+function normalizeFeatureBranchName(branchName?: string | null): string | undefined {
+  if (!branchName) return undefined;
+  let normalized = branchName.trim();
+  if (!normalized) return undefined;
+
+  normalized = normalized.replace(/^refs\/heads\//, '');
+  normalized = normalized.replace(/^refs\/remotes\/[^/]+\//, '');
+  normalized = normalized.replace(/^(origin|upstream)\//, '');
+
+  return normalized || undefined;
+}
+
 /**
 * Removes a running task from all worktrees for a given project.
 * Used when stopping features to ensure the task is removed from all worktree contexts,
@@ -137,6 +149,8 @@ export function useBoardActions({
      skipTests: boolean;
      model: ModelAlias;
      thinkingLevel: ThinkingLevel;
+      reasoningEffort?: ReasoningEffort;
+      providerId?: string;
      branchName: string;
      priority: number;
      planningMode: PlanningMode;
@@ -182,7 +196,7 @@ export function useBoardActions({
      if (workMode === 'current') {
        // Work directly on current branch - use the current worktree's branch if not on main
        // This ensures features created on a non-main worktree are associated with that worktree
-        finalBranchName = currentWorktreeBranch || undefined;
+        finalBranchName = normalizeFeatureBranchName(currentWorktreeBranch);
      } else if (workMode === 'auto') {
        // Auto-generate a branch name based on feature title and timestamp
        // Create a slug from the title: lowercase, replace non-alphanumeric with hyphens
@@ -196,7 +210,7 @@ export function useBoardActions({
        finalBranchName = `feature/${titleSlug}-${randomSuffix}`;
      } else {
        // Custom mode - use provided branch name
-        finalBranchName = featureData.branchName || undefined;
+        finalBranchName = normalizeFeatureBranchName(featureData.branchName);
      }

      // Create worktree for 'auto' or 'custom' modes when we have a branch name
@@ -388,11 +402,11 @@ export function useBoardActions({
      if (workMode === 'current') {
        // Work directly on current branch - use the current worktree's branch if not on main
        // This ensures features updated on a non-main worktree are associated with that worktree
-        finalBranchName = currentWorktreeBranch || undefined;
+        finalBranchName = normalizeFeatureBranchName(currentWorktreeBranch);
      } else if (workMode === 'auto') {
        // Preserve existing branch name if one exists (avoid orphaning worktrees on edit)
        if (updates.branchName?.trim()) {
-          finalBranchName = updates.branchName;
+          finalBranchName = normalizeFeatureBranchName(updates.branchName);
        } else {
          // Auto-generate a branch name based on feature title
          // Create a slug from the title: lowercase, replace non-alphanumeric with hyphens
@@ -406,7 +420,7 @@ export function useBoardActions({
          finalBranchName = `feature/${titleSlug}-${randomSuffix}`;
        }
      } else {
-        finalBranchName = updates.branchName || undefined;
+        finalBranchName = normalizeFeatureBranchName(updates.branchName);
      }

      // Create worktree for 'auto' or 'custom' modes when we have a branch name
--- a/apps/ui/src/components/views/board-view/hooks/use-board-column-features.ts
+++ b/apps/ui/src/components/views/board-view/hooks/use-board-column-features.ts
@@ -1,5 +1,5 @@
 // @ts-nocheck - column filtering logic with dependency resolution and status mapping
-import { useMemo, useCallback } from 'react';
+import { useMemo, useCallback, useEffect, useRef } from 'react';
 import { Feature, useAppStore } from '@/store/app-store';
 import {
  createFeatureMap,
@@ -28,6 +28,45 @@ export function useBoardColumnFeatures({
  currentWorktreeBranch,
  projectPath,
 }: UseBoardColumnFeaturesProps) {
+  // Get recently completed features from store for race condition protection
+  const recentlyCompletedFeatures = useAppStore((state) => state.recentlyCompletedFeatures);
+  const clearRecentlyCompletedFeatures = useAppStore(
+    (state) => state.clearRecentlyCompletedFeatures
+  );
+
+  // Track previous feature IDs to detect when features list has been refreshed
+  const prevFeatureIdsRef = useRef<Set<string>>(new Set());
+
+  // Clear recently completed features when the cache refreshes with updated statuses.
+  //
+  // RACE CONDITION SCENARIO THIS PREVENTS:
+  // 1. Feature completes on server -> status becomes 'verified'/'completed' on disk
+  // 2. Server emits auto_mode_feature_complete event
+  // 3. Frontend receives event -> removes feature from runningTasks, adds to recentlyCompletedFeatures
+  // 4. React Query invalidates features query, triggers async refetch
+  // 5. RACE: Before refetch completes, component may re-render with stale cache data
+  //    where status='backlog' and feature is no longer in runningTasks
+  // 6. This hook prevents the feature from appearing in backlog during that window
+  //
+  // When the refetch completes with fresh data (status='verified'/'completed'),
+  // this effect clears the recentlyCompletedFeatures set since it's no longer needed.
+  useEffect(() => {
+    const currentIds = new Set(features.map((f) => f.id));
+
+    // Check if any recently completed features now have terminal statuses in the new data
+    // If so, we can clear the tracking since the cache is now fresh
+    const hasUpdatedStatus = Array.from(recentlyCompletedFeatures).some((featureId) => {
+      const feature = features.find((f) => f.id === featureId);
+      return feature && (feature.status === 'verified' || feature.status === 'completed');
+    });
+
+    if (hasUpdatedStatus) {
+      clearRecentlyCompletedFeatures();
+    }
+
+    prevFeatureIdsRef.current = currentIds;
+  }, [features, recentlyCompletedFeatures, clearRecentlyCompletedFeatures]);
+
  // Memoize column features to prevent unnecessary re-renders
  const columnFeaturesMap = useMemo(() => {
    // Use a more flexible type to support dynamic pipeline statuses
@@ -44,6 +83,9 @@ export function useBoardColumnFeatures({
    // briefly appearing in backlog during the timing gap between when the server
    // starts executing a feature and when the UI receives the event/status update.
    const allRunningTaskIds = new Set(runningAutoTasksAllWorktrees);
+    // Get recently completed features for additional race condition protection
+    // These features should not appear in backlog even if cache has stale status
+    const recentlyCompleted = recentlyCompletedFeatures;

    // Filter features by search query (case-insensitive)
    const normalizedQuery = searchQuery.toLowerCase().trim();
@@ -148,12 +190,19 @@ export function useBoardColumnFeatures({
      // Filter all items by worktree, including backlog
      // This ensures backlog items with a branch assigned only show in that branch
      //
-      // 'ready' and 'interrupted' are transitional statuses that don't have dedicated columns:
+      // 'merge_conflict', 'ready', and 'interrupted' are backlog-lane statuses that don't
+      // have dedicated columns:
+      // - 'merge_conflict': Automatic merge failed; user must resolve conflicts before restart
      // - 'ready': Feature has an approved plan, waiting to be picked up for execution
      // - 'interrupted': Feature execution was aborted (e.g., user stopped it, server restart)
      // Both display in the backlog column and need the same allRunningTaskIds race-condition
      // protection as 'backlog' to prevent briefly flashing in backlog when already executing.
-      if (status === 'backlog' || status === 'ready' || status === 'interrupted') {
+      if (
+        status === 'backlog' ||
+        status === 'merge_conflict' ||
+        status === 'ready' ||
+        status === 'interrupted'
+      ) {
        // IMPORTANT: Check if this feature is running on ANY worktree before placing in backlog.
        // This prevents a race condition where the feature has started executing on the server
        // (and is tracked in a different worktree's running list) but the disk status hasn't
@@ -165,6 +214,14 @@ export function useBoardColumnFeatures({
          if (matchesWorktree) {
            map.in_progress.push(f);
          }
+        } else if (recentlyCompleted.has(f.id)) {
+          // Feature recently completed - skip placing in backlog to prevent race condition
+          // where stale cache has status='backlog' but feature actually completed.
+          // The feature will be placed correctly once the cache refreshes.
+          // Log for debugging (can remove after verification)
+          console.debug(
+            `Feature ${f.id} recently completed - skipping backlog placement during cache refresh`
+          );
        } else if (matchesWorktree) {
          map.backlog.push(f);
        }
@@ -231,6 +288,7 @@ export function useBoardColumnFeatures({
    currentWorktreePath,
    currentWorktreeBranch,
    projectPath,
+    recentlyCompletedFeatures,
  ]);

  const getColumnFeatures = useCallback(
--- a/apps/ui/src/components/views/board-view/hooks/use-board-drag-drop.ts
+++ b/apps/ui/src/components/views/board-view/hooks/use-board-drag-drop.ts
@@ -196,7 +196,7 @@ export function useBoardDragDrop({

      // Handle different drag scenarios
      // Note: Worktrees are created server-side at execution time based on feature.branchName
-      if (draggedFeature.status === 'backlog') {
+      if (draggedFeature.status === 'backlog' || draggedFeature.status === 'merge_conflict') {
        // From backlog
        if (targetStatus === 'in_progress') {
          // Use helper function to handle concurrency check and start implementation
--- a/apps/ui/src/components/views/board-view/hooks/use-board-effects.ts
+++ b/apps/ui/src/components/views/board-view/hooks/use-board-effects.ts
@@ -73,6 +73,10 @@ export function useBoardEffects({
    const checkAllContexts = async () => {
      const featuresWithPotentialContext = features.filter(
        (f) =>
+          f.status === 'backlog' ||
+          f.status === 'merge_conflict' ||
+          f.status === 'ready' ||
+          f.status === 'interrupted' ||
          f.status === 'in_progress' ||
          f.status === 'waiting_approval' ||
          f.status === 'verified' ||
--- a/apps/ui/src/components/views/board-view/hooks/use-board-features.ts
+++ b/apps/ui/src/components/views/board-view/hooks/use-board-features.ts
@@ -61,7 +61,7 @@ export function useBoardFeatures({ currentProject }: UseBoardFeaturesProps) {
    } catch {
      setPersistedCategories([]);
    }
-  }, [currentProject, loadFeatures]);
+  }, [currentProject]);

  // Save a new category to the persisted categories file
  const saveCategory = useCallback(
@@ -161,6 +161,7 @@ export function useBoardFeatures({ currentProject }: UseBoardFeaturesProps) {
    });

    return unsubscribe;
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- loadFeatures is a stable ref from React Query
  }, [currentProject]);

  // Check for interrupted features on mount
--- a/apps/ui/src/components/views/board-view/hooks/use-board-persistence.ts
+++ b/apps/ui/src/components/views/board-view/hooks/use-board-persistence.ts
@@ -32,6 +32,14 @@ export function useBoardPersistence({ currentProject }: UseBoardPersistenceProps
    ) => {
      if (!currentProject) return;

+      // Cancel any in-flight refetches to prevent them from overwriting our optimistic update.
+      // Without this, a slow background refetch (e.g., from a prior create/invalidate) can
+      // resolve after setQueryData and overwrite the cache with stale data.
+      await queryClient.cancelQueries({
+        queryKey: queryKeys.features.all(currentProject.path),
+        exact: true,
+      });
+
      // Capture previous cache snapshot for rollback on error
      const previousFeatures = queryClient.getQueryData<Feature[]>(
        queryKeys.features.all(currentProject.path)
@@ -123,6 +131,12 @@ export function useBoardPersistence({ currentProject }: UseBoardPersistenceProps
        throw new Error('Features API not available');
      }

+      // Cancel any in-flight refetches to prevent them from overwriting our optimistic update
+      await queryClient.cancelQueries({
+        queryKey: queryKeys.features.all(currentProject.path),
+        exact: true,
+      });
+
      // Capture previous cache snapshot for synchronous rollback on error
      const previousFeatures = queryClient.getQueryData<Feature[]>(
        queryKeys.features.all(currentProject.path)
@@ -175,6 +189,12 @@ export function useBoardPersistence({ currentProject }: UseBoardPersistenceProps
    async (featureId: string) => {
      if (!currentProject) return;

+      // Cancel any in-flight refetches to prevent them from overwriting our optimistic update
+      await queryClient.cancelQueries({
+        queryKey: queryKeys.features.all(currentProject.path),
+        exact: true,
+      });
+
      // Optimistically remove from React Query cache for immediate board refresh
      const previousFeatures = queryClient.getQueryData<Feature[]>(
        queryKeys.features.all(currentProject.path)
--- a/apps/ui/src/components/views/board-view/kanban-board.tsx
+++ b/apps/ui/src/components/views/board-view/kanban-board.tsx
@@ -161,6 +161,7 @@ function VirtualizedList<Item extends VirtualListItem>({
      const resolvedHeight = measured ?? estimatedItemHeight;
      return resolvedHeight + itemGap;
    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [items, estimatedItemHeight, itemGap, measureVersion]);

  const itemStarts = useMemo(() => {
--- 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
@@ -70,7 +70,8 @@ interface WorktreeActionsDropdownProps {
  hasRemoteBranch: boolean;
  isPulling: boolean;
  isPushing: boolean;
-  isStartingDevServer: boolean;
+  isStartingAnyDevServer: boolean;
+  isDevServerStarting: boolean;
  isDevServerRunning: boolean;
  devServerInfo?: DevServerInfo;
  gitRepoStatus: GitRepoStatus;
@@ -244,7 +245,8 @@ export function WorktreeActionsDropdown({
  hasRemoteBranch,
  isPulling,
  isPushing,
-  isStartingDevServer,
+  isStartingAnyDevServer,
+  isDevServerStarting,
  isDevServerRunning,
  devServerInfo,
  gitRepoStatus,
@@ -550,20 +552,26 @@ export function WorktreeActionsDropdown({
              <div className="flex items-center">
                <DropdownMenuItem
                  onClick={() => onStartDevServer(worktree)}
-                  disabled={isStartingDevServer}
+                  disabled={isStartingAnyDevServer || isDevServerStarting}
                  className="text-xs flex-1 pr-0 rounded-r-none"
                >
                  <Play
-                    className={cn('w-3.5 h-3.5 mr-2', isStartingDevServer && 'animate-pulse')}
+                    className={cn(
+                      'w-3.5 h-3.5 mr-2',
+                      (isStartingAnyDevServer || isDevServerStarting) && 'animate-pulse'
+                    )}
                  />
-                  {isStartingDevServer ? 'Starting...' : 'Start Dev Server'}
+                  {isStartingAnyDevServer || isDevServerStarting
+                    ? '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'
+                    (isStartingAnyDevServer || isDevServerStarting) &&
+                      'opacity-50 cursor-not-allowed'
                  )}
-                  disabled={isStartingDevServer}
+                  disabled={isStartingAnyDevServer || isDevServerStarting}
                />
              </div>
              <DropdownMenuSubContent>{viewDevServerLogsItem}</DropdownMenuSubContent>
--- a/apps/ui/src/components/views/board-view/worktree-panel/components/worktree-dropdown-item.tsx
+++ b/apps/ui/src/components/views/board-view/worktree-panel/components/worktree-dropdown-item.tsx
@@ -31,6 +31,8 @@ export interface WorktreeDropdownItemProps {
  cardCount?: number;
  /** Whether the dev server is running for this worktree */
  devServerRunning?: boolean;
+  /** Whether the dev server is starting for this worktree */
+  devServerStarting?: boolean;
  /** Dev server information if running */
  devServerInfo?: DevServerInfo;
  /** Whether auto-mode is running for this worktree */
@@ -64,6 +66,7 @@ export function WorktreeDropdownItem({
  isRunning,
  cardCount,
  devServerRunning,
+  devServerStarting,
  devServerInfo,
  isAutoModeRunning = false,
  isTestRunning = false,
@@ -154,6 +157,16 @@ export function WorktreeDropdownItem({
          </span>
        )}

+        {/* Dev server starting indicator */}
+        {devServerStarting && (
+          <span
+            className="inline-flex items-center justify-center h-4 w-4 text-amber-500"
+            title="Dev server starting..."
+          >
+            <Spinner size="xs" variant="current" />
+          </span>
+        )}
+
        {/* Test running indicator */}
        {isTestRunning && (
          <span
--- a/apps/ui/src/components/views/board-view/worktree-panel/components/worktree-dropdown.tsx
+++ b/apps/ui/src/components/views/board-view/worktree-panel/components/worktree-dropdown.tsx
@@ -53,6 +53,8 @@ export interface WorktreeDropdownProps {
  branchCardCounts?: Record<string, number>;
  /** Function to check if dev server is running for a worktree */
  isDevServerRunning: (worktree: WorktreeInfo) => boolean;
+  /** Function to check if dev server is starting for a worktree */
+  isDevServerStarting: (worktree: WorktreeInfo) => boolean;
  /** Function to get dev server info for a worktree */
  getDevServerInfo: (worktree: WorktreeInfo) => DevServerInfo | undefined;
  /** Function to check if auto-mode is running for a worktree */
@@ -78,7 +80,7 @@ export interface WorktreeDropdownProps {
  // Action dropdown props
  isPulling: boolean;
  isPushing: boolean;
-  isStartingDevServer: boolean;
+  isStartingAnyDevServer: boolean;
  aheadCount: number;
  behindCount: number;
  hasRemoteBranch: boolean;
@@ -178,6 +180,7 @@ export function WorktreeDropdown({
  isActivating,
  branchCardCounts,
  isDevServerRunning,
+  isDevServerStarting,
  getDevServerInfo,
  isAutoModeRunningForWorktree,
  isTestRunningForWorktree,
@@ -196,7 +199,7 @@ export function WorktreeDropdown({
  // Action dropdown props
  isPulling,
  isPushing,
-  isStartingDevServer,
+  isStartingAnyDevServer,
  aheadCount,
  behindCount,
  hasRemoteBranch,
@@ -270,6 +273,7 @@ export function WorktreeDropdown({
    if (!selectedWorktree) {
      return {
        devServerRunning: false,
+        devServerStarting: false,
        devServerInfo: undefined,
        autoModeRunning: false,
        isRunning: false,
@@ -279,6 +283,7 @@ export function WorktreeDropdown({
    }
    return {
      devServerRunning: isDevServerRunning(selectedWorktree),
+      devServerStarting: isDevServerStarting(selectedWorktree),
      devServerInfo: getDevServerInfo(selectedWorktree),
      autoModeRunning: isAutoModeRunningForWorktree(selectedWorktree),
      isRunning: hasRunningFeatures(selectedWorktree),
@@ -288,6 +293,7 @@ export function WorktreeDropdown({
  }, [
    selectedWorktree,
    isDevServerRunning,
+    isDevServerStarting,
    getDevServerInfo,
    isAutoModeRunningForWorktree,
    hasRunningFeatures,
@@ -360,6 +366,16 @@ export function WorktreeDropdown({
          </span>
        )}

+        {/* Dev server starting indicator */}
+        {selectedStatus.devServerStarting && (
+          <span
+            className="inline-flex items-center justify-center h-4 w-4 text-amber-500 shrink-0"
+            title="Dev server starting..."
+          >
+            <Spinner size="xs" variant="current" />
+          </span>
+        )}
+
        {/* Test running indicator */}
        {selectedStatus.testRunning && (
          <span
@@ -468,6 +484,7 @@ export function WorktreeDropdown({
                isRunning={hasRunningFeatures(mainWorktree)}
                cardCount={branchCardCounts?.[mainWorktree.branch]}
                devServerRunning={isDevServerRunning(mainWorktree)}
+                devServerStarting={isDevServerStarting(mainWorktree)}
                devServerInfo={getDevServerInfo(mainWorktree)}
                isAutoModeRunning={isAutoModeRunningForWorktree(mainWorktree)}
                isTestRunning={isTestRunningForWorktree(mainWorktree)}
@@ -493,6 +510,7 @@ export function WorktreeDropdown({
                    isRunning={hasRunningFeatures(worktree)}
                    cardCount={branchCardCounts?.[worktree.branch]}
                    devServerRunning={isDevServerRunning(worktree)}
+                    devServerStarting={isDevServerStarting(worktree)}
                    devServerInfo={getDevServerInfo(worktree)}
                    isAutoModeRunning={isAutoModeRunningForWorktree(worktree)}
                    isTestRunning={isTestRunningForWorktree(worktree)}
@@ -543,7 +561,8 @@ export function WorktreeDropdown({
          }
          isPulling={isPulling}
          isPushing={isPushing}
-          isStartingDevServer={isStartingDevServer}
+          isStartingDevServer={isStartingAnyDevServer}
+          isDevServerStarting={isDevServerStarting(selectedWorktree)}
          isDevServerRunning={isDevServerRunning(selectedWorktree)}
          devServerInfo={getDevServerInfo(selectedWorktree)}
          gitRepoStatus={gitRepoStatus}
--- a/apps/ui/src/components/views/board-view/worktree-panel/components/worktree-mobile-dropdown.tsx
+++ b/apps/ui/src/components/views/board-view/worktree-panel/components/worktree-mobile-dropdown.tsx
@@ -7,15 +7,18 @@ import {
  DropdownMenuSeparator,
  DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import { GitBranch, ChevronDown, CircleDot, Check } from 'lucide-react';
+import { GitBranch, ChevronDown, CircleDot, Check, Globe } from 'lucide-react';
 import { Spinner } from '@/components/ui/spinner';
 import { cn } from '@/lib/utils';
-import type { WorktreeInfo } from '../types';
+import type { WorktreeInfo, DevServerInfo } from '../types';

 interface WorktreeMobileDropdownProps {
  worktrees: WorktreeInfo[];
  isWorktreeSelected: (worktree: WorktreeInfo) => boolean;
  hasRunningFeatures: (worktree: WorktreeInfo) => boolean;
+  isDevServerRunning: (worktree: WorktreeInfo) => boolean;
+  isDevServerStarting: (worktree: WorktreeInfo) => boolean;
+  getDevServerInfo: (worktree: WorktreeInfo) => DevServerInfo | undefined;
  isActivating: boolean;
  branchCardCounts?: Record<string, number>;
  onSelectWorktree: (worktree: WorktreeInfo) => void;
@@ -25,6 +28,9 @@ export function WorktreeMobileDropdown({
  worktrees,
  isWorktreeSelected,
  hasRunningFeatures,
+  isDevServerRunning,
+  isDevServerStarting,
+  getDevServerInfo,
  isActivating,
  branchCardCounts,
  onSelectWorktree,
@@ -59,6 +65,9 @@ export function WorktreeMobileDropdown({
        {worktrees.map((worktree) => {
          const isSelected = isWorktreeSelected(worktree);
          const isRunning = hasRunningFeatures(worktree);
+          const devServerRunning = isDevServerRunning(worktree);
+          const devServerStarting = isDevServerStarting(worktree);
+          const devServerInfo = getDevServerInfo(worktree);
          const cardCount = branchCardCounts?.[worktree.branch];
          const hasChanges = worktree.hasChanges;
          const changedFilesCount = worktree.changedFilesCount;
@@ -103,6 +112,10 @@ export function WorktreeMobileDropdown({
                    {changedFilesCount ?? '!'}
                  </span>
                )}
+                {devServerRunning && devServerInfo?.urlDetected === true && (
+                  <Globe className="w-3 h-3 text-green-500" />
+                )}
+                {devServerStarting && <Spinner size="xs" variant="muted" />}
              </div>
            </DropdownMenuItem>
          );
--- a/apps/ui/src/components/views/board-view/worktree-panel/components/worktree-tab.tsx
+++ b/apps/ui/src/components/views/board-view/worktree-panel/components/worktree-tab.tsx
@@ -34,7 +34,8 @@ interface WorktreeTabProps {
  isSwitching: boolean;
  isPulling: boolean;
  isPushing: boolean;
-  isStartingDevServer: boolean;
+  isStartingAnyDevServer: boolean;
+  isDevServerStarting: boolean;
  aheadCount: number;
  behindCount: number;
  hasRemoteBranch: boolean;
@@ -146,7 +147,8 @@ export function WorktreeTab({
  isSwitching,
  isPulling,
  isPushing,
-  isStartingDevServer,
+  isStartingAnyDevServer,
+  isDevServerStarting,
  aheadCount,
  behindCount,
  hasRemoteBranch,
@@ -531,7 +533,8 @@ export function WorktreeTab({
        trackingRemote={trackingRemote}
        isPulling={isPulling}
        isPushing={isPushing}
-        isStartingDevServer={isStartingDevServer}
+        isStartingDevServer={isStartingAnyDevServer}
+        isDevServerStarting={isDevServerStarting}
        isDevServerRunning={isDevServerRunning}
        devServerInfo={devServerInfo}
        gitRepoStatus={gitRepoStatus}
--- 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
@@ -56,7 +56,8 @@ function showUrlDetectedToast(url: string, port: number): void {
 }

 export function useDevServers({ projectPath }: UseDevServersOptions) {
-  const [isStartingDevServer, setIsStartingDevServer] = useState(false);
+  const [isStartingAnyDevServer, setIsStartingAnyDevServer] = useState(false);
+  const [startingServers, setStartingServers] = useState<Set<string>>(new Set());
  const [runningDevServers, setRunningDevServers] = useState<Map<string, DevServerInfo>>(new Map());

  // Track which worktrees have had their url-detected toast shown to prevent re-triggering
@@ -327,7 +328,16 @@ export function useDevServers({ projectPath }: UseDevServersOptions) {
    if (!api?.worktree?.onDevServerLogEvent) return;

    const unsubscribe = api.worktree.onDevServerLogEvent((event) => {
-      if (event.type === 'dev-server:url-detected') {
+      if (event.type === 'dev-server:starting') {
+        const { worktreePath } = event.payload;
+        const key = normalizePath(worktreePath);
+        setStartingServers((prev) => {
+          const next = new Set(prev);
+          next.add(key);
+          return next;
+        });
+        logger.info(`Dev server starting for ${worktreePath} (reactive update)`);
+      } else if (event.type === 'dev-server:url-detected') {
        const { worktreePath, url, port } = event.payload;
        const key = normalizePath(worktreePath);
        // Clear the port detection timeout since URL was successfully detected
@@ -387,6 +397,15 @@ export function useDevServers({ projectPath }: UseDevServersOptions) {
        // Reactively add/update the server when it starts
        const { worktreePath, port, url } = event.payload;
        const key = normalizePath(worktreePath);
+
+        // Remove from starting set
+        setStartingServers((prev) => {
+          if (!prev.has(key)) return prev;
+          const next = new Set(prev);
+          next.delete(key);
+          return next;
+        });
+
        // Clear previous toast tracking for this key so a new detection triggers a fresh toast
        toastShownForRef.current.delete(key);
        setRunningDevServers((prev) => {
@@ -409,11 +428,12 @@ export function useDevServers({ projectPath }: UseDevServersOptions) {

  // Cleanup all port detection timers on unmount
  useEffect(() => {
+    const timers = portDetectionTimers.current;
    return () => {
-      for (const timer of portDetectionTimers.current.values()) {
+      for (const timer of timers.values()) {
        clearTimeout(timer);
      }
-      portDetectionTimers.current.clear();
+      timers.clear();
    };
  }, []);

@@ -427,8 +447,8 @@ export function useDevServers({ projectPath }: UseDevServersOptions) {

  const handleStartDevServer = useCallback(
    async (worktree: WorktreeInfo) => {
-      if (isStartingDevServer) return;
-      setIsStartingDevServer(true);
+      if (isStartingAnyDevServer) return;
+      setIsStartingAnyDevServer(true);

      try {
        const api = getElectronAPI();
@@ -470,10 +490,10 @@ export function useDevServers({ projectPath }: UseDevServersOptions) {
          description: error instanceof Error ? error.message : undefined,
        });
      } finally {
-        setIsStartingDevServer(false);
+        setIsStartingAnyDevServer(false);
      }
    },
-    [isStartingDevServer, projectPath, startPortDetectionTimer]
+    [isStartingAnyDevServer, projectPath, startPortDetectionTimer]
  );

  const handleStopDevServer = useCallback(
@@ -543,6 +563,13 @@ export function useDevServers({ projectPath }: UseDevServersOptions) {
    [runningDevServers, getWorktreeKey]
  );

+  const isDevServerStarting = useCallback(
+    (worktree: WorktreeInfo) => {
+      return startingServers.has(getWorktreeKey(worktree));
+    },
+    [startingServers, getWorktreeKey]
+  );
+
  const getDevServerInfo = useCallback(
    (worktree: WorktreeInfo) => {
      return runningDevServers.get(getWorktreeKey(worktree));
@@ -551,10 +578,11 @@ export function useDevServers({ projectPath }: UseDevServersOptions) {
  );

  return {
-    isStartingDevServer,
+    isStartingAnyDevServer,
    runningDevServers,
    getWorktreeKey,
    isDevServerRunning,
+    isDevServerStarting,
    getDevServerInfo,
    handleStartDevServer,
    handleStopDevServer,
--- a/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-worktrees.ts
+++ b/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-worktrees.ts
@@ -1,4 +1,4 @@
-import { useEffect, useCallback, useRef, startTransition } from 'react';
+import { useEffect, useCallback, useRef, startTransition, useMemo } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
 import { useAppStore } from '@/store/app-store';
 import { useWorktrees as useWorktreesQuery } from '@/hooks/queries';
@@ -26,7 +26,7 @@ export function useWorktrees({

  // Use the React Query hook
  const { data, isLoading, refetch } = useWorktreesQuery(projectPath);
-  const worktrees = (data?.worktrees ?? []) as WorktreeInfo[];
+  const worktrees = useMemo(() => (data?.worktrees ?? []) as WorktreeInfo[], [data?.worktrees]);

  // Sync worktrees to Zustand store when they change.
  // Use a ref to track the previous worktrees and skip the store update when the
--- 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
@@ -87,8 +87,9 @@ export function WorktreePanel({
  } = useWorktrees({ projectPath, refreshTrigger, onRemovedWorktrees });

  const {
-    isStartingDevServer,
+    isStartingAnyDevServer,
    isDevServerRunning,
+    isDevServerStarting,
    getDevServerInfo,
    handleStartDevServer,
    handleStopDevServer,
@@ -211,7 +212,6 @@ export function WorktreePanel({
  // Read store state directly inside the effect to avoid a dependency cycle
  // (the effect writes to the same state it would otherwise depend on)
  useEffect(() => {
-    const mainWt = worktrees.find((w) => w.isMain);
    const otherWts = worktrees.filter((w) => !w.isMain);
    const otherSlotCount = Math.max(0, pinnedWorktreesCount);

@@ -487,7 +487,7 @@ export function WorktreePanel({
            description: `Stopped tests in ${worktree.branch}`,
          });
        } else {
-          toast.error('Failed to stop tests', {
+          toast.error(result.error || 'Failed to stop tests', {
            description: result.error || 'Unknown error',
          });
        }
@@ -982,6 +982,9 @@ export function WorktreePanel({
          worktrees={worktrees}
          isWorktreeSelected={isWorktreeSelected}
          hasRunningFeatures={hasRunningFeatures}
+          isDevServerRunning={isDevServerRunning}
+          isDevServerStarting={isDevServerStarting}
+          getDevServerInfo={getDevServerInfo}
          isActivating={isActivating}
          branchCardCounts={branchCardCounts}
          onSelectWorktree={handleSelectWorktree}
@@ -1017,7 +1020,8 @@ export function WorktreePanel({
            trackingRemote={getTrackingRemote(selectedWorktree.path)}
            isPulling={isPulling}
            isPushing={isPushing}
-            isStartingDevServer={isStartingDevServer}
+            isStartingAnyDevServer={isStartingAnyDevServer}
+            isDevServerStarting={isDevServerStarting(selectedWorktree)}
            isDevServerRunning={isDevServerRunning(selectedWorktree)}
            devServerInfo={getDevServerInfo(selectedWorktree)}
            gitRepoStatus={gitRepoStatus}
@@ -1245,6 +1249,7 @@ export function WorktreePanel({
          isActivating={isActivating}
          branchCardCounts={branchCardCounts}
          isDevServerRunning={isDevServerRunning}
+          isDevServerStarting={isDevServerStarting}
          getDevServerInfo={getDevServerInfo}
          isAutoModeRunningForWorktree={isAutoModeRunningForWorktree}
          isTestRunningForWorktree={isTestRunningForWorktree}
@@ -1261,7 +1266,7 @@ export function WorktreePanel({
          onCreateBranch={onCreateBranch}
          isPulling={isPulling}
          isPushing={isPushing}
-          isStartingDevServer={isStartingDevServer}
+          isStartingAnyDevServer={isStartingAnyDevServer}
          aheadCount={aheadCount}
          behindCount={behindCount}
          hasRemoteBranch={hasRemoteBranch}
@@ -1322,6 +1327,7 @@ export function WorktreePanel({
            isRunning={hasRunningFeatures(mainWorktree)}
            isActivating={isActivating}
            isDevServerRunning={isDevServerRunning(mainWorktree)}
+            isDevServerStarting={isDevServerStarting(mainWorktree)}
            devServerInfo={getDevServerInfo(mainWorktree)}
            branches={branches}
            filteredBranches={filteredBranches}
@@ -1330,7 +1336,7 @@ export function WorktreePanel({
            isSwitching={isSwitching}
            isPulling={isPulling}
            isPushing={isPushing}
-            isStartingDevServer={isStartingDevServer}
+            isStartingAnyDevServer={isStartingAnyDevServer}
            aheadCount={aheadCount}
            behindCount={behindCount}
            hasRemoteBranch={hasRemoteBranch}
@@ -1413,6 +1419,7 @@ export function WorktreePanel({
              isRunning={hasRunningFeatures(worktree)}
              isActivating={isActivating}
              isDevServerRunning={isDevServerRunning(worktree)}
+              isDevServerStarting={isDevServerStarting(worktree)}
              devServerInfo={getDevServerInfo(worktree)}
              branches={branches}
              filteredBranches={filteredBranches}
@@ -1421,7 +1428,7 @@ export function WorktreePanel({
              isSwitching={isSwitching}
              isPulling={isPulling}
              isPushing={isPushing}
-              isStartingDevServer={isStartingDevServer}
+              isStartingAnyDevServer={isStartingAnyDevServer}
              aheadCount={aheadCount}
              behindCount={behindCount}
              hasRemoteBranch={hasRemoteBranch}
--- a/apps/ui/src/components/views/context-view.tsx
+++ b/apps/ui/src/components/views/context-view.tsx
@@ -242,8 +242,13 @@ export function ContextView() {
  const handleSelectFile = (file: ContextFile) => {
    // Note: Unsaved changes warning could be added here in the future
    // For now, silently proceed to avoid disrupting mobile UX flow
-    loadFileContent(file);
+    // Set selected file immediately for responsive UI feedback,
+    // then load content asynchronously
+    setSelectedFile(file);
+    setEditedContent(file.content || '');
+    setHasChanges(false);
    setIsPreviewMode(isMarkdownFilename(file.name));
+    loadFileContent(file);
  };

  // Save current file
@@ -527,11 +532,13 @@ export function ContextView() {
      delete metadata.files[selectedFile.name];
      await saveMetadata(metadata);

+      // Refresh file list before closing dialog so UI is updated when dialog dismisses
+      await loadContextFiles();
+
      setIsDeleteDialogOpen(false);
      setSelectedFile(null);
      setEditedContent('');
      setHasChanges(false);
-      await loadContextFiles();
    } catch (error) {
      logger.error('Failed to delete file:', error);
    }
--- a/apps/ui/src/components/views/dashboard-view.tsx
+++ b/apps/ui/src/components/views/dashboard-view.tsx
@@ -591,12 +591,16 @@ export function DashboardView() {
                  <Button
                    size="icon"
                    className="bg-linear-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 text-white"
+                    data-testid="create-new-project-mobile"
                  >
                    <Plus className="w-4 h-4" />
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end" className="w-56">
-                  <DropdownMenuItem onClick={handleNewProject}>
+                  <DropdownMenuItem
+                    onClick={handleNewProject}
+                    data-testid="quick-setup-option-mobile"
+                  >
                    <Plus className="w-4 h-4 mr-2" />
                    Quick Setup
                  </DropdownMenuItem>
@@ -662,7 +666,7 @@ export function DashboardView() {
                      <DropdownMenuContent align="end" className="w-56">
                        <DropdownMenuItem
                          onClick={handleNewProject}
-                          data-testid="quick-setup-option"
+                          data-testid="quick-setup-option-no-projects"
                        >
                          <Plus className="w-4 h-4 mr-2" />
                          Quick Setup
@@ -749,14 +753,20 @@ export function DashboardView() {
                  </Button>
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
-                      <Button className="hidden sm:flex bg-linear-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 text-white">
+                      <Button
+                        className="hidden sm:flex bg-linear-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 text-white"
+                        data-testid="create-new-project-header"
+                      >
                        <Plus className="w-4 h-4 mr-2" />
                        New Project
                        <ChevronDown className="w-4 h-4 ml-2" />
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end" className="w-56">
-                      <DropdownMenuItem onClick={handleNewProject}>
+                      <DropdownMenuItem
+                        onClick={handleNewProject}
+                        data-testid="quick-setup-option-has-projects"
+                      >
                        <Plus className="w-4 h-4 mr-2" />
                        Quick Setup
                      </DropdownMenuItem>
--- a/apps/ui/src/components/views/file-editor-view/components/code-editor.tsx
+++ b/apps/ui/src/components/views/file-editor-view/components/code-editor.tsx
@@ -36,6 +36,8 @@ export interface CodeEditorHandle {
  redo: () => void;
  /** Returns the current text selection with line range, or null if nothing is selected */
  getSelection: () => { text: string; fromLine: number; toLine: number } | null;
+  /** Returns the current editor content (may differ from store if onChange hasn't fired yet) */
+  getValue: () => string | null;
 }

 interface CodeEditorProps {
@@ -465,6 +467,11 @@ export const CodeEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(function
        const toLine = view.state.doc.lineAt(to).number;
        return { text, fromLine, toLine };
      },
+      getValue: () => {
+        const view = editorRef.current?.view;
+        if (!view) return null;
+        return view.state.doc.toString();
+      },
    }),
    []
  );
--- a/apps/ui/src/components/views/file-editor-view/file-editor-dirty-utils.ts
+++ b/apps/ui/src/components/views/file-editor-view/file-editor-dirty-utils.ts
@@ -0,0 +1,15 @@
+export function computeIsDirty(content: string, originalContent: string): boolean {
+  return content !== originalContent;
+}
+
+export function updateTabWithContent<
+  T extends { originalContent: string; content: string; isDirty: boolean },
+>(tab: T, content: string): T {
+  return { ...tab, content, isDirty: computeIsDirty(content, tab.originalContent) };
+}
+
+export function markTabAsSaved<
+  T extends { originalContent: string; content: string; isDirty: boolean },
+>(tab: T, content: string): T {
+  return { ...tab, content, originalContent: content, isDirty: false };
+}
--- a/apps/ui/src/components/views/file-editor-view/file-editor-view.tsx
+++ b/apps/ui/src/components/views/file-editor-view/file-editor-view.tsx
@@ -489,18 +489,38 @@ export function FileEditorView({ initialPath }: FileEditorViewProps) {

  // ─── Handle Save ─────────────────────────────────────────────
  const handleSave = useCallback(async () => {
-    if (!activeTab || !activeTab.isDirty) return;
+    // Get fresh state from the store to avoid stale closure issues
+    const {
+      tabs: currentTabs,
+      activeTabId: currentActiveTabId,
+      updateTabContent,
+    } = useFileEditorStore.getState();
+
+    if (!currentActiveTabId) return;
+
+    const tab = currentTabs.find((t) => t.id === currentActiveTabId);
+    if (!tab || !tab.isDirty) return;
+
+    // Get the current editor content directly from CodeMirror to ensure
+    // we save the latest content even if onChange hasn't fired yet
+    const editorContent = editorRef.current?.getValue();
+    const contentToSave = editorContent ?? tab.content;
+
+    // Sync the editor content to the store before saving
+    if (editorContent != null && editorContent !== tab.content) {
+      updateTabContent(tab.id, editorContent);
+    }

    try {
      const api = getElectronAPI();
-      const result = await api.writeFile(activeTab.filePath, activeTab.content);
+      const result = await api.writeFile(tab.filePath, contentToSave);

      if (result.success) {
-        markTabSaved(activeTab.id, activeTab.content);
+        markTabSaved(tab.id, contentToSave);
        // Refresh git status and inline diff after save
        loadGitStatus();
        if (showInlineDiff) {
-          loadFileDiff(activeTab.filePath);
+          loadFileDiff(tab.filePath);
        }
      } else {
        logger.error('Failed to save file:', result.error);
@@ -508,7 +528,7 @@ export function FileEditorView({ initialPath }: FileEditorViewProps) {
    } catch (error) {
      logger.error('Failed to save file:', error);
    }
-  }, [activeTab, markTabSaved, loadGitStatus, showInlineDiff, loadFileDiff]);
+  }, [markTabSaved, loadGitStatus, showInlineDiff, loadFileDiff]);

  // ─── Auto Save: save a specific tab by ID ───────────────────
  const saveTabById = useCallback(
@@ -584,6 +604,7 @@ export function FileEditorView({ initialPath }: FileEditorViewProps) {
        autoSaveTimerRef.current = null;
      }
    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- activeTab is accessed for isDirty/content only
  }, [editorAutoSave, editorAutoSaveDelay, activeTab?.isDirty, activeTab?.content, handleSave]);

  // ─── Handle Search ──────────────────────────────────────────
@@ -710,6 +731,7 @@ export function FileEditorView({ initialPath }: FileEditorViewProps) {
            model: resolveModelString(featureData.model),
            thinkingLevel: featureData.thinkingLevel,
            reasoningEffort: featureData.reasoningEffort,
+            providerId: featureData.providerId,
            skipTests: featureData.skipTests,
            branchName: featureData.workMode === 'current' ? currentBranch : featureData.branchName,
            planningMode: featureData.planningMode,
@@ -1069,6 +1091,7 @@ export function FileEditorView({ initialPath }: FileEditorViewProps) {
    } else {
      useFileEditorStore.getState().setActiveFileGitDetails(null);
    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- activeTab accessed for specific properties only
  }, [activeTab?.filePath, activeTab?.isBinary, loadFileGitDetails]);

  // Load file diff when inline diff is enabled and active tab changes
@@ -1078,6 +1101,7 @@ export function FileEditorView({ initialPath }: FileEditorViewProps) {
    } else {
      useFileEditorStore.getState().setActiveFileDiff(null);
    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- activeTab accessed for specific properties only
  }, [
    showInlineDiff,
    activeTab?.filePath,
--- a/apps/ui/src/components/views/file-editor-view/use-file-editor-store.ts
+++ b/apps/ui/src/components/views/file-editor-view/use-file-editor-store.ts
@@ -1,5 +1,6 @@
 import { create } from 'zustand';
 import { persist, type StorageValue } from 'zustand/middleware';
+import { updateTabWithContent, markTabAsSaved } from './file-editor-dirty-utils';

 export interface FileTreeNode {
  name: string;
@@ -262,17 +263,13 @@ export const useFileEditorStore = create<FileEditorState>()(

      updateTabContent: (tabId, content) => {
        set({
-          tabs: get().tabs.map((t) =>
-            t.id === tabId ? { ...t, content, isDirty: content !== t.originalContent } : t
-          ),
+          tabs: get().tabs.map((t) => (t.id === tabId ? updateTabWithContent(t, content) : t)),
        });
      },

      markTabSaved: (tabId, content) => {
        set({
-          tabs: get().tabs.map((t) =>
-            t.id === tabId ? { ...t, content, originalContent: content, isDirty: false } : t
-          ),
+          tabs: get().tabs.map((t) => (t.id === tabId ? markTabAsSaved(t, content) : t)),
        });
      },

--- a/apps/ui/src/components/views/github-issues-view.tsx
+++ b/apps/ui/src/components/views/github-issues-view.tsx
@@ -209,10 +209,12 @@ export function GitHubIssuesView() {
            model: featureData.model,
            thinkingLevel: featureData.thinkingLevel,
            reasoningEffort: featureData.reasoningEffort,
+            providerId: featureData.providerId,
            skipTests: featureData.skipTests,
            branchName: featureData.workMode === 'current' ? currentBranch : featureData.branchName,
            planningMode: featureData.planningMode,
            requirePlanApproval: featureData.requirePlanApproval,
+            dependencies: [],
            excludedPipelineSteps: featureData.excludedPipelineSteps,
            ...(featureData.imagePaths?.length ? { imagePaths: featureData.imagePaths } : {}),
            ...(featureData.textFilePaths?.length
@@ -288,6 +290,9 @@ export function GitHubIssuesView() {
            model: resolveModelString('opus'),
            thinkingLevel: 'none' as const,
            branchName: currentBranch,
+            planningMode: 'skip' as const,
+            requirePlanApproval: false,
+            dependencies: [],
            createdAt: new Date().toISOString(),
            updatedAt: new Date().toISOString(),
          };
--- a/apps/ui/src/components/views/github-issues-view/components/issue-detail-panel.tsx
+++ b/apps/ui/src/components/views/github-issues-view/components/issue-detail-panel.tsx
@@ -193,17 +193,16 @@ export function IssueDetailPanel({
              </>
            );
          })()}
-          {!isMobile && (
-            <Button
-              variant="secondary"
-              size="sm"
-              onClick={() => onCreateFeature(issue)}
-              title="Create a new feature to address this issue"
-            >
-              <Plus className="h-4 w-4 mr-1" />
-              Create Feature
-            </Button>
-          )}
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={() => onCreateFeature(issue)}
+            aria-label="Create Feature"
+            title="Create a new feature to address this issue"
+          >
+            <Plus className={cn('h-4 w-4', !isMobile && 'mr-1')} />
+            {!isMobile && 'Create Feature'}
+          </Button>
          <Button
            variant="outline"
            size="sm"
@@ -395,7 +394,7 @@ export function IssueDetailPanel({
          )}
        </div>

-        {/* Create Feature CTA - shown on mobile since it's hidden from the header */}
+        {/* Create Feature CTA */}
        {isMobile && (
          <div className="mt-6 p-4 rounded-lg bg-primary/5 border border-primary/20">
            <div className="flex items-center gap-2 mb-2">
--- a/apps/ui/src/components/views/github-issues-view/hooks/use-issue-validation.ts
+++ b/apps/ui/src/components/views/github-issues-view/hooks/use-issue-validation.ts
@@ -264,6 +264,7 @@ export function useIssueValidation({
      const modelToUse = normalizedEntry.model;
      const thinkingLevelToUse = normalizedEntry.thinkingLevel;
      const reasoningEffortToUse = normalizedEntry.reasoningEffort;
+      const providerIdToUse = normalizedEntry.providerId;

      // Use mutation to trigger validation (toast is handled by mutation)
      validateIssueMutation.mutate({
@@ -271,6 +272,7 @@ export function useIssueValidation({
        model: modelToUse,
        thinkingLevel: thinkingLevelToUse,
        reasoningEffort: reasoningEffortToUse,
+        providerId: providerIdToUse,
        comments,
        linkedPRs,
      });
--- a/apps/ui/src/components/views/github-issues-view/hooks/use-issues-filter.ts
+++ b/apps/ui/src/components/views/github-issues-view/hooks/use-issues-filter.ts
@@ -227,6 +227,7 @@ export function useIssuesFilter(
      hasActiveFilter,
      matchedCount: matchedIssues.length,
    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- filterState destructured to individual deps
  }, [
    issues,
    searchQuery,
--- a/apps/ui/src/components/views/github-prs-view.tsx
+++ b/apps/ui/src/components/views/github-prs-view.tsx
@@ -39,7 +39,7 @@ import {
 export function GitHubPRsView() {
  const [selectedPR, setSelectedPR] = useState<GitHubPR | null>(null);
  const [commentDialogPR, setCommentDialogPR] = useState<GitHubPR | null>(null);
-  const { currentProject } = useAppStore();
+  const { currentProject, getEffectiveUseWorktrees } = useAppStore();
  const isMobile = useIsMobile();

  const {
@@ -84,6 +84,9 @@ export function GitHubPRsView() {
        model: resolveModelString('opus'),
        thinkingLevel: 'none',
        planningMode: 'skip',
+        requirePlanApproval: false,
+        dependencies: [],
+        ...(pr.url ? { prUrl: pr.url } : {}),
        ...(pr.headRefName ? { branchName: pr.headRefName } : {}),
      };

@@ -94,7 +97,11 @@ export function GitHubPRsView() {
        const api = getElectronAPI();
        if (api.autoMode?.runFeature) {
          try {
-            await api.autoMode.runFeature(currentProject.path, featureId);
+            await api.autoMode.runFeature(
+              currentProject.path,
+              featureId,
+              getEffectiveUseWorktrees(currentProject.path)
+            );
            toast.success('Feature created and started', {
              description: `Addressing review comments on PR #${pr.number}`,
            });
@@ -118,7 +125,7 @@ export function GitHubPRsView() {
        });
      }
    },
-    [currentProject, createFeature]
+    [currentProject, createFeature, getEffectiveUseWorktrees]
  );

  const formatDate = (dateString: string) => {
--- a/apps/ui/src/components/views/graph-view-page.tsx
+++ b/apps/ui/src/components/views/graph-view-page.tsx
@@ -1,4 +1,4 @@
-import { useState, useCallback, useMemo, useEffect } from 'react';
+import { useState, useCallback, useMemo, useEffect, useRef } from 'react';
 import { useAppStore, Feature, FeatureImagePath } from '@/store/app-store';
 import { useShallow } from 'zustand/react/shallow';
 import { GraphView } from './graph-view';
@@ -10,7 +10,13 @@ import {
 } from './board-view/dialogs';
 import { useBoardFeatures, useBoardActions, useBoardPersistence } from './board-view/hooks';
 import { useWorktrees } from './board-view/worktree-panel/hooks';
+import {
+  WorktreeMobileDropdown,
+  BranchSwitchDropdown,
+} from './board-view/worktree-panel/components';
+import type { BranchInfo, WorktreeInfo } from './board-view/worktree-panel/types';
 import { useAutoMode } from '@/hooks/use-auto-mode';
+import { useSwitchBranch } from '@/hooks/mutations';
 import { pathsEqual } from '@/lib/utils';
 import { Spinner } from '@/components/ui/spinner';
 import { getElectronAPI } from '@/lib/electron';
@@ -51,7 +57,7 @@ export function GraphViewPage() {
  );

  // Ensure worktrees are loaded when landing directly on graph view
-  useWorktrees({ projectPath: currentProject?.path ?? '' });
+  const { handleSelectWorktree } = useWorktrees({ projectPath: currentProject?.path ?? '' });

  const worktreesByProject = useAppStore((s) => s.worktreesByProject);
  const worktrees = useMemo(
@@ -108,6 +114,181 @@ export function GraphViewPage() {
  const selectedWorktreeBranch =
    currentWorktreeBranch || worktrees.find((w) => w.isMain)?.branch || 'main';

+  const repoDefaultBranch = worktrees.find((w) => w.isMain)?.branch;
+
+  // Branch card counts
+  const branchCardCounts = useMemo(() => {
+    return hookFeatures.reduce(
+      (counts, feature) => {
+        if (feature.status !== 'completed') {
+          const branch = (feature.branchName as string | undefined) ?? repoDefaultBranch ?? 'main';
+          counts[branch] = (counts[branch] || 0) + 1;
+        }
+        return counts;
+      },
+      {} as Record<string, number>
+    );
+  }, [hookFeatures, repoDefaultBranch]);
+
+  // Graph worktree selector state
+  const [branches, setBranches] = useState<BranchInfo[]>([]);
+  const [branchFilter, setBranchFilter] = useState('');
+  const [isLoadingBranches, setIsLoadingBranches] = useState(false);
+  const switchBranchMutation = useSwitchBranch();
+  const latestLoadBranchesId = useRef(0);
+
+  const graphWorktrees = useMemo<WorktreeInfo[]>(() => {
+    return worktrees.map((worktree) => ({
+      ...worktree,
+      isCurrent: worktree.isMain
+        ? currentWorktreePath === null
+        : pathsEqual(worktree.path, currentWorktreePath ?? ''),
+      hasWorktree: worktree.hasWorktree ?? true,
+    }));
+  }, [worktrees, currentWorktreePath]);
+
+  const isWorktreeSelected = useCallback(
+    (worktree: WorktreeInfo) => {
+      return worktree.isMain
+        ? currentWorktreePath === null
+        : pathsEqual(worktree.path, currentWorktreePath ?? '');
+    },
+    [currentWorktreePath]
+  );
+
+  const selectedGraphWorktree = useMemo(
+    () => graphWorktrees.find((worktree) => isWorktreeSelected(worktree)) ?? null,
+    [graphWorktrees, isWorktreeSelected]
+  );
+
+  const filteredBranches = useMemo(() => {
+    const query = branchFilter.trim().toLowerCase();
+    if (!query) return branches;
+    return branches.filter((branch) => branch.name.toLowerCase().includes(query));
+  }, [branches, branchFilter]);
+
+  const loadBranchesForWorktree = useCallback(async (worktreePath: string) => {
+    const requestId = ++latestLoadBranchesId.current;
+    setIsLoadingBranches(true);
+    try {
+      const api = getElectronAPI();
+      if (!api?.worktree?.listBranches) {
+        if (requestId === latestLoadBranchesId.current) {
+          setBranches([]);
+          setIsLoadingBranches(false);
+        }
+        return;
+      }
+
+      const result = await api.worktree.listBranches(worktreePath, true);
+      if (requestId !== latestLoadBranchesId.current) return;
+
+      if (!result.success || !result.result?.branches) {
+        setBranches([]);
+        return;
+      }
+
+      setBranches(
+        result.result.branches.map((branch) => ({
+          name: branch.name,
+          isCurrent: branch.isCurrent,
+          isRemote: branch.isRemote,
+        }))
+      );
+    } catch (error) {
+      if (requestId !== latestLoadBranchesId.current) return;
+      logger.error('Error loading branches for graph worktree selector:', error);
+      setBranches([]);
+    } finally {
+      if (requestId === latestLoadBranchesId.current) {
+        setIsLoadingBranches(false);
+      }
+    }
+  }, []);
+
+  const handleGraphSelectWorktree = useCallback(
+    (worktree: WorktreeInfo) => {
+      const matchingWorktree = worktrees.find((candidate) =>
+        worktree.isMain
+          ? candidate.isMain
+          : !candidate.isMain && pathsEqual(candidate.path, worktree.path)
+      );
+
+      if (matchingWorktree) {
+        handleSelectWorktree(matchingWorktree);
+      }
+    },
+    [worktrees, handleSelectWorktree]
+  );
+
+  const handleBranchDropdownOpenChange = useCallback(
+    (open: boolean) => {
+      if (!open || !selectedGraphWorktree) return;
+      setBranchFilter('');
+      loadBranchesForWorktree(selectedGraphWorktree.path);
+    },
+    [selectedGraphWorktree, loadBranchesForWorktree]
+  );
+
+  const handleGraphSwitchBranch = useCallback(
+    (worktree: WorktreeInfo, branchName: string) => {
+      switchBranchMutation.mutate({
+        worktreePath: worktree.path,
+        branchName,
+      });
+    },
+    [switchBranchMutation]
+  );
+
+  const graphWorktreeSelector = useMemo(() => {
+    return (
+      <div className="flex items-center gap-2 w-full sm:w-auto">
+        <WorktreeMobileDropdown
+          worktrees={graphWorktrees}
+          isWorktreeSelected={isWorktreeSelected}
+          hasRunningFeatures={() => false}
+          isDevServerRunning={() => false}
+          isDevServerStarting={() => false}
+          getDevServerInfo={() => undefined}
+          isActivating={false}
+          branchCardCounts={branchCardCounts}
+          onSelectWorktree={handleGraphSelectWorktree}
+        />
+        {selectedGraphWorktree && (
+          <BranchSwitchDropdown
+            worktree={selectedGraphWorktree}
+            isSelected={true}
+            standalone={true}
+            branches={branches}
+            filteredBranches={filteredBranches}
+            branchFilter={branchFilter}
+            isLoadingBranches={isLoadingBranches}
+            isSwitching={switchBranchMutation.isPending}
+            onOpenChange={handleBranchDropdownOpenChange}
+            onFilterChange={setBranchFilter}
+            onSwitchBranch={handleGraphSwitchBranch}
+            onCreateBranch={() => {
+              toast.info('Create branch is available in the board worktree panel.');
+            }}
+          />
+        )}
+      </div>
+    );
+  }, [
+    graphWorktrees,
+    isWorktreeSelected,
+    branchCardCounts,
+    handleGraphSelectWorktree,
+    selectedGraphWorktree,
+    branches,
+    filteredBranches,
+    branchFilter,
+    isLoadingBranches,
+    switchBranchMutation.isPending,
+    handleBranchDropdownOpenChange,
+    handleGraphSwitchBranch,
+  ]);
+
  // Branch suggestions
  const [branchSuggestions, setBranchSuggestions] = useState<string[]>([]);

@@ -205,20 +386,6 @@ export function GraphViewPage() {
    };
  }, [currentProject, pendingBacklogPlan]);

-  // Branch card counts
-  const branchCardCounts = useMemo(() => {
-    return hookFeatures.reduce(
-      (counts, feature) => {
-        if (feature.status !== 'completed') {
-          const branch = (feature.branchName as string | undefined) ?? 'main';
-          counts[branch] = (counts[branch] || 0) + 1;
-        }
-        return counts;
-      },
-      {} as Record<string, number>
-    );
-  }, [hookFeatures]);
-
  // Category suggestions
  const categorySuggestions = useMemo(() => {
    const featureCategories = hookFeatures.map((f) => f.category).filter(Boolean);
@@ -424,6 +591,7 @@ export function GraphViewPage() {
        hasPendingPlan={Boolean(pendingBacklogPlan)}
        planUseSelectedWorktreeBranch={planUseSelectedWorktreeBranch}
        onPlanUseSelectedWorktreeBranchChange={setPlanUseSelectedWorktreeBranch}
+        worktreeSelector={graphWorktreeSelector}
      />

      {/* Edit Feature Dialog */}
--- a/apps/ui/src/components/views/graph-view/graph-canvas.tsx
+++ b/apps/ui/src/components/views/graph-view/graph-canvas.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useState, useEffect, useMemo, useRef } from 'react';
+import { useCallback, useState, useEffect, useMemo, useRef, type ReactNode } from 'react';
 import {
  ReactFlow,
  Background,
@@ -81,6 +81,7 @@ interface GraphCanvasProps {
  backgroundSettings?: BackgroundSettings;
  className?: string;
  projectPath?: string | null;
+  worktreeSelector?: ReactNode;
 }

 // Helper to get session storage key for viewport
@@ -130,6 +131,7 @@ function GraphCanvasInner({
  backgroundSettings,
  className,
  projectPath,
+  worktreeSelector,
 }: GraphCanvasProps) {
  const [isLocked, setIsLocked] = useState(false);
  const [layoutDirection, setLayoutDirection] = useState<'LR' | 'TB'>('LR');
@@ -539,9 +541,10 @@ function GraphCanvasInner({

        <GraphLegend />

-        {/* Add Feature Button */}
-        <Panel position="top-right">
-          <div className="flex items-center gap-2">
+        {/* Worktree selector + actions */}
+        <Panel position="top-right" className="mt-14 sm:mt-0">
+          <div className="flex flex-col items-end gap-2">
+            {worktreeSelector}
            {onOpenPlanDialog && (
              <div className="flex items-center gap-1.5 rounded-md border border-border bg-secondary/60 px-2 py-1 shadow-sm">
                {hasPendingPlan && (
@@ -572,7 +575,12 @@ function GraphCanvasInner({
                  )}
              </div>
            )}
-            <Button variant="default" size="sm" onClick={onAddFeature} className="gap-1.5">
+            <Button
+              variant="default"
+              size="sm"
+              onClick={onAddFeature}
+              className="gap-1.5 w-full sm:w-auto"
+            >
              <Plus className="w-4 h-4" />
              Add Feature
            </Button>
--- a/apps/ui/src/components/views/graph-view/graph-view.tsx
+++ b/apps/ui/src/components/views/graph-view/graph-view.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useCallback } from 'react';
+import { useMemo, useCallback, type ReactNode } from 'react';
 import { Feature, useAppStore } from '@/store/app-store';
 import { GraphCanvas } from './graph-canvas';
 import { useBoardBackground } from '../board-view/hooks';
@@ -27,6 +27,7 @@ interface GraphViewProps {
  hasPendingPlan?: boolean;
  planUseSelectedWorktreeBranch?: boolean;
  onPlanUseSelectedWorktreeBranchChange?: (value: boolean) => void;
+  worktreeSelector?: ReactNode;
 }

 export function GraphView({
@@ -50,6 +51,7 @@ export function GraphView({
  hasPendingPlan,
  planUseSelectedWorktreeBranch,
  onPlanUseSelectedWorktreeBranchChange,
+  worktreeSelector,
 }: GraphViewProps) {
  const currentProject = useAppStore((state) => state.currentProject);

@@ -235,6 +237,7 @@ export function GraphView({
        hasPendingPlan={hasPendingPlan}
        planUseSelectedWorktreeBranch={planUseSelectedWorktreeBranch}
        onPlanUseSelectedWorktreeBranchChange={onPlanUseSelectedWorktreeBranchChange}
+        worktreeSelector={worktreeSelector}
        backgroundStyle={backgroundImageStyle}
        backgroundSettings={backgroundSettings}
        projectPath={projectPath}
--- a/apps/ui/src/components/views/graph-view/hooks/use-graph-nodes.ts
+++ b/apps/ui/src/components/views/graph-view/hooks/use-graph-nodes.ts
@@ -189,7 +189,15 @@ export function useGraphNodes({
    });

    return { nodes: nodeList, edges: edgeList };
-  }, [features, runningAutoTasks, filterResult, actionCallbacks, backgroundSettings]);
+  }, [
+    features,
+    runningAutoTasks,
+    filterResult,
+    actionCallbacks,
+    backgroundSettings,
+    renderMode,
+    enableEdgeAnimations,
+  ]);

  return { nodes, edges };
 }
--- a/apps/ui/src/components/views/interview-view.tsx
+++ b/apps/ui/src/components/views/interview-view.tsx
@@ -230,6 +230,7 @@ export function InterviewView() {
        });
      }
    }, 500);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- generateSpec is stable
  }, [input, isGenerating, isComplete, currentQuestionIndex, interviewData]);

  const generateSpec = useCallback(async (data: InterviewState) => {
--- a/apps/ui/src/components/views/login-view.tsx
+++ b/apps/ui/src/components/views/login-view.tsx
@@ -319,7 +319,8 @@ export function LoginView() {
    if (state.phase === 'redirecting') {
      navigate({ to: state.to });
    }
-  }, [state.phase, state.phase === 'redirecting' ? state.to : null, navigate]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- state.to only accessed when phase is redirecting
+  }, [state.phase, navigate]);

  // Handle login form submission
  const handleSubmit = (e: React.FormEvent) => {
--- a/apps/ui/src/components/views/project-settings-view/project-bulk-replace-dialog.tsx
+++ b/apps/ui/src/components/views/project-settings-view/project-bulk-replace-dialog.tsx
@@ -226,6 +226,7 @@ export function ProjectBulkReplaceDialog({
    });

    return [defaultFeaturePreview, ...phasePreview];
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- generatePreviewItem is stable helper
  }, [
    phaseModels,
    projectOverrides,
--- a/apps/ui/src/components/views/running-agents-view.tsx
+++ b/apps/ui/src/components/views/running-agents-view.tsx
@@ -55,7 +55,8 @@ export function RunningAgentsView() {
      // Use mutation for regular features
      stopFeature.mutate({ featureId: agent.featureId, projectPath: agent.projectPath });
    },
-    [stopFeature, refetch, logger]
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- logger is stable
+    [stopFeature, refetch]
  );

  const handleNavigateToProject = useCallback(
@@ -75,6 +76,7 @@ export function RunningAgentsView() {
        });
      }
    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- logger is stable
    [projects, setCurrentProject, navigate]
  );

@@ -84,6 +86,7 @@ export function RunningAgentsView() {
      projectPath: agent.projectPath,
    });
    setSelectedAgent(agent);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- logger is stable
  }, []);

  if (isLoading) {
--- a/apps/ui/src/components/views/settings-view.tsx
+++ b/apps/ui/src/components/views/settings-view.tsx
@@ -67,7 +67,6 @@ export function SettingsView() {
    defaultMaxTurns,
    setDefaultMaxTurns,
    featureTemplates,
-    setFeatureTemplates,
    addFeatureTemplate,
    updateFeatureTemplate,
    deleteFeatureTemplate,
--- a/apps/ui/src/components/views/settings-view/model-defaults/bulk-replace-dialog.tsx
+++ b/apps/ui/src/components/views/settings-view/model-defaults/bulk-replace-dialog.tsx
@@ -214,7 +214,14 @@ export function BulkReplaceDialog({ open, onOpenChange }: BulkReplaceDialogProps
    });

    return [defaultFeaturePreview, ...phasePreview];
-  }, [phaseModels, selectedProviderConfig, enabledProviders, defaultFeatureModel]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- generatePreviewItem depends on enabledProviders and selectedProviderConfig, which are already in deps
+  }, [
+    phaseModels,
+    selectedProviderConfig,
+    enabledProviders,
+    defaultFeatureModel,
+    generatePreviewItem,
+  ]);

  // Count how many will change
  const changeCount = preview.filter((p) => p.isChanged).length;
--- a/apps/ui/src/components/views/settings-view/model-defaults/phase-model-selector.tsx
+++ b/apps/ui/src/components/views/settings-view/model-defaults/phase-model-selector.tsx
@@ -1,6 +1,7 @@
 import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
 import { cn } from '@/lib/utils';
 import { useAppStore } from '@/store/app-store';
+import { useShallow } from 'zustand/react/shallow';
 import { useIsMobile } from '@/hooks/use-media-query';
 import { useOpencodeModels } from '@/hooks/queries';
 import type {
@@ -186,7 +187,23 @@ export function PhaseModelSelector({
    claudeCompatibleProviders,
    defaultThinkingLevel: storeDefaultThinkingLevel,
    defaultReasoningEffort: storeDefaultReasoningEffort,
-  } = useAppStore();
+  } = useAppStore(
+    useShallow((state) => ({
+      enabledCursorModels: state.enabledCursorModels,
+      enabledGeminiModels: state.enabledGeminiModels,
+      enabledCopilotModels: state.enabledCopilotModels,
+      favoriteModels: state.favoriteModels,
+      toggleFavoriteModel: state.toggleFavoriteModel,
+      codexModels: state.codexModels,
+      codexModelsLoading: state.codexModelsLoading,
+      fetchCodexModels: state.fetchCodexModels,
+      enabledDynamicModelIds: state.enabledDynamicModelIds,
+      disabledProviders: state.disabledProviders,
+      claudeCompatibleProviders: state.claudeCompatibleProviders,
+      defaultThinkingLevel: state.defaultThinkingLevel,
+      defaultReasoningEffort: state.defaultReasoningEffort,
+    }))
+  );

  // Use React Query for OpenCode models so that changes made in the settings tab
  // (which also uses React Query) are immediately reflected here via the shared cache,
@@ -674,6 +691,7 @@ export function PhaseModelSelector({
    transformedCodexModels,
    allOpencodeModels,
    disabledProviders,
+    isCursorDisabled,
  ]);

  // Group OpenCode models by model type for better organization
--- a/apps/ui/src/components/views/settings-view/providers/opencode-model-configuration.tsx
+++ b/apps/ui/src/components/views/settings-view/providers/opencode-model-configuration.tsx
@@ -262,20 +262,23 @@ export function OpencodeModelConfiguration({
  const providerOrder: OpencodeProvider[] = ['opencode'];

  // Dynamic provider order (prioritize commonly used ones)
-  const dynamicProviderOrder = [
-    'github-copilot',
-    'google',
-    'openai',
-    'openrouter',
-    'anthropic',
-    'xai',
-    'deepseek',
-    'ollama',
-    'lmstudio',
-    'azure',
-    'amazon-bedrock',
-    'opencode', // Skip opencode in dynamic since it's in static
-  ];
+  const dynamicProviderOrder = useMemo(
+    () => [
+      'github-copilot',
+      'google',
+      'openai',
+      'openrouter',
+      'anthropic',
+      'xai',
+      'deepseek',
+      'ollama',
+      'lmstudio',
+      'azure',
+      'amazon-bedrock',
+      'opencode', // Skip opencode in dynamic since it's in static
+    ],
+    []
+  );

  const sortedDynamicProviders = useMemo(() => {
    const providerIndex = (providerId: string) => dynamicProviderOrder.indexOf(providerId);
@@ -294,7 +297,7 @@ export function OpencodeModelConfiguration({
      if (bIndex !== -1) return 1;
      return a.localeCompare(b);
    });
-  }, [dynamicModelsByProvider, providers]);
+  }, [dynamicModelsByProvider, providers, dynamicProviderOrder]);

  useEffect(() => {
    if (
--- a/apps/ui/src/components/views/setup-view/steps/cli-setup-step.tsx
+++ b/apps/ui/src/components/views/setup-view/steps/cli-setup-step.tsx
@@ -256,7 +256,7 @@ export function CliSetupStep({ config, state, onNext, onBack, onSkip }: CliSetup
      setApiKeyVerificationStatus('error');
      setApiKeyVerificationError(errorMessage);
    }
-  }, [authStatus, config, setAuthStatus]);
+  }, [authStatus, config, setAuthStatus, apiKey]);

  const deleteApiKey = useCallback(async () => {
    setIsDeletingApiKey(true);
--- a/apps/ui/src/components/views/spec-view/hooks/use-spec-generation.ts
+++ b/apps/ui/src/components/views/spec-view/hooks/use-spec-generation.ts
@@ -55,10 +55,20 @@ export function useSpecGeneration({ loadSpec }: UseSpecGenerationOptions) {
  // Phase tracking and status
  const [currentPhase, setCurrentPhase] = useState<string>('');
  const [errorMessage, setErrorMessage] = useState<string>('');
+  const currentPhaseRef = useRef<string>('');
+  const errorMessageRef = useRef<string>('');
  const statusCheckRef = useRef<boolean>(false);
  const stateRestoredRef = useRef<boolean>(false);
  const pendingStatusTimeoutRef = useRef<NodeJS.Timeout | null>(null);

+  useEffect(() => {
+    currentPhaseRef.current = currentPhase;
+  }, [currentPhase]);
+
+  useEffect(() => {
+    errorMessageRef.current = errorMessage;
+  }, [errorMessage]);
+
  // Reset all state when project changes
  useEffect(() => {
    setIsCreating(false);
@@ -300,7 +310,7 @@ export function useSpecGeneration({ loadSpec }: UseSpecGenerationOptions) {
        setLogs(newLog);
        logger.debug('[useSpecGeneration] Progress:', event.content.substring(0, 100));

-        if (errorMessage) {
+        if (errorMessageRef.current) {
          setErrorMessage('');
        }
      } else if (event.type === 'spec_regeneration_tool') {
@@ -310,7 +320,7 @@ export function useSpecGeneration({ loadSpec }: UseSpecGenerationOptions) {
          event.tool?.includes('Feature');

        if (isFeatureTool) {
-          if (currentPhase !== 'feature_generation') {
+          if (currentPhaseRef.current !== 'feature_generation') {
            setCurrentPhase('feature_generation');
            setIsCreating(true);
            setIsRegenerating(true);
@@ -420,7 +430,7 @@ export function useSpecGeneration({ loadSpec }: UseSpecGenerationOptions) {
    return () => {
      unsubscribe();
    };
-  }, [currentProject?.path, loadSpec, errorMessage, currentPhase]);
+  }, [currentProject, loadSpec]);

  // Handler functions
  const handleCreateSpec = useCallback(async () => {
--- a/apps/ui/src/components/views/terminal-view.tsx
+++ b/apps/ui/src/components/views/terminal-view.tsx
@@ -40,9 +40,6 @@ import {
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import {
@@ -1265,7 +1262,7 @@ export function TerminalView({
  // See: terminal-panel.tsx lines 319-399 for the shortcut handlers.

  // Collect all terminal IDs from a panel tree in order
-  const getTerminalIds = (panel: TerminalPanelContent): string[] => {
+  const getTerminalIds = useCallback((panel: TerminalPanelContent): string[] => {
    if (panel.type === 'terminal') {
      return [panel.sessionId];
    }
@@ -1273,7 +1270,7 @@ export function TerminalView({
      return panel.panels.flatMap(getTerminalIds);
    }
    return []; // testRunner type
-  };
+  }, []);

  // Get a STABLE key for a panel - uses the stable id for splits
  // This prevents unnecessary remounts when layout structure changes
@@ -1428,7 +1425,7 @@ export function TerminalView({
        setActiveTerminalSession(nextTerminal);
      }
    },
-    [activeTab?.layout, terminalState.activeSessionId, setActiveTerminalSession]
+    [activeTab?.layout, terminalState.activeSessionId, setActiveTerminalSession, getTerminalIds]
  );

  // Handle global keyboard shortcuts for pane navigation
@@ -1454,7 +1451,7 @@ export function TerminalView({

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [navigateToTerminal]);
+  }, [navigateToTerminal, getTerminalIds]);

  // Render panel content recursively
  const renderPanelContent = (content: TerminalPanelContent): React.ReactNode => {
--- a/apps/ui/src/components/views/terminal-view/terminal-panel.tsx
+++ b/apps/ui/src/components/views/terminal-view/terminal-panel.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useCallback, useState } from 'react';
+import { useEffect, useRef, useCallback, useState, useMemo } from 'react';
 import { useNavigate } from '@tanstack/react-router';
 import { createLogger } from '@automaker/utils/logger';
 import {
@@ -53,7 +53,7 @@ import { toast } from 'sonner';
 import { getElectronAPI } from '@/lib/electron';
 import { getApiKey, getSessionToken, getServerUrlSync } from '@/lib/http-api-client';
 import { writeToClipboard, readFromClipboard } from '@/lib/clipboard-utils';
-import { useIsMobile } from '@/hooks/use-media-query';
+import { useIsMobile, useIsTablet } from '@/hooks/use-media-query';
 import { useVirtualKeyboardResize } from '@/hooks/use-virtual-keyboard-resize';
 import { MobileTerminalShortcuts } from './mobile-terminal-shortcuts';
 import { applyStickyModifier, type StickyModifier } from './sticky-modifier-keys';
@@ -161,6 +161,8 @@ export function TerminalPanel({
  const [isImageDragOver, setIsImageDragOver] = useState(false);
  const [isProcessingImage, setIsProcessingImage] = useState(false);
  const hasRunInitialCommandRef = useRef(false);
+  const runCommandOnConnectRef = useRef(runCommandOnConnect);
+  const onCommandRanRef = useRef(onCommandRan);
  // Long-press timer for mobile context menu
  const longPressTimerRef = useRef<NodeJS.Timeout | null>(null);
  const longPressTouchStartRef = useRef<{ x: number; y: number } | null>(null);
@@ -176,6 +178,9 @@ export function TerminalPanel({
  const showSearchRef = useRef(false);
  const [isAtBottom, setIsAtBottom] = useState(true);

+  runCommandOnConnectRef.current = runCommandOnConnect;
+  onCommandRanRef.current = onCommandRan;
+
  // Mobile text selection mode - renders terminal buffer as selectable DOM text
  const [isSelectMode, setIsSelectMode] = useState(false);
  const [selectModeText, setSelectModeText] = useState('');
@@ -192,8 +197,10 @@ export function TerminalPanel({
  const INITIAL_RECONNECT_DELAY = 1000;
  const [processExitCode, setProcessExitCode] = useState<number | null>(null);

-  // Detect mobile viewport for shortcuts bar
+  // Detect mobile/tablet viewport for shortcuts bar
  const isMobile = useIsMobile();
+  const isTablet = useIsTablet();
+  const showShortcutsBar = isMobile || isTablet;

  // Track virtual keyboard height on mobile to prevent overlap
  const { keyboardHeight, isKeyboardOpen } = useVirtualKeyboardResize();
@@ -514,18 +521,21 @@ export function TerminalPanel({

  // Get theme colors for search highlighting
  const terminalTheme = getTerminalTheme(effectiveTheme);
-  const searchOptions = {
-    caseSensitive: false,
-    regex: false,
-    decorations: {
-      matchBackground: terminalTheme.searchMatchBackground,
-      matchBorder: terminalTheme.searchMatchBorder,
-      matchOverviewRuler: terminalTheme.searchMatchBorder,
-      activeMatchBackground: terminalTheme.searchActiveMatchBackground,
-      activeMatchBorder: terminalTheme.searchActiveMatchBorder,
-      activeMatchColorOverviewRuler: terminalTheme.searchActiveMatchBorder,
-    },
-  };
+  const searchOptions = useMemo(
+    () => ({
+      caseSensitive: false,
+      regex: false,
+      decorations: {
+        matchBackground: terminalTheme.searchMatchBackground,
+        matchBorder: terminalTheme.searchMatchBorder,
+        matchOverviewRuler: terminalTheme.searchMatchBorder,
+        activeMatchBackground: terminalTheme.searchActiveMatchBackground,
+        activeMatchBorder: terminalTheme.searchActiveMatchBorder,
+        activeMatchColorOverviewRuler: terminalTheme.searchActiveMatchBorder,
+      },
+    }),
+    [terminalTheme]
+  );

  // Search functions
  const searchNext = useCallback(() => {
@@ -1207,8 +1217,9 @@ export function TerminalPanel({
              }
              // Run initial command if specified and not already run
              // Only run for new terminals (no scrollback received)
+              const initialCommand = runCommandOnConnectRef.current;
              if (
-                runCommandOnConnect &&
+                initialCommand &&
                !hasRunInitialCommandRef.current &&
                ws.readyState === WebSocket.OPEN
              ) {
@@ -1222,10 +1233,8 @@ export function TerminalPanel({

                setTimeout(() => {
                  if (ws.readyState === WebSocket.OPEN) {
-                    ws.send(
-                      JSON.stringify({ type: 'input', data: runCommandOnConnect + lineEnding })
-                    );
-                    onCommandRan?.();
+                    ws.send(JSON.stringify({ type: 'input', data: initialCommand + lineEnding }));
+                    onCommandRanRef.current?.();
                  }
                }, delay);
              }
@@ -1506,21 +1515,36 @@ export function TerminalPanel({
  }, [fontSize, isTerminalReady]);

  // Update terminal theme when app theme or custom colors change (including system preference)
+  // We read directly from the store to ensure we have the latest values, avoiding potential
+  // stale closure issues with the useShallow subscription when the terminal first becomes ready.
+  // The dependency array includes the subscription values to trigger the effect when colors change,
+  // but we read from getState() inside to guarantee we always have the most current values.
  useEffect(() => {
    if (xtermRef.current && isTerminalReady) {
      // Clear any search decorations first to prevent stale color artifacts
      searchAddonRef.current?.clearDecorations();
      const baseTheme = getTerminalTheme(resolvedTheme);
+
+      // Read colors directly from store to ensure we have the latest values.
+      // This fixes a race condition where the terminal might be created before
+      // settings are fully hydrated from the server. We prioritize store values
+      // over subscription values to avoid stale closures.
+      const storeState = useAppStore.getState().terminalState;
+      const customBgColor = storeState.customBackgroundColor;
+      const customFgColor = storeState.customForegroundColor;
+
      const terminalTheme =
-        customBackgroundColor || customForegroundColor
+        customBgColor || customFgColor
          ? {
              ...baseTheme,
-              ...(customBackgroundColor && { background: customBackgroundColor }),
-              ...(customForegroundColor && { foreground: customForegroundColor }),
+              ...(customBgColor && { background: customBgColor }),
+              ...(customFgColor && { foreground: customFgColor }),
            }
          : baseTheme;
      xtermRef.current.options.theme = terminalTheme;
    }
+    // Note: customBackgroundColor and customForegroundColor are in dependencies to trigger
+    // re-renders when colors change, but we read from getState() inside for actual values
  }, [resolvedTheme, customBackgroundColor, customForegroundColor, isTerminalReady]);

  // Handle keyboard shortcuts for zoom (Ctrl+Plus, Ctrl+Minus, Ctrl+0)
@@ -1588,7 +1612,7 @@ export function TerminalPanel({
  }, [zoomIn, zoomOut]);

  // Context menu actions for keyboard navigation
-  const menuActions = ['copy', 'paste', 'selectAll', 'clear'] as const;
+  const menuActions = useMemo(() => ['copy', 'paste', 'selectAll', 'clear'] as const, []);

  // Keep ref in sync with state for use in event handlers
  useEffect(() => {
@@ -1658,7 +1682,7 @@ export function TerminalPanel({
      document.removeEventListener('scroll', handleScroll, true);
      document.removeEventListener('keydown', handleKeyDown);
    };
-  }, [contextMenu, closeContextMenu, handleContextMenuAction]);
+  }, [contextMenu, closeContextMenu, handleContextMenuAction, menuActions]);

  // Focus the correct menu item when navigation changes
  useEffect(() => {
@@ -1667,16 +1691,16 @@ export function TerminalPanel({
    buttons[focusedMenuIndex]?.focus();
  }, [focusedMenuIndex, contextMenu]);

-  // Reset select mode when viewport transitions from mobile to non-mobile.
-  // The select-mode overlay is only rendered when (isSelectMode && isMobile), so if the
-  // viewport becomes non-mobile while isSelectMode is true the overlay disappears but the
+  // Reset select mode when viewport transitions away from shortcuts-bar viewports.
+  // The select-mode overlay is only rendered when (isSelectMode && showShortcutsBar), so if the
+  // viewport no longer shows the shortcuts bar while isSelectMode is true the overlay disappears but the
  // state is left dirty with no UI to clear it. Resetting here keeps state consistent.
  useEffect(() => {
-    if (!isMobile && isSelectMode) {
+    if (!showShortcutsBar && isSelectMode) {
      setIsSelectMode(false);
      setSelectModeText('');
    }
-  }, [isMobile]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [showShortcutsBar, isSelectMode]);

  // Handle right-click context menu with boundary checking
  const handleContextMenu = useCallback((e: React.MouseEvent) => {
@@ -2398,8 +2422,8 @@ export function TerminalPanel({
        </div>
      )}

-      {/* Mobile shortcuts bar - special keys, clipboard, and arrow keys for touch devices */}
-      {isMobile && (
+      {/* Mobile/tablet shortcuts bar - special keys, clipboard, and arrow keys for touch devices */}
+      {showShortcutsBar && (
        <MobileTerminalShortcuts
          onSendInput={sendTerminalInput}
          isConnected={connectionStatus === 'connected'}
@@ -2443,7 +2467,7 @@ export function TerminalPanel({
            Overlays the canvas so users can use native touch selection on real DOM text.
            xterm.js renders to a <canvas>, which prevents native text selection on mobile.
            This overlay shows the same content as real DOM text that supports touch selection. */}
-        {isSelectMode && isMobile && (
+        {isSelectMode && showShortcutsBar && (
          <div className="absolute inset-0 z-30 flex flex-col">
            {/* Header bar with copy/done actions */}
            <div className="flex items-center justify-between px-3 py-2 bg-brand-500/95 backdrop-blur-sm text-white shrink-0">