feat(KB-132): auto-open Settings to Authentication tab when unauthenticated

- Add initialSection prop to SettingsModal to allow opening to a specific tab
- Export SectionId type from SettingsModal for use by parent components
- Check auth status on App mount and auto-open Settings to Authentication tab when all providers are unauthenticated
- Reset initialSection on modal close so subsequent manual opens default to General
- Add comprehensive tests for auto-open behavior and initialSection prop

packages/dashboard/app/App.tsx

@@ -1,10 +1,11 @@
 import { useState, useCallback, useEffect } from "react";
 import type { TaskDetail, TaskCreateInput, Task } from "@kb/core";
-import { fetchConfig, fetchSettings, updateSettings } from "./api";
+import { fetchConfig, fetchSettings, fetchAuthStatus, updateSettings } from "./api";
 import { Header } from "./components/Header";
 import { Board } from "./components/Board";
 import { TaskDetailModal } from "./components/TaskDetailModal";
 import { SettingsModal } from "./components/SettingsModal";
+import type { SectionId } from "./components/SettingsModal";
 import { ToastContainer } from "./components/ToastContainer";
 import { useTasks } from "./hooks/useTasks";
 import { ToastProvider, useToast } from "./hooks/useToast";
@@ -13,6 +14,7 @@ function AppInner() {
   const [isCreating, setIsCreating] = useState(false);
   const [detailTask, setDetailTask] = useState<TaskDetail | null>(null);
   const [settingsOpen, setSettingsOpen] = useState(false);
+  const [settingsInitialSection, setSettingsInitialSection] = useState<SectionId | undefined>(undefined);
   const [maxConcurrent, setMaxConcurrent] = useState(2);
   const [autoMerge, setAutoMerge] = useState(false);
   const { tasks, createTask, moveTask, deleteTask, mergeTask, retryTask } = useTasks();
@@ -24,6 +26,14 @@ function AppInner() {
     fetchSettings()
       .then((s) => setAutoMerge(!!s.autoMerge))
       .catch(() => {/* keep default */});
+    fetchAuthStatus()
+      .then(({ providers }) => {
+        if (providers.length > 0 && providers.every((p) => !p.authenticated)) {
+          setSettingsOpen(true);
+          setSettingsInitialSection("authentication");
+        }
+      })
+      .catch(() => {/* fail silently — do not auto-open */});
   }, []);
   const { toasts, addToast, removeToast } = useToast();
 
@@ -84,7 +94,14 @@ function AppInner() {
         />
       )}
       {settingsOpen && (
-        <SettingsModal onClose={() => setSettingsOpen(false)} addToast={addToast} />
+        <SettingsModal
+          onClose={() => {
+            setSettingsOpen(false);
+            setSettingsInitialSection(undefined);
+          }}
+          addToast={addToast}
+          initialSection={settingsInitialSection}
+        />
       )}
       <ToastContainer toasts={toasts} onRemove={removeToast} />
     </>

packages/dashboard/app/components/SettingsModal.tsx

@@ -32,17 +32,19 @@ const SETTINGS_SECTIONS = [
   { id: "authentication", label: "Authentication" },
 ] as const;
 
-type SectionId = (typeof SETTINGS_SECTIONS)[number]["id"];
+export type SectionId = (typeof SETTINGS_SECTIONS)[number]["id"];
 
 interface SettingsModalProps {
   onClose: () => void;
   addToast: (message: string, type?: ToastType) => void;
+  /** Optional section to show when the modal first opens. Defaults to "general". */
+  initialSection?: SectionId;
 }
 
