feat: Add process abort control and improve auth detection

apps/ui/src/components/views/board-view/dialogs/commit-worktree-dialog.tsx

@@ -103,8 +103,6 @@ const getStatusBadgeColor = (status: string) => {
   }
 };
 
-// parseDiff is imported from @/lib/diff-utils
-
 function DiffLine({
   type,
   content,
@@ -236,7 +234,12 @@ export function CommitWorktreeDialog({
             }
           }
         } catch (err) {
-          console.warn('Failed to load diffs for commit dialog:', err);
+          console.error('Failed to load diffs for commit dialog:', err);
+          if (!cancelled) {
+            const errorMsg = err instanceof Error ? err.message : 'Failed to load diffs';
+            setError(errorMsg);
+            toast.error(errorMsg);
+          }
         } finally {
           if (!cancelled) setIsLoadingDiffs(false);
         }

apps/ui/src/components/views/board-view/dialogs/discard-worktree-changes-dialog.tsx

@@ -102,7 +102,26 @@ const getStatusBadgeColor = (status: string) => {
   }
 };
 
-// parseDiff is imported from @/lib/diff-utils
+const bgClass = {
+  context: 'bg-transparent',
+  addition: 'bg-green-500/10',
+  deletion: 'bg-red-500/10',
+  header: 'bg-blue-500/10',
+};
+
+const textClass = {
+  context: 'text-foreground-secondary',
+  addition: 'text-green-400',
+  deletion: 'text-red-400',
+  header: 'text-blue-400',
+};
+
+const prefix = {
+  context: ' ',
+  addition: '+',
+  deletion: '-',
+  header: '',
+};
 
 function DiffLine({
   type,
@@ -113,27 +132,6 @@ function DiffLine({
   content: string;
   lineNumber?: { old?: number; new?: number };
 }) {
-  const bgClass = {
-    context: 'bg-transparent',
-    addition: 'bg-green-500/10',
-    deletion: 'bg-red-500/10',
-    header: 'bg-blue-500/10',
-  };
-
-  const textClass = {
-    context: 'text-foreground-secondary',
-    addition: 'text-green-400',
-    deletion: 'text-red-400',
-    header: 'text-blue-400',
-  };
-
-  const prefix = {
-    context: ' ',
-    addition: '+',
-    deletion: '-',
-    header: '',
-  };
-
   if (type === 'header') {
     return (
       <div className={cn('px-2 py-1 font-mono text-xs', bgClass[type], textClass[type])}>
@@ -332,6 +330,7 @@ export function DiscardWorktreeChangesDialog({
               </Label>
               {files.length > 0 && (
                 <button
+                  type="button"
                   onClick={handleToggleAll}
                   className="text-xs text-muted-foreground hover:text-foreground transition-colors"
                 >
@@ -368,6 +367,8 @@ export function DiscardWorktreeChangesDialog({
                       )
                     : 0;
 
+                  const fileButtonId = `file-btn-${file.path.replace(/[^a-zA-Z0-9]/g, '-')}`;
+
                   return (
                     <div key={file.path} className="border-b border-border last:border-b-0">
                       <div
@@ -381,11 +382,15 @@ export function DiscardWorktreeChangesDialog({
                           checked={isChecked}
                           onCheckedChange={() => handleToggleFile(file.path)}
                           className="flex-shrink-0"
+                          aria-labelledby={fileButtonId}
                         />
 
                         {/* Clickable file row to show diff */}
                         <button
+                          id={fileButtonId}
+                          type="button"
                           onClick={() => handleFileClick(file.path)}
+                          aria-expanded={isExpanded}
                           className="flex items-center gap-2 flex-1 min-w-0 text-left"
                         >
                           {isExpanded ? (

apps/ui/src/components/views/board-view/mobile-usage-bar.tsx

@@ -5,7 +5,11 @@ import { Spinner } from '@/components/ui/spinner';
 import { getElectronAPI } from '@/lib/electron';
 import { useAppStore } from '@/store/app-store';
 import { AnthropicIcon, OpenAIIcon, ZaiIcon, GeminiIcon } from '@/components/ui/provider-icon';
-import { getExpectedWeeklyPacePercentage, getPaceStatusLabel } from '@/store/utils/usage-utils';
+import {
+  getExpectedWeeklyPacePercentage,
+  getExpectedCodexPacePercentage,
+  getPaceStatusLabel,
+} from '@/store/utils/usage-utils';
 
 interface MobileUsageBarProps {
   showClaudeUsage: boolean;
@@ -345,6 +349,10 @@ export function MobileUsageBar({
                   label={getCodexWindowLabel(codexUsage.rateLimits.primary.windowDurationMins)}
                   percentage={codexUsage.rateLimits.primary.usedPercent}
                   isStale={isCodexStale}
+                  pacePercentage={getExpectedCodexPacePercentage(
+                    codexUsage.rateLimits.primary.resetsAt,
+                    codexUsage.rateLimits.primary.windowDurationMins
+                  )}
                 />
               )}
               {codexUsage.rateLimits.secondary && (
@@ -352,6 +360,10 @@ export function MobileUsageBar({
                   label={getCodexWindowLabel(codexUsage.rateLimits.secondary.windowDurationMins)}
                   percentage={codexUsage.rateLimits.secondary.usedPercent}
                   isStale={isCodexStale}
+                  pacePercentage={getExpectedCodexPacePercentage(
+                    codexUsage.rateLimits.secondary.resetsAt,
+                    codexUsage.rateLimits.secondary.windowDurationMins
+                  )}
                 />
               )}
             </>

apps/ui/src/components/views/settings-view/codex/codex-usage-section.tsx

@@ -11,6 +11,7 @@ import {
 import { useSetupStore } from '@/store/setup-store';
 import { useCodexUsage } from '@/hooks/queries';
 import type { CodexRateLimitWindow } from '@/store/app-store';
+import { getExpectedCodexPacePercentage, getPaceStatusLabel } from '@/store/utils/usage-utils';
 
 const CODEX_USAGE_TITLE = 'Codex Usage';
 const CODEX_USAGE_SUBTITLE = 'Shows usage limits reported by the Codex CLI.';
@@ -73,6 +74,12 @@ export function CodexUsageSection() {
   }) => {
     const safePercentage = Math.min(Math.max(limitWindow.usedPercent, 0), MAX_PERCENTAGE);
     const resetLabel = formatCodexResetTime(limitWindow.resetsAt);
+    const pacePercentage = getExpectedCodexPacePercentage(
+      limitWindow.resetsAt,
+      limitWindow.windowDurationMins
+    );
+    const paceLabel =
+      pacePercentage != null ? getPaceStatusLabel(safePercentage, pacePercentage) : null;
 
     return (
       <div className="rounded-xl border border-border/60 bg-card/50 p-4">
@@ -85,7 +92,7 @@ export function CodexUsageSection() {
             {Math.round(safePercentage)}%
           </span>
         </div>
-        <div className="mt-3 h-2 w-full rounded-full bg-secondary/60">
+        <div className="relative mt-3 h-2 w-full rounded-full bg-secondary/60">
           <div
             className={cn(
               'h-full rounded-full transition-all duration-300',
@@ -93,8 +100,29 @@ export function CodexUsageSection() {
             )}
             style={{ width: `${safePercentage}%` }}
           />
+          {pacePercentage != null && pacePercentage > 0 && pacePercentage < 100 && (
+            <div
+              className="absolute top-0 h-full w-0.5 bg-foreground/60"
+              style={{ left: `${pacePercentage}%` }}
+              title={`Expected: ${Math.round(pacePercentage)}%`}
+            />
+          )}
+        </div>
+        <div className="mt-2 flex items-center justify-between">
+          {paceLabel ? (
+            <p
+              className={cn(
+                'text-xs font-medium',
+                safePercentage > (pacePercentage ?? 0) ? 'text-orange-500' : 'text-green-500'
+              )}
+            >
+              {paceLabel}
+            </p>
+          ) : (
+            <div />
+          )}
+          {resetLabel && <p className="text-xs text-muted-foreground">{resetLabel}</p>}
         </div>
-        {resetLabel && <p className="mt-2 text-xs text-muted-foreground">{resetLabel}</p>}
       </div>
     );
   };

apps/ui/src/components/views/settings-view/model-defaults/phase-model-selector.tsx

@@ -2,6 +2,7 @@ import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
 import { cn } from '@/lib/utils';
 import { useAppStore } from '@/store/app-store';
 import { useIsMobile } from '@/hooks/use-media-query';
+import { useOpencodeModels } from '@/hooks/queries';
 import type {
   ModelAlias,
   CursorModelId,
@@ -180,14 +181,16 @@ export function PhaseModelSelector({
     codexModels,
     codexModelsLoading,
     fetchCodexModels,
-    dynamicOpencodeModels,
     enabledDynamicModelIds,
-    opencodeModelsLoading,
-    fetchOpencodeModels,
     disabledProviders,
     claudeCompatibleProviders,
   } = useAppStore();
 
+  // 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,
+  // without requiring a page refresh.
+  const { data: dynamicOpencodeModels = [] } = useOpencodeModels();
+
   // Detect mobile devices to use inline expansion instead of nested popovers
   const isMobile = useIsMobile();
 
@@ -211,14 +214,9 @@ export function PhaseModelSelector({
     }
   }, [codexModels.length, codexModelsLoading, fetchCodexModels]);
 
-  // Fetch OpenCode models on mount
-  useEffect(() => {
-    if (dynamicOpencodeModels.length === 0 && !opencodeModelsLoading) {
-      fetchOpencodeModels().catch(() => {
-        // Silently fail - user will see only static OpenCode models
-      });
-    }
-  }, [dynamicOpencodeModels.length, opencodeModelsLoading, fetchOpencodeModels]);
+  // OpenCode dynamic models are now fetched via React Query (useOpencodeModels above),
+  // which shares a cache with the settings tab. This ensures that newly enabled models
+  // appear in the selector immediately after the settings tab fetches/invalidates the data.
 
   // Close expanded group when trigger scrolls out of view
   useEffect(() => {

apps/ui/src/components/views/settings-view/providers/opencode-settings-tab.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback, useMemo } from 'react';
+import { useState, useCallback, useMemo, useEffect } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
 import { useAppStore } from '@/store/app-store';
@@ -20,6 +20,7 @@ export function OpencodeSettingsTab() {
     toggleOpencodeModel,
     enabledDynamicModelIds,
     toggleDynamicModel,
+    setDynamicOpencodeModels,
   } = useAppStore();
 
   const [isSaving, setIsSaving] = useState(false);
@@ -37,6 +38,16 @@ export function OpencodeSettingsTab() {
 
   const { data: modelsData = [], isFetching: isFetchingModels } = useOpencodeModels();
 
+  // Sync React Query opencode models data to Zustand store so that the model
+  // selector dropdown (PhaseModelSelector) reflects newly enabled models without
+  // requiring a page refresh. The selector reads from the Zustand store while
+  // this settings tab fetches via React Query — keeping them in sync bridges that gap.
+  useEffect(() => {
+    if (modelsData.length > 0) {
+      setDynamicOpencodeModels(modelsData);
+    }
+  }, [modelsData, setDynamicOpencodeModels]);
+
   // Transform CLI status to the expected format
   const cliStatus = useMemo((): SharedCliStatus | null => {
     if (!cliStatusData) return null;