bitboss-ui 3.0.0-beta.65 → 3.0.0-beta.66

package/dist/ai/recipes/vue/approvals-inbox.md

@@ -27,7 +27,6 @@ Sibling recipes: [Nuxt](../nuxt/approvals-inbox.md) ·
   those files before anything below, and do not hand-roll replacements —
   the peek stack, the close semantics and the sidebar's out-of-flow
   behaviour are all load-bearing here.
-- `<BbHost />` mounted once in the app root (`App.vue`) — never in a page.
 - Each toast and alert variant's icon set once in the build config; the
   code below passes no `icon` for them:
   `toastVariants: { success: { icon: 'lucide:circle-check' }, destructive: { icon: 'lucide:circle-x' } }`
@@ -47,7 +46,7 @@ Sibling recipes: [Nuxt](../nuxt/approvals-inbox.md) ·
 
 - **Highlight drives the peek, not a click handler.** The table gets
   `keyboard-navigation`; `ctx.table.highlighted` (the coopted table
-  context, seeded with `highlighted: null` because highlight is opt-in) is
+  handle, seeded with `highlighted: null` because highlight is opt-in) is
   watched in `context.ts`, and every highlight change replaces the
   sidebar's stack with that expense — a click, or Enter on a focused row,
   opens it with zero markup in `Index.vue`. Arrows only move focus (the
@@ -59,7 +58,7 @@ Sibling recipes: [Nuxt](../nuxt/approvals-inbox.md) ·
   `{ all, unselected, filters }` instead of the ids, and `selectedCount`
   (the total minus the unticked rows) is what the bar and the dialog show.
 - **One coopting page context.** `provideApprovalsInbox()` joins the
-  page-shell stack and the table context once, owns filters/tab and when
+  page-shell stack and the table handle once, owns filters/tab and when
   the dialogs open, and exposes complete actions. Every leaf calls `useApprovalsInbox()` and
   nothing else.
 - **Three dispatch surfaces, one set of actions.** Approve / reject /
@@ -79,9 +78,10 @@ Sibling recipes: [Nuxt](../nuxt/approvals-inbox.md) ·
 - **Clicking a submitter's name always stacks**, from a row or from inside
   the expense peek — the back arrow appears once the stack is two deep,
   exactly the "peek vs stack" grammar of the flagship.
-- **Tabs are URL filters with live counts** (`Needs approval` / `Approved`
-  / `Rejected` / `All`), same shape as every other workspace in the
-  folder.
+- **The status strip is a URL filter with live counts**, a `BbRadioGroup` with
+  the tabs look (`variant="pill"`): one value over one table, so radios, not a
+  tablist (`Needs approval` / `Approved` / `Rejected` / `All`), same shape as
+  every other workspace in the folder.
 - **Buttons are `md` by default**; `sm`/`xs` apply only where the doctrine
   allows it — table rows, the peek footers, the bulk bar, the shortcut
   bar.
@@ -124,13 +124,13 @@ Chrome assumed from the guides: [App Layout](../../guides/app-layout.md)
 | 3   | Filter by category               | filter rail pill                                       | `BbSelectPopover` multiple                                            |
 | 4   | Quick filter: amount over        | filter rail pill                                       | `BbSelectPopover` single, preset thresholds                           |
 | 5   | Clear filters                    | rail right (only when active)                          | context `clearFilters()`                                              |
-| 6   | Switch tab                       | href tabs with counts                                  | URL + fetch dependency                                                |
+| 6   | Switch tab                       | URL status strip with counts                           | URL + fetch dependency                                                |
 | 7   | Arrow through rows               | `keyboard-navigation` roving tabindex                  | table's own Arrow/Home/End                                            |
 | 8   | Preview an expense               | highlight a row (click, Enter/Space, arrow-then-Enter) | `ctx.table.highlighted` watcher → `peekExpense` (replace)             |
 | 9   | Approve (one click)              | row icon button, peek footer, key `A`                  | `approve(expense)` — API + refresh + toast                            |
 | 10  | Reject with reason               | row icon button, peek footer, key `R`                  | `v-bb-dialog` / `openReject` → `RejectDialog` (required `BbTextarea`) |
 | 11  | Snooze                           | row icon button, peek footer, key `S`                  | `v-bb-dialog` / `openSnooze` → `SnoozeDialog` (`BbDatePickerInput`)   |
-| 12  | Select rows / select all         | table checkboxes                                       | table context                                                         |
+| 12  | Select rows / select all         | table checkboxes                                       | table handle                                                          |
 | 13  | Bulk approve                     | floating bottom panel                                  | `bulkApprove()`: the ids, or `{ all, unselected, filters }`           |
 | 14  | Bulk reject with reason          | floating bottom panel                                  | `v-bb-dialog` → `BulkRejectDialog`, destructive                       |
 | 15  | Stack a submitter                | submitter cell / peek property                         | `stackSubmitter(id)` → shell stack, back arrow                        |
@@ -161,13 +161,14 @@ import {
 	type InjectionKey,
 	type Ref,
 } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 import { useMagicKeys, whenever } from '@vueuse/core';
 import {
-	useBbDialogContext,
-	useBbTableContext,
+	useBbDialog,
+	useBbTable,
 	useConfirm,
 	useToast,
-	type BbTableContext,
+	type BbTableHandle,
 	type BbTableItemsContext,
 } from 'bitboss-ui';
 import {
@@ -214,7 +215,7 @@ export const CATEGORY_OPTIONS = (
 ).map((value) => ({ value, text: CATEGORY_LABEL[value] }));
 
 export interface ApprovalsFilters {
-	search: string;
+	search: string | null;
 	submitterId: number | null;
 	categories: ExpenseCategory[];
 	/** Preset threshold from the quick filter (`50`, `100`, `250`…), or `null`. */
@@ -222,9 +223,9 @@ export interface ApprovalsFilters {
 }
 
 export interface ApprovalsInboxContext {
-	// -- Coopted contexts ------------------------------------------------------
+	// -- Coopted contexts and handles ------------------------------------------
 	shell: PageShellContext<PeekItem>;
-	table: BbTableContext;
+	table: BbTableHandle;
 	// -- Page-owned state --------------------------------------------------------
 	filters: ApprovalsFilters;
 	hasActiveFilters: ComputedRef<boolean>;
@@ -270,13 +271,27 @@ const isInteractiveElementFocused = (): boolean => {
 
 export function provideApprovalsInbox(): ApprovalsInboxContext {
 	const { toast } = useToast();
+	// A write that fails tells the user instead of escaping as an
+	// `Uncaught (in promise)`: the action resolves, the page stays as it was.
+	const failSoft =
+		<A extends unknown[]>(action: (...args: A) => Promise<unknown>) =>
+		async (...args: A) => {
+			try {
+				await action(...args);
+			} catch {
+				toast({
+					title: 'That did not go through. Try again.',
+					variant: 'destructive',
+				});
+			}
+		};
 	const { confirm } = useConfirm();
 
-	// -- Coopt the specific contexts: once, here, for the whole page. ----------
+	// -- Coopt the shell and the table handle: once, for the whole page. -------
 	const shell = usePageShellContext<PeekItem>();
 	// Highlight is opt-in: seeding it with `null` switches it on. Unseeded, a
 	// row click highlights nothing and the peek never opens.
-	const table = useBbTableContext('approvals-table', {
+	const table = useBbTable('approvals-table', {
 		perPage: 25,
 		highlighted: null,
 	});
@@ -290,12 +305,21 @@ export function provideApprovalsInbox(): ApprovalsInboxContext {
 	});
 	const hasActiveFilters = computed(
 		() =>
-			filters.search !== '' ||
+			!!filters.search ||
 			filters.submitterId !== null ||
 			filters.categories.length > 0 ||
 			filters.amountOver !== null
 	);
-	const tab = ref<ApprovalsTab>('needsApproval');
+	// The tab lives in `?tab=`: seeded from it, mirrored back with `replace`
+	// (a filter pick is not a history entry), the other query keys kept.
+	const route = useRoute();
+	const router = useRouter();
+	const tab = ref<ApprovalsTab>(
+		(route.query.tab as ApprovalsTab | undefined) ?? 'needsApproval'
+	);
+	watch(tab, (next) => {
+		void router.replace({ query: { ...route.query, tab: next } });
+	});
 	const tabCounts = ref<Record<ApprovalsTab, number>>({
 		needsApproval: 0,
 		approved: 0,
@@ -306,9 +330,9 @@ export function provideApprovalsInbox(): ApprovalsInboxContext {
 	// The page owns WHEN its dialogs open (row actions, the peek, the
 	// shortcuts) through these handles; each dialog is opened by id and reads
 	// its subject as `data`, so no open-state refs live here.
-	const rejectDialog = useBbDialogContext<Expense>('reject-expense');
-	const snoozeDialog = useBbDialogContext<Expense>('snooze-expense');
-	const bulkRejectDialog = useBbDialogContext('bulk-reject');
+	const rejectDialog = useBbDialog<Expense>('reject-expense');
+	const snoozeDialog = useBbDialog<Expense>('snooze-expense');
+	const bulkRejectDialog = useBbDialog('bulk-reject');
 
 	const clearFilters = () => {
 		filters.search = '';
@@ -319,7 +343,7 @@ export function provideApprovalsInbox(): ApprovalsInboxContext {
 
 	// -- Data -----------------------------------------------------------------------
 	// Cached so the keyboard shortcuts and the peek watcher can resolve a full
-	// expense from the id the table context reports.
+	// expense from the id the table handle reports.
 	const lastItems = ref<Expense[]>([]);
 	const fetchExpenses = async ({
 		signal,
@@ -400,21 +424,21 @@ export function provideApprovalsInbox(): ApprovalsInboxContext {
 		table.all.value = false;
 	};
 
-	const approve = async (expense: Expense) => {
+	const approve = failSoft(async (expense: Expense) => {
 		await api.expenses.approve(expense.id);
 		refresh();
 		toast({
 			title: `Approved ${expense.merchant} — $${expense.amount.toFixed(2)}.`,
 			variant: 'success',
 		});
-	};
+	});
 
 	// The R / S shortcuts open these dialogs from code; the row and peek
 	// buttons carry `v-bb-dialog` themselves.
 	const openReject = (expense: Expense) => {
 		rejectDialog.show(expense);
 	};
-	const reject = async (expense: Expense, reason: string) => {
+	const reject = failSoft(async (expense: Expense, reason: string) => {
 		await api.expenses.reject(expense.id, reason);
 		rejectDialog.hide();
 		refresh();
@@ -422,12 +446,12 @@ export function provideApprovalsInbox(): ApprovalsInboxContext {
 			title: `Rejected ${expense.merchant}.`,
 			variant: 'success',
 		});
-	};
+	});
 
 	const openSnooze = (expense: Expense) => {
 		snoozeDialog.show(expense);
 	};
-	const snooze = async (expense: Expense, until: string) => {
+	const snooze = failSoft(async (expense: Expense, until: string) => {
 		await api.expenses.snooze(expense.id, until);
 		snoozeDialog.hide();
 		refresh();
@@ -435,9 +459,9 @@ export function provideApprovalsInbox(): ApprovalsInboxContext {
 			title: `${expense.merchant} snoozed.`,
 			variant: 'success',
 		});
-	};
+	});
 
-	const bulkApprove = async () => {
+	const bulkApprove = failSoft(async () => {
 		const count = selectedCount.value;
 		await api.expenses.approveMany(bulkSelection());
 		clearSelection();
@@ -446,9 +470,9 @@ export function provideApprovalsInbox(): ApprovalsInboxContext {
 			title: `${count} expenses approved.`,
 			variant: 'success',
 		});
-	};
+	});
 
-	const bulkReject = async (reason: string) => {
+	const bulkReject = failSoft(async (reason: string) => {
 		const count = selectedCount.value;
 		const ok = await confirm({
 			variant: 'destructive',
@@ -466,7 +490,7 @@ export function provideApprovalsInbox(): ApprovalsInboxContext {
 			title: `${count} expenses rejected.`,
 			variant: 'success',
 		});
-	};
+	});
 
 	// -- Keyboard-shortcut dispatch: same actions, resolved against the row
 	// under the roving tabindex. Guarded exactly like `useDeleteCmd`.
@@ -566,32 +590,34 @@ export function useApprovalsInbox(): ApprovalsInboxContext {
 			<FilterRail />
 
 			<div class="flex items-center justify-between gap-2">
-				<!-- Tabs as URL filters: counts come from the server on every fetch. -->
-				<BbTabs
+				<!-- The status filter: one value over one table, so a radio group
+				     with the tabs look (a tablist would promise panels). The context
+				     keeps it in `?tab=`; the counts come from the server on every
+				     fetch. -->
+				<BbRadioGroup
 					v-model="ctx.tab.value"
 					compact
+					hide-legend
 					:items="[
 						{
 							value: 'needsApproval',
 							label: `Needs approval · ${ctx.tabCounts.value.needsApproval}`,
-							href: '?tab=needsApproval',
 						},
 						{
 							value: 'approved',
 							label: `Approved · ${ctx.tabCounts.value.approved}`,
-							href: '?tab=approved',
 						},
 						{
 							value: 'rejected',
 							label: `Rejected · ${ctx.tabCounts.value.rejected}`,
-							href: '?tab=rejected',
 						},
 						{
 							value: 'all',
 							label: `All · ${ctx.tabCounts.value.all}`,
-							href: '?tab=all',
 						},
 					]"
+					legend="Status"
+					variant="pill"
 				/>
 				<ShortcutsHint />
 			</div>
@@ -697,8 +723,8 @@ import {
 	BbBreadcrumbs,
 	BbButton,
 	BbPagination,
+	BbRadioGroup,
 	BbTable,
-	BbTabs,
 	BbTextInput,
 } from 'bitboss-ui';
 import PageShell from '@/components/layout/PageShell.vue';
@@ -1094,7 +1120,7 @@ import {
 	BbDialog,
 	BbForm,
 	BbTextarea,
-	useBbDialogContext,
+	useBbDialog,
 } from 'bitboss-ui';
 import { useApprovalsInbox } from './context';
 import type { Expense } from '@/types';
@@ -1103,7 +1129,7 @@ const ctx = useApprovalsInbox();
 
 // The expense the opener handed over (the context closes the dialog after
 // the request succeeds).
-const { data: expense } = useBbDialogContext<Expense>('reject-expense');
+const { data: expense } = useBbDialog<Expense>('reject-expense');
 
 const reason = ref<string | null>('');
 const submit = () =>
@@ -1211,14 +1237,14 @@ import {
 	BbDatePickerInput,
 	BbDialog,
 	BbForm,
-	useBbDialogContext,
+	useBbDialog,
 } from 'bitboss-ui';
 import { useApprovalsInbox } from './context';
 import type { Expense } from '@/types';
 
 const ctx = useApprovalsInbox();
 
-const { data: expense } = useBbDialogContext<Expense>('snooze-expense');
+const { data: expense } = useBbDialog<Expense>('snooze-expense');
 
 // Tomorrow as a LOCAL `YYYY-MM-DD` (`toISOString()` is the UTC date, a day
 // early east of Greenwich just after midnight).
@@ -1229,9 +1255,11 @@ const tomorrow = [
 	String(next.getMonth() + 1).padStart(2, '0'),
 	String(next.getDate()).padStart(2, '0'),
 ].join('-');
-const until = ref(tomorrow);
+const until = ref<string | null>(tomorrow);
 const submit = () =>
-	expense.value ? ctx.snooze(expense.value, until.value) : undefined;
+	expense.value && until.value
+		? ctx.snooze(expense.value, until.value)
+		: undefined;
 </script>
 ```
 
@@ -1587,7 +1615,7 @@ const currency = new Intl.NumberFormat('en-US', {
   `v-bb-dialog="{ id: 'reject-expense', data: expense }"` (the selection
   bar's Reject `v-bb-dialog="'bulk-reject'"`), and the `R` shortcut, which
   has no button, calls the context's `openReject(expense)` →
-  `useBbDialogContext<Expense>('reject-expense').show(expense)`. The dialog
+  `useBbDialog<Expense>('reject-expense').show(expense)`. The dialog
   reads that expense as `data`, and the context closes it with `hide()`
   once the request succeeds — no open-state refs, no `v-model`, no event
   for a parent to turn into `show()`. Each form is a `BbForm` whose

package/dist/ai/recipes/vue/inline-edit-workspace.md

@@ -70,7 +70,7 @@ label state) · [Page Shell](../../guides/page-shell.md) ·
   `v-model` autosave is one request per keystroke. Pickers commit on pick —
   the click already _is_ the commit.
 - **One coopting page context.** `provideBacklogWorkspace()` joins the
-  page-shell stack and the table context once, owns filters/tab/overlay, and
+  page-shell stack and the table handle once, owns filters/tab/overlay, and
   exposes complete actions. Eleven components share everything through one
   `useBacklogWorkspace()` call — zero prop drilling.
 - **Options resolve once, at page level.** Status and priority are static
@@ -116,29 +116,29 @@ needs a modal to edit.
 
 ## Action inventory
 
-| #   | Action                   | Trigger                            | Mechanism                                              |
-| --- | ------------------------ | ---------------------------------- | ------------------------------------------------------ |
-| 1   | New issue                | topbar, the page's one `primary`   | navigation (`/issues/new`)                             |
-| 2   | Page search              | topbar right                       | `filters.search` → fetch dependency                    |
-| 3   | Switch sprint tab        | href tabs with live counts         | URL + fetch dependency                                 |
-| 4   | Filter by status         | rail pill                          | `BbSelectPopover` multiple over the static catalog     |
-| 5   | Filter by priority       | rail pill                          | `BbSelectPopover` multiple over the static catalog     |
-| 6   | Filter by assignee       | rail pill                          | the shared people provider, single select              |
-| 7   | Clear filters            | rail right (only when active)      | context `clearFilters()`                               |
-| 8   | Rename issue             | title cell (grid)                  | commit-on-blur `@change` → `persistField('title')`     |
-| 9   | Re-estimate              | estimate cell (grid)               | commit-on-change number → `persistField('estimate')`   |
-| 10  | Change status            | status badge (grid **and** peek)   | pick = commit; spinner in the chevron (autosave cells) |
-| 11  | Change priority          | priority badge (grid **and** peek) | same grammar, its own leaf                             |
-| 12  | Reassign                 | assignee badge (grid **and** peek) | async people search; one shared provider               |
-| 13  | Peek issue               | issue ref cell                     | `peekIssue(id)` → shell stack                          |
-| 14  | Duplicate                | row `…` dropdown                   | context action + toast                                 |
-| 15  | Move to next sprint      | row `…` **and** bulk bar           | `moveToNextSprint` / `bulkMoveToNextSprint`            |
-| 16  | Delete                   | row `…`, peek footer               | destructive behind `useConfirm`                        |
-| 17  | Bulk set status          | bottom panel picker                | `bulkStatus` on `table.selected`                       |
-| 18  | Bulk assign              | bottom panel picker                | `bulkAssign` on `table.selected`                       |
-| 19  | Select rows / select all | table checkboxes                   | table context                                          |
-| 20  | Open full issue          | peek footer                        | navigation (`/issues/:id`)                             |
-| 21  | Close peek               | shell chrome                       | shell stack close                                      |
+| #   | Action                   | Trigger                             | Mechanism                                              |
+| --- | ------------------------ | ----------------------------------- | ------------------------------------------------------ |
+| 1   | New issue                | topbar, the page's one `primary`    | navigation (`/issues/new`)                             |
+| 2   | Page search              | topbar right                        | `filters.search` → fetch dependency                    |
+| 3   | Switch sprint tab        | a URL status strip with live counts | URL + fetch dependency                                 |
+| 4   | Filter by status         | rail pill                           | `BbSelectPopover` multiple over the static catalog     |
+| 5   | Filter by priority       | rail pill                           | `BbSelectPopover` multiple over the static catalog     |
+| 6   | Filter by assignee       | rail pill                           | the shared people provider, single select              |
+| 7   | Clear filters            | rail right (only when active)       | context `clearFilters()`                               |
+| 8   | Rename issue             | title cell (grid)                   | commit-on-blur `@change` → `persistField('title')`     |
+| 9   | Re-estimate              | estimate cell (grid)                | commit-on-change number → `persistField('estimate')`   |
+| 10  | Change status            | status badge (grid **and** peek)    | pick = commit; spinner in the chevron (autosave cells) |
+| 11  | Change priority          | priority badge (grid **and** peek)  | same grammar, its own leaf                             |
+| 12  | Reassign                 | assignee badge (grid **and** peek)  | async people search; one shared provider               |
+| 13  | Peek issue               | issue ref cell                      | `peekIssue(id)` → shell stack                          |
+| 14  | Duplicate                | row `…` dropdown                    | context action + toast                                 |
+| 15  | Move to next sprint      | row `…` **and** bulk bar            | `moveToNextSprint` / `bulkMoveToNextSprint`            |
+| 16  | Delete                   | row `…`, peek footer                | destructive behind `useConfirm`                        |
+| 17  | Bulk set status          | bottom panel picker                 | `bulkStatus` on `table.selected`                       |
+| 18  | Bulk assign              | bottom panel picker                 | `bulkAssign` on `table.selected`                       |
+| 19  | Select rows / select all | table checkboxes                    | table handle                                           |
+| 20  | Open full issue          | peek footer                         | navigation (`/issues/:id`)                             |
+| 21  | Close peek               | shell chrome                        | shell stack close                                      |
 
 Rows 8–12 are the recipe's reason to exist: five editable fields of three
 different control kinds, each persisting itself, two of them able to be in
@@ -219,17 +219,19 @@ import {
 	provide,
 	reactive,
 	ref,
+	watch,
 	type ComputedRef,
 	type InjectionKey,
 	type Ref,
 } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 import {
-	useBbTableContext,
+	useBbTable,
 	useConfirm,
 	useToast,
 	type BadgeVariantType,
 	type BbSelectPopoverItemsContext,
-	type BbTableContext,
+	type BbTableHandle,
 	type BbTableItemsContext,
 } from 'bitboss-ui';
 import {
@@ -267,7 +269,7 @@ export type IssuePatch = Partial<
 export type EditableKey = keyof IssuePatch;
 
 export interface BacklogFilters {
-	search: string;
+	search: string | null;
 	status: IssueStatus[];
 	priority: IssuePriority[];
 	/** The whole member, not an id — the pill labels itself with zero fetches. */
@@ -336,9 +338,9 @@ export const searchMembers = async ({
 };
 
 export interface BacklogWorkspaceContext {
-	// -- Coopted contexts ------------------------------------------------------
+	// -- Coopted contexts and handles ------------------------------------------
 	shell: PageShellContext<PeekItem>;
-	table: BbTableContext;
+	table: BbTableHandle;
 	// -- Page-owned state ------------------------------------------------------
 	filters: BacklogFilters;
 	hasActiveFilters: ComputedRef<boolean>;
@@ -387,11 +389,25 @@ const key: InjectionKey<BacklogWorkspaceContext> = Symbol('backlog-workspace');
 
 export function provideBacklogWorkspace(): BacklogWorkspaceContext {
 	const { toast } = useToast();
+	// A write that fails tells the user instead of escaping as an
+	// `Uncaught (in promise)`: the action resolves, the page stays as it was.
+	const failSoft =
+		<A extends unknown[]>(action: (...args: A) => Promise<unknown>) =>
+		async (...args: A) => {
+			try {
+				await action(...args);
+			} catch {
+				toast({
+					title: 'That did not go through. Try again.',
+					variant: 'destructive',
+				});
+			}
+		};
 	const { confirm } = useConfirm();
 
-	// -- Coopt the specific contexts: once, here, for the whole page. ----------
+	// -- Coopt the shell and the table handle: once, for the whole page. -------
 	const shell = usePageShellContext<PeekItem>();
-	const table = useBbTableContext('backlog-table', { perPage: 25 });
+	const table = useBbTable('backlog-table', { perPage: 25 });
 
 	// -- Page state -------------------------------------------------------------
 	const filters = reactive<BacklogFilters>({
@@ -402,12 +418,21 @@ export function provideBacklogWorkspace(): BacklogWorkspaceContext {
 	});
 	const hasActiveFilters = computed(
 		() =>
-			filters.search !== '' ||
+			!!filters.search ||
 			filters.status.length > 0 ||
 			filters.priority.length > 0 ||
 			filters.assignee !== null
 	);
-	const tab = ref<SprintTab>('current');
+	// The tab lives in `?tab=`: seeded from it, mirrored back with `replace`
+	// (a filter pick is not a history entry), the other query keys kept.
+	const route = useRoute();
+	const router = useRouter();
+	const tab = ref<SprintTab>(
+		(route.query.tab as SprintTab | undefined) ?? 'current'
+	);
+	watch(tab, (next) => {
+		void router.replace({ query: { ...route.query, tab: next } });
+	});
 	const tabCounts = ref<Record<SprintTab, number>>({
 		backlog: 0,
 		current: 0,
@@ -517,7 +542,7 @@ export function provideBacklogWorkspace(): BacklogWorkspaceContext {
 
 	// -- Data ---------------------------------------------------------------------
 	// The one place the list is fetched. Writes the paging totals into the
-	// table context, keeps the tab counts live, and — the autosave subtlety —
+	// table handle, keeps the tab counts live, and — the autosave subtlety —
 	// retires the overlay.
 	// The filters as the api takes them. The assignee pill holds the WHOLE
 	// member; the wire takes its id, and `'none'` is "unassigned" (`id: null`),
@@ -584,25 +609,25 @@ export function provideBacklogWorkspace(): BacklogWorkspaceContext {
 		refreshKey.value++;
 	};
 
-	const duplicateIssue = async (issue: Issue) => {
+	const duplicateIssue = failSoft(async (issue: Issue) => {
 		const copy = await api.issues.duplicate(issue.id);
 		refresh();
 		toast({
 			title: `Duplicated as ${copy.ref}.`,
 			variant: 'success',
 		});
-	};
+	});
 
-	const moveToNextSprint = async (issue: Issue) => {
+	const moveToNextSprint = failSoft(async (issue: Issue) => {
 		await api.issues.moveToNextSprint([issue.id]);
 		refresh();
 		toast({
 			title: `${issue.ref} moved to Sprint 25.`,
 			variant: 'success',
 		});
-	};
+	});
 
-	const deleteIssue = async (issue: Issue) => {
+	const deleteIssue = failSoft(async (issue: Issue) => {
 		const ok = await confirm({
 			variant: 'destructive',
 			title: 'Delete issue',
@@ -617,9 +642,9 @@ export function provideBacklogWorkspace(): BacklogWorkspaceContext {
 			title: `${issue.ref} deleted.`,
 			variant: 'success',
 		});
-	};
+	});
 
-	// Bulk actions read and clear the coopted table context themselves. The
+	// Bulk actions read and clear the coopted table handle themselves. The
 	// header checkbox is BbTable's "all across pages" select-all: it enumerates
 	// no ids, so the payload becomes `{ all, unselected, filters }` — what is
 	// on screen minus the exceptions — and the count is the total minus those
@@ -643,7 +668,7 @@ export function provideBacklogWorkspace(): BacklogWorkspaceContext {
 		table.all.value = false;
 	};
 
-	const bulkStatus = async (status: IssueStatus) => {
+	const bulkStatus = failSoft(async (status: IssueStatus) => {
 		const count = selectedCount.value;
 		await api.issues.patchMany(bulkSelection(), { status });
 		clearSelection();
@@ -653,9 +678,9 @@ export function provideBacklogWorkspace(): BacklogWorkspaceContext {
 			title: `${count} issues moved to ${label}.`,
 			variant: 'success',
 		});
-	};
+	});
 
-	const bulkAssign = async (assignee: Member) => {
+	const bulkAssign = failSoft(async (assignee: Member) => {
 		const count = selectedCount.value;
 		await api.issues.patchMany(bulkSelection(), { assignee });
 		clearSelection();
@@ -664,9 +689,9 @@ export function provideBacklogWorkspace(): BacklogWorkspaceContext {
 			title: `${count} issues assigned to ${assignee.name}.`,
 			variant: 'success',
 		});
-	};
+	});
 
-	const bulkMoveToNextSprint = async () => {
+	const bulkMoveToNextSprint = failSoft(async () => {
 		const count = selectedCount.value;
 		await api.issues.moveToNextSprint(bulkSelection());
 		clearSelection();
@@ -675,7 +700,7 @@ export function provideBacklogWorkspace(): BacklogWorkspaceContext {
 			title: `${count} issues moved to Sprint 25.`,
 			variant: 'success',
 		});
-	};
+	});
 
 	const ctx: BacklogWorkspaceContext = {
 		shell,
@@ -760,28 +785,30 @@ export function useBacklogWorkspace(): BacklogWorkspaceContext {
 		<div class="flex flex-col gap-3 p-4">
 			<FilterRail />
 
-			<!-- Tabs as URL filters: href updates the query, the key feeds the
-			     fetch. Counts come back from the server on every fetch. -->
-			<BbTabs
+			<!-- The sprint filter: one value over one table, so a radio group
+			     with the tabs look (a tablist would promise panels). The context
+			     keeps it in `?tab=`; the counts come from the server on every
+			     fetch. -->
+			<BbRadioGroup
 				v-model="ctx.tab.value"
 				compact
+				hide-legend
 				:items="[
 					{
 						value: 'backlog',
 						label: `Backlog · ${ctx.tabCounts.value.backlog}`,
-						href: '?tab=backlog',
 					},
 					{
 						value: 'current',
 						label: `Current sprint · ${ctx.tabCounts.value.current}`,
-						href: '?tab=current',
 					},
 					{
 						value: 'done',
 						label: `Done · ${ctx.tabCounts.value.done}`,
-						href: '?tab=done',
 					},
 				]"
+				legend="Sprint"
+				variant="pill"
 			/>
 
 			<BbTable
@@ -886,7 +913,7 @@ export function useBacklogWorkspace(): BacklogWorkspaceContext {
 				</template>
 			</BbTable>
 
-			<!-- Joins the table context by id: no page/totalPages wiring at all. -->
+			<!-- Joins the table by id: no page/totalPages wiring at all. -->
 			<BbPagination label="Backlog pagination" table-id="backlog-table" />
 		</div>
 
@@ -913,11 +940,11 @@ import { computed } from 'vue';
 import {
 	BbBaseButton,
 	BbBreadcrumbs,
-	BbIcon,
 	BbButton,
+	BbIcon,
 	BbPagination,
+	BbRadioGroup,
 	BbTable,
-	BbTabs,
 	BbTextInput,
 } from 'bitboss-ui';
 import PageShell from '@/components/layout/PageShell.vue';