diff --git a/src/__tests__/board.test.ts b/src/__tests__/board.test.ts
index 0540344..23e9c1f 100644
--- a/src/__tests__/board.test.ts
+++ b/src/__tests__/board.test.ts
@@ -5,6 +5,7 @@ import {
   boardDemand,
   buildBoard,
   buildRoster,
+  inferRoster,
   channelForMR,
   configuredSlackChannels,
   projectPathFromWebUrl,
@@ -360,6 +361,35 @@ describe("visibleMrsFor (the /data.json payload gate)", () => {
   });
 });
 
+describe("inferRoster", () => {
+  function authored(username: string, name: string | null = null): BoardMR {
+    return { author: { id: username, username, name, avatarUrl: null } } as unknown as BoardMR;
+  }
+
+  test("derives one entry per distinct author, busiest first", () => {
+    const roster = inferRoster([authored("zoe"), authored("adam"), authored("zoe"), authored("adam"), authored("zoe")]);
+    expect(roster).toEqual([
+      { username: "zoe", name: null, count: 3 },
+      { username: "adam", name: null, count: 2 },
+    ]);
+  });
+
+  test("ties break alphabetically so the order is stable across polls", () => {
+    const roster = inferRoster([authored("zoe"), authored("adam"), authored("mira")]);
+    expect(roster.map((r) => r.username)).toEqual(["adam", "mira", "zoe"]);
+  });
+
+  test("keeps the author's display name and tolerates a missing one", () => {
+    const roster = inferRoster([authored("adam", "Adam Stranger"), authored("mira")]);
+    expect(roster.find((r) => r.username === "adam")?.name).toBe("Adam Stranger");
+    expect(roster.find((r) => r.username === "mira")?.name).toBeNull();
+  });
+
+  test("no MRs means no roster", () => {
+    expect(inferRoster([])).toEqual([]);
+  });
+});
+
 describe("buildRoster", () => {
   const members = [{ username: "alice" }, { username: "bob", name: "Bobby" }, { username: "carol" }];
 
diff --git a/src/__tests__/config-store-latch.test.ts b/src/__tests__/config-store-latch.test.ts
index e9aa013..91e8b94 100644
--- a/src/__tests__/config-store-latch.test.ts
+++ b/src/__tests__/config-store-latch.test.ts
@@ -3,7 +3,7 @@ import { mkdtempSync, writeFileSync, readFileSync } from "node:fs";
 import { tmpdir } from "node:os";
 import { join } from "node:path";
 import type { getSetting, setSetting } from "@mattstack/rt-client";
-import { loadConfigFrom, saveMemberHidden, saveSwitchboardUrl, DEFAULT_SLACK_EMOJI } from "../config.ts";
+import { loadConfigFrom, saveMemberHidden, saveRosterMembers, saveSwitchboardUrl, saveTabs, DEFAULT_SLACK_EMOJI, type TabConfig } from "../config.ts";
 
 type GetSettingFn = typeof getSetting;
 type SetSettingFn = typeof setSetting;
@@ -210,6 +210,37 @@ describe("loadConfigFrom: board.tabs overlay", () => {
   });
 });
 