-export function SettingsModal({ onClose, addToast }: SettingsModalProps) {
+export function SettingsModal({ onClose, addToast, initialSection }: SettingsModalProps) {
   const [form, setForm] = useState<Settings & { worktreeInitCommand?: string }>({ maxConcurrent: 2, maxWorktrees: 4, pollIntervalMs: 15000, groupOverlappingFiles: false, autoMerge: false, recycleWorktrees: false, includeTaskIdInCommit: true, worktreeInitCommand: "" });
   const [loading, setLoading] = useState(true);
-  const [activeSection, setActiveSection] = useState<SectionId>(SETTINGS_SECTIONS[0].id);
+  const [activeSection, setActiveSection] = useState<SectionId>(initialSection ?? SETTINGS_SECTIONS[0].id);
   const [prefixError, setPrefixError] = useState<string | null>(null);
 
   // Auth state (independent of the settings save flow)

packages/dashboard/app/components/__tests__/App.test.tsx

@@ -0,0 +1,134 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent, waitFor, act } from "@testing-library/react";
+import { App } from "../../App";
+import type { Settings } from "@kb/core";
+
+const defaultSettings: Settings = {
+  maxConcurrent: 2,
+  maxWorktrees: 4,
+  pollIntervalMs: 15000,
+  groupOverlappingFiles: false,
+  autoMerge: false,
+  recycleWorktrees: false,
+  worktreeInitCommand: "",
+  testCommand: "",
+  buildCommand: "",
+};
+
+vi.mock("../../api", () => ({
+  fetchTasks: vi.fn(() => Promise.resolve([])),
+  fetchConfig: vi.fn(() => Promise.resolve({ maxConcurrent: 2 })),
+  fetchSettings: vi.fn(() => Promise.resolve({ ...defaultSettings })),
+  updateSettings: vi.fn(() => Promise.resolve({ ...defaultSettings })),
+  fetchAuthStatus: vi.fn(() =>
+    Promise.resolve({
+      providers: [
+        { id: "anthropic", name: "Anthropic", authenticated: false },
+        { id: "github", name: "GitHub", authenticated: false },
+      ],
+    }),
+  ),
+  loginProvider: vi.fn(() => Promise.resolve({ url: "https://auth.example.com/login" })),
+  logoutProvider: vi.fn(() => Promise.resolve({ success: true })),
+  fetchModels: vi.fn(() => Promise.resolve([])),
+}));
+
+vi.mock("../../hooks/useTasks", () => ({
+  useTasks: () => ({
+    tasks: [],
+    createTask: vi.fn(),
+    moveTask: vi.fn(),
+    deleteTask: vi.fn(),
+    mergeTask: vi.fn(),
+    retryTask: vi.fn(),
+  }),
+}));
+
+import { fetchAuthStatus, fetchSettings } from "../../api";
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+describe("App auto-open Settings on unauthenticated", () => {
+  it("auto-opens Settings to Authentication tab when all providers are unauthenticated", async () => {
+    render(<App />);
+
+    // Wait for the auth status check and settings modal to appear
+    await waitFor(() => expect(fetchAuthStatus).toHaveBeenCalled());
+
+    // The Settings modal should be open showing Authentication content
+    // fetchSettings is called twice: once by App useEffect, once by SettingsModal
+    await waitFor(() => expect(fetchSettings).toHaveBeenCalledTimes(2));
+
+    // Authentication section should be active — auth status is fetched when section is active
+    // Wait for the auth providers to appear
+    await waitFor(() => {
+      expect(screen.getByText("Anthropic")).toBeTruthy();
+    });
+    expect(screen.getByText("GitHub")).toBeTruthy();
+
+    // General section should NOT be showing
+    expect(screen.queryByLabelText("Task Prefix")).toBeNull();
+  });
+
+  it("does NOT auto-open Settings when at least one provider is authenticated", async () => {
+    (fetchAuthStatus as ReturnType<typeof vi.fn>).mockResolvedValueOnce({
+      providers: [
+        { id: "anthropic", name: "Anthropic", authenticated: true },
+        { id: "github", name: "GitHub", authenticated: false },
+      ],
+    });
+
+    render(<App />);
+
+    await waitFor(() => expect(fetchAuthStatus).toHaveBeenCalled());
+
+    // Settings modal should NOT be open — no modal overlay
+    // fetchSettings called once by App useEffect only (not by SettingsModal)
+    await waitFor(() => expect(fetchSettings).toHaveBeenCalledTimes(1));
+
+    // No settings modal content
+    expect(screen.queryByText("Settings")).toBeNull();
+  });
+
+  it("does NOT auto-open Settings when fetchAuthStatus fails", async () => {
+    (fetchAuthStatus as ReturnType<typeof vi.fn>).mockRejectedValueOnce(new Error("Network error"));
+
+    render(<App />);
+
+    await waitFor(() => expect(fetchAuthStatus).toHaveBeenCalled());
+    await waitFor(() => expect(fetchSettings).toHaveBeenCalledTimes(1));
+
+    // Settings modal should NOT be open
+    expect(screen.queryByText("Settings")).toBeNull();
+  });
+
+  it("re-opening Settings via gear icon defaults to General tab after auto-opened close", async () => {
+    render(<App />);
+
+    // Wait for auto-open
+    await waitFor(() => expect(fetchAuthStatus).toHaveBeenCalled());
+    await waitFor(() => expect(fetchSettings).toHaveBeenCalledTimes(2));
+    await waitFor(() => {
+      expect(screen.getByText("Anthropic")).toBeTruthy();
+    });
+
+    // Close the auto-opened settings modal via Cancel button
+    fireEvent.click(screen.getByText("Cancel"));
+
+    // Settings modal should be closed
+    await waitFor(() => {
+      expect(screen.queryByText("Anthropic")).toBeNull();
+    });
+
+    // Open settings again via the gear icon button
+    const settingsButton = screen.getByTitle("Settings");
+    fireEvent.click(settingsButton);
+
+    // Now it should open to General section (default)
+    await waitFor(() => expect(fetchSettings).toHaveBeenCalledTimes(3));
+    expect(screen.getByLabelText("Task Prefix")).toBeTruthy();
+    expect(screen.queryByText("Anthropic")).toBeNull();
+  });
+});

packages/dashboard/app/components/__tests__/SettingsModal.test.tsx

@@ -502,4 +502,25 @@ describe("SettingsModal", () => {
 
     vi.unstubAllGlobals();
   });
+
+  it("opens to Authentication section when initialSection='authentication' is passed", async () => {
+    render(<SettingsModal onClose={onClose} addToast={addToast} initialSection="authentication" />);
+    await waitFor(() => expect(fetchSettings).toHaveBeenCalled());
+    await waitFor(() => expect(fetchAuthStatus).toHaveBeenCalled());
+
+    // Authentication content should be visible immediately
+    expect(screen.getByText("Anthropic")).toBeTruthy();
+    // General content should NOT be visible
+    expect(screen.queryByLabelText("Task Prefix")).toBeNull();
+  });
+
+  it("defaults to General section when no initialSection is passed", async () => {
+    render(<SettingsModal onClose={onClose} addToast={addToast} />);
+    await waitFor(() => expect(fetchSettings).toHaveBeenCalled());
+
+    // General content should be visible
+    expect(screen.getByLabelText("Task Prefix")).toBeTruthy();
+    // Authentication content should NOT be visible
+    expect(screen.queryByText("✗ Not authenticated")).toBeNull();
+  });
 });