+describe("saveRosterMembers: latch-gated writer", () => {
+  test("unowned: rewrites config.json's members, store untouched", () => {
+    const p = tmpConfig({ ...base, members: [{ username: "alice" }] });
+    const calls: Array<{ key: string; value: unknown; scope: string }> = [];
+    const next = [{ username: "alice" }, { username: "bob", name: "Bob" }];
+    const cfg = saveRosterMembers(next, p, fakeResolve({}), fakeWrite(calls));
+    expect(calls).toEqual([]);
+    expect(cfg.members).toEqual(next);
+    expect(JSON.parse(readFileSync(p, "utf8")).members).toEqual(next);
+  });
+
+  test("owned: writes board.members (team), config.json untouched", () => {
+    const p = tmpConfig({ ...base, members: [{ username: "alice" }] });
+    const before = readFileSync(p, "utf8");
+    const calls: Array<{ key: string; value: unknown; scope: string }> = [];
+    const next = [{ username: "alice" }, { username: "bob" }];
+    saveRosterMembers(next, p, fakeResolve({ "board.members": [{ username: "alice" }] }), fakeWrite(calls));
+    expect(calls).toEqual([{ key: "board.members", value: next, scope: "team" }]);
+    expect(readFileSync(p, "utf8")).toBe(before);
+    expect(loadConfigFrom(p, fakeResolve({ "board.members": next })).members).toEqual(next);
+  });
+
+  test("removal round-trips through the same writer", () => {
+    const p = tmpConfig({ ...base, members: [{ username: "alice" }, { username: "bob" }] });
+    const calls: Array<{ key: string; value: unknown; scope: string }> = [];
+    const stored = [{ username: "alice" }, { username: "bob" }];
+    saveRosterMembers([{ username: "alice" }], p, fakeResolve({ "board.members": stored }), fakeWrite(calls));
+    expect(calls[0]!.value).toEqual([{ username: "alice" }]);
+  });
+});
+
 describe("saveMemberHidden: latch-gated writer", () => {
   test("unowned: writes config.json's inline hidden flag, store untouched", () => {
     const p = tmpConfig({ ...base, members: [{ username: "alice" }, { username: "bob" }] });
@@ -324,3 +355,52 @@ describe("slack default emoji re-export sanity", () => {
     expect(DEFAULT_SLACK_EMOJI).toEqual({ looking: "eyes", commented: "speech_balloon", approved: "white_check_mark" });
   });
 });
+
+describe("saveTabs: latch-gated writer", () => {
+  const codeowners: TabConfig = { id: "acme", label: "Acme", source: { kind: "codeowners", section: "Acme", excludeMembers: true } };
+  const team: TabConfig = { id: "team", label: "Team", source: { kind: "authors" } };
+
+  test("unowned: rewrites config.json's tabs, store untouched", () => {
+    const p = tmpConfig();
+    const calls: Array<{ key: string; value: unknown; scope: string }> = [];
+    const cfg = saveTabs([team, codeowners], p, fakeResolve({}), fakeWrite(calls));
+    expect(calls).toEqual([]);
+    expect(cfg.tabs.map((t) => t.id)).toEqual(["team", "acme"]);
+    expect(JSON.parse(readFileSync(p, "utf8")).tabs).toEqual([team, codeowners]);
+  });
+
+  test("owned: writes board.tabs (team), config.json untouched", () => {
+    const p = tmpConfig({ ...base, tabs: [team] });
+    const before = readFileSync(p, "utf8");
+    const calls: Array<{ key: string; value: unknown; scope: string }> = [];
+    saveTabs([team, codeowners], p, fakeResolve({ "board.tabs": [team] }), fakeWrite(calls));
+    expect(calls).toEqual([{ key: "board.tabs", value: [team, codeowners], scope: "team" }]);
+    expect(readFileSync(p, "utf8")).toBe(before);
+  });
+
+  test("no config.json with owned team keys establishes board.tabs ownership", () => {
+    const missing = join(mkdtempSync(join(tmpdir(), "board-latch-nofile-")), "config.json");
+    const calls: Array<{ key: string; value: unknown; scope: string }> = [];
+    const owned = { "board.gitlabHost": "https://gitlab.example.com", "board.projects": ["team/repo"], "board.members": [{ username: "carol" }] };
+    saveTabs([team, codeowners], missing, fakeResolve(owned), fakeWrite(calls));
+    expect(calls).toEqual([{ key: "board.tabs", value: [team, codeowners], scope: "team" }]);
+  });
+
+  test("an invalid list throws before any write, on either side of the latch", () => {
+    const p = tmpConfig();
+    const before = readFileSync(p, "utf8");
+    const calls: Array<{ key: string; value: unknown; scope: string }> = [];
+    expect(() => saveTabs([], p, fakeResolve({}), fakeWrite(calls))).toThrow(/must not be empty/);
+    expect(() => saveTabs([team, team], p, fakeResolve({ "board.tabs": [team] }), fakeWrite(calls))).toThrow(/duplicate tab id/);
+    expect(() => saveTabs([{ id: "x", label: "X", source: { kind: "codeowners" } }], p, fakeResolve({}), fakeWrite(calls))).toThrow(/section/);
+    expect(calls).toEqual([]);
+    expect(readFileSync(p, "utf8")).toBe(before);
+  });
+
+  test("optional per-tab fields survive the round trip and absent ones stay absent", () => {
+    const p = tmpConfig();
+    const cfg = saveTabs([{ ...codeowners, slackChannel: "team-codeowners", reviewSkill: "external-review" }], p, fakeResolve({}), fakeWrite([]));
+    expect(cfg.tabs[0]).toEqual({ ...codeowners, slackChannel: "team-codeowners", reviewSkill: "external-review" });
+    expect("slackChannel" in saveTabs([team], p, fakeResolve({}), fakeWrite([])).tabs[0]!).toBe(false);
+  });
+});
diff --git a/src/__tests__/view.test.ts b/src/__tests__/view.test.ts
index 976a358..0f2dfd4 100644
--- a/src/__tests__/view.test.ts
+++ b/src/__tests__/view.test.ts
@@ -1,7 +1,7 @@
 import { describe, expect, test } from "bun:test";
 import type { BoardMR } from "../data.ts";
 import type { TabConfig } from "../config.ts";
-import { filterByMember, filterByTab, sortMRs, groupMRs, commentDot, dataAgeLabel, statusFlags, nestStacks, memberPeerState, joinRowState } from "../view.ts";
+import { filterByMember, filterByTab, rosterUsernamesFor, sortMRs, groupMRs, commentDot, dataAgeLabel, statusFlags, nestStacks, memberPeerState, joinRowState } from "../view.ts";
 
 function mr(overrides: Partial<BoardMR>): BoardMR {
   return {
@@ -29,6 +29,50 @@ describe("filterByMember", () => {
   });
 });
 
+describe("rosterUsernamesFor", () => {
+  const configUsernames = ["ada", "grace"];
+  const rows = [
+    mr({ iid: 1, author: { username: "ada" } as any, codeownerSections: ["Acme"] } as any),
+    mr({ iid: 2, author: { username: "outsider" } as any, codeownerSections: ["Acme"] } as any),
+    mr({ iid: 3, author: { username: "drifter" } as any, codeownerSections: [] } as any),
+  ];
+
+  test("an authors tab answers with the configured roster", () => {
+    const team: TabConfig = { id: "t", label: "T", source: { kind: "authors" } };
+    expect([...rosterUsernamesFor(rows, team, configUsernames)].sort()).toEqual(["ada", "grace"]);
+  });
+
+  test("a codeowners tab answers with the authors of the rows it shows", () => {
+    const q: TabConfig = { id: "q", label: "Q", source: { kind: "codeowners", section: "Acme", excludeMembers: true } };
+    const valid = rosterUsernamesFor(rows, q, configUsernames);
+    expect([...valid]).toEqual(["outsider"]);        // the picked author survives re-validation
+    expect(valid.has("ada")).toBe(false);            // excludeMembers still applies
+    expect(valid.has("drifter")).toBe(false);        // untagged row is not on this tab
+  });
+
+  test("no tab falls back to the configured roster", () => {
+    expect([...rosterUsernamesFor(rows, undefined, configUsernames)].sort()).toEqual(["ada", "grace"]);
+  });
+
+  /* Board resolves the first load in two passes for this reason: the member's
+     valid set depends on which tab wins, so validating against the config
+     roster alone drops a stored codeowners-tab author on every reload. */
+  test("two-pass resolution keeps a stored codeowners-tab author across a reload", () => {
+    const q: TabConfig = { id: "q", label: "Q", source: { kind: "codeowners", section: "Acme", excludeMembers: true } };
+    const stored = { tab: "q", member: "outsider" };
+    const tabIds = ["t", "q"];
+
+    // Single pass drops the stored author as "not on the team" and lands on
+    // defaultMember, so a reload on the queue would silently filter to you.
+    const onePass = parseViewState("", stored, configUsernames, "ada", tabIds);
+    expect(onePass.tab).toBe("q");
+    expect(onePass.member).toBe("ada");
+
+    const valid = [...rosterUsernamesFor(rows, q, configUsernames)];
+    expect(parseViewState("", stored, valid, "ada", tabIds).member).toBe("outsider");
+  });
+});
+
 describe("filterByTab", () => {
   const members = new Set(["ada"]);
   const rows = [
diff --git a/src/client/__tests__/config-shapes.test.ts b/src/client/__tests__/config-shapes.test.ts
index 119d74f..6c0ba07 100644
--- a/src/client/__tests__/config-shapes.test.ts
+++ b/src/client/__tests__/config-shapes.test.ts
@@ -13,6 +13,7 @@ import {
   rowKind,
   scopeLabel,
   setLeaf,
+  slugTabId,
   type ConfigDef,
 } from "../board/config-shapes.ts";
 
@@ -36,7 +37,7 @@ function def(over: Partial<ConfigDef> & { key: string }): ConfigDef {
 /** Composite board.* registry keys with no edit UI yet -- rowKind's
     "readonly" fallback (no COMPOSITE_SHAPES entry) is the intended
     rendering for these, not a coverage gap. */
-const DELIBERATELY_READONLY_COMPOSITES = ["board.tabs"];
+const DELIBERATELY_READONLY_COMPOSITES: string[] = [];
 
 describe("COMPOSITE_SHAPES", () => {
   test("covers every composite board.* key in the registry except the deliberately-readonly ones", () => {
@@ -48,12 +49,6 @@ describe("COMPOSITE_SHAPES", () => {
     expect(Object.keys(COMPOSITE_SHAPES).sort()).toEqual(composites);
   });
 
-  test("board.tabs is a composite key deliberately left readonly", () => {
-    expect(allDefs().find((d) => d.key === "board.tabs")?.type).toBe("array");
-    expect(COMPOSITE_SHAPES["board.tabs"]).toBeUndefined();
-    expect(rowKind(def({ key: "board.tabs", type: "array" }))).toBe("readonly");
-  });
-
   test("names no key the registry lacks", () => {
     const known = new Set(allDefs().map((d) => d.key));
     for (const key of Object.keys(COMPOSITE_SHAPES)) expect(known.has(key)).toBe(true);
@@ -212,3 +207,42 @@ describe("rosterSummary", () => {
     expect(rosterSummary([{ username: "a" }], undefined)).toBe("1 member");
   });
 });
+
+describe("tabs shape", () => {
+  const s = COMPOSITE_SHAPES["board.tabs"]!;
+  const team = { id: "team", label: "Team", source: { kind: "authors" } };
+  const acme = { id: "acme", label: "Acme", source: { kind: "codeowners", section: "Acme", excludeMembers: true }, slackChannel: "c", reviewSkill: "s" };
+
+  test("board.tabs rows are the tabs kind regardless of writability", () => {
+    expect(rowKind(def({ key: "board.tabs", type: "array" }))).toBe("tabs");
+  });
+
+  test("accepts the shapes parseTabs accepts", () => {
+    expect(matchesShape(s, [team])).toBe(true);
+    expect(matchesShape(s, [team, acme])).toBe(true);
+  });
+
+  test("rejects an empty list and duplicate ids, like parseTabs", () => {
+    expect(matchesShape(s, [])).toBe(false);
+    expect(matchesShape(s, [team, { ...acme, id: "team" }])).toBe(false);
+  });
+
+  test("rejects what parseTabs rejects", () => {
+    expect(matchesShape(s, "team")).toBe(false);
+    expect(matchesShape(s, [{ ...team, id: "" }])).toBe(false);
+    expect(matchesShape(s, [{ ...team, label: 3 }])).toBe(false);
+    expect(matchesShape(s, [{ ...team, source: { kind: "codeowners" } }])).toBe(false);
+    expect(matchesShape(s, [{ ...acme, source: { ...acme.source, excludeMembers: "yes" } }])).toBe(false);
+    expect(matchesShape(s, [{ ...team, source: { kind: "other" } }])).toBe(false);
+    expect(matchesShape(s, [{ ...team, slackChannel: 1 }])).toBe(false);
+  });
+});
+
+describe("slugTabId", () => {
+  test("slugs the label and dodges taken ids", () => {
+    expect(slugTabId("Acme Codeowners", [])).toBe("acme-codeowners");
+    expect(slugTabId("  Team!  ", ["team"])).toBe("team-2");
+    expect(slugTabId("Team", ["team", "team-2"])).toBe("team-3");
+    expect(slugTabId("???", [])).toBe("tab");
+  });
+});
diff --git a/src/client/board/Board.tsx b/src/client/board/Board.tsx
index 5b4858c..22a5e90 100644
--- a/src/client/board/Board.tsx
+++ b/src/client/board/Board.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { BoardMR } from "../../data.ts";
-import { filterByMember, filterByTab, sortMRs, groupMRs, parseViewState, serializeViewState, dataAgeLabel } from "../../view.ts";
+import { inferRoster } from "../../data.ts";
+import { filterByMember, filterByTab, rosterUsernamesFor, sortMRs, groupMRs, parseViewState, serializeViewState, dataAgeLabel } from "../../view.ts";
 import type { ViewState } from "../../view.ts";
 import { selectionOf, postableOf, tabChangeClearsSelection } from "../../selection.ts";
 import type {
@@ -19,6 +20,7 @@ import { postAction } from "../api.ts";
 import { ICONS, Panel, SideDrawer, ToastHost } from "@mattstack/tui-kit";
 import { Sidebar } from "./Sidebar.tsx";
 import { Controls } from "./Controls.tsx";
+import { TabBar } from "./TabBar.tsx";
 import { SelectionBar } from "./SelectionBar.tsx";
 import { RowView } from "./RowView.tsx";
 import { GridView } from "./GridView.tsx";
@@ -69,7 +71,10 @@ export function Board() {
   };
   const update = (patch: Partial<ViewState>) => {
     const clearsSelection = tabChangeClearsSelection(patch, state.tab);
-    const next = { ...state, ...patch };
+    // Each tab has its own roster (a codeowners tab's is inferred from the rows
+    // in view), so a member picked on one tab usually does not exist on the
+    // next: carrying it over would land on an empty board.
+    const next = { ...state, ...patch, ...(clearsSelection ? { member: "all" } : {}) };
     localStorage.setItem(STATE_KEY, JSON.stringify(next));
     history.replaceState(null, "", serializeViewState(next) || location.pathname);
     setState(next);
@@ -95,9 +100,26 @@ export function Board() {
       }
       // Tab validated once here, same as member -- never re-derived from the
       // URL on later polls, so a live tab pick survives the 60s refresh cycle.
-      setState(parseViewState(location.search, stored, usernames, d.defaultMember, d.tabs.map((t) => t.id)));
+      // Two passes because the member's valid set depends on which tab wins:
+      // a codeowners tab's roster is its own authors, so a stored pick there
+      // would otherwise be dropped as "not on the team" on every reload.
+      const tabIds = d.tabs.map((t) => t.id);
+      const firstPass = parseViewState(location.search, stored, usernames, d.defaultMember, tabIds);
+      const tab = d.tabs.find((t) => t.id === firstPass.tab) ?? d.tabs[0];
+      const validMembers = [...rosterUsernamesFor(d.mrs, tab, usernames)];
+      setState(parseViewState(location.search, stored, validMembers, d.defaultMember, tabIds));
     } else {
-      setState((prev) => (prev.member === "all" || usernames.includes(prev.member) ? prev : { ...prev, member: "all" }));
+      // Validated against the ACTIVE TAB's roster: a codeowners tab's is
+      // inferred from the rows in view, so checking the config roster alone
+      // would drop a legitimately picked author on the next poll.
+      setState((prev) => {
+        // A tab dropped in the settings modal must not linger as the active
+        // id, or re-adding one with that id would silently jump to it.
+        const tab = d.tabs.find((t) => t.id === prev.tab) ?? d.tabs[0]!;
+        const next = tab.id === prev.tab ? prev : { ...prev, tab: tab.id };
+        if (next.member === "all") return next;
+        return rosterUsernamesFor(d.mrs, tab, usernames).has(next.member) ? next : { ...next, member: "all" };
+      });
     }
   }, []);
 
@@ -422,17 +444,22 @@ export function Board() {
   const tabFiltered = filterByTab(mrs, activeTab, rosterUsernames);
   // Codeowners tabs bypass member filtering entirely (and the sidebar that
   // drives it) -- the queue is scoped by section, not by roster author.
-  const filtered = isCodeownersTab ? tabFiltered : filterByMember(tabFiltered, state.member);
+  // A codeowners tab lists other teams' MRs, so the configured roster has
+  // nothing to drive there. Inferring one from the rows in view keeps the
+  // author filter (and the settings gears that live in this panel) available.
+  const roster = isCodeownersTab ? inferRoster(tabFiltered) : data.members;
+  const rosterTotal = isCodeownersTab ? tabFiltered.length : total;
+  const filtered = filterByMember(tabFiltered, state.member);
   const groups = groupMRs(filtered, state.group, data.members.map((m) => m.username), now).map((g) => ({
     label: g.label,
     mrs: sortMRs(g.mrs, state.sort),
   }));
   const activeMember =
-    !isCodeownersTab && state.member !== "all" ? data.members.find((m) => m.username === state.member) ?? null : null;
+    state.member !== "all" ? roster.find((m) => m.username === state.member) ?? null : null;
   // Show each row's author only when the view mixes authors: the All view
   // grouped by anything but author (where the group header isn't the name),
   // or a codeowners tab, which is never narrowed to one author.
-  const showAuthor = isCodeownersTab || (state.member === "all" && state.group !== "author");
+  const showAuthor = state.member === "all" && state.group !== "author";
   // Under author grouping the header IS the name, so rows normally drop the
   // author tag -- but a stack pulled to its root's group can carry a
   // co-author's MR under someone else's header. Tag the rows whenever a group
@@ -484,28 +511,25 @@ export function Board() {
     canPostSummary: data.slackEnabled && data.local && postableMrs.length > 0,
     postingSummary,
     onPostSummary: () => handlePostSummary(postableMrs),
-    tabs: data.tabs,
-    tabSyncing,
   };
 
   return (
     <div
-      className={`tui tui-app${view === "grid" ? " tui-wide" : ""}${isCodeownersTab ? " tui-no-sidebar" : ""}`}
+      className={`tui tui-app${view === "grid" ? " tui-wide" : ""}`}
     >
       {/* Desktop roster (hidden on mobile, where it moves into the drawer).
           Also hidden on a codeowners tab: it isn't filtered by member, so the
           roster has nothing to drive. */}
-      {!isCodeownersTab && (
-        <Sidebar
-          members={data.members}
-          total={total}
-          active={state.member}
-          onPick={(member) => update({ member })}
-          onSettings={openSettings}
-          onConfig={openConfig}
-          scopeUncovered={data.scopeUncovered}
-        />
-      )}
+      <Sidebar
+        members={roster}
+        total={rosterTotal}
+        active={state.member}
+        onPick={(member) => update({ member })}
+        onSettings={openSettings}
+        onConfig={openConfig}
+        scopeUncovered={data.scopeUncovered}
+        note={isCodeownersTab ? "authors in this queue" : undefined}
+      />
 
       <div className="tui-main">
         <header className="tui-header">
@@ -527,6 +551,13 @@ export function Board() {
           </div>
         </header>
 
+        <TabBar
+          tabs={data.tabs}
+          active={state.tab}
+          onPick={(tab) => update({ tab })}
+          syncing={tabSyncing}
+        />
+
         {selectedMrs.length > 0 && (
           <SelectionBar
             selectedMrs={selectedMrs}
@@ -595,20 +626,19 @@ export function Board() {
               {ICONS.close}
             </button>
           </div>
-          {!isCodeownersTab && (
-            <Sidebar
-              members={data.members}
-              total={total}
-              active={state.member}
-              onPick={(member) => {
-                update({ member });
-                setMenuOpen(false);
-              }}
-              onSettings={openSettings}
-              onConfig={openConfig}
-              scopeUncovered={data.scopeUncovered}
-            />
-          )}
+          <Sidebar
+            members={roster}
+            total={rosterTotal}
+            active={state.member}
+            onPick={(member) => {
+              update({ member });
+              setMenuOpen(false);
+            }}
+            onSettings={openSettings}
+            onConfig={openConfig}
+            scopeUncovered={data.scopeUncovered}
+            note={isCodeownersTab ? "authors in this queue" : undefined}
+          />
           <div className="tui-drawer-controls">
             <Controls {...controlProps} stacked />
           </div>
@@ -630,6 +660,8 @@ export function Board() {
 
       {showConfig && (
         <ConfigModal
+          tabs={data.tabs}
+          onTabsSaved={() => load()}
           onClose={() => setShowConfig(false)}
           onOpenRoster={() => {
             setShowConfig(false);
diff --git a/src/client/board/ConfigModal.tsx b/src/client/board/ConfigModal.tsx
index 863d092..1ef9e7b 100644
--- a/src/client/board/ConfigModal.tsx
+++ b/src/client/board/ConfigModal.tsx
@@ -1,6 +1,13 @@
 import { useEffect, useRef, useState, type KeyboardEvent } from "react";
 import { Modal } from "@mattstack/tui-kit";
-import { useSettingsScope, type SettingsScopeState } from "@mattstack/settings-kit/react";
+import {
+  useSettingsScope,
+  type SettingsScopeState,
+} from "@mattstack/settings-kit/react";
+import { postAction } from "../api.ts";
+import type { TabConfig } from "../../config.ts";
+import { InfoTip } from "./InfoTip.tsx";
+import { Disclosure, DisclosureHead } from "./Disclosure.tsx";
 import {
   COMPOSITE_SHAPES,
   addToList,
@@ -15,6 +22,7 @@ import {
   rowKind,
   scopeLabel,
   setLeaf,
+  slugTabId,
   type CompositeShape,
   type ConfigDef,
   type LeafType,
@@ -100,7 +108,15 @@ function TextField({
   );
 }
 
-function ScalarControl({ def, value, row }: { def: ConfigDef; value: unknown; row: ReturnType<typeof useRowSave> }) {
+function ScalarControl({
+  def,
+  value,
+  row,
+}: {
+  def: ConfigDef;
+  value: unknown;
+  row: ReturnType<typeof useRowSave>;
+}) {
   if (def.type === "boolean") {
     return (
       <input
@@ -129,7 +145,15 @@ function ScalarControl({ def, value, row }: { def: ConfigDef; value: unknown; ro
   );
 }
 
-function ChipControl({ def, list, row }: { def: ConfigDef; list: string[]; row: ReturnType<typeof useRowSave> }) {
+function ChipControl({
+  def,
+  list,
+  row,
+}: {
+  def: ConfigDef;
+  list: string[];
+  row: ReturnType<typeof useRowSave>;
+}) {
   const [draft, setDraft] = useState("");
   const add = () => {
     const next = addToList(list, draft);
@@ -187,7 +211,8 @@ function LeavesControl({
   fields: Record<string, LeafType>;
   row: ReturnType<typeof useRowSave>;
 }) {
-  const commit = (path: string, leaf: unknown) => void row.save(setLeaf(value, path, leaf));
+  const commit = (path: string, leaf: unknown) =>
+    void row.save(setLeaf(value, path, leaf));
   return (
     <div className="tui-config-leaves">
       {Object.entries(fields).map(([path, type]) => {
@@ -211,7 +236,9 @@ function LeavesControl({
               value={typeof leaf === "string" ? leaf : ""}
               disabled={row.busy}
               aria-label={label}
-              onChange={(e) => commit(path, e.target.value === "" ? undefined : e.target.value)}
+              onChange={(e) =>
+                commit(path, e.target.value === "" ? undefined : e.target.value)
+              }
             >
               <option value="">unset</option>
               {type.enum.map((opt) => (
@@ -260,7 +287,10 @@ function PairsControl({
   row: ReturnType<typeof useRowSave>;
 }) {
   const [a, b] = fields;
-  const [draft, setDraft] = useState<{ a: string; b: string }>({ a: "", b: "" });
+  const [draft, setDraft] = useState<{ a: string; b: string }>({
+    a: "",
+    b: "",
+  });
   const addIfComplete = (next: { a: string; b: string }) => {
     setDraft(next);
     if (next.a.trim() === "" || next.b.trim() === "") return;
@@ -274,8 +304,20 @@ function PairsControl({
     <div className="tui-config-pairs">
       {pairs.map((p, i) => (
         <div key={i} className="tui-config-pair">
-          <TextField value={p[a] ?? ""} placeholder={a} ariaLabel={`${def.key}[${i}].${a}`} disabled={row.busy} onCommit={(t) => update(i, a, t)} />
-          <TextField value={p[b] ?? ""} placeholder={b} ariaLabel={`${def.key}[${i}].${b}`} disabled={row.busy} onCommit={(t) => update(i, b, t)} />
+          <TextField
+            value={p[a] ?? ""}
+            placeholder={a}
+            ariaLabel={`${def.key}[${i}].${a}`}
+            disabled={row.busy}
+            onCommit={(t) => update(i, a, t)}
+          />
+          <TextField
+            value={p[b] ?? ""}
+            placeholder={b}
+            ariaLabel={`${def.key}[${i}].${b}`}
+            disabled={row.busy}
+            onCommit={(t) => update(i, b, t)}
+          />
           <button
             className="tui-config-clear"
             aria-label={`remove ${def.key}[${i}]`}
@@ -287,8 +329,20 @@ function PairsControl({
         </div>
       ))}
       <div className="tui-config-pair">
-        <TextField value={draft.a} placeholder={a} ariaLabel={`new ${def.key} ${a}`} disabled={row.busy} onCommit={(t) => addIfComplete({ ...draft, a: t })} />
-        <TextField value={draft.b} placeholder={b} ariaLabel={`new ${def.key} ${b}`} disabled={row.busy} onCommit={(t) => addIfComplete({ ...draft, b: t })} />
+        <TextField
+          value={draft.a}
+          placeholder={a}
+          ariaLabel={`new ${def.key} ${a}`}
+          disabled={row.busy}
+          onCommit={(t) => addIfComplete({ ...draft, a: t })}
+        />
+        <TextField
+          value={draft.b}
+          placeholder={b}
+          ariaLabel={`new ${def.key} ${b}`}
+          disabled={row.busy}
+          onCommit={(t) => addIfComplete({ ...draft, b: t })}
+        />
         <span />
       </div>
     </div>
@@ -308,69 +362,693 @@ function CompositeControl({
 }) {
   switch (shape.kind) {
     case "stringList":
-      return <ChipControl def={def} list={Array.isArray(value) ? (value as string[]) : []} row={row} />;
+      return (
+        <ChipControl
+          def={def}
+          list={Array.isArray(value) ? (value as string[]) : []}
+          row={row}
+        />
+      );
     case "pairList":
-      return <PairsControl def={def} pairs={Array.isArray(value) ? (value as Record<string, string>[]) : []} fields={shape.fields} row={row} />;
+      return (
+        <PairsControl
+          def={def}
+          pairs={
+            Array.isArray(value) ? (value as Record<string, string>[]) : []
+          }
+          fields={shape.fields}
+          row={row}
+        />
+      );
     case "leaves":
-      return <LeavesControl def={def} value={value} fields={shape.fields} row={row} />;
+      return (
+        <LeavesControl
+          def={def}
+          value={value}
+          fields={shape.fields}
+          row={row}
+        />
+      );
     case "roster":
       return null;
   }
 }
 
-function SettingRow({ def, store, onOpenRoster }: { def: ConfigDef; store: SettingsScopeState; onOpenRoster: () => void }) {
+/** The roster row's editor. Roster edits go through POST /roster rather than
+    the settings store directly: the server is the single writer that also
+    swaps its in-memory roster, so /data.json agrees immediately instead of
+    waiting for a restart. It honors the same ownership latch either way.
+    Checking people in and out stays in the roster panel, which is what the
+    link beside this is for. */
+function RosterControl({
+  members,
+  hidden,
+  self,
+  onSaved,
+  onOpenRoster,
+}: {
+  members: unknown;
+  hidden: unknown;
+  /** defaultMember: the board's own identity, which cannot be dropped. */
+  self: string | null;
+  /** Re-read the store so the list reflects the write. */
+  onSaved: () => void;
+  onOpenRoster: () => void;
+}) {
+  const [adding, setAdding] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  // Dropping arms on the first click and sends on the second, keyed by
+  // username since every row carries the button.
+  const [armed, setArmed] = useState<string | null>(null);
+
+  const roster = Array.isArray(members)
+    ? (members as Array<{
+        username?: unknown;
+        name?: unknown;
+        hidden?: unknown;
+      }>)
+    : [];
+  // Checked out is either the user overlay or a hidden flag on the entry
+  // itself, the same union rosterSummary counts.
+  const hiddenSet = new Set([
+    ...(Array.isArray(hidden)
+      ? (hidden as unknown[]).filter((u): u is string => typeof u === "string")
+      : []),
+    ...roster
+      .filter((m) => m.hidden === true && typeof m.username === "string")
+      .map((m) => m.username as string),
+  ]);
+
+  const edit = async (action: "add" | "remove", username: string) => {
+    setBusy(true);
+    setError(null);
+    const res = await postAction("/roster", { action, username });
+    setBusy(false);
+    if (!res.ok) {
+      setError(res.text || `could not ${action} ${username}`);
+      return;
+    }
+    setArmed(null);
+    if (action === "add") setAdding("");
+    // The write went through /roster (server-validated), so the kit's cached
+    // defs are stale until told otherwise.
+    onSaved();
+  };
+
+  return (
+    <div className="tui-roster-edit">
+      <div className="tui-roster-head">
+        <span className="tui-config-value">
+          {rosterSummary(members, hidden)}
+        </span>
+        <button className="tui-config-link" onClick={onOpenRoster}>
+          check people in/out →
+        </button>
+      </div>
+      <ul className="tui-roster-list">
+        {roster.map((m, i) => {
+          const username = typeof m.username === "string" ? m.username : "";
+          if (!username) return null;
+          const name = typeof m.name === "string" ? m.name : null;
+          return (
+            <li key={username || i} className="tui-roster-item">
+              <span className="tui-roster-who">
+                {name ?? username}
+                {name && <span className="tui-roster-handle">@{username}</span>}
+                {hiddenSet.has(username) && (
+                  <span className="tui-roster-out">checked out</span>
+                )}
+              </span>
+              {username === self ? (
+                <span className="tui-roster-out" title="this board runs as you">
+                  you
+                </span>
+              ) : armed === username ? (
+                <button
+                  className="tui-modal-btn danger"
+                  disabled={busy}
+                  onClick={() => void edit("remove", username)}
+                >
+                  confirm drop
+                </button>
+              ) : (
+                <button
+                  className="tui-modal-btn"
+                  disabled={busy}
+                  onClick={() => setArmed(username)}
+                  title="drop from the roster (checking out only hides them)"
+                  aria-label={`drop ${username}`}
+                >
+                  ✕
+                </button>
+              )}
+            </li>
+          );
+        })}
+      </ul>
+      <form
+        className="tui-roster-add"
+        onSubmit={(e) => {
+          e.preventDefault();
+          const handle = adding.trim();
+          if (handle && !busy) void edit("add", handle);
+        }}
+      >
+        <input
+          className="tui-modal-input"
+          value={adding}
+          onChange={(e) => setAdding(e.target.value)}
+          placeholder="gitlab username"
+          aria-label="add a teammate by gitlab username"
+          disabled={busy}
+        />
+        <button
+          className="tui-modal-btn"
+          type="submit"
+          disabled={busy || !adding.trim()}
+        >
+          add
+        </button>
+      </form>
+      {error && <p className="tui-modal-error">{error}</p>}
+    </div>
+  );
+}
+
+type TabSource = TabConfig["source"];
+
+/** The tabs row's editor. Edits go through POST /tabs for the same reason
+    roster edits go through /roster: the server validates the whole list and
+    swaps its in-memory copy, so the board re-declares the new sections to rt
+    at once instead of on the next restart. `tabs` is the effective list from
+    /data.json, which is right whichever side of the ownership latch owns it. */
+function TabsControl({
+  tabs,
+  defaultChannel,
+  onSaved,
+}: {
+  tabs: TabConfig[];
+  /** board.slack.channel, what a tab without its own slackChannel inherits. */
+  defaultChannel: string | null;
+  onSaved: () => void;
+}) {
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  // Dropping a tab discards its config, so the armed row demands the tab's
+  // label typed back before the drop button enables.
+  const [armed, setArmed] = useState<string | null>(null);
+  const [dropText, setDropText] = useState("");
+  const [newLabel, setNewLabel] = useState("");
+  const [newKind, setNewKind] = useState<TabSource["kind"]>("codeowners");
+  const [newSection, setNewSection] = useState("");
+
+  const write = async (next: TabConfig[]) => {
+    setBusy(true);
+    setError(null);
+    const res = await postAction("/tabs", { tabs: next });
+    setBusy(false);
+    if (!res.ok) {
+      setError(res.text || "could not save tabs");
+      return false;
+    }
+    setArmed(null);
+    setDropText("");
+    onSaved();
+    return true;
+  };
+
+  const arm = (id: string | null) => {
+    setArmed(id);
+    setDropText("");
+  };
+
+  const patch = (id: string, change: (tab: TabConfig) => TabConfig) =>
+    void write(tabs.map((t) => (t.id === id ? change(t) : t)));
+  const optional = (text: string) =>
+    text.trim() === "" ? undefined : text.trim();
+
+  const add = async () => {
+    const label = newLabel.trim();
+    if (!label || busy) return;
+    const source: TabSource =
+      newKind === "authors"
+        ? { kind: "authors" }
+        : {
+            kind: "codeowners",
+            section: newSection.trim(),
+            excludeMembers: true,
+          };
+    const ok = await write([
+      ...tabs,
+      {
+        id: slugTabId(
+          label,
+          tabs.map((t) => t.id),
+        ),
+        label,
+        source,
+      },
+    ]);
+    if (ok) {
+      setNewLabel("");
+      setNewSection("");
+    }
+  };
+
+  return (
+    <div className="tui-roster-edit">
+      <ul className="tui-roster-list tui-tabs-list">
+        {tabs.map((tab) => (
+          <li key={tab.id} className="tui-tabs-item">
+            <div className="tui-tabs-item-head">
+              <TextField
+                value={tab.label}
+                placeholder="label"
+                ariaLabel={`label for tab ${tab.id}`}
+                disabled={busy}
+                onCommit={(text) =>
+                  patch(tab.id, (t) => ({ ...t, label: text.trim() }))
+                }
+              />
+              <span className="tui-roster-handle">{tab.source.kind}</span>
+              {tabs.length === 1 ? (
+                <span
+                  className="tui-roster-out"
+                  title="the board needs at least one tab"
+                >
+                  only tab
+                </span>
+              ) : armed === tab.id ? (
+                <button
+                  className="tui-modal-btn"
+                  disabled={busy}
+                  onClick={() => arm(null)}
+                >
+                  cancel
+                </button>
+              ) : (
+                <button
+                  className="tui-modal-btn"
+                  disabled={busy}
+                  onClick={() => arm(tab.id)}
+                  title="drop this tab"
+                  aria-label={`drop tab ${tab.id}`}
+                >
+                  ✕
+                </button>
+              )}
+            </div>
+            {armed === tab.id && (
+              <form
+                className="tui-tabs-drop"
+                onSubmit={(e) => {
+                  e.preventDefault();
+                  if (dropText === tab.label && !busy)
+                    void write(tabs.filter((t) => t.id !== tab.id));
+                }}
+              >
+                <span className="tui-modal-error">
+                  dropping this tab discards its section, channel, and skill
+                  settings
+                </span>
+                <input
+                  className="tui-modal-input"
+                  autoFocus
+                  value={dropText}
+                  onChange={(e) => setDropText(e.target.value)}
+                  placeholder={`type ${tab.label} to confirm`}
+                  aria-label={`type the label of tab ${tab.id} to confirm dropping it`}
+                  disabled={busy}
+                />
+                <button
+                  className="tui-modal-btn danger"
+                  type="submit"
+                  disabled={busy || dropText !== tab.label}
+                >
+                  drop tab
+                </button>
+              </form>
+            )}
+            <div className="tui-tabs-fields">
+              {tab.source.kind === "codeowners" && (
+                <>
+                  <label className="tui-tabs-field">
+                    <span>section</span>
+                    <TextField
+                      value={tab.source.section}
+                      placeholder="CODEOWNERS section"
+                      ariaLabel={`codeowners section for tab ${tab.id}`}
+                      disabled={busy}
+                      onCommit={(text) =>
+                        patch(tab.id, (t) => ({
+                          ...t,
+                          source: {
+                            ...(t.source as Extract<
+                              TabSource,
+                              { kind: "codeowners" }
+                            >),
+                            section: text.trim(),
+                          },
+                        }))
+                      }
+                    />
+                  </label>
+                  <label className="tui-tabs-field tui-tabs-check">
+                    <input
+                      type="checkbox"
+                      className="tui-check-box"
+                      checked={tab.source.excludeMembers === true}
+                      disabled={busy}
+                      onChange={(e) =>
+                        patch(tab.id, (t) => ({
+                          ...t,
+                          source: {
+                            ...(t.source as Extract<
+                              TabSource,
+                              { kind: "codeowners" }
+                            >),
+                            excludeMembers: e.target.checked,
+                          },
+                        }))
+                      }
+                    />
+                    <span>hide roster authors (they have their own tab)</span>
+                  </label>
+                </>
+              )}
+              <label className="tui-tabs-field">
+                <span>slack channel</span>
+                <TextField
+                  value={tab.slackChannel ?? ""}
+                  placeholder={
+                    defaultChannel
+                      ? `inherits board.slack: #${defaultChannel}`
+                      : "inherits board.slack.channel"
+                  }
+                  ariaLabel={`slack channel for tab ${tab.id}`}
+                  disabled={busy}
+                  onCommit={(text) =>
+                    patch(tab.id, (t) => ({
+                      ...t,
+                      slackChannel: optional(text),
+                    }))
+                  }
+                />
+              </label>
+              <label className="tui-tabs-field">
+                <span>review skill</span>
+                <TextField
+                  value={tab.reviewSkill ?? ""}
+                  placeholder="inherits the repo's review skill"
+                  ariaLabel={`review skill for tab ${tab.id}`}
+                  disabled={busy}
+                  onCommit={(text) =>
+                    patch(tab.id, (t) => ({
+                      ...t,
+                      reviewSkill: optional(text),
+                    }))
+                  }
+                />
+              </label>
+            </div>
+          </li>
+        ))}
+      </ul>
+      <form
+        className="tui-roster-add tui-tabs-add"
+        onSubmit={(e) => {
+          e.preventDefault();
+          void add();
+        }}
+      >
+        <input
+          className="tui-modal-input"
+          value={newLabel}
+          onChange={(e) => setNewLabel(e.target.value)}
+          placeholder="new tab label"
+          aria-label="new tab label"
+          disabled={busy}
+        />
+        <select
+          className="tui-modal-input tui-tabs-kind"
+          value={newKind}
+          aria-label="new tab source"
+          disabled={busy}
+          onChange={(e) => setNewKind(e.target.value as TabSource["kind"])}
+        >
+          <option value="codeowners">codeowners</option>
+          <option value="authors">authors</option>
+        </select>
+        {newKind === "codeowners" && (
+          <input
+            className="tui-modal-input"
+            value={newSection}
+            onChange={(e) => setNewSection(e.target.value)}
+            placeholder="CODEOWNERS section"
+            aria-label="new tab codeowners section"
+            disabled={busy}
+          />
+        )}
+        <button
+          className="tui-modal-btn"
+          type="submit"
+          disabled={
+            busy ||
+            !newLabel.trim() ||
+            (newKind === "codeowners" && !newSection.trim())
+          }
+        >
+          add tab
+        </button>
+      </form>
+      {error && <p className="tui-modal-error">{error}</p>}
+    </div>
+  );
+}
+
+/** Control-specific caveats the registry description cannot know, shown in
+    the same info tip as the description. */
+const ROW_HINTS: Record<string, string> = {
+  "board.members": "A new teammate's MRs land once rt has synced them.",
+  "board.tabs":
+    'A new section\'s MRs land once rt has backfilled it; the tab shows "syncing" until then.',
+};
+
+const OPEN_ROWS_KEY = "board.config.openRows";
+
+/** Which composite rows are expanded, remembered per browser so the modal
+    reopens the way it was left. Storage is a convenience only: any failure
+    reads as "all collapsed". */
+function useOpenRows(): [Set<string>, (key: string) => void] {
+  const [open, setOpen] = useState<Set<string>>(() => {
+    try {
+      const raw = localStorage.getItem(OPEN_ROWS_KEY);
+      const parsed: unknown = raw ? JSON.parse(raw) : [];
+      return new Set(
+        Array.isArray(parsed)
+          ? parsed.filter((k): k is string => typeof k === "string")
+          : [],
+      );
+    } catch {
+      return new Set();
+    }
+  });
+  const toggle = (key: string) => {
+    setOpen((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  };
+  useEffect(() => {
+    try {
+      localStorage.setItem(OPEN_ROWS_KEY, JSON.stringify([...open]));
+    } catch {
+      // storage unavailable: the open set still works for this mount
+    }
+  }, [open]);
+  return [open, toggle];
+}
+
+function SettingRow({
+  def,
+  store,
+  tabs,
+  open,
+  onToggle,
+  onOpenRoster,
+  onTabsSaved,
+}: {
+  def: ConfigDef;
+  store: SettingsScopeState;
+  tabs: TabConfig[];
+  /** Expanded, for a collapsible row; ignored otherwise. */
+  open: boolean;
+  onToggle: () => void;
+  onOpenRoster: () => void;
+  onTabsSaved: () => void;
+}) {
   const kind = rowKind(def);
   const row = useRowSave(store, def);
   const value = def.effective.value;
   const shape = COMPOSITE_SHAPES[def.key];
   const set = isSet(def);
-  const malformed = shape !== undefined && shape.kind !== "roster" && value !== undefined && !matchesShape(shape, value);
+  const malformed =
+    shape !== undefined &&
+    shape.kind !== "roster" &&
+    value !== undefined &&
+    !matchesShape(shape, value);
 
   let control;
-  if (kind === "roster") {
-    const members = store.defs.find((d) => d.key === "board.members")?.effective.value;
-    const hidden = store.defs.find((d) => d.key === "board.hiddenMembers")?.effective.value;
+  if (kind === "tabs" && !malformed) {
+    const channel = getLeaf(
+      store.defs.find((d) => d.key === "board.slack")?.effective.value,
+      "channel",
+    );
     control = (
-      <>
-        <span className="tui-config-value">{rosterSummary(members, hidden)}</span>
-        <button className="tui-config-link" onClick={onOpenRoster}>
-          manage in roster →
-        </button>
-      </>
+      <TabsControl
+        tabs={tabs}
+        defaultChannel={
+          typeof channel === "string" && channel !== "" ? channel : null
+        }
+        onSaved={() => {
+          store.refresh();
+          onTabsSaved();
+        }}
+      />
     );
+  } else if (kind === "roster") {
+    const members = store.defs.find((d) => d.key === "board.members")?.effective
+      .value;
+    const hidden = store.defs.find((d) => d.key === "board.hiddenMembers")
+      ?.effective.value;
+    const self = store.defs.find((d) => d.key === "board.defaultMember")
+      ?.effective.value;
+    control =
+      def.key === "board.members" ? (
+        <RosterControl
+          members={members}
+          hidden={hidden}
+          self={typeof self === "string" ? self : null}
+          onSaved={store.refresh}
+          onOpenRoster={onOpenRoster}
+        />
+      ) : (
+        <>
+          <span className="tui-config-value">
+            {rosterSummary(members, hidden)}
+          </span>
+          <button className="tui-config-link" onClick={onOpenRoster}>
+            check people in/out →
+          </button>
+        </>
+      );
   } else if (def.secret) {
-    control = <span className="tui-config-value">{def.effective.scope ? "•••" : "unset"}</span>;
+    control = (
+      <span className="tui-config-value">
+        {def.effective.scope ? "•••" : "unset"}
+      </span>
+    );
   } else if (kind === "readonly" || malformed) {
     control = (
       <span className="tui-config-value">
         {value === undefined ? "unset" : formatValue(value)}
-        {malformed && <span className="tui-config-flag">unexpected shape — clear it or fix the store file</span>}
+        {malformed && (
+          <span className="tui-config-flag">
+            unexpected shape — clear it or fix the store file
+          </span>
+        )}
       </span>
     );
   } else if (kind === "scalar") {
     control = <ScalarControl def={def} value={value} row={row} />;
   } else {
-    control = <CompositeControl def={def} shape={shape!} value={value} row={row} />;
+    control = (
+      <CompositeControl def={def} shape={shape!} value={value} row={row} />
+    );
   }
 
-  return (
-    <li className={"tui-config-row" + (set ? " set" : "")} data-key={def.key}>
-      <div className="tui-config-head">
-        <span className="tui-config-keyname">{def.key}</span>
-        <span className="tui-config-badge">{def.secret ? "secret" : scopeLabel(def.scopes[0] ?? "user")}</span>
-        {set && kind !== "roster" && (
-          <button className="tui-config-clear" title="clear from store" aria-label={`clear ${def.key}`} disabled={row.busy} onClick={() => void row.clear()}>
-            ↺
-          </button>
-        )}
-      </div>
-      <p className="tui-config-desc">{def.description}</p>
+  const help = [def.description, ROW_HINTS[def.key]]
+    .filter(Boolean)
+    .join("\n\n");
+  // Only rows whose control is a block of fields collapse; a single input,
+  // a readonly value, or the hidden-members pointer is already one line.
+  const collapsible =
+    shape !== undefined &&
+    !malformed &&
+    !def.secret &&
+    kind !== "readonly" &&
+    def.key !== "board.hiddenMembers";
+  const body = (
+    <>
       <div className="tui-config-control">
         {control}
-        <span className={"tui-config-status" + (row.busy ? " busy" : "")}>{row.busy ? "saving…" : row.saved ? "saved ✓" : ""}</span>
+        <span className={"tui-config-status" + (row.busy ? " busy" : "")}>
+          {row.busy ? "saving…" : row.saved ? "saved ✓" : ""}
+        </span>
       </div>
       {row.error && <p className="tui-config-error">{row.error}</p>}
-      {def.effective.invalid && <p className="tui-config-error">stored value rejected: {def.effective.invalid}</p>}
+      {def.effective.invalid && (
+        <p className="tui-config-error">
+          stored value rejected: {def.effective.invalid}
+        </p>
+      )}
+    </>
+  );
+
+  // Inside a collapsible head these must not toggle the row.
+  const stop = (e: { stopPropagation: () => void }) => e.stopPropagation();
+  const head = (
+    <>
+      <span className="tui-config-keyname">{def.key}</span>
+      <span onClick={stop} onKeyDown={stop} className="tui-config-tip">
+        <InfoTip text={help} about={def.key} />
+      </span>
+      <span className="tui-config-badge">
+        {def.secret ? "secret" : scopeLabel(def.scopes[0] ?? "user")}
+      </span>
+      {set && kind !== "roster" && kind !== "tabs" && (
+        <button
+          className="tui-config-clear"
+          title="clear from store"
+          aria-label={`clear ${def.key}`}
+          disabled={row.busy}
+          onClick={(e) => {
+            e.stopPropagation();
+            void row.clear();
+          }}
+          onKeyDown={stop}
+        >
+          ↺
+        </button>
+      )}
+    </>
+  );
+
+  return (
+    <li
+      className={
+        "tui-config-row" +
+        (set ? " set" : "") +
+        (collapsible ? " collapsible" : "")
+      }
+      data-key={def.key}
+    >
+      {collapsible ? (
+        <DisclosureHead
+          open={open}
+          label={def.key}
+          onToggle={onToggle}
+          className="tui-config-head"
+        >
+          {head}
+        </DisclosureHead>
+      ) : (
+        <div className="tui-config-head">{head}</div>
+      )}
+      {collapsible ? <Disclosure open={open}>{body}</Disclosure> : body}
     </li>
   );
 }
@@ -380,13 +1058,32 @@ function SettingRow({ def, store, onOpenRoster }: { def: ConfigDef; store: Setti
     the single scope each board.* key allows. Distinct from SettingsModal,
     which manages the team roster and owns the two roster keys shown here
     read-only. */
-function ConfigModal({ onClose, onOpenRoster }: { onClose: () => void; onOpenRoster: () => void }) {
+function ConfigModal({
+  tabs,
+  onClose,
+  onOpenRoster,
+  onTabsSaved,
+}: {
+  /** Effective tabs from /data.json: the editor's base whichever side owns them. */
+  tabs: TabConfig[];
+  onClose: () => void;
+  onOpenRoster: () => void;
+  /** Reload board data so the new tab strip lands without waiting for a poll. */
+  onTabsSaved: () => void;
+}) {
   const store = useSettingsScope("board.");
   const [query, setQuery] = useState("");
+  const [openRows, toggleRow] = useOpenRows();
   const groups = groupByScope(filterDefs(store.defs, query));
 
   return (
-    <Modal title="❯ board settings" ariaLabel="board settings" onClose={onClose} closeGlyph="✕" className="tui-config-modal">
+    <Modal
+      title="❯ board settings"
+      ariaLabel="board settings"
+      onClose={onClose}
+      closeGlyph="✕"
+      className="tui-config-modal"
+    >
       <input
         className="tui-invite-input tui-config-filter"
         autoFocus
@@ -403,17 +1100,30 @@ function ConfigModal({ onClose, onOpenRoster }: { onClose: () => void; onOpenRos
       />
       {store.loading && <p className="tui-modal-sub">loading…</p>}
       {store.error && <p className="tui-config-error">{store.error}</p>}
-      {groups.map((g) => (
-        <section key={g.scope}>
-          <h3 className="tui-config-group">{g.scope}</h3>
-          <ul className="tui-config-list">
-            {g.defs.map((def) => (
-              <SettingRow key={def.key} def={def} store={store} onOpenRoster={onOpenRoster} />
-            ))}
-          </ul>
-        </section>
-      ))}
-      {!store.loading && !store.error && groups.length === 0 && <p className="tui-modal-sub">no settings match</p>}
+      <div className="tui-config-body">
+        {groups.map((g) => (
+          <section key={g.scope}>
+            <h3 className="tui-config-group">{g.scope}</h3>
+            <ul className="tui-config-list">
+              {g.defs.map((def) => (
+                <SettingRow
+                  key={def.key}
+                  def={def}
+                  store={store}
+                  tabs={tabs}
+                  open={openRows.has(def.key)}
+                  onToggle={() => toggleRow(def.key)}
+                  onOpenRoster={onOpenRoster}
+                  onTabsSaved={onTabsSaved}
+                />
+              ))}
+            </ul>
+          </section>
+        ))}
+        {!store.loading && !store.error && groups.length === 0 && (
+          <p className="tui-modal-sub">no settings match</p>
+        )}
+      </div>
     </Modal>
   );
 }
diff --git a/src/client/board/Controls.tsx b/src/client/board/Controls.tsx
index 4b1a58b..497580e 100644
--- a/src/client/board/Controls.tsx
+++ b/src/client/board/Controls.tsx
@@ -1,8 +1,7 @@
 import { GROUP_KEYS, SORT_KEYS } from "../../view.ts";
 import type { ViewState } from "../../view.ts";
-import type { TabConfig } from "../../config.ts";
 import type { ThemeMode, ViewMode } from "../types.ts";
-import { Chip, CopyButton, ICONS, LabeledSeg, Segmented } from "@mattstack/tui-kit";
+import { CopyButton, ICONS, LabeledSeg, Segmented } from "@mattstack/tui-kit";
 import { GROUP_LABEL, SORT_LABEL } from "./format.ts";
 import { SLACK_ICON } from "./chips.tsx";
 
@@ -22,8 +21,6 @@ function Controls({
   onPostSummary,
   canPostSummary,
   postingSummary,
-  tabs,
-  tabSyncing,
   stacked = false,
 }: {
   state: ViewState;
@@ -39,32 +36,17 @@ function Controls({
   onPostSummary?: () => void;
   canPostSummary?: boolean;
   postingSummary?: boolean;
-  /** Board tabs, in display order; the bar itself only renders past one tab. */
-  tabs: TabConfig[];
-  /** Whether the active codeowners tab's section is still mid-backfill. */
-  tabSyncing: boolean;
   stacked?: boolean;
 }) {
   const group = <LabeledSeg legend="group" options={GROUP_KEYS} labels={GROUP_LABEL} value={state.group} onChange={(g) => update({ group: g })} />;
   const sort = <LabeledSeg legend="sort" options={SORT_KEYS} labels={SORT_LABEL} value={state.sort} onChange={(s) => update({ sort: s })} />;
   const viewSeg = <Segmented options={["rows", "grid"] as const} value={view} onChange={pickView} label="view" />;
   const themeSeg = <Segmented options={["light", "dark", "system"] as const} value={theme} onChange={pickTheme} label="theme" />;
-  const tabIds = tabs.map((t) => t.id);
-  const tabLabels = Object.fromEntries(tabs.map((t) => [t.id, t.label]));
-  const tabBar = tabs.length > 1 && (
-    <LabeledSeg legend="tab" options={tabIds} labels={tabLabels} value={state.tab} onChange={(tab) => update({ tab })} />
-  );
-  const syncingChip = tabSyncing && (
-    <Chip intent="warn" data-flag="" title="rt hasn't finished backfilling this codeowner section... counts may be low">
-      codeowner queue syncing
-    </Chip>
-  );
 
   // Drawer: labeled full-width rows, so a mobile user can tell what each does.
   if (stacked) {
     return (
       <>
-        {tabBar && <div className="tui-ctl-row"><span className="tui-ctl-label">tab</span>{tabBar}{syncingChip}</div>}
         <div className="tui-ctl-row"><span className="tui-ctl-label">group</span>{group}</div>
         <div className="tui-ctl-row"><span className="tui-ctl-label">sort</span>{sort}</div>
         <div className="tui-ctl-row"><span className="tui-ctl-label">view</span>{viewSeg}</div>
@@ -101,8 +83,6 @@ function Controls({
           board's own plain buttons (the refresh button above, the selection
           bar's post/clear), which are not CopyButton instances. */}
       {canCopy && <CopyButton text={summaryText} title="copy summary for Slack" />}
-      {tabBar}
-      {syncingChip}
       {group}
       {sort}
       {viewSeg}
diff --git a/src/client/board/Disclosure.tsx b/src/client/board/Disclosure.tsx
new file mode 100644
index 0000000..fc60924
--- /dev/null
+++ b/src/client/board/Disclosure.tsx
@@ -0,0 +1,59 @@
+import type { KeyboardEvent, ReactNode } from "react";
+
+/** A collapsible body that animates height via grid-template-rows, so
+    content of any height opens and closes smoothly without measuring. The
+    body stays mounted either way (a half-typed field survives a collapse) and
+    is `inert` while closed so nothing inside can take focus. tui-kit
+    candidate: layout only, no board logic. */
+export function Disclosure({ open, children }: { open: boolean; children: ReactNode }) {
+  return (
+    <div className={"tui-disclosure" + (open ? " open" : "")}>
+      <div className="tui-disclosure-body" inert={!open}>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+/** The whole header row is the trigger, chevron included: a row's title is a
+    far bigger target than a glyph. Controls that live inside the row (an info
+    tip, a clear button) stop propagation so they don't toggle. A div with the
+    button role rather than a button, because those inner controls are
+    buttons themselves and buttons cannot nest. */
+export function DisclosureHead({
+  open,
+  label,
+  onToggle,
+  className,
+  children,
+}: {
+  open: boolean;
+  label: string;
+  onToggle: () => void;
+  className?: string;
+  children: ReactNode;
+}) {
+  const onKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    if (e.target !== e.currentTarget) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onToggle();
+    }
+  };
+  return (
+    <div
+      className={"tui-disclosure-head" + (open ? " open" : "") + (className ? ` ${className}` : "")}
+      role="button"
+      tabIndex={0}
+      aria-expanded={open}
+      aria-label={`${open ? "collapse" : "expand"} ${label}`}
+      onClick={onToggle}
+      onKeyDown={onKeyDown}
+    >
+      <span className="tui-disclosure-chevron" aria-hidden="true">
+        ▸
+      </span>
+      {children}
+    </div>
+  );
+}
diff --git a/src/client/board/InfoTip.tsx b/src/client/board/InfoTip.tsx
new file mode 100644
index 0000000..6f27749
--- /dev/null
+++ b/src/client/board/InfoTip.tsx
@@ -0,0 +1,16 @@
+import { Tooltip } from "@mattstack/tui-kit";
+
+/** An info glyph that reveals helper text on hover or focus, so a dense form
+    can keep its explanations without printing them under every row. The
+    button carries the text as its aria-label because the kit's tooltip card
+    is hidden from assistive tech by design. tui-kit candidate: a Tooltip
+    composition, not board logic. */
+export function InfoTip({ text, about }: { text: string; about: string }) {
+  return (
+    <Tooltip tip={text} classNames={{ card: "tui-info-card" }}>
+      <button type="button" className="tui-info" aria-label={`about ${about}: ${text}`}>
+        i
+      </button>
+    </Tooltip>
+  );
+}
diff --git a/src/client/board/Sidebar.tsx b/src/client/board/Sidebar.tsx
index 2589caa..d848cdf 100644
--- a/src/client/board/Sidebar.tsx
+++ b/src/client/board/Sidebar.tsx
@@ -10,6 +10,7 @@ function Sidebar({
   onSettings,
   onConfig,
   scopeUncovered,
+  note,
 }: {
   members: RosterMember[];
   total: number;
@@ -20,9 +21,12 @@ function Sidebar({
   /** Authors demanded from rt but not yet backfilled -- their counts may be
       undercounts, so the row says so instead of quietly showing a low number. */
   scopeUncovered: string[];
+  /** Caption under the roster, for when it is not the configured team. */
+  note?: string;
 }) {
   return (
     <nav className="tui-sidebar" aria-label="team members">
+      {note && <p className="tui-side-note">{note}</p>}
       <div className="tui-side-head">
         <button className={active === "all" ? "tui-side-item active" : "tui-side-item"} onClick={() => onPick("all")}>
           <span className="tui-side-name">◉ All</span>
diff --git a/src/client/board/TabBar.tsx b/src/client/board/TabBar.tsx
new file mode 100644
index 0000000..837aa1a
--- /dev/null
+++ b/src/client/board/TabBar.tsx
@@ -0,0 +1,41 @@
+import { Chip } from "@mattstack/tui-kit";
+import type { TabConfig } from "../../config.ts";
+
+/** Board tabs, rendered as a strip above the content they scope rather than as
+    another control in the header row. Renders nothing for a single tab, so a
+    board with no tabs configured looks exactly as it did before tabs existed. */
+export function TabBar({
+  tabs,
+  active,
+  onPick,
+  syncing,
+}: {
+  tabs: TabConfig[];
+  active: string;
+  onPick: (tab: string) => void;
+  /** The active codeowners tab's section is still mid-backfill. */
+  syncing: boolean;
+}) {
+  if (tabs.length < 2) return null;
+  return (
+    <div className="tui-tabs" role="tablist" aria-label="board tabs">
+      {tabs.map((tab) => (
+        <button
+          key={tab.id}
+          role="tab"
+          type="button"
+          aria-selected={tab.id === active}
+          className={`tui-tab${tab.id === active ? " active" : ""}`}
+          onClick={() => onPick(tab.id)}
+        >
+          {tab.label}
+        </button>
+      ))}
+      {syncing && (
+        <Chip intent="warn" data-flag="" title="rt hasn't finished backfilling this codeowner section... counts may be low">
+          syncing
+        </Chip>
+      )}
+    </div>
+  );
+}
diff --git a/src/client/board/config-shapes.ts b/src/client/board/config-shapes.ts
index 1a7ff50..b3d54fd 100644
--- a/src/client/board/config-shapes.ts
+++ b/src/client/board/config-shapes.ts
@@ -8,7 +8,8 @@ export type CompositeShape =
   | { kind: "stringList" }
   | { kind: "pairList"; fields: readonly [string, string] }
   | { kind: "leaves"; fields: Record<string, LeafType> }
-  | { kind: "roster" };
+  | { kind: "roster" }
+  | { kind: "tabs" };
 
 /** What the board knows about its own composite keys that the registry does
     not: rt validates only the top-level type, and `parseConfig` rejects a
@@ -51,6 +52,7 @@ export const COMPOSITE_SHAPES: Record<string, CompositeShape> = {
       "fixClasses.codeFix": "boolean",
     },
   },
+  "board.tabs": { kind: "tabs" },
   "board.members": { kind: "roster" },
   "board.hiddenMembers": { kind: "roster" },
 };
@@ -60,6 +62,7 @@ export type RowKind = "scalar" | CompositeShape["kind"] | "readonly";
 export function rowKind(def: ConfigDef): RowKind {
   const shape = COMPOSITE_SHAPES[def.key];
   if (shape?.kind === "roster") return "roster";
+  if (shape?.kind === "tabs") return "tabs";
   if (def.secret || !def.writable) return "readonly";
   if (def.type === "object" || def.type === "array") return shape?.kind ?? "readonly";
   return "scalar";
@@ -99,9 +102,42 @@ export function matchesShape(shape: CompositeShape, value: unknown): boolean {
       );
     case "roster":
       return Array.isArray(value);
+    case "tabs":
+      return (
+        Array.isArray(value) &&
+        value.length > 0 &&
+        value.every(isTabLike) &&
+        new Set(value.map((t) => (t as { id: string }).id)).size === value.length
+      );
   }
 }
 
+/** Mirrors the server's parseTabs closely enough that the editor never
+    renders a value the next boot would refuse. */
+function isTabLike(v: unknown): boolean {
+  if (!isRecord(v)) return false;
+  if (typeof v.id !== "string" || v.id === "" || typeof v.label !== "string" || v.label === "") return false;
+  if (v.slackChannel !== undefined && typeof v.slackChannel !== "string") return false;
+  if (v.reviewSkill !== undefined && typeof v.reviewSkill !== "string") return false;
+  const src = v.source;
+  if (!isRecord(src)) return false;
+  if (src.kind === "authors") return true;
+  if (src.kind !== "codeowners") return false;
+  if (typeof src.section !== "string" || src.section === "") return false;
+  return src.excludeMembers === undefined || typeof src.excludeMembers === "boolean";
+}
+
+/** A tab id from its label: lowercase, runs of anything but [a-z0-9] become
+    one dash, suffixed until it clears `taken`. */
+export function slugTabId(label: string, taken: Iterable<string>): string {
+  const base = label.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "") || "tab";
+  const used = new Set(taken);
+  if (!used.has(base)) return base;
+  let n = 2;
+  while (used.has(`${base}-${n}`)) n += 1;
+  return `${base}-${n}`;
+}
+
 export function getLeaf(obj: unknown, path: string): unknown {
   let cur: unknown = obj;
   for (const part of path.split(".")) {
diff --git a/src/config.ts b/src/config.ts
index a6a9063..5d4c13a 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -247,7 +247,7 @@ export function parseConfig(raw: string, source = "config.json"): BoardConfig {
 }
 
 /** Absent = IMPLICIT_TABS (the classic single authors-roster board), never zero tabs. */
-function parseTabs(raw: unknown, source: string): TabConfig[] {
+export function parseTabs(raw: unknown, source: string): TabConfig[] {
   if (raw === undefined) return IMPLICIT_TABS;
   if (!Array.isArray(raw)) throw new Error(`${source} "tabs" must be an array`);
   if (raw.length === 0) throw new Error(`${source} "tabs" must not be empty (omit "tabs" for the implicit default)`);
@@ -553,6 +553,84 @@ function isHiddenMembersOwned(resolve: GetSettingFn): boolean {
  * to revert. A non-ENOENT file-read failure (a genuinely malformed
  * config.json) still surfaces loudly, same as today.
  */
+/** Whether the settings store owns the roster itself (as opposed to the
+    hidden overlay). Mirrors isHiddenMembersOwned: the ownership latch decides
+    which file a roster edit must land in. */
+function isMembersOwned(resolve: GetSettingFn): boolean {
+  return storeValue<Member[]>("board.members", resolve) !== undefined;
+}
+
+/**
+ * Replace the roster wholesale, honoring the ownership latch: a store-owned
+ * roster is written to the team store, otherwise to config.json. Callers own
+ * validation (duplicate, unknown) and pass the full next list; this only
+ * persists it and hands back the reloaded config so the server can swap its
+ * in-memory copy. Hidden flags ride along on the entries, matching how the
+ * roster is stored today.
+ */
+export function saveRosterMembers(
+  next: Member[],
+  path: string = CONFIG_PATH,
+  resolve: GetSettingFn = getSetting,
+  write: SetSettingFn = setSetting,
+): BoardConfig {
+  if (isMembersOwned(resolve)) {
+    write("board.members", next, "team");
+  } else {
+    let raw: string;
+    try {
+      raw = readFileSync(path, "utf8");
+    } catch {
+      throw new Error(`config.json not found at ${path}`);
+    }
+    const parsed = JSON.parse(raw) as Record<string, unknown>;
+    parsed.members = next;
+    const tmp = `${path}.tmp`;
+    writeFileSync(tmp, JSON.stringify(parsed, null, 2) + "\n");
+    renameSync(tmp, path);
+  }
+  return loadConfigFrom(path, resolve);
+}
+
+function isTabsOwned(resolve: GetSettingFn): boolean {
+  return storeValue<unknown>("board.tabs", resolve) !== undefined;
+}
+
+/**
+ * Replace the tab list wholesale, honoring the same ownership latch as the
+ * roster: store-owned goes to the team store, otherwise config.json's "tabs"
+ * (temp-file-plus-rename), and with no config.json at all this establishes
+ * store ownership, per saveMemberHidden's ruling. The list is validated here
+ * so a bad write can never leave a config the next boot refuses to load.
+ */
+export function saveTabs(
+  next: unknown,
+  path: string = CONFIG_PATH,
+  resolve: GetSettingFn = getSetting,
+  write: SetSettingFn = setSetting,
+): BoardConfig {
+  const tabs = parseTabs(next, "tabs");
+  if (isTabsOwned(resolve)) {
+    write("board.tabs", tabs, "team");
+  } else {
+    let raw: Record<string, unknown> | undefined;
+    try {
+      raw = JSON.parse(readFileSync(path, "utf8")) as Record<string, unknown>;
+    } catch (err) {
+      if (!isEnoent(err)) throw err;
+    }
+    if (raw === undefined) {
+      loadConfigFrom(path, resolve);
+      write("board.tabs", tabs, "team");
+    } else {
+      raw.tabs = tabs;
+      writeFileSync(path + ".tmp", JSON.stringify(raw, null, 2) + "\n");
+      renameSync(path + ".tmp", path);
+    }
+  }
+  return loadConfigFrom(path, resolve);
+}
+
 export function saveMemberHidden(
   username: string,
   hidden: boolean,
diff --git a/src/data.ts b/src/data.ts
index e7d7186..8230614 100644
--- a/src/data.ts
+++ b/src/data.ts
@@ -292,6 +292,25 @@ export function buildRoster(members: Member[], mrs: BoardMR[], names: Map<string
   }));
 }
 
+/** A roster derived from the MRs on screen rather than from config: a
+    codeowners tab lists other teams' MRs, so the configured roster has nothing
+    to drive there, but filtering by author is still useful. Busiest author
+    first, then alphabetical, so the list reads as "who is asking for review".
+    Bots and hidden members are not special-cased: whoever authored a row in
+    view belongs in the roster for that view. */
+export function inferRoster(mrs: BoardMR[]): RosterMember[] {
+  const byUsername = new Map<string, RosterMember>();
+  for (const mr of mrs) {
+    const { username, name } = mr.author;
+    const existing = byUsername.get(username);
+    if (existing) existing.count += 1;
+    else byUsername.set(username, { username, name: name ?? null, count: 1 });
+  }
+  return [...byUsername.values()].sort(
+    (a, b) => b.count - a.count || a.username.localeCompare(b.username),
+  );
+}
+
 export function reviewSkillForTab(
   config: BoardConfig,
   tabId: string | undefined,
diff --git a/src/favicon.svg b/src/favicon.svg
index 092d57b..d015b8c 100644
--- a/src/favicon.svg
+++ b/src/favicon.svg
@@ -1,16 +1,17 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-  <!-- Light tile so the mark reads on dark browser chrome (where the previous
-       #1a1b26 tile disappeared) and on light chrome (where the tile provides
-       internal contrast). -->
-  <rect width="32" height="32" rx="7" fill="#f6f6fa"/>
-  <!-- main/target branch (right): saturated Tokyo-day blue, thicker stroke so
-       the shape survives 16x16. -->
-  <circle cx="23" cy="5" r="4" fill="#2e7de9"/>
-  <line x1="23" y1="9" x2="23" y2="23" stroke="#2e7de9" stroke-width="4" stroke-linecap="round"/>
-  <circle cx="23" cy="27" r="4" fill="#2e7de9"/>
-  <!-- feature branch merging into main: saturated purple, matching stroke. -->
-  <circle cx="7" cy="27" r="4" fill="#7847bd"/>
-  <path d="M7 23 V 18 Q 7 12 13 12 H 16" fill="none" stroke="#7847bd" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-  <!-- Merge arrow tip: same purple, chunkier so it reads at favicon size. -->
-  <path d="M15 8 L 20 12 L 15 16" fill="none" stroke="#7847bd" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+  <!-- Dark indigo tile, matching /Applications/mattstack.app's own icon
+       (#1d1830) so the board reads as part of that family in a tab strip
+       next to it. -->
+  <rect width="32" height="32" rx="7" fill="#1d1830"/>
+  <!-- main/target branch (right): mattstack's own accent pink (#ff84ad),
+       thicker stroke so the shape survives 16x16. -->
+  <circle cx="23" cy="5" r="4" fill="#ff84ad"/>
+  <line x1="23" y1="9" x2="23" y2="23" stroke="#ff84ad" stroke-width="4" stroke-linecap="round"/>
+  <circle cx="23" cy="27" r="4" fill="#ff84ad"/>
+  <!-- feature branch merging into main: a violet tint of the tile's own
+       indigo, so the second color reads as family rather than a clash. -->
+  <circle cx="7" cy="27" r="4" fill="#a78bfa"/>
+  <path d="M7 23 V 18 Q 7 12 13 12 H 16" fill="none" stroke="#a78bfa" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+  <!-- Merge arrow tip: same violet, chunkier so it reads at favicon size. -->
+  <path d="M15 8 L 20 12 L 15 16" fill="none" stroke="#a78bfa" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/src/server.ts b/src/server.ts
index 2b7468a..c11ac2d 100644
--- a/src/server.ts
+++ b/src/server.ts
@@ -6,7 +6,7 @@ import { getClientAssets } from "./client-assets.ts";
 import styleCss from "./style.css" with { type: "text" };
 import faviconSvg from "./favicon.svg" with { type: "text" };
 import type { PullRequest, MRDetail } from "@mattstack/glance";
-import { loadConfig, loadGitLabToken, loadSlackToken, loadSwitchboardToken, loadSwitchboardAdminToken, saveMemberHidden, saveSwitchboardUrl, parseConfig, CONFIG_PATH, daemonRepoField, repoIdentityField } from "./config.ts";
+import { loadConfig, loadGitLabToken, loadSlackToken, loadSwitchboardToken, loadSwitchboardAdminToken, saveMemberHidden, saveRosterMembers, saveSwitchboardUrl, saveTabs, parseConfig, CONFIG_PATH, daemonRepoField, repoIdentityField } from "./config.ts";
 import { memoizeAsync } from "./memoize-async.ts";
 import { resolveBoardSkill, type BoardSkillKind } from "./manifest-bindings.ts";
 import { upsertEnvKeys } from "./env-file.ts";
@@ -473,7 +473,15 @@ const httpServer = Bun.serve({
       case "/member": {
         // Scoped refresh: just one member's MRs, cheap enough to poll often.
         const u = new URL(req.url).searchParams.get("u");
-        if (!u || !config.members.some((m) => m.username === u && !m.hidden)) {
+        // A codeowners tab's roster is inferred from the authors it shows, so
+        // a scoped refresh there names someone off the config roster. Serving
+        // them is safe (the snapshot already shows their tagged rows) and
+        // without it the tab's 15s poll and refresh button 400 while filtered.
+        const onRoster = !!u && config.members.some((m) => m.username === u && !m.hidden);
+        const taggedAuthor = !!u && (await cache.get()).mrs.some(
+          (mr) => mr.author.username === u && mr.codeownerSections.length > 0,
+        );
+        if (!u || (!onRoster && !taggedAuthor)) {
           return new Response("unknown member", { status: 400 });
         }
         void refreshMemberNames();
@@ -597,6 +605,78 @@ const httpServer = Bun.serve({
           headers: { "content-type": "application/json" },
         });
       }
+      case "/roster": {
+        // Add or drop a teammate. Sibling of /settings (which only flips the
+        // hidden overlay): both are single-writer config mutations that swap
+        // the in-memory roster so this and every later /data.json agree.
+        if (req.method !== "POST") return new Response("method not allowed", { status: 405 });
+        if (!isLocalRequest(req)) return new Response("forbidden", { status: 403 });
+        let body: unknown;
+        try {
+          body = await req.json();
+        } catch {
+          return new Response("invalid json", { status: 400 });
+        }
+        const { action, username, name } = (body ?? {}) as { action?: unknown; username?: unknown; name?: unknown };
+        if ((action !== "add" && action !== "remove") || typeof username !== "string" || !username.trim()) {
+          return new Response('expected { action: "add" | "remove", username: string, name?: string }', { status: 400 });
+        }
+        if (name !== undefined && typeof name !== "string") {
+          return new Response("name must be a string", { status: 400 });
+        }
+        const handle = username.trim();
+        const present = config.members.some((m) => m.username === handle);
+        if (action === "add" && present) return new Response(`"${handle}" is already on the roster`, { status: 400 });
+        if (action === "remove" && !present) return new Response(`unknown member "${handle}"`, { status: 400 });
+        // The board needs someone to be: dropping the last member would leave
+        // a roster parseConfig refuses to load on the next boot, and dropping
+        // yourself strands every affordance keyed on defaultMember (drafts,
+        // respond, "yours" in general).
+        if (action === "remove" && config.members.length === 1) {
+          return new Response("the roster cannot be emptied", { status: 400 });
+        }
+        if (action === "remove" && handle === config.defaultMember) {
+          return new Response("you cannot drop yourself: this board runs as you", { status: 400 });
+        }
+        const trimmedName = typeof name === "string" ? name.trim() : "";
+        const next =
+          action === "add"
+            ? [...config.members, trimmedName ? { username: handle, name: trimmedName } : { username: handle }]
+            : config.members.filter((m) => m.username !== handle);
+        try {
+          config.members = saveRosterMembers(next).members;
+        } catch (err) {
+          return new Response(`roster write failed: ${err instanceof Error ? err.message : err}`, { status: 500 });
+        }
+        // A new member's MRs are not in the snapshot yet, and a dropped one's
+        // must leave it: the next full fetch declares the new demand to rt.
+        cache.invalidate();
+        return new Response(JSON.stringify({ ok: true }), { headers: { "content-type": "application/json" } });
+      }
+      case "/tabs": {
+        // Replace the tab list. Same single-writer contract as /roster: the
+        // in-memory config swaps so /data.json agrees at once, and the cache
+        // drops so the next fetch declares the new sections to rt.
+        if (req.method !== "POST") return new Response("method not allowed", { status: 405 });
+        if (!isLocalRequest(req)) return new Response("forbidden", { status: 403 });
+        let body: unknown;
+        try {
+          body = await req.json();
+        } catch {
+          return new Response("invalid json", { status: 400 });
+        }
+        const { tabs } = (body ?? {}) as { tabs?: unknown };
+        if (!Array.isArray(tabs)) return new Response("expected { tabs: TabConfig[] }", { status: 400 });
+        try {
+          config.tabs = saveTabs(tabs).tabs;
+        } catch (err) {
+          const message = err instanceof Error ? err.message : String(err);
+          const status = /^tabs\b/.test(message) ? 400 : 500;
+          return new Response(status === 400 ? message : `tabs write failed: ${message}`, { status });
+        }
+        cache.invalidate();
+        return new Response(JSON.stringify({ ok: true, tabs: config.tabs }), { headers: { "content-type": "application/json" } });
+      }
       case "/discussions": {
         // Reviewer-participated comment threads for the drawer, from the rt
         // daemon's discussions store. `repo` is the rt repo name (was a scoped
diff --git a/src/style.css b/src/style.css
index 0e3e612..9a7b949 100644
--- a/src/style.css
+++ b/src/style.css
@@ -330,12 +330,21 @@
 .tui-footer-stale { color: var(--amber); opacity: 1; }
 
 /* team sidebar layout */
-.tui-app { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: start; }
+.tui-app {
+  display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: start;
+  transition: grid-template-columns 180ms ease, gap 180ms ease;
+}
 .tui-app.tui-wide { max-width: 1400px; }
 /* No <Sidebar> rendered (a codeowners tab, scoped by section rather than
    roster) -- drop the 220px track, or grid auto-placement strands the lone
    .tui-main child in that empty first column instead of the 1fr one. */
-.tui-app.tui-no-sidebar { grid-template-columns: 1fr; }
+@media (prefers-reduced-motion: reduce) { .tui-app { transition: none; } }
+/* Caption for a roster that is not the configured team (a codeowners tab's is
+   inferred from the MRs in view). */
+.tui-side-note {
+  margin: 0 0 4px; padding: 0 4px;
+  color: var(--muted); font-size: 11px; font-family: var(--font-mono);
+}
 .tui-main { min-width: 0; }
 /* The roster gets the same framed-panel backdrop as the MR groups -- bare
    transparent buttons on the page grid disappear in dark mode. Item hover/
@@ -743,8 +752,9 @@
 .tui-row[data-local="1"], .tui-card[data-local="1"] { cursor: context-menu; }
 
 /* ── board settings (ConfigModal) ─────────────────────────────────────────── */
-.tui-config-modal { max-width: min(760px, 94vw); }
-.tui-config-filter { width: 100%; margin-bottom: 0.4rem; }
+.tui-config-modal { max-width: min(920px, 94vw); display: flex; flex-direction: column; overflow: hidden; }
+.tui-config-body { flex: 1; min-height: 0; overflow-y: auto; padding-right: 0.4rem; margin-right: -0.4rem; }
+.tui-config-filter { width: 100%; margin: 0.6rem 0 0.5rem; }
 .tui-config-group {
   margin: 0.9rem 0 0.25rem; color: var(--muted); font-size: 0.68rem; font-weight: 600;
   text-transform: uppercase; letter-spacing: 0.07em;
@@ -752,7 +762,6 @@
 .tui-config-list { list-style: none; margin: 0; padding: 0; }
 .tui-config-row { position: relative; padding: 7px 8px 8px 14px; border-radius: 6px; }
 .tui-config-row + .tui-config-row { border-top: 1px solid var(--border-soft); }
-.tui-config-row:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
 /* the bar means "present in a store" — board.* rows carry no registry
    defaults, so the alternative is the app-side fallback, not a default */
 .tui-config-row.set::before {
@@ -760,6 +769,23 @@
   border-radius: 1px; background: var(--accent);
 }
 .tui-config-head { display: flex; align-items: center; gap: 8px; }
+.tui-disclosure-head { cursor: pointer; user-select: none; margin: -4px -6px; padding: 4px 6px; border-radius: 4px; }
+.tui-disclosure-head:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
+.tui-disclosure-head:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
+.tui-disclosure-chevron {
+  flex: 0 0 auto; display: inline-block; width: 12px; color: var(--muted); font-size: 0.8rem; line-height: 1;
+  transition: transform 180ms ease, color 120ms ease;
+}
+.tui-disclosure-head.open .tui-disclosure-chevron { transform: rotate(90deg); }
+.tui-disclosure-head:hover .tui-disclosure-chevron { color: var(--fg); }
+.tui-config-tip { display: inline-flex; }
+.tui-disclosure { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 180ms ease; }
+.tui-disclosure.open { grid-template-rows: 1fr; }
+.tui-disclosure-body { min-height: 0; overflow: hidden; }
+.tui-disclosure.open .tui-disclosure-body { padding-top: 6px; }
+@media (prefers-reduced-motion: reduce) {
+  .tui-disclosure, .tui-disclosure-chevron { transition: none; }
+}
 .tui-config-keyname { font-weight: 600; font-family: var(--font-mono); font-size: 0.84rem; }
 .tui-config-badge {
   margin-left: auto; color: var(--muted); font-size: 0.66rem; white-space: nowrap;
@@ -768,7 +794,18 @@
 .tui-config-clear { background: none; border: none; color: var(--muted); cursor: pointer; padding: 0 4px; font: inherit; line-height: 1; }
 .tui-config-clear:hover:not(:disabled) { color: var(--fg); }
 .tui-config-clear:disabled { opacity: 0.5; cursor: default; }
-.tui-config-desc { margin: 2px 0 6px; color: var(--muted); font-size: 0.74rem; }
+.tui-info {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 15px; height: 15px; padding: 0; border-radius: 50%;
+  border: 1px solid var(--muted); background: none; color: var(--muted);
+  font: 600 10px/1 var(--font-mono); cursor: help;
+}
+.tui-info:hover, .tui-info:focus-visible { color: var(--fg); border-color: var(--fg); }
+.tui-info-card {
+  max-width: 400px; font-family: var(--font-sans);
+  background: var(--fg); color: var(--bg); border-color: transparent;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
+}
 .tui-config-control { display: flex; align-items: center; gap: 8px; }
 .tui-config-control > .tui-invite-input { flex: 1; max-width: 440px; }
 .tui-config-control .tui-invite-input.dirty { border-color: var(--accent); }
@@ -797,3 +834,71 @@
 .tui-config-pairs { display: flex; flex-direction: column; gap: 4px; flex: 1; }
 .tui-config-pair { display: grid; grid-template-columns: 1fr 1fr 1.4em; gap: 8px; align-items: center; }
 
+
+/* ── board tabs ──────────────────────────────────────────────────────────── */
+/* A strip above the content it scopes, not another control in the header row. */
+.tui-tabs {
+  display: flex; align-items: center; gap: 4px;
+  margin: 0 0 14px; padding-bottom: 0;
+  border-bottom: 1px solid var(--border);
+}
+/* The buttons carry the surface, not the strip: a tab sitting straight on the
+   page's grid-paper background is hard to read. */
+.tui-tab {
+  padding: 7px 14px; border: 0; border-bottom: 2px solid transparent;
+  margin-bottom: -1px; border-radius: 6px 6px 0 0;
+  background: color-mix(in srgb, var(--panel) 88%, transparent);
+  color: var(--muted); font: inherit; font-size: 13px; cursor: pointer;
+  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
+}
+.tui-tab:hover { color: var(--fg); background: var(--card); }
+.tui-tab.active { color: var(--fg); background: var(--card); border-bottom-color: var(--accent, var(--fg)); }
+.tui-tabs .tui-chip { margin-left: auto; }
+@media (prefers-reduced-motion: reduce) { .tui-tab { transition: none; } }
+
+/* Roster editing lives in board settings beside the key it edits; the roster
+   panel stays the quick check-in/out surface. */
+.tui-roster-edit { display: flex; flex-direction: column; gap: 6px; width: 100%; }
+.tui-roster-head { display: flex; align-items: center; gap: 8px; }
+.tui-roster-list {
+  display: flex; flex-direction: column; gap: 2px;
+  max-height: 220px; overflow-y: auto;
+  margin: 0; padding: 4px; list-style: none;
+  border: 1px solid var(--border); border-radius: 6px;
+  background: var(--bg);
+}
+.tui-roster-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px; }
+.tui-roster-who { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 13px; }
+.tui-roster-handle { color: var(--muted); font-family: var(--font-mono); font-size: 11px; }
+.tui-roster-out { color: var(--muted); font-size: 11px; }
+.tui-roster-add { display: flex; gap: 6px; }
+.tui-roster-add .tui-modal-input { flex: 1; min-width: 0; }
+.tui-modal-input {
+  padding: 6px 9px; border: 1px solid var(--border); border-radius: 6px;
+  background: var(--card); color: var(--fg); font: inherit; font-size: 13px;
+}
+.tui-modal-btn {
+  padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
+  background: var(--card); color: var(--muted); font: inherit; font-size: 12px; cursor: pointer;
+  transition: color 150ms ease, border-color 150ms ease;
+}
+.tui-modal-btn:hover:not(:disabled) { color: var(--fg); }
+.tui-modal-btn:disabled { opacity: 0.5; cursor: default; }
+.tui-modal-btn.danger { color: var(--bad, #e5484d); border-color: currentcolor; }
+.tui-modal-error { margin: 4px 0 0; color: var(--bad, #e5484d); font-size: 12px; }
+@media (prefers-reduced-motion: reduce) { .tui-modal-btn { transition: none; } }
+.tui-tabs-list { gap: 12px; padding: 10px; max-height: 60vh; }
+.tui-tabs-item { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); }
+.tui-tabs-item-head { display: flex; align-items: center; gap: 12px; }
+.tui-tabs-item-head .tui-invite-input { flex: 1; min-width: 0; font-size: 14px; }
+.tui-tabs-fields { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 14px; align-items: center; }
+.tui-tabs-field { display: contents; }
+.tui-tabs-field > span { color: var(--muted); font-family: var(--font-mono); font-size: 11px; white-space: nowrap; }
+.tui-tabs-field .tui-invite-input { width: 100%; max-width: 420px; min-width: 0; }
+.tui-tabs-check { display: flex; grid-column: 2; align-items: center; gap: 8px; }
+.tui-tabs-add { flex-wrap: wrap; gap: 8px; padding: 4px 0; }
+.tui-tabs-add .tui-modal-input { flex: 1 1 180px; }
+.tui-tabs-kind { flex: 0 0 auto; }
+.tui-tabs-drop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--bad, #e5484d); border-radius: 4px; background: color-mix(in srgb, var(--bad, #e5484d) 8%, var(--panel)); }
+.tui-tabs-drop .tui-modal-error { flex: 1 1 100%; margin: 0; }
+.tui-tabs-drop .tui-modal-input { flex: 1 1 200px; }
diff --git a/src/view.ts b/src/view.ts
index bcd7022..c4574ca 100644
--- a/src/view.ts
+++ b/src/view.ts
@@ -154,6 +154,22 @@ export function filterByMember(mrs: BoardMR[], member: string): BoardMR[] {
   return member === "all" ? mrs : mrs.filter((m) => m.author.username === member);
 }
 
+/** Usernames the member filter may legitimately hold on a given tab. An
+    authors tab answers with the configured roster; a codeowners tab answers
+    with the authors of the rows it shows, since its roster is inferred from
+    them. The poll's re-validation uses this: checking a picked author against
+    the config roster alone would drop an inferred one on the next refresh. */
+export function rosterUsernamesFor(
+  mrs: BoardMR[],
+  tab: TabConfig | undefined,
+  configUsernames: string[],
+): Set<string> {
+  if (!tab || tab.source.kind === "authors") return new Set(configUsernames);
+  return new Set(
+    filterByTab(mrs, tab, new Set(configUsernames)).map((mr) => mr.author.username),
+  );
+}
+
 /** An authors tab narrows to roster members -- further per-member filtering
     stays downstream in filterByMember. Without this narrowing, a
     codeowner-tagged stranger (never a roster member, but let through the