From b1a795fbbd75f160f64e0251dfcfa78d9507f477 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 30 Aug 2026 23:59:34 +0000
Subject: [PATCH 01/40] Show the quick insert tip on every fast default insert

The tip was capped at once ever, so the one time it fired was often a
slow, deliberate insert. Time it from the menu opening instead: an
unchanged insert within 1.5 seconds is one a right-click would have
done, and is worth saying every time it happens.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018tgfuCHjVFvejjMe7WmEFL
---
 .../insert/components/insert-menu.tsx         | 28 +++++++++++++++----
 .../features/insert/open-insert-menu.tsx      |  4 +++
 .../features/insert/quick-insert-tip.ts       | 13 +++++----
 src/frontend/lib/ui-state.ts                  |  4 +--
 4 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/src/frontend/features/insert/components/insert-menu.tsx b/src/frontend/features/insert/components/insert-menu.tsx
index 843e6f1f..9a7a7e58 100644
--- a/src/frontend/features/insert/components/insert-menu.tsx
+++ b/src/frontend/features/insert/components/insert-menu.tsx
@@ -35,11 +35,13 @@ interface InsertMenuContentProps {
     /** The modal this renders in, so the header can track the selection. */
     modalId: string;
     defaultConfiguration?: ParameterValues;
+    /** When the menu opened, for the quick insert tip. */
+    openedAt: number;
     onInsert: () => void;
 }
 
 export function InsertMenuContent(props: InsertMenuContentProps): ReactNode {
-    const { insertable, modalId, onInsert } = props;
+    const { insertable, modalId, openedAt, onInsert } = props;
     const favorites = useFavoritesQuery().data?.favorites;
     const isSignedIn = useIsSignedIn();
 
@@ -155,6 +157,7 @@ export function InsertMenuContent(props: InsertMenuContentProps): ReactNode {
                         )
                     }
                     isFavorite={favorite !== undefined}
+                    openedAt={openedAt}
                     onInsert={onInsert}
                 />
             </AppModalFooter>
@@ -171,6 +174,8 @@ interface InsertButtonsProps {
     insertable: InsertableOut;
     configuration?: ParameterValues;
     isFavorite: boolean;
+    /** When the menu opened, for the quick insert tip. */
+    openedAt: number;
     onInsert: () => void;
 }
 
@@ -178,8 +183,14 @@ interface InsertButtonsProps {
  * The derive/insert button plus the insert and fasten checkbox.
  */
 function InsertButtons(props: InsertButtonsProps): ReactNode {
-    const { insertable, configuration, isUnchanged, isFavorite, onInsert } =
-        props;
+    const {
+        insertable,
+        configuration,
+        isUnchanged,
+        isFavorite,
+        openedAt,
+        onInsert
+    } = props;
 
     const search = useSearch({ from: "/app" });
     // Inserting targets the current Onshape document; there's nothing to insert
@@ -202,10 +213,17 @@ function InsertButtons(props: InsertButtonsProps): ReactNode {
     const handleClick = useCallback(() => {
         insertMutation.mutate(canFasten && uiState.fasten);
         if (isUnchanged) {
-            showQuickInsertTip();
+            showQuickInsertTip(openedAt);
         }
         onInsert();
-    }, [insertMutation, onInsert, canFasten, uiState.fasten, isUnchanged]);
+    }, [
+        insertMutation,
+        onInsert,
+        canFasten,
+        uiState.fasten,
+        isUnchanged,
+        openedAt
+    ]);
 
     if (!isConnected) {
         return null;
diff --git a/src/frontend/features/insert/open-insert-menu.tsx b/src/frontend/features/insert/open-insert-menu.tsx
index dde5b50e..a62336fe 100644
--- a/src/frontend/features/insert/open-insert-menu.tsx
+++ b/src/frontend/features/insert/open-insert-menu.tsx
@@ -20,6 +20,9 @@ interface OpenInsertMenuProps {
 export function openInsertMenu(props: OpenInsertMenuProps) {
     const { insertable, defaultConfiguration } = props;
     let didInsert = false;
+    // How quickly the insert follows is what says whether the menu was worth
+    // opening, so the quick insert tip is timed from here.
+    const openedAt = Date.now();
     // Minted here so the content can address the modal it lives in, which is
     // what lets the header follow the selected configuration.
     const id = crypto.randomUUID();
@@ -37,6 +40,7 @@ export function openInsertMenu(props: OpenInsertMenuProps) {
                 insertable={insertable}
                 modalId={id}
                 defaultConfiguration={defaultConfiguration}
+                openedAt={openedAt}
                 onInsert={() => {
                     didInsert = true;
                     modals.close(id);
diff --git a/src/frontend/features/insert/quick-insert-tip.ts b/src/frontend/features/insert/quick-insert-tip.ts
index 07da8a58..10b6588f 100644
--- a/src/frontend/features/insert/quick-insert-tip.ts
+++ b/src/frontend/features/insert/quick-insert-tip.ts
@@ -1,15 +1,18 @@
 import { showInfoToast } from "../../lib/notifications";
-import { getUiState, updateUiState } from "../../lib/ui-state";
+
+/** An insert this soon after opening didn't need anything from the menu. */
+const QUICK_INSERT_WINDOW_MS = 1500;
 
 /**
  * After an insert that changed nothing in the menu, points out that a
- * right-click would have done it. Once only: the menu is a fine way to work.
+ * right-click would have done it. Only when the menu was dismissed as fast as
+ * a right-click: a slower one was spent looking at the part, which the tip
+ * has no better answer for.
  */
-export function showQuickInsertTip(): void {
-    if (getUiState().hasSeenQuickInsertTip) {
+export function showQuickInsertTip(openedAt: number): void {
+    if (Date.now() - openedAt >= QUICK_INSERT_WINDOW_MS) {
         return;
     }
-    updateUiState({ hasSeenQuickInsertTip: true });
     showInfoToast(
         "Tip: right-click a part to insert it without opening the insert menu.",
         { id: "quick-insert-tip", autoClose: 8000 }
diff --git a/src/frontend/lib/ui-state.ts b/src/frontend/lib/ui-state.ts
index 147de9e2..9e67fca1 100644
--- a/src/frontend/lib/ui-state.ts
+++ b/src/frontend/lib/ui-state.ts
@@ -18,9 +18,7 @@ const UiStateSchema = z.object({
     openGroupId: z.string().optional(),
     fasten: z.boolean().default(true),
     /** The access level to view the app as; absent means the granted default. */
-    accessLevel: AccessLevelType.optional(),
-    /** Whether the quick-insert tip has been shown; it is only worth saying once. */
-    hasSeenQuickInsertTip: z.boolean().default(false)
+    accessLevel: AccessLevelType.optional()
 });
 
 type UiState = z.infer<typeof UiStateSchema>;

From 38d964f44fb8a4fc4264638650f62f5e5182faf2 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 31 Aug 2026 00:39:13 +0000
Subject: [PATCH 02/40] Match an inch mark as part of its number, and
 un-deprecate the icons

`1"` tokenized to a bare `1`, which prefix-matches every 1.5", 10-32 and
16T in the library, so the sizes a user asked for were buried. The mark
now stays on the number and ends its token, leaving `1"` an exact size
while a bare `1` still prefixes them all.

Phosphor deprecated the unsuffixed icon names in favor of `*Icon`. The
local heart wrappers become FavoriteIcon/UnfavoriteIcon, which is what
they meant anyway and leaves HeartIcon to Phosphor.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018tgfuCHjVFvejjMe7WmEFL
---
 src/backend/features/search/search-index.ts   | 11 ++-
 src/frontend/components/alerts.tsx            |  8 ++-
 src/frontend/components/app-menu.tsx          |  6 +-
 src/frontend/components/app-navbar.tsx        |  6 +-
 src/frontend/components/app-title.tsx         |  8 +--
 src/frontend/components/app-zero-state.tsx    |  6 +-
 src/frontend/components/change-order.tsx      | 16 ++---
 src/frontend/components/open-url-button.tsx   |  4 +-
 src/frontend/components/root-error.tsx        |  4 +-
 .../build-status/components/build-status.tsx  | 32 ++++-----
 .../favorites/components/favorite-button.tsx  | 26 +++----
 .../favorites/components/favorite-card.tsx    |  4 +-
 .../favorites/components/favorite-menu.tsx    |  8 +--
 .../favorites/components/favorites-list.tsx   |  4 +-
 .../features/favorites/open-favorite-menu.tsx |  4 +-
 .../insert/components/insert-menu.tsx         |  6 +-
 .../library/components/add-group-menu.tsx     |  8 +--
 .../library/components/card-components.tsx    | 24 +++----
 .../library/components/group-card.tsx         | 15 ++--
 .../components/reload-groups-button.tsx       |  4 +-
 .../search/components/search-errors.tsx       | 14 ++--
 src/frontend/features/search/search.test.ts   | 68 ++++++++++++++++++-
 .../settings/components/vendor-filters.tsx    |  8 +--
 .../thumbnails/components/thumbnail.tsx       |  4 +-
 src/frontend/lib/notifications.tsx            |  8 +--
 src/frontend/lib/url.tsx                      |  4 +-
 .../library/$libraryId/groups/$groupId.tsx    | 12 ++--
 .../routes/app/library/$libraryId/index.tsx   | 10 +--
 28 files changed, 212 insertions(+), 120 deletions(-)

diff --git a/src/backend/features/search/search-index.ts b/src/backend/features/search/search-index.ts
index 3d7593db..2fa6572b 100644
--- a/src/backend/features/search/search-index.ts
+++ b/src/backend/features/search/search-index.ts
@@ -98,9 +98,14 @@ export function normalizeForMatch(text: string): string {
 export function tokenize(text: string): string[] {
     // Canonicalize before splitting: fractions span `/` and `-`. Casing stays,
     // since processTerm splits on camelCase.
-    return canonicalizeNumbers(text)
-        .split(/[-()"'#&\s^/]+/)
-        .filter(Boolean);
+    return (
+        canonicalizeNumbers(text)
+            // An inch mark stays on its number and ends the token, so `1"` is a
+            // size of its own rather than a prefix of `1.5`, `10`, and `16t`.
+            .replace(/(\d")/g, `$1${deliminator}`)
+            .split(/(?<!\d)"|[-()'#&\s^/]+/)
+            .filter(Boolean)
+    );
 }
 
 export interface SearchDocument {
diff --git a/src/frontend/components/alerts.tsx b/src/frontend/components/alerts.tsx
index 6f46118d..db40e178 100644
--- a/src/frontend/components/alerts.tsx
+++ b/src/frontend/components/alerts.tsx
@@ -1,6 +1,6 @@
 import { modals } from "@mantine/modals";
 import { Box, Text } from "@mantine/core";
-import { Warning } from "@phosphor-icons/react";
+import { WarningIcon } from "@phosphor-icons/react";
 import { AppTitle } from "./app-title";
 import { IconSize } from "../lib/style-constants";
 
@@ -14,7 +14,11 @@ function openWarningAlert(props: OpenWarningAlertProps): void {
         title: (
             <AppTitle
                 icon={
-                    <Box component={Warning} fz={IconSize.MEDIUM} c="yellow" />
+                    <Box
+                        component={WarningIcon}
+                        fz={IconSize.MEDIUM}
+                        c="yellow"
+                    />
                 }
                 title={props.title}
             />
diff --git a/src/frontend/components/app-menu.tsx b/src/frontend/components/app-menu.tsx
index 1c7b69d5..52934994 100644
--- a/src/frontend/components/app-menu.tsx
+++ b/src/frontend/components/app-menu.tsx
@@ -1,6 +1,6 @@
 import { PropsWithChildren, ReactNode } from "react";
 import { FloatingPosition, Menu, ActionIcon } from "@mantine/core";
-import { DotsThree } from "@phosphor-icons/react";
+import { DotsThreeIcon } from "@phosphor-icons/react";
 import { IconSize } from "../lib/style-constants";
 
 interface AppContextMenuProps {
@@ -82,7 +82,9 @@ export function MenuButton(props: MenuButtonProps): ReactNode {
                 title="View options"
                 onClick={(e) => e.stopPropagation()}
             >
-                <DotsThree size={large ? IconSize.CONTROL : IconSize.MEDIUM} />
+                <DotsThreeIcon
+                    size={large ? IconSize.CONTROL : IconSize.MEDIUM}
+                />
             </ActionIcon>
         </AppContextMenu>
     );
diff --git a/src/frontend/components/app-navbar.tsx b/src/frontend/components/app-navbar.tsx
index 56dc8013..70509936 100644
--- a/src/frontend/components/app-navbar.tsx
+++ b/src/frontend/components/app-navbar.tsx
@@ -10,7 +10,7 @@ import {
     TextInput,
     Tooltip
 } from "@mantine/core";
-import { Gear, MagnifyingGlass } from "@phosphor-icons/react";
+import { GearIcon, MagnifyingGlassIcon } from "@phosphor-icons/react";
 import {
     BORDER,
     CHROME_BACKGROUND,
@@ -213,7 +213,7 @@ export function SettingsButton() {
             size="lg"
             onClick={() => openSettingsMenu()}
         >
-            <Gear size={IconSize.MEDIUM} />
+            <GearIcon size={IconSize.MEDIUM} />
         </ActionIcon>
     );
 }
@@ -250,7 +250,7 @@ export function SearchBar() {
             // The panel opens to a library the caller is here to search.
             autoFocus
             flex={1}
-            leftSection={<MagnifyingGlass size={IconSize.SMALL} />}
+            leftSection={<MagnifyingGlassIcon size={IconSize.SMALL} />}
             placeholder={`Search ${getLibraryName(libraryId)}...`}
             ref={ref}
             value={uiState.searchQuery ?? ""}
diff --git a/src/frontend/components/app-title.tsx b/src/frontend/components/app-title.tsx
index 337c7a70..aa5741ce 100644
--- a/src/frontend/components/app-title.tsx
+++ b/src/frontend/components/app-title.tsx
@@ -8,7 +8,7 @@ import {
     Text,
     Tooltip
 } from "@mantine/core";
-import { ArrowSquareOut, Check, Copy } from "@phosphor-icons/react";
+import { ArrowSquareOutIcon, CheckIcon, CopyIcon } from "@phosphor-icons/react";
 import type { ReactNode } from "react";
 import type { SearchRecord } from "@backend/features/configurations/models";
 import { FontWeight, IconSize, TITLE_ICON_NUDGE } from "../lib/style-constants";
@@ -120,9 +120,9 @@ function PartNumber({
                                 onClick={copy}
                             >
                                 {copied ? (
-                                    <Check size={IconSize.TINY} />
+                                    <CheckIcon size={IconSize.TINY} />
                                 ) : (
-                                    <Copy size={IconSize.TINY} />
+                                    <CopyIcon size={IconSize.TINY} />
                                 )}
                             </ActionIcon>
                         </Tooltip>
@@ -149,7 +149,7 @@ function PartNumber({
             <Text component="span" inherit truncate miw={0}>
                 {partNumber}
             </Text>
-            <ArrowSquareOut size={IconSize.TINY} />
+            <ArrowSquareOutIcon size={IconSize.TINY} />
         </Anchor>
     );
 }
diff --git a/src/frontend/components/app-zero-state.tsx b/src/frontend/components/app-zero-state.tsx
index 10a7c441..5e1a2552 100644
--- a/src/frontend/components/app-zero-state.tsx
+++ b/src/frontend/components/app-zero-state.tsx
@@ -1,9 +1,11 @@
 import { Box, Center, EmptyState, Loader } from "@mantine/core";
-import { X } from "@phosphor-icons/react";
+import { XIcon } from "@phosphor-icons/react";
 import { IconSize } from "../lib/style-constants";
 import { type JSX, ReactNode } from "react";
 
-const DEFAULT_ERROR_ICON = <Box component={X} size={IconSize.PAGE} c="red" />;
+const DEFAULT_ERROR_ICON = (
+    <Box component={XIcon} size={IconSize.PAGE} c="red" />
+);
 
 interface ZeroStateProps {
     icon?: ReactNode;
diff --git a/src/frontend/components/change-order.tsx b/src/frontend/components/change-order.tsx
index 4baea732..ecda85cc 100644
--- a/src/frontend/components/change-order.tsx
+++ b/src/frontend/components/change-order.tsx
@@ -1,9 +1,9 @@
 import { Menu } from "@mantine/core";
 import {
-    CaretDoubleDown,
-    CaretDoubleUp,
-    CaretDown,
-    CaretUp
+    CaretDoubleDownIcon,
+    CaretDoubleUpIcon,
+    CaretDownIcon,
+    CaretUpIcon
 } from "@phosphor-icons/react";
 import { IconSize } from "../lib/style-constants";
 import { type ReactNode } from "react";
@@ -32,7 +32,7 @@ export function ChangeOrderItems(props: ChangeOrderMenuProps): ReactNode {
         <>
             {operations.includes(MoveOperation.MOVE_UP) && (
                 <Menu.Item
-                    leftSection={<CaretUp size={IconSize.SMALL} />}
+                    leftSection={<CaretUpIcon size={IconSize.SMALL} />}
                     onClick={() => {
                         onOrderChange(
                             applyMoveOperation(id, order, MoveOperation.MOVE_UP)
@@ -44,7 +44,7 @@ export function ChangeOrderItems(props: ChangeOrderMenuProps): ReactNode {
             )}
             {operations.includes(MoveOperation.MOVE_DOWN) && (
                 <Menu.Item
-                    leftSection={<CaretDown size={IconSize.SMALL} />}
+                    leftSection={<CaretDownIcon size={IconSize.SMALL} />}
                     onClick={() => {
                         onOrderChange(
                             applyMoveOperation(
@@ -60,7 +60,7 @@ export function ChangeOrderItems(props: ChangeOrderMenuProps): ReactNode {
             )}
             {operations.includes(MoveOperation.MOVE_TO_TOP) && (
                 <Menu.Item
-                    leftSection={<CaretDoubleUp size={IconSize.SMALL} />}
+                    leftSection={<CaretDoubleUpIcon size={IconSize.SMALL} />}
                     onClick={() => {
                         onOrderChange(
                             applyMoveOperation(
@@ -76,7 +76,7 @@ export function ChangeOrderItems(props: ChangeOrderMenuProps): ReactNode {
             )}
             {operations.includes(MoveOperation.MOVE_TO_BOTTOM) && (
                 <Menu.Item
-                    leftSection={<CaretDoubleDown size={IconSize.SMALL} />}
+                    leftSection={<CaretDoubleDownIcon size={IconSize.SMALL} />}
                     onClick={() => {
                         onOrderChange(
                             applyMoveOperation(
diff --git a/src/frontend/components/open-url-button.tsx b/src/frontend/components/open-url-button.tsx
index bc31d142..c52613fc 100644
--- a/src/frontend/components/open-url-button.tsx
+++ b/src/frontend/components/open-url-button.tsx
@@ -1,5 +1,5 @@
 import { Button } from "@mantine/core";
-import { ArrowSquareOut } from "@phosphor-icons/react";
+import { ArrowSquareOutIcon } from "@phosphor-icons/react";
 import { IconSize } from "../lib/style-constants";
 import { openUrlInNewTab } from "../lib/url";
 
@@ -11,7 +11,7 @@ interface UrlButtonProps {
 export function OpenUrlButton(props: UrlButtonProps) {
     return (
         <Button
-            leftSection={<ArrowSquareOut size={IconSize.SMALL} />}
+            leftSection={<ArrowSquareOutIcon size={IconSize.SMALL} />}
             onClick={() => openUrlInNewTab(props.url)}
             variant="light"
         >
diff --git a/src/frontend/components/root-error.tsx b/src/frontend/components/root-error.tsx
index 1f4f48a0..61b39d5a 100644
--- a/src/frontend/components/root-error.tsx
+++ b/src/frontend/components/root-error.tsx
@@ -3,7 +3,7 @@ import { PageError } from "./app-zero-state";
 import { ReactNode } from "react";
 import { useNavigate } from "@tanstack/react-router";
 import { Button } from "@mantine/core";
-import { House } from "@phosphor-icons/react";
+import { HouseIcon } from "@phosphor-icons/react";
 import { IconSize } from "../lib/style-constants";
 import { ReloadGroupsButton } from "../features/library/components/reload-groups-button";
 import { DEFAULT_SETTINGS } from "@backend/features/settings/settings";
@@ -50,7 +50,7 @@ export function NotFoundError(): ReactNode {
     const navigate = useNavigate();
     const homeButton = (
         <Button
-            leftSection={<House size={IconSize.MEDIUM} />}
+            leftSection={<HouseIcon size={IconSize.MEDIUM} />}
             onClick={() => {
                 void navigate({
                     to: "/app/library/$libraryId",
diff --git a/src/frontend/features/build-status/components/build-status.tsx b/src/frontend/features/build-status/components/build-status.tsx
index d216342a..249359ae 100644
--- a/src/frontend/features/build-status/components/build-status.tsx
+++ b/src/frontend/features/build-status/components/build-status.tsx
@@ -12,13 +12,13 @@ import {
     Tooltip
 } from "@mantine/core";
 import {
-    Check,
-    Clock,
-    FileX,
-    Info,
-    Warning,
-    WarningOctagon,
-    X
+    CheckIcon,
+    ClockIcon,
+    FileXIcon,
+    InfoIcon,
+    WarningIcon,
+    WarningOctagonIcon,
+    XIcon
 } from "@phosphor-icons/react";
 import {
     ComponentPropsWithRef,
@@ -133,7 +133,7 @@ export function IssueIcon({
         case BuildIssueSeverity.ERROR:
             return (
                 <Box
-                    component={WarningOctagon}
+                    component={WarningOctagonIcon}
                     ref={ref}
                     size={IconSize.SMALL}
                     c="red"
@@ -143,7 +143,7 @@ export function IssueIcon({
         case BuildIssueSeverity.WARNING:
             return (
                 <Box
-                    component={Warning}
+                    component={WarningIcon}
                     ref={ref}
                     size={IconSize.SMALL}
                     c="yellow"
@@ -153,7 +153,7 @@ export function IssueIcon({
         case BuildIssueSeverity.INFO:
             return (
                 <Box
-                    component={Info}
+                    component={InfoIcon}
                     ref={ref}
                     size={IconSize.SMALL}
                     c="blue"
@@ -163,7 +163,7 @@ export function IssueIcon({
         case null:
             return (
                 <Box
-                    component={Check}
+                    component={CheckIcon}
                     ref={ref}
                     size={IconSize.SMALL}
                     c="green"
@@ -346,7 +346,7 @@ function LastModified({
                 c="dimmed"
                 style={{ whiteSpace: "nowrap", flexShrink: 0 }}
             >
-                <Clock size={IconSize.TINY} />
+                <ClockIcon size={IconSize.TINY} />
                 <Text size="xs">
                     {!lastLoadedAt
                         ? "Unknown"
@@ -365,7 +365,7 @@ function SeverityBadges({ issues }: { issues: BuildIssue[] }): ReactNode {
                 size="sm"
                 variant="light"
                 color="green"
-                leftSection={<Check size={IconSize.TINY} />}
+                leftSection={<CheckIcon size={IconSize.TINY} />}
             >
                 All checks pass
             </Badge>
@@ -900,7 +900,7 @@ function ExcludedFromPropertiesIcon({
             events={{ hover: true, focus: true, touch: true }}
         >
             <Box
-                component={FileX}
+                component={FileXIcon}
                 size={IconSize.SMALL}
                 c="dimmed"
                 style={{ flexShrink: 0 }}
@@ -978,9 +978,9 @@ function ParsedRow({
 function StateValue({ value }: { value: StateRowValue }): ReactNode {
     if (value.kind === "bool") {
         return value.value ? (
-            <Box component={Check} size={IconSize.SMALL} c="green" />
+            <Box component={CheckIcon} size={IconSize.SMALL} c="green" />
         ) : (
-            <Box component={X} size={IconSize.SMALL} c="red" />
+            <Box component={XIcon} size={IconSize.SMALL} c="red" />
         );
     }
 
diff --git a/src/frontend/features/favorites/components/favorite-button.tsx b/src/frontend/features/favorites/components/favorite-button.tsx
index e64d9e2c..b1904292 100644
--- a/src/frontend/features/favorites/components/favorite-button.tsx
+++ b/src/frontend/features/favorites/components/favorite-button.tsx
@@ -1,5 +1,5 @@
 import { ActionIcon, Box, Menu } from "@mantine/core";
-import { Heart, HeartBreak } from "@phosphor-icons/react";
+import { HeartIcon, HeartBreakIcon } from "@phosphor-icons/react";
 import { IconSize } from "../../../lib/style-constants";
 import { useMutation } from "@tanstack/react-query";
 import { ReactNode, useState } from "react";
@@ -120,12 +120,12 @@ export function FavoriteButton(props: FavoriteButtonProps): ReactNode {
     let favoriteIcon;
     if (isHovered) {
         favoriteIcon = isFavorite ? (
-            <HeartBrokenIcon size={iconSize} />
+            <UnfavoriteIcon size={iconSize} />
         ) : (
-            <HeartIcon size={iconSize} />
+            <FavoriteIcon size={iconSize} />
         );
     } else {
-        favoriteIcon = <HeartIcon full={isFavorite} size={iconSize} />;
+        favoriteIcon = <FavoriteIcon full={isFavorite} size={iconSize} />;
     }
 
     const operation = isFavorite ? Operation.REMOVE : Operation.ADD;
@@ -167,9 +167,9 @@ export function FavoriteInsertableItem(props: FavoriteInsertableItemProps) {
         <Menu.Item
             leftSection={
                 operation === Operation.ADD ? (
-                    <HeartIcon />
+                    <FavoriteIcon />
                 ) : (
-                    <HeartBrokenIcon />
+                    <UnfavoriteIcon />
                 )
             }
             color={operation === Operation.ADD ? undefined : "red"}
@@ -183,7 +183,7 @@ export function FavoriteInsertableItem(props: FavoriteInsertableItemProps) {
     );
 }
 
-interface HeartIconProps {
+interface FavoriteIconProps {
     /**
      * @default true
      */
@@ -194,25 +194,25 @@ interface HeartIconProps {
     size?: IconSize;
 }
 
-export function HeartIcon(props: HeartIconProps): ReactNode {
+export function FavoriteIcon(props: FavoriteIconProps): ReactNode {
     const { full = true, size = IconSize.SMALL } = props;
     // fz, not size: Box builds its own `style`, dropping the font-size that
     // Phosphor's `size` sets, which shrank the icon to 1em.
     return full ? (
-        <Box component={Heart} fz={size} c="red" weight="fill" />
+        <Box component={HeartIcon} fz={size} c="red" weight="fill" />
     ) : (
-        <Heart size={size} />
+        <HeartIcon size={size} />
     );
 }
 
-interface HeartBrokenIconProps {
+interface UnfavoriteIconProps {
     /**
      * @default IconSize.SMALL
      */
     size?: IconSize;
 }
 
-export function HeartBrokenIcon(props: HeartBrokenIconProps): ReactNode {
+export function UnfavoriteIcon(props: UnfavoriteIconProps): ReactNode {
     const { size = IconSize.SMALL } = props;
-    return <Box component={HeartBreak} fz={size} c="red" />;
+    return <Box component={HeartBreakIcon} fz={size} c="red" />;
 }
diff --git a/src/frontend/features/favorites/components/favorite-card.tsx b/src/frontend/features/favorites/components/favorite-card.tsx
index 3093337e..e800d0c7 100644
--- a/src/frontend/features/favorites/components/favorite-card.tsx
+++ b/src/frontend/features/favorites/components/favorite-card.tsx
@@ -6,7 +6,7 @@ import { useMutation } from "@tanstack/react-query";
 import { apiPost } from "../../../lib/api-client";
 import { queryClient } from "../../../lib/query-client";
 import { Menu } from "@mantine/core";
-import { Pencil } from "@phosphor-icons/react";
+import { PencilIcon } from "@phosphor-icons/react";
 import { IconSize } from "../../../lib/style-constants";
 import { openInsertMenu } from "../../insert/open-insert-menu";
 import { openFavoriteMenu } from "../open-favorite-menu";
@@ -127,7 +127,7 @@ function FavoriteMenuItems(props: FavoriteMenuItemsProps): ReactNode {
                 </>
             )}
             <Menu.Item
-                leftSection={<Pencil size={IconSize.SMALL} />}
+                leftSection={<PencilIcon size={IconSize.SMALL} />}
                 onClick={() => {
                     if (!insertable.isConfigurable) {
                         openCannotEditDefaultConfigurationAlert();
diff --git a/src/frontend/features/favorites/components/favorite-menu.tsx b/src/frontend/features/favorites/components/favorite-menu.tsx
index e8bf54d3..da68476e 100644
--- a/src/frontend/features/favorites/components/favorite-menu.tsx
+++ b/src/frontend/features/favorites/components/favorite-menu.tsx
@@ -2,7 +2,7 @@ import { modals } from "@mantine/modals";
 import { AppModalBody, AppModalFooter } from "../../../components/app-modal";
 import { MenuTitle } from "../../../components/app-title";
 import { Button } from "@mantine/core";
-import { FloppyDisk } from "@phosphor-icons/react";
+import { FloppyDiskIcon } from "@phosphor-icons/react";
 import { IconSize } from "../../../lib/style-constants";
 import { ReactNode, useEffect, useState } from "react";
 import { useMutation } from "@tanstack/react-query";
@@ -11,7 +11,7 @@ import { showErrorToast, showSuccessToast } from "../../../lib/notifications";
 import { PreviewImageCard } from "../../thumbnails/components/thumbnail";
 import { ConfigurationWrapper } from "../../insert/components/configurations";
 import type { FavoritesData } from "@backend/features/favorites/contract";
-import { HeartIcon } from "./favorite-button";
+import { FavoriteIcon } from "./favorite-button";
 import { queryClient } from "../../../lib/query-client";
 import {
     ParameterValues,
@@ -70,7 +70,7 @@ export function FavoriteMenuContent(
                 <MenuTitle
                     name={insertableName}
                     record={record}
-                    icon={<HeartIcon size={IconSize.MEDIUM} />}
+                    icon={<FavoriteIcon size={IconSize.MEDIUM} />}
                 />
             )
         });
@@ -150,7 +150,7 @@ export function FavoriteMenuContent(
             <AppModalFooter>
                 <Button
                     ml="auto"
-                    leftSection={<FloppyDisk size={IconSize.SMALL} />}
+                    leftSection={<FloppyDiskIcon size={IconSize.SMALL} />}
                     // Saving before the wrapper reports would store {}, wiping
                     // the favorite's configuration.
                     disabled={!canonicalConfiguration}
diff --git a/src/frontend/features/favorites/components/favorites-list.tsx b/src/frontend/features/favorites/components/favorites-list.tsx
index 94d50b42..1d5258bb 100644
--- a/src/frontend/features/favorites/components/favorites-list.tsx
+++ b/src/frontend/features/favorites/components/favorites-list.tsx
@@ -1,6 +1,6 @@
 import { Box } from "@mantine/core";
 import { useAccessData } from "../../auth/access-level";
-import { HeartBreak } from "@phosphor-icons/react";
+import { HeartBreakIcon } from "@phosphor-icons/react";
 import { IconSize } from "../../../lib/style-constants";
 import { ReactNode } from "react";
 import { filterInsertables } from "../../search/filter";
@@ -43,7 +43,7 @@ export function FavoritesList(): ReactNode {
                 title="Failed to load favorites."
                 icon={
                     <Box
-                        component={HeartBreak}
+                        component={HeartBreakIcon}
                         size={IconSize.SECTION}
                         c="red"
                     />
diff --git a/src/frontend/features/favorites/open-favorite-menu.tsx b/src/frontend/features/favorites/open-favorite-menu.tsx
index 13e998e1..a0e86889 100644
--- a/src/frontend/features/favorites/open-favorite-menu.tsx
+++ b/src/frontend/features/favorites/open-favorite-menu.tsx
@@ -2,7 +2,7 @@ import { openAppModal } from "../../components/open-app-modal";
 import { type ParameterValues } from "@backend/features/configurations/models";
 import { FavoriteMenuContent } from "./components/favorite-menu";
 import { MenuTitle } from "../../components/app-title";
-import { HeartIcon } from "./components/favorite-button";
+import { FavoriteIcon } from "./components/favorite-button";
 import { IconSize } from "../../lib/style-constants";
 
 interface OpenFavoriteMenuProps {
@@ -20,7 +20,7 @@ export function openFavoriteMenu(props: OpenFavoriteMenuProps) {
         title: (
             <MenuTitle
                 name={insertableName}
-                icon={<HeartIcon size={IconSize.MEDIUM} />}
+                icon={<FavoriteIcon size={IconSize.MEDIUM} />}
             />
         ),
         size: 500,
diff --git a/src/frontend/features/insert/components/insert-menu.tsx b/src/frontend/features/insert/components/insert-menu.tsx
index 9a7a7e58..ff5cb009 100644
--- a/src/frontend/features/insert/components/insert-menu.tsx
+++ b/src/frontend/features/insert/components/insert-menu.tsx
@@ -4,7 +4,7 @@ import { getFavoriteForInsertable } from "@backend/features/favorites/contract";
 import { InsertableOut } from "@backend/features/library/contract";
 import { ElementType } from "@backend/lib/onshape/element-type";
 import { Button, Checkbox, Group } from "@mantine/core";
-import { Info, Plus } from "@phosphor-icons/react";
+import { InfoIcon, PlusIcon } from "@phosphor-icons/react";
 import { IconSize } from "../../../lib/style-constants";
 import { AppModalBody, AppModalFooter } from "../../../components/app-modal";
 import { MenuTitle } from "../../../components/app-title";
@@ -239,7 +239,7 @@ function InsertButtons(props: InsertButtonsProps): ReactNode {
                 />
             )}
             <Button
-                leftSection={<Plus size={IconSize.SMALL} />}
+                leftSection={<PlusIcon size={IconSize.SMALL} />}
                 loading={isLoadingConfiguration || insertMutation.isPending}
                 onClick={handleClick}
             >
@@ -257,7 +257,7 @@ function showSignInPreviewToast() {
     notifications.show({
         id: "sign-in-preview",
         color: "blue",
-        icon: <Info size={IconSize.MEDIUM} />,
+        icon: <InfoIcon size={IconSize.MEDIUM} />,
         message: renderNotification(
             "Sign in to Onshape to see the configuration preview.",
             { text: "Sign in", onClick: startSignIn }
diff --git a/src/frontend/features/library/components/add-group-menu.tsx b/src/frontend/features/library/components/add-group-menu.tsx
index 10a89fe7..3ab40bb6 100644
--- a/src/frontend/features/library/components/add-group-menu.tsx
+++ b/src/frontend/features/library/components/add-group-menu.tsx
@@ -2,7 +2,7 @@ import { Button, Menu, TextInput } from "@mantine/core";
 import { modals } from "@mantine/modals";
 import { openAppModal } from "../../../components/open-app-modal";
 import { AppModalBody, AppModalFooter } from "../../../components/app-modal";
-import { Plus } from "@phosphor-icons/react";
+import { PlusIcon } from "@phosphor-icons/react";
 import { IconSize } from "../../../lib/style-constants";
 import { ReactNode, useState } from "react";
 import { useMutation } from "@tanstack/react-query";
@@ -73,7 +73,7 @@ function AddGroupMenuContent(props: AddGroupMenuContentProps): ReactNode {
             <AppModalFooter>
                 <Button
                     ml="auto"
-                    leftSection={<Plus size={IconSize.SMALL} />}
+                    leftSection={<PlusIcon size={IconSize.SMALL} />}
                     onClick={() => mutation.mutate()}
                     loading={mutation.isPending}
                 >
@@ -87,7 +87,7 @@ function AddGroupMenuContent(props: AddGroupMenuContentProps): ReactNode {
 export function AddGroupButton(): ReactNode {
     return (
         <Button
-            leftSection={<Plus size={IconSize.SMALL} />}
+            leftSection={<PlusIcon size={IconSize.SMALL} />}
             onClick={() => openAddGroupMenu()}
         >
             Add group
@@ -102,7 +102,7 @@ interface AddGroupItemProps {
 export function AddGroupItem(props: AddGroupItemProps): ReactNode {
     return (
         <Menu.Item
-            leftSection={<Plus size={IconSize.SMALL} />}
+            leftSection={<PlusIcon size={IconSize.SMALL} />}
             onClick={() => openAddGroupMenu(props.selectedGroupId)}
         >
             Add group
diff --git a/src/frontend/features/library/components/card-components.tsx b/src/frontend/features/library/components/card-components.tsx
index 300b2ad3..8011611d 100644
--- a/src/frontend/features/library/components/card-components.tsx
+++ b/src/frontend/features/library/components/card-components.tsx
@@ -1,10 +1,10 @@
 import { Anchor, Box, Group, Menu, Stack, Table, Text } from "@mantine/core";
 import {
-    ArrowSquareOut,
-    EyeSlash,
-    Gear,
-    Link,
-    Plus
+    ArrowSquareOutIcon,
+    EyeSlashIcon,
+    GearIcon,
+    LinkIcon,
+    PlusIcon
 } from "@phosphor-icons/react";
 import { IconSize } from "../../../lib/style-constants";
 import { displayPartNumber } from "../../../lib/part-number";
@@ -49,13 +49,13 @@ export function OpenDocumentItems(props: OpenDocumentItemsProps) {
     return (
         <>
             <Menu.Item
-                leftSection={<ArrowSquareOut size={IconSize.SMALL} />}
+                leftSection={<ArrowSquareOutIcon size={IconSize.SMALL} />}
                 onClick={() => openUrlInNewTab(url)}
             >
                 Open document
             </Menu.Item>
             <Menu.Item
-                leftSection={<Link size={IconSize.SMALL} />}
+                leftSection={<LinkIcon size={IconSize.SMALL} />}
                 onClick={() => {
                     void copyUrlToClipboard(url);
                 }}
@@ -106,14 +106,14 @@ export function QuickInsertItems(props: QuickInsertItemProps) {
         <>
             {supportsFasten && (
                 <Menu.Item
-                    leftSection={<Plus size={IconSize.SMALL} />}
+                    leftSection={<PlusIcon size={IconSize.SMALL} />}
                     onClick={() => handleClick(true)}
                 >
                     Quick insert and fasten
                 </Menu.Item>
             )}
             <Menu.Item
-                leftSection={<Plus size={IconSize.SMALL} />}
+                leftSection={<PlusIcon size={IconSize.SMALL} />}
                 onClick={() => handleClick(false)}
             >
                 Quick insert
@@ -220,7 +220,7 @@ export function CardTitle(props: CardTitleProps) {
                 badge, dragging its open hover card out from under the cursor. */}
             {showHiddenTag && (
                 <Box
-                    component={EyeSlash}
+                    component={EyeSlashIcon}
                     size={IconSize.SMALL}
                     c="yellow"
                     alt="Hidden"
@@ -269,7 +269,7 @@ function CardPartNumber(props: {
             <Text component="span" inherit truncate miw={0}>
                 {text}
             </Text>
-            <ArrowSquareOut size={IconSize.TINY} />
+            <ArrowSquareOutIcon size={IconSize.TINY} />
         </Anchor>
     );
 }
@@ -343,7 +343,7 @@ export function AdminOptionsSubmenu(props: PropsWithChildren): ReactNode {
                 <Menu.Sub.Target>
                     <Menu.Sub.Item
                         color="yellow"
-                        leftSection={<Gear size={IconSize.SMALL} />}
+                        leftSection={<GearIcon size={IconSize.SMALL} />}
                     >
                         Admin options
                     </Menu.Sub.Item>
diff --git a/src/frontend/features/library/components/group-card.tsx b/src/frontend/features/library/components/group-card.tsx
index 1a37c44e..fdb4ee26 100644
--- a/src/frontend/features/library/components/group-card.tsx
+++ b/src/frontend/features/library/components/group-card.tsx
@@ -1,5 +1,10 @@
 import { Menu } from "@mantine/core";
-import { ArrowRight, Eye, EyeSlash, Trash } from "@phosphor-icons/react";
+import {
+    ArrowRightIcon,
+    EyeIcon,
+    EyeSlashIcon,
+    TrashIcon
+} from "@phosphor-icons/react";
 import { IconSize } from "../../../lib/style-constants";
 import { useNavigate } from "@tanstack/react-router";
 import { PropsWithChildren, ReactNode } from "react";
@@ -58,7 +63,7 @@ export function GroupCard(props: GroupCardProps): ReactNode {
                     }
                 />
             }
-            rightSection={<ArrowRight size={IconSize.SMALL} />}
+            rightSection={<ArrowRightIcon size={IconSize.SMALL} />}
             moreButton={false}
             menuItems={<GroupMenuItems group={group} />}
         />
@@ -132,7 +137,7 @@ function ShowAllElementsMenuItem({
     return (
         <Menu.Item
             color="blue"
-            leftSection={<Eye size={IconSize.SMALL} />}
+            leftSection={<EyeIcon size={IconSize.SMALL} />}
             onClick={() => mutation.mutate()}
         >
             Show all elements
@@ -149,7 +154,7 @@ function HideAllElementsMenuItem({
     return (
         <Menu.Item
             color="red"
-            leftSection={<EyeSlash size={IconSize.SMALL} />}
+            leftSection={<EyeSlashIcon size={IconSize.SMALL} />}
             onClick={() => mutation.mutate()}
         >
             Hide all elements
@@ -174,7 +179,7 @@ function DeleteGroupMenuItem({ groupId }: { groupId: string }): ReactNode {
 
     return (
         <Menu.Item
-            leftSection={<Trash size={IconSize.SMALL} />}
+            leftSection={<TrashIcon size={IconSize.SMALL} />}
             color="red"
             onClick={() => mutation.mutate()}
         >
diff --git a/src/frontend/features/library/components/reload-groups-button.tsx b/src/frontend/features/library/components/reload-groups-button.tsx
index 096e9ea6..9af74367 100644
--- a/src/frontend/features/library/components/reload-groups-button.tsx
+++ b/src/frontend/features/library/components/reload-groups-button.tsx
@@ -1,6 +1,6 @@
 import { Button } from "@mantine/core";
 import { modals } from "@mantine/modals";
-import { ArrowsClockwise } from "@phosphor-icons/react";
+import { ArrowsClockwiseIcon } from "@phosphor-icons/react";
 import { IconSize } from "../../../lib/style-constants";
 import { ReactNode } from "react";
 import { showInfoToast } from "../../../lib/notifications";
@@ -66,7 +66,7 @@ export function ReloadGroupsButton(props: ReloadGroupsButtonProps): ReactNode {
         <Button
             variant="light"
             color={reloadAll ? "red" : "blue"}
-            leftSection={<ArrowsClockwise size={IconSize.SMALL} />}
+            leftSection={<ArrowsClockwiseIcon size={IconSize.SMALL} />}
             onClick={handleClick}
             loading={mutation.isPending}
         >
diff --git a/src/frontend/features/search/components/search-errors.tsx b/src/frontend/features/search/components/search-errors.tsx
index 8d82c2f0..3edf867c 100644
--- a/src/frontend/features/search/components/search-errors.tsx
+++ b/src/frontend/features/search/components/search-errors.tsx
@@ -1,5 +1,9 @@
 import { Alert, Box, Button, Group, Text } from "@mantine/core";
-import { HeartBreak, Info, MagnifyingGlass } from "@phosphor-icons/react";
+import {
+    HeartBreakIcon,
+    InfoIcon,
+    MagnifyingGlassIcon
+} from "@phosphor-icons/react";
 import { IconSize } from "../../../lib/style-constants";
 import { ReactNode } from "react";
 import { ClearFiltersButton } from "../../settings/components/vendor-filters";
@@ -40,7 +44,7 @@ function Callout(props: { text: string; action: ReactNode }): ReactNode {
         <Alert
             color="blue"
             p="xs"
-            icon={<Info size={IconSize.MEDIUM} />}
+            icon={<InfoIcon size={IconSize.MEDIUM} />}
             styles={{ body: { minWidth: 0 } }}
         >
             <Group justify="space-between" wrap="nowrap" gap="sm">
@@ -89,12 +93,12 @@ export function NoSearchResultError(
     const icon =
         objectLabel === "search result" ? (
             <Box
-                component={MagnifyingGlass}
+                component={MagnifyingGlassIcon}
                 size={IconSize.SECTION}
                 c="yellow"
             />
         ) : (
-            <Box component={HeartBreak} size={IconSize.SECTION} c="red" />
+            <Box component={HeartBreakIcon} size={IconSize.SECTION} c="red" />
         );
 
     if (filtered.byGroup > 0) {
@@ -141,7 +145,7 @@ function SearchAllButton(props: SearchAllButtonProps): ReactNode {
     const small = props.small ?? false;
     return (
         <Button
-            leftSection={<MagnifyingGlass size={IconSize.SMALL} />}
+            leftSection={<MagnifyingGlassIcon size={IconSize.SMALL} />}
             // Small means inside the callout, where a filled button would
             // shout over the note it sits in.
             variant={small ? "default" : undefined}
diff --git a/src/frontend/features/search/search.test.ts b/src/frontend/features/search/search.test.ts
index b1fd2e0b..956512d4 100644
--- a/src/frontend/features/search/search.test.ts
+++ b/src/frontend/features/search/search.test.ts
@@ -35,7 +35,7 @@ describe("processTerm", () => {
 
 describe("tokenize", () => {
     it("splits on punctuation, keeping the words whole", () => {
-        expect(tokenize('1" Linear (REV)')).toEqual(["1", "Linear", "REV"]);
+        expect(tokenize('1" Linear (REV)')).toEqual(['1"', "Linear", "REV"]);
         expect(tokenize("10-32 Bearings & Bushings #X-Contact")).toEqual([
             "10",
             "32",
@@ -74,6 +74,21 @@ describe("tokenize", () => {
     it("canonicalizes a fraction inside a name", () => {
         expect(tokenize("1/2 Bearing")).toEqual(["0.5", "Bearing"]);
     });
+
+    // The mark is what makes `1"` a size rather than a prefix of 1.5 and 16T.
+    it("keeps an inch mark on the number it measures", () => {
+        expect(tokenize('1" Hex Shaft')).toEqual(['1"', "Hex", "Shaft"]);
+        expect(tokenize('1/2" Hex')).toEqual(['0.5"', "Hex"]);
+        expect(tokenize('Bearing 1"')).toEqual(["Bearing", '1"']);
+    });
+
+    it("still drops quotes that quote something", () => {
+        expect(tokenize('The "Long" Bracket')).toEqual([
+            "The",
+            "Long",
+            "Bracket"
+        ]);
+    });
 });
 
 function library(name = "Bracket"): LibraryOut {
@@ -196,6 +211,53 @@ describe("doSearch configuration matching", () => {
     });
 });
 
+// A bare `1` prefix-matches every 1.5", 10-32 and 16T in the library; typing
+// the inch mark is how a user says they mean one inch exactly.
+describe("doSearch inch sizes", () => {
+    const names = [
+        '1" Hex Shaft',
+        '1/2" Hex Shaft',
+        '1.5" Spacer',
+        "10-32 Screw",
+        "16T Pulley"
+    ];
+
+    /** One library holding all of `names`, so a query has to choose. */
+    function sizeLibrary(): LibraryOut {
+        const base = library();
+        const template = base.insertables.i1;
+        base.insertables = {};
+        base.groups.g1.insertableOrder = names.map((name, index) => {
+            const id = "size" + index;
+            base.insertables[id] = { ...template, id, name };
+            return id;
+        });
+        return base;
+    }
+
+    const searchDb = buildSearchDb(sizeLibrary());
+    const namesFor = (query: string) =>
+        search(searchDb, query).hits.map(
+            (hit) => names[Number(hit.id.slice("size".length))]
+        );
+
+    it("matches only the parts measured in that size", () => {
+        expect(namesFor('1"')).toEqual(['1" Hex Shaft']);
+    });
+
+    it("finds a fractional size by its decimal form", () => {
+        expect(namesFor('.5"')).toEqual(['1/2" Hex Shaft']);
+    });
+
+    // Without the mark there is nothing to say 1 is a size, so it stays a
+    // prefix — of 1.5, 10 and 16 alike, but not of the 1/2 stored as 0.5.
+    it("leaves a bare number matching every number it starts", () => {
+        expect(namesFor("1").sort()).toEqual(
+            ['1" Hex Shaft', '1.5" Spacer', "10-32 Screw", "16T Pulley"].sort()
+        );
+    });
+});
+
 describe("doSearch highlighting", () => {
     /** The characters `positions` underline, merged the way applyRanges does. */
     function highlighted(text: string, positions: Position[]): string {
@@ -230,6 +292,10 @@ describe("doSearch highlighting", () => {
         expect(highlightFor("Motor Mount", "mou")).toBe("Mou");
     });
 
+    it("underlines the inch mark along with its number", () => {
+        expect(highlightFor('1" Hex Shaft', '1"')).toBe('1"');
+    });
+
     it("matches terms literally rather than as patterns", () => {
         // An unescaped "1.5" would also underline the "125".
         expect(highlightFor("1.5 x 125 Spacer", "1.5")).toBe("1.5");
diff --git a/src/frontend/features/settings/components/vendor-filters.tsx b/src/frontend/features/settings/components/vendor-filters.tsx
index ebd0626b..2b77f3de 100644
--- a/src/frontend/features/settings/components/vendor-filters.tsx
+++ b/src/frontend/features/settings/components/vendor-filters.tsx
@@ -1,5 +1,5 @@
 import { ActionIcon, Button, Menu } from "@mantine/core";
-import { Funnel, FunnelX } from "@phosphor-icons/react";
+import { FunnelIcon, FunnelXIcon } from "@phosphor-icons/react";
 import { IconSize } from "../../../lib/style-constants";
 import { ReactNode } from "react";
 import { getVendorName } from "@backend/features/library/vendors";
@@ -31,7 +31,7 @@ export function ClearFiltersButton(props: ClearFiltersButtonProps): ReactNode {
             disabled={areAllTagsActive}
             variant="default"
             size={small ? "xs" : undefined}
-            leftSection={<FunnelX size={IconSize.SMALL} />}
+            leftSection={<FunnelXIcon size={IconSize.SMALL} />}
             onClick={() => {
                 setUiState({ vendorFilters: undefined });
             }}
@@ -69,7 +69,7 @@ export function VendorMenu(): ReactNode {
             </Menu.CheckboxGroup>
             <Menu.Divider />
             <Menu.Item
-                leftSection={<FunnelX size={IconSize.SMALL} />}
+                leftSection={<FunnelXIcon size={IconSize.SMALL} />}
                 disabled={!hasFilters}
                 onClick={() => setUiState({ vendorFilters: undefined })}
             >
@@ -87,7 +87,7 @@ export function VendorMenu(): ReactNode {
                 size="input-sm"
                 title="Filter vendors"
             >
-                <Funnel size={IconSize.CONTROL} />
+                <FunnelIcon size={IconSize.CONTROL} />
             </ActionIcon>
         </AppContextMenu>
     );
diff --git a/src/frontend/features/thumbnails/components/thumbnail.tsx b/src/frontend/features/thumbnails/components/thumbnail.tsx
index 8c9b946b..25e03d0a 100644
--- a/src/frontend/features/thumbnails/components/thumbnail.tsx
+++ b/src/frontend/features/thumbnails/components/thumbnail.tsx
@@ -8,7 +8,7 @@ import { ElementType } from "@backend/lib/onshape/element-type";
 import { ThumbnailSize } from "@backend/features/thumbnails/types";
 import { ElementPath } from "@backend/lib/onshape/path";
 import { Box, Card, Center, HoverCard, Loader } from "@mantine/core";
-import { Question } from "@phosphor-icons/react";
+import { QuestionIcon } from "@phosphor-icons/react";
 
 import { ComponentPropsWithRef, ReactNode, useState } from "react";
 import { DEFAULT_CANONICAL_CONFIGURATION } from "@backend/features/configurations/canonical";
@@ -126,7 +126,7 @@ function Thumbnail(props: ThumbnailProps): ReactNode {
 
     let content;
     if (url === undefined || imageQuery.isError) {
-        content = <Question size={spinnerSize} />;
+        content = <QuestionIcon size={spinnerSize} />;
     } else if (imageQuery.isPending) {
         content = <Loader size={spinnerSize} />;
     } else {
diff --git a/src/frontend/lib/notifications.tsx b/src/frontend/lib/notifications.tsx
index f7b78932..18a28719 100644
--- a/src/frontend/lib/notifications.tsx
+++ b/src/frontend/lib/notifications.tsx
@@ -1,6 +1,6 @@
 import { notifications } from "@mantine/notifications";
 import type { ReactNode } from "react";
-import { CheckCircle, Info, XCircle } from "@phosphor-icons/react";
+import { CheckCircleIcon, InfoIcon, XCircleIcon } from "@phosphor-icons/react";
 import { IconSize } from "./style-constants";
 import { Group, Button } from "@mantine/core";
 
@@ -88,7 +88,7 @@ export function showInfoToast(
 ): string {
     return showToast({
         color: "blue",
-        icon: <Info size={IconSize.MEDIUM} />,
+        icon: <InfoIcon size={IconSize.MEDIUM} />,
         message,
         ...options
     });
@@ -109,7 +109,7 @@ export function showSuccessToast(message: string, id?: string): string {
     return showToast({
         id,
         color: "green",
-        icon: <CheckCircle size={IconSize.MEDIUM} />,
+        icon: <CheckCircleIcon size={IconSize.MEDIUM} />,
         message
     });
 }
@@ -118,7 +118,7 @@ export function showErrorToast(message: string, id?: string): string {
     return showToast({
         id,
         color: "red",
-        icon: <XCircle size={IconSize.MEDIUM} />,
+        icon: <XCircleIcon size={IconSize.MEDIUM} />,
         message
     });
 }
diff --git a/src/frontend/lib/url.tsx b/src/frontend/lib/url.tsx
index 4350aacd..e7909fc3 100644
--- a/src/frontend/lib/url.tsx
+++ b/src/frontend/lib/url.tsx
@@ -10,7 +10,7 @@ import {
 } from "@backend/lib/onshape/path";
 import { encodeConfigurationForQuery } from "@backend/features/configurations/utils";
 import { notifications } from "@mantine/notifications";
-import { Link } from "@phosphor-icons/react";
+import { LinkIcon } from "@phosphor-icons/react";
 import { IconSize } from "./style-constants";
 
 export function makeUrl(path: ConfigurablePath): string;
@@ -68,7 +68,7 @@ export async function copyUrlToClipboard(url: string): Promise<void> {
     await navigator.clipboard.writeText(url);
     notifications.show({
         message: "Link copied to clipboard.",
-        icon: <Link size={IconSize.MEDIUM} />,
+        icon: <LinkIcon size={IconSize.MEDIUM} />,
         color: "blue",
         autoClose: 3000
     });
diff --git a/src/frontend/routes/app/library/$libraryId/groups/$groupId.tsx b/src/frontend/routes/app/library/$libraryId/groups/$groupId.tsx
index acf80caa..106b9810 100644
--- a/src/frontend/routes/app/library/$libraryId/groups/$groupId.tsx
+++ b/src/frontend/routes/app/library/$libraryId/groups/$groupId.tsx
@@ -7,7 +7,11 @@ import {
     useParams
 } from "@tanstack/react-router";
 import { Box, Button, Group } from "@mantine/core";
-import { ArrowLeft, ArrowUUpLeft, Warning } from "@phosphor-icons/react";
+import {
+    ArrowLeftIcon,
+    ArrowUUpLeftIcon,
+    WarningIcon
+} from "@phosphor-icons/react";
 import {
     BORDER,
     IconSize,
@@ -69,7 +73,7 @@ function GroupList(): ReactNode {
                 justifyUp
                 action={
                     <Button
-                        leftSection={<ArrowUUpLeft size={IconSize.SMALL} />}
+                        leftSection={<ArrowUUpLeftIcon size={IconSize.SMALL} />}
                         onClick={() => {
                             void navigate({
                                 to: "/app/library/$libraryId",
@@ -132,7 +136,7 @@ function GroupHeaderRow({ group }: { group: GroupOut }): ReactNode {
         >
             <Group wrap="nowrap" justify="space-between" h="100%">
                 <AppTitle
-                    icon={<ArrowLeft size={IconSize.MEDIUM} />}
+                    icon={<ArrowLeftIcon size={IconSize.MEDIUM} />}
                     title={group.name}
                 />
                 <MenuButton>{menuItems}</MenuButton>
@@ -182,7 +186,7 @@ export function GroupListContent(props: GroupListCardsProps): ReactNode {
             <SectionError
                 icon={
                     <Box
-                        component={Warning}
+                        component={WarningIcon}
                         size={IconSize.SECTION}
                         c="yellow"
                     />
diff --git a/src/frontend/routes/app/library/$libraryId/index.tsx b/src/frontend/routes/app/library/$libraryId/index.tsx
index 9d86172b..1a5ed140 100644
--- a/src/frontend/routes/app/library/$libraryId/index.tsx
+++ b/src/frontend/routes/app/library/$libraryId/index.tsx
@@ -1,7 +1,7 @@
 import { createFileRoute, Outlet } from "@tanstack/react-router";
 import { Accordion, Badge } from "@mantine/core";
 import { AppTitle } from "../../../../components/app-title";
-import { Books, MagnifyingGlass } from "@phosphor-icons/react";
+import { BooksIcon, MagnifyingGlassIcon } from "@phosphor-icons/react";
 import {
     BORDER,
     IconSize,
@@ -12,7 +12,7 @@ import {
 import { ReactNode, useState } from "react";
 import { GroupCard } from "../../../../features/library/components/group-card";
 import { ItemTable } from "../../../../features/library/components/card-components";
-import { HeartIcon } from "../../../../features/favorites/components/favorite-button";
+import { FavoriteIcon } from "../../../../features/favorites/components/favorite-button";
 import { SearchResults } from "../../../../features/search/components/search-results";
 import {
     SectionError,
@@ -60,7 +60,7 @@ function HomeList(): ReactNode {
     if (isSignedIn) {
         sections.push({
             value: "favorites",
-            icon: <HeartIcon size={IconSize.MEDIUM} />,
+            icon: <FavoriteIcon size={IconSize.MEDIUM} />,
             title: <AppTitle title="Favorites" />,
             panel: <FavoritesList />,
             opened: uiState.isFavoritesOpen,
@@ -75,7 +75,7 @@ function HomeList(): ReactNode {
             ? {
                   value: "search",
                   icon: (
-                      <MagnifyingGlass
+                      <MagnifyingGlassIcon
                           size={IconSize.MEDIUM}
                           color={PrimaryColor.FILLED}
                       />
@@ -93,7 +93,7 @@ function HomeList(): ReactNode {
             : {
                   value: "library",
                   icon: (
-                      <Books
+                      <BooksIcon
                           size={IconSize.MEDIUM}
                           color={PrimaryColor.FILLED}
                       />

From 49102168fd209a9cb685fa6efda0c46344f309be Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 31 Aug 2026 02:07:58 +0000
Subject: [PATCH 03/40] Pick the configuration whose size the query named

Searching a size found the element but showed its default configuration:
`1` prefix-matches a segment of every part number (0016 -> 16), which
tied the real match in the name, and the tie went to the part number's
first record. A term matched whole now outranks one matched as a prefix,
and a size's unit is folded into the mark, so `1`, `1"` and `1 in` all
name the 1" configuration rather than the .25" one listed first.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018tgfuCHjVFvejjMe7WmEFL
---
 src/backend/features/search/search-index.ts | 18 ++++++--
 src/frontend/features/search/search.test.ts | 49 +++++++++++++++++++++
 src/frontend/features/search/search.ts      | 32 +++++++++++---
 3 files changed, 91 insertions(+), 8 deletions(-)

diff --git a/src/backend/features/search/search-index.ts b/src/backend/features/search/search-index.ts
index 2fa6572b..1ccbead4 100644
--- a/src/backend/features/search/search-index.ts
+++ b/src/backend/features/search/search-index.ts
@@ -88,18 +88,30 @@ function canonicalizeNumbers(text: string): string {
 }
 
 /**
- * For direct, non-tokenized comparison: the index's number canonicalization,
+ * A size's unit, in the spellings a part name uses. The mark is the form it
+ * keeps, so `1 in`, `1in` and `1"` are one size. A trailing `-` or letter means
+ * a word that merely starts with "in" (`in-line`, `insert`).
+ */
+const INCH_UNIT = /(\d)\s*(?:"|inches|inch|in)(?![\w-])/gi;
+
+/** Numbers and their units in the one spelling everything is stored as. */
+function canonicalize(text: string): string {
+    return canonicalizeNumbers(text).replace(INCH_UNIT, '$1"');
+}
+
+/**
+ * For direct, non-tokenized comparison: the index's canonicalization,
  * lowercased, so a `.5` query lines up with a stored `"1/2 Bearing"`.
  */
 export function normalizeForMatch(text: string): string {
-    return canonicalizeNumbers(text).toLowerCase();
+    return canonicalize(text).toLowerCase();
 }
 
 export function tokenize(text: string): string[] {
     // Canonicalize before splitting: fractions span `/` and `-`. Casing stays,
     // since processTerm splits on camelCase.
     return (
-        canonicalizeNumbers(text)
+        canonicalize(text)
             // An inch mark stays on its number and ends the token, so `1"` is a
             // size of its own rather than a prefix of `1.5`, `10`, and `16t`.
             .replace(/(\d")/g, `$1${deliminator}`)
diff --git a/src/frontend/features/search/search.test.ts b/src/frontend/features/search/search.test.ts
index 956512d4..6ecfb6c6 100644
--- a/src/frontend/features/search/search.test.ts
+++ b/src/frontend/features/search/search.test.ts
@@ -75,6 +75,23 @@ describe("tokenize", () => {
         expect(tokenize("1/2 Bearing")).toEqual(["0.5", "Bearing"]);
     });
 
+    it("spells a size's unit as the mark, however it was written", () => {
+        for (const size of ['1"', "1in", "1 in", "1 inch", "1 inches"]) {
+            expect(tokenize(size + " Standoff")).toEqual(['1"', "Standoff"]);
+        }
+        expect(tokenize("1/2 in Standoff")).toEqual(['0.5"', "Standoff"]);
+    });
+
+    // Only a unit is folded away; a word that merely starts with it is a word.
+    it("leaves a word beginning with the unit alone", () => {
+        expect(tokenize("8 in-line Insert")).toEqual([
+            "8",
+            "in",
+            "line",
+            "Insert"
+        ]);
+    });
+
     // The mark is what makes `1"` a size rather than a prefix of 1.5 and 16T.
     it("keeps an inch mark on the number it measures", () => {
         expect(tokenize('1" Hex Shaft')).toEqual(['1"', "Hex", "Shaft"]);
@@ -258,6 +275,38 @@ describe("doSearch inch sizes", () => {
     });
 });
 
+// A part number carries digits of its own, so `1` prefix-matches a segment of
+// every one of them; the size in the name is what the query actually named.
+describe("doSearch size matching", () => {
+    const searchDb = buildSearchDb(library("Hex Standoff"), {
+        i1: [
+            record("TTB-0016-025", { length: "0.25 in" }, '0.25" Hex Standoff'),
+            record("TTB-0016-050", { length: "0.5 in" }, '0.5" Hex Standoff'),
+            record("TTB-0016-100", { length: "1 in" }, '1" Hex Standoff')
+        ]
+    });
+
+    it.each(["1", '1"', "1 in", "1 standoff"])(
+        "picks the 1 inch configuration for %s",
+        (query) => {
+            const { hits } = search(searchDb, query);
+            expect(hits[0].partName).toBe('1" Hex Standoff');
+            expect(hits[0].configuration).toEqual({ length: "1 in" });
+        }
+    );
+
+    it("still picks the smaller size when that is what was asked for", () => {
+        const { hits } = search(searchDb, ".25 standoff");
+        expect(hits[0].partName).toBe('0.25" Hex Standoff');
+    });
+
+    // Nothing in the query distinguishes one, so the default still leads.
+    it("keeps the default when no size is named", () => {
+        const { hits } = search(searchDb, "hex standoff");
+        expect(hits[0].partName).toBe('0.25" Hex Standoff');
+    });
+});
+
 describe("doSearch highlighting", () => {
     /** The characters `positions` underline, merged the way applyRanges does. */
     function highlighted(text: string, positions: Position[]): string {
diff --git a/src/frontend/features/search/search.ts b/src/frontend/features/search/search.ts
index bad40aea..2ae81908 100644
--- a/src/frontend/features/search/search.ts
+++ b/src/frontend/features/search/search.ts
@@ -191,12 +191,31 @@ interface RecordMatch {
     score: number;
 }
 
-/** Query terms the value covers, prefix-matched the way the index searches. */
+/**
+ * How well one term is answered: a term matched whole beats one matched as a
+ * prefix, which every longer number satisfies too — `1` names the size `1"`,
+ * but only starts `16`.
+ */
+function termScore(valueTerms: string[], queryTerm: string): number {
+    // A unit is not part of the number's spelling, so `1` still names `1"`.
+    if (
+        valueTerms.includes(queryTerm) ||
+        valueTerms.includes(queryTerm + '"')
+    ) {
+        return 2;
+    }
+    return valueTerms.some((valueTerm) => valueTerm.startsWith(queryTerm))
+        ? 1
+        : 0;
+}
+
+/** How much of the query the value covers, term by term. */
 function coveredTerms(value: string, queryTerms: string[]): number {
     const valueTerms = tokenize(value).map((term) => term.toLowerCase());
-    return queryTerms.filter((queryTerm) =>
-        valueTerms.some((valueTerm) => valueTerm.startsWith(queryTerm))
-    ).length;
+    return queryTerms.reduce(
+        (score, queryTerm) => score + termScore(valueTerms, queryTerm),
+        0
+    );
 }
 
 /**
@@ -216,7 +235,10 @@ function matchScore(
     } else if (value.includes(normalizedQuery)) {
         whole = 1;
     }
-    return whole * (queryTerms.length + 1) + coveredTerms(value, queryTerms);
+    // Outweighs full term coverage, which is worth 2 a term.
+    return (
+        whole * (2 * queryTerms.length + 1) + coveredTerms(value, queryTerms)
+    );
 }
 
 /**

From 47e52c2b55b8a8c1ee867579f1be64149a2a8bb6 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 31 Aug 2026 02:07:59 +0000
Subject: [PATCH 04/40] Hand CardTitle its thumbnail, and split out
 PartNameAndNumber

CardTitle took three thumbnail props only to forward them, so the rows
that know which configuration to render now pass the CardThumbnail
itself. The part name and number block becomes its own component rather
than a nested ternary in the middle of the title.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018tgfuCHjVFvejjMe7WmEFL
---
 .../favorites/components/favorite-card.tsx    | 28 +++---
 .../library/components/card-components.tsx    | 96 +++++++++----------
 .../library/components/group-card.tsx         |  9 +-
 .../library/components/insertable-card.tsx    | 46 ++++++---
 4 files changed, 106 insertions(+), 73 deletions(-)

diff --git a/src/frontend/features/favorites/components/favorite-card.tsx b/src/frontend/features/favorites/components/favorite-card.tsx
index e800d0c7..0a39ae85 100644
--- a/src/frontend/features/favorites/components/favorite-card.tsx
+++ b/src/frontend/features/favorites/components/favorite-card.tsx
@@ -18,6 +18,7 @@ import {
     QuickInsertItems
 } from "../../library/components/card-components";
 import { useIsInsertableHidden } from "../../library/card-hooks";
+import { CardThumbnail } from "../../thumbnails/components/thumbnail";
 import { useIsAssemblyInPartStudio } from "../../insert/insert-hooks";
 import { ChangeOrderItems } from "../../../components/change-order";
 import { useUiState } from "../../../lib/ui-state";
@@ -73,17 +74,22 @@ export function FavoriteCard(props: FavoriteCardProps): ReactNode {
                 <CardTitle
                     disabled={isAssemblyInPartStudio}
                     title={insertable.name}
-                    smallThumbnailUrl={insertable.smallThumbnailUrl}
-                    largeThumbnailUrl={insertable.largeThumbnailUrl}
-                    thumbnailTarget={{
-                        elementId: insertable.elementId,
-                        microversionId: insertable.microversionId,
-                        canonicalConfiguration: encodeCanonicalConfiguration(
-                            favorite.defaultConfiguration ?? {}
-                        ),
-                        warm: true,
-                        insertableId: insertable.id
-                    }}
+                    thumbnail={
+                        <CardThumbnail
+                            smallThumbnailUrl={insertable.smallThumbnailUrl}
+                            largeThumbnailUrl={insertable.largeThumbnailUrl}
+                            target={{
+                                elementId: insertable.elementId,
+                                microversionId: insertable.microversionId,
+                                canonicalConfiguration:
+                                    encodeCanonicalConfiguration(
+                                        favorite.defaultConfiguration ?? {}
+                                    ),
+                                warm: true,
+                                insertableId: insertable.id
+                            }}
+                        />
+                    }
                     searchHit={searchHit}
                 />
             }
diff --git a/src/frontend/features/library/components/card-components.tsx b/src/frontend/features/library/components/card-components.tsx
index 8011611d..f3e49147 100644
--- a/src/frontend/features/library/components/card-components.tsx
+++ b/src/frontend/features/library/components/card-components.tsx
@@ -16,10 +16,6 @@ import {
     HighlightedText,
     SearchHitTitle
 } from "../../search/components/search-results";
-import {
-    CardThumbnail,
-    type ThumbnailTarget
-} from "../../thumbnails/components/thumbnail";
 import {
     ConfigurablePath,
     DocumentPath,
@@ -139,10 +135,8 @@ interface CardTitleProps {
      */
     title: string;
     searchHit?: SearchHit;
-    smallThumbnailUrl?: string;
-    largeThumbnailUrl?: string;
-    /** Set to show a specific configuration's thumbnail instead of the default. */
-    thumbnailTarget?: ThumbnailTarget;
+    /** The row's `CardThumbnail`, which only the caller knows how to address. */
+    thumbnail: ReactNode;
     /** Optional build-status badge rendered after the title. */
     buildStatusBadge?: ReactNode;
 }
@@ -151,9 +145,7 @@ export function CardTitle(props: CardTitleProps) {
     const {
         searchHit,
         title,
-        smallThumbnailUrl,
-        largeThumbnailUrl,
-        thumbnailTarget,
+        thumbnail,
         buildStatusBadge,
         disabled = false,
         showHiddenTag = false
@@ -166,54 +158,19 @@ export function CardTitle(props: CardTitleProps) {
         cardTitle = title;
     }
 
-    // The hit's best-matching configuration, minus a value repeating the title.
-    const partName =
-        searchHit?.partName?.toLowerCase() !== title.toLowerCase()
-            ? searchHit?.partName
-            : undefined;
-    const partNumber = displayPartNumber(searchHit?.partNumber, title);
-
-    let partNameAndNumberComponent = null;
-    if (partName || partNumber) {
-        partNameAndNumberComponent = (
-            <Group gap={4} wrap="nowrap" miw={0} fz="xs" lh="xs" c="dimmed">
-                {partName && (
-                    <Text inherit truncate miw={0}>
-                        <HighlightedText
-                            text={partName}
-                            positions={searchHit?.partNamePositions}
-                        />
-                    </Text>
-                )}
-                {partName && partNumber && <Text inherit>·</Text>}
-                {partNumber && (
-                    <CardPartNumber
-                        partNumber={partNumber}
-                        positions={searchHit?.partNumberPositions}
-                        url={searchHit?.url}
-                    />
-                )}
-            </Group>
-        );
-    }
-
     // Shrinks to truncate, but never grows: the build status badge and hidden tag belong beside the name, not at the row's edge.
     const cardTitleComponent = (
         <Stack gap={0} miw={0}>
             <Text size="sm" truncate c={disabled ? "dimmed" : undefined}>
                 {cardTitle}
-                {partNameAndNumberComponent}
+                <PartNameAndNumber title={title} searchHit={searchHit} />
             </Text>
         </Stack>
     );
 
     return (
         <Group gap="sm" wrap="nowrap" flex={1} miw={0}>
-            <CardThumbnail
-                smallThumbnailUrl={smallThumbnailUrl}
-                largeThumbnailUrl={largeThumbnailUrl}
-                target={thumbnailTarget}
-            />
+            {thumbnail}
             {cardTitleComponent}
             {buildStatusBadge}
             {/* After the badge: toggling visibility would otherwise shift the
@@ -230,6 +187,49 @@ export function CardTitle(props: CardTitleProps) {
     );
 }
 
+interface PartNameAndNumberProps {
+    /** The row's own title, which neither line repeats. */
+    title: string;
+    searchHit?: SearchHit;
+}
+
+/** The matched configuration's name and part number, beneath the title. */
+function PartNameAndNumber(props: PartNameAndNumberProps): ReactNode {
+    const { title, searchHit } = props;
+
+    // The hit's best-matching configuration, minus a value repeating the title.
+    const partName =
+        searchHit?.partName?.toLowerCase() !== title.toLowerCase()
+            ? searchHit?.partName
+            : undefined;
+    const partNumber = displayPartNumber(searchHit?.partNumber, title);
+
+    if (!partName && !partNumber) {
+        return null;
+    }
+
+    return (
+        <Group gap={4} wrap="nowrap" miw={0} fz="xs" lh="xs" c="dimmed">
+            {partName && (
+                <Text inherit truncate miw={0}>
+                    <HighlightedText
+                        text={partName}
+                        positions={searchHit?.partNamePositions}
+                    />
+                </Text>
+            )}
+            {partName && partNumber && <Text inherit>·</Text>}
+            {partNumber && (
+                <CardPartNumber
+                    partNumber={partNumber}
+                    positions={searchHit?.partNumberPositions}
+                    url={searchHit?.url}
+                />
+            )}
+        </Group>
+    );
+}
+
 /** The part number, linked to the vendor's page for it when there is one. */
 function CardPartNumber(props: {
     partNumber: string;
diff --git a/src/frontend/features/library/components/group-card.tsx b/src/frontend/features/library/components/group-card.tsx
index fdb4ee26..f8fb8b4e 100644
--- a/src/frontend/features/library/components/group-card.tsx
+++ b/src/frontend/features/library/components/group-card.tsx
@@ -22,6 +22,7 @@ import {
     OpenDocumentItems
 } from "./card-components";
 import { AddGroupItem } from "./add-group-menu";
+import { CardThumbnail } from "../../thumbnails/components/thumbnail";
 import { GroupStatusBadge } from "../../build-status/components/build-status";
 import { useRefreshLibrary } from "../../../lib/refresh";
 import { useBuildStatusQuery } from "../../build-status/queries";
@@ -53,8 +54,12 @@ export function GroupCard(props: GroupCardProps): ReactNode {
                 <CardTitle
                     title={group.name}
                     disabled={!group.isLoaded}
-                    smallThumbnailUrl={group.smallThumbnailUrl}
-                    largeThumbnailUrl={group.largeThumbnailUrl}
+                    thumbnail={
+                        <CardThumbnail
+                            smallThumbnailUrl={group.smallThumbnailUrl}
+                            largeThumbnailUrl={group.largeThumbnailUrl}
+                        />
+                    }
                     buildStatusBadge={
                         <GroupStatusBadge
                             groupId={group.id}
diff --git a/src/frontend/features/library/components/insertable-card.tsx b/src/frontend/features/library/components/insertable-card.tsx
index b8600743..1dcd138f 100644
--- a/src/frontend/features/library/components/insertable-card.tsx
+++ b/src/frontend/features/library/components/insertable-card.tsx
@@ -13,6 +13,7 @@ import {
     FavoriteInsertableItem
 } from "../../favorites/components/favorite-button";
 import { useIsInsertableHidden } from "../card-hooks";
+import { CardThumbnail } from "../../thumbnails/components/thumbnail";
 import { InsertableStatusBadge } from "../../build-status/components/build-status";
 import {
     CardTitle,
@@ -75,17 +76,23 @@ export function InsertableCard(props: InsertableCardProps): ReactNode {
                     disabled={isAssemblyInPartStudio}
                     searchHit={searchHit}
                     title={insertable.name}
-                    smallThumbnailUrl={insertable.smallThumbnailUrl}
-                    largeThumbnailUrl={insertable.largeThumbnailUrl}
-                    thumbnailTarget={{
-                        elementId: insertable.elementId,
-                        microversionId: insertable.microversionId,
-                        canonicalConfiguration: encodeCanonicalConfiguration(
-                            searchHit?.configuration ?? {}
-                        ),
-                        // A cold search would otherwise start a render per row.
-                        warm: false
-                    }}
+                    thumbnail={
+                        <CardThumbnail
+                            smallThumbnailUrl={insertable.smallThumbnailUrl}
+                            largeThumbnailUrl={insertable.largeThumbnailUrl}
+                            target={{
+                                elementId: insertable.elementId,
+                                microversionId: insertable.microversionId,
+                                canonicalConfiguration:
+                                    encodeCanonicalConfiguration(
+                                        searchHit?.configuration ?? {}
+                                    ),
+                                // A cold search would otherwise start a render
+                                // per row.
+                                warm: false
+                            }}
+                        />
+                    }
                     showHiddenTag={!insertable.isVisible}
                     buildStatusBadge={
                         <InsertableStatusBadge
@@ -100,6 +107,7 @@ export function InsertableCard(props: InsertableCardProps): ReactNode {
                     <FavoriteButton
                         favorite={favorite}
                         insertable={insertable}
+                        defaultConfiguration={searchHit?.configuration}
                     />
                 </RequireSignIn>
             }
@@ -121,12 +129,23 @@ interface InsertableMenuItemsProps {
     /** What quick insert inserts and "Open document" opens: a search hit's
      * configuration on a card, the selected one inside the insert menu. */
     configuration?: ParameterValues;
+    /**
+     * What favoriting stores, where the caller knows the canonical spelling of
+     * the selection. Defaults to `configuration`, which a card's already is.
+     */
+    canonicalConfiguration?: ParameterValues;
 }
 
 export function InsertableMenuItems(
     props: InsertableMenuItemsProps
 ): ReactNode {
-    const { favorite, insertable, inInsertMenu, configuration } = props;
+    const {
+        favorite,
+        insertable,
+        inInsertMenu,
+        configuration,
+        canonicalConfiguration
+    } = props;
     const isConnected = useIsConnectedToOnshape();
 
     return (
@@ -145,6 +164,9 @@ export function InsertableMenuItems(
                 <FavoriteInsertableItem
                     favorite={favorite}
                     insertable={insertable}
+                    defaultConfiguration={
+                        canonicalConfiguration ?? configuration
+                    }
                 />
                 <Menu.Divider />
             </RequireSignIn>

From 87055bd44954af7de5aac2744c07d5486f209697 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 31 Aug 2026 02:08:11 +0000
Subject: [PATCH 05/40] Give searching and filtering one shape, and split the
 favorites search

Every list narrows its insertables one of two ways and then renders the
same rows, but each caller resolved hits to insertables and tallied the
filtering itself (filterResult2 beside filterResult). Both ways now
return FilteredInsertables, and the favorites list splits into the
search, the browse, and the cards they share.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018tgfuCHjVFvejjMe7WmEFL
---
 .../favorites/components/favorites-list.tsx   | 150 +++++++++---------
 .../search/components/search-results.tsx      |  48 +++---
 src/frontend/features/search/filter.ts        |  60 +++++--
 .../library/$libraryId/groups/$groupId.tsx    |  12 +-
 4 files changed, 152 insertions(+), 118 deletions(-)

diff --git a/src/frontend/features/favorites/components/favorites-list.tsx b/src/frontend/features/favorites/components/favorites-list.tsx
index 1d5258bb..26f00faf 100644
--- a/src/frontend/features/favorites/components/favorites-list.tsx
+++ b/src/frontend/features/favorites/components/favorites-list.tsx
@@ -3,9 +3,14 @@ import { useAccessData } from "../../auth/access-level";
 import { HeartBreakIcon } from "@phosphor-icons/react";
 import { IconSize } from "../../../lib/style-constants";
 import { ReactNode } from "react";
-import { filterInsertables } from "../../search/filter";
+import {
+    FilteredInsertables,
+    filterInsertables,
+    searchInsertables
+} from "../../search/filter";
 import { getFavoriteForInsertable } from "@backend/features/favorites/contract";
-import { InsertableOut } from "@backend/features/library/contract";
+import type { FavoritesData } from "@backend/features/favorites/contract";
+import type { Insertables } from "@backend/features/library/contract";
 import { useUiState } from "../../../lib/ui-state";
 import {
     SectionError,
@@ -20,7 +25,6 @@ import { ItemTable } from "../../library/components/card-components";
 import { useFavoritesQuery } from "../queries";
 import { useLibraryQuery } from "../../library/queries";
 import { useSearchDbQuery } from "../../search/queries";
-import { doSearch, FilterResult, SearchHit } from "../../search/search";
 import { hasEditorAccess } from "@backend/features/auth/access-level";
 
 /**
@@ -28,12 +32,10 @@ import { hasEditorAccess } from "@backend/features/auth/access-level";
  * Unlike the normal DocumentList, this list can be searched directly.
  */
 export function FavoritesList(): ReactNode {
-    const uiState = useUiState()[0];
-    const accessData = useAccessData();
+    const { searchQuery, vendorFilters } = useUiState()[0];
 
     const favoritesQuery = useFavoritesQuery();
     const libraryQuery = useLibraryQuery();
-    const searchDbQuery = useSearchDbQuery();
 
     if (libraryQuery.isPending || favoritesQuery.isPending) {
         return <SectionLoading title="Loading favorites..." />;
@@ -53,84 +55,90 @@ export function FavoritesList(): ReactNode {
     }
 
     const insertables = libraryQuery.data.insertables;
+    const favoritesData = favoritesQuery.data;
 
-    const orderedFavorites = favoritesQuery.data.favoriteOrder
-        .map((favoriteId) => favoritesQuery.data.favorites[favoriteId])
-        .filter((favorite) => !!favorite);
+    if (searchQuery) {
+        return (
+            <FavoriteSearchResults
+                query={searchQuery}
+                insertables={insertables}
+                favoritesData={favoritesData}
+            />
+        );
+    }
 
-    const favoriteInsertables = orderedFavorites
+    const favoriteInsertables = favoritesData.favoriteOrder
+        .map((favoriteId) => favoritesData.favorites[favoriteId])
+        .filter((favorite) => !!favorite)
         .map((favorite) => insertables[favorite.insertableId])
         .filter((insertable) => !!insertable);
 
-    let filteredInsertables: InsertableOut[];
-    let filterResult: FilterResult;
-    let searchHits: Record<string, SearchHit> = {};
-    if (uiState.searchQuery) {
-        if (searchDbQuery.isLoading) {
-            return <SectionLoading title="Searching..." />;
-        } else if (searchDbQuery.isError) {
-            return <SectionError title="Failed to load search database." />;
-        } else if (!searchDbQuery.data) {
-            return <SectionError title="The search database is empty." />;
-        }
-        const favoriteInsertableIds = new Set(
-            Object.values(favoritesQuery.data.favorites).map(
-                (f) => f.insertableId
-            )
-        );
-        const searchResults = doSearch(
-            searchDbQuery.data,
-            uiState.searchQuery,
-            {
-                vendors: uiState.vendorFilters,
-                isFavorite: true
-            },
-            favoriteInsertableIds,
-            hasEditorAccess(accessData.currentAccessLevel)
-        );
+    return (
+        <FavoriteCards
+            result={filterInsertables(favoriteInsertables, {
+                vendors: vendorFilters,
+                isVisible: true
+            })}
+            favoritesData={favoritesData}
+        />
+    );
+}
 
-        filteredInsertables = searchResults.hits
-            .map((hit) => insertables[hit.id])
-            .filter((insertable) => !!insertable);
+interface FavoriteSearchResultsProps {
+    query: string;
+    insertables: Insertables;
+    favoritesData: FavoritesData;
+}
 
-        filterResult = searchResults.filtered;
+/** The favorites the query matches, which the search index is what knows. */
+function FavoriteSearchResults(props: FavoriteSearchResultsProps): ReactNode {
+    const { query, insertables, favoritesData } = props;
 
-        searchHits = searchResults.hits.reduce(
-            (acc, hit) => {
-                acc[hit.id] = hit;
-                return acc;
-            },
-            {} as Record<string, SearchHit>
-        );
-    } else {
-        const filterResult2 = filterInsertables(favoriteInsertables, {
-            vendors: uiState.vendorFilters,
-            isVisible: true
-        });
-
-        filteredInsertables = filterResult2.insertables;
-        filterResult = filterResult2.filtered;
-    }
+    const vendorFilters = useUiState()[0].vendorFilters;
+    const accessData = useAccessData();
+    const searchDbQuery = useSearchDbQuery();
 
-    if (filteredInsertables.length === 0) {
-        return (
-            <NoSearchResultError
-                objectLabel="favorite"
-                filtered={filterResult}
-            />
-        );
+    if (searchDbQuery.isLoading) {
+        return <SectionLoading title="Searching..." />;
+    } else if (searchDbQuery.isError) {
+        return <SectionError title="Failed to load search database." />;
+    } else if (!searchDbQuery.data) {
+        return <SectionError title="The search database is empty." />;
     }
 
-    let callout: ReactNode = null;
-    if (filterResult.byGroup > 0 || filterResult.byVendor > 0) {
-        callout = (
-            <SearchCallout objectLabel="favorite" filtered={filterResult} />
+    const result = searchInsertables({
+        searchDb: searchDbQuery.data,
+        insertables,
+        query,
+        filters: { vendors: vendorFilters, isFavorite: true },
+        favoritedInsertableIds: new Set(
+            Object.values(favoritesData.favorites).map((f) => f.insertableId)
+        ),
+        showHidden: hasEditorAccess(accessData.currentAccessLevel)
+    });
+
+    return <FavoriteCards result={result} favoritesData={favoritesData} />;
+}
+
+interface FavoriteCardsProps {
+    result: FilteredInsertables;
+    favoritesData: FavoritesData;
+}
+
+/** The rows themselves, however the list they show was narrowed down. */
+function FavoriteCards(props: FavoriteCardsProps): ReactNode {
+    const { result, favoritesData } = props;
+    const { insertables, filtered, hits } = result;
+
+    if (insertables.length === 0) {
+        return (
+            <NoSearchResultError objectLabel="favorite" filtered={filtered} />
         );
     }
 
-    const cards = filteredInsertables.map((insertable: InsertableOut) => {
+    const cards = insertables.map((insertable) => {
         const favorite = getFavoriteForInsertable(
-            favoritesQuery.data.favorites,
+            favoritesData.favorites,
             insertable.id
         );
         if (!favorite) {
@@ -141,14 +149,14 @@ export function FavoritesList(): ReactNode {
                 key={favorite.id}
                 insertable={insertable}
                 favorite={favorite}
-                searchHit={searchHits[insertable.id]}
+                searchHit={hits[insertable.id]}
             />
         );
     });
 
     return (
         <>
-            {callout}
+            <SearchCallout objectLabel="favorite" filtered={filtered} />
             <ItemTable>{cards}</ItemTable>
         </>
     );
diff --git a/src/frontend/features/search/components/search-results.tsx b/src/frontend/features/search/components/search-results.tsx
index d13249f9..e2074801 100644
--- a/src/frontend/features/search/components/search-results.tsx
+++ b/src/frontend/features/search/components/search-results.tsx
@@ -1,6 +1,7 @@
 import { useAccessData } from "../../auth/access-level";
 import { ReactNode } from "react";
-import { Position, SearchFilters, SearchHit, doSearch } from "../search";
+import { Position, SearchFilters, SearchHit } from "../search";
+import { searchInsertables } from "../filter";
 import { InsertableCard } from "../../library/components/insertable-card";
 import { ItemTable } from "../../library/components/card-components";
 import {
@@ -36,48 +37,37 @@ export function SearchResults(props: SearchResultsProps): ReactNode {
     } else if (!searchDbQuery.data) {
         return <SectionError title="The search database is empty." />;
     }
-    const insertables = libraryQuery.data.insertables;
-    const searchResults = doSearch(
-        searchDbQuery.data,
+    const result = searchInsertables({
+        searchDb: searchDbQuery.data,
+        insertables: libraryQuery.data.insertables,
         query,
         filters,
-        undefined,
-        hasEditorAccess(accessData.currentAccessLevel)
-    );
+        showHidden: hasEditorAccess(accessData.currentAccessLevel)
+    });
 
-    if (searchResults.hits.length === 0) {
+    if (result.insertables.length === 0) {
         return (
             <NoSearchResultError
                 objectLabel="search result"
-                filtered={searchResults.filtered}
+                filtered={result.filtered}
             />
         );
     }
 
-    const callout = (
-        <SearchCallout
-            objectLabel="search result"
-            filtered={searchResults.filtered}
+    const resultCards = result.insertables.map((insertable) => (
+        <InsertableCard
+            key={insertable.id}
+            insertable={insertable}
+            searchHit={result.hits[insertable.id]}
         />
-    );
-    const resultCards = searchResults.hits.map((searchHit: SearchHit) => {
-        const insertableId = searchHit.id;
-        const insertable = insertables[insertableId];
-        if (!insertable) {
-            return null;
-        }
-        return (
-            <InsertableCard
-                key={insertableId}
-                insertable={insertable}
-                searchHit={searchHit}
-            />
-        );
-    });
+    ));
 
     return (
         <>
-            {callout}
+            <SearchCallout
+                objectLabel="search result"
+                filtered={result.filtered}
+            />
             <ItemTable>{resultCards}</ItemTable>
         </>
     );
diff --git a/src/frontend/features/search/filter.ts b/src/frontend/features/search/filter.ts
index cba00973..19d58344 100644
--- a/src/frontend/features/search/filter.ts
+++ b/src/frontend/features/search/filter.ts
@@ -1,6 +1,8 @@
-import { InsertableOut } from "@backend/features/library/contract";
+import MiniSearch from "minisearch";
+import { InsertableOut, Insertables } from "@backend/features/library/contract";
+import { SearchDocument } from "@backend/features/search/search-index";
 import { Vendor } from "@backend/features/library/vendors";
-import { FilterResult } from "./search";
+import { doSearch, FilterResult, SearchFilters, SearchHit } from "./search";
 
 export interface FilterArgs {
     /**
@@ -13,20 +15,20 @@ export interface FilterArgs {
     isVisible?: boolean;
 }
 
-interface VendorFilterResult extends FilterResult {
-    byGroup: 0;
-}
-
 /**
- * A list of insertables which have (possibly) been filtered down.
+ * A list of insertables narrowed down for display, plus what the narrowing
+ * cost. Searching and plain filtering both produce one, so a list renders the
+ * same either way.
  */
 export interface FilteredInsertables {
     insertables: InsertableOut[];
-    filtered: VendorFilterResult;
+    filtered: FilterResult;
+    /** Where the query matched each row, by id; empty when nothing was searched. */
+    hits: Record<string, SearchHit>;
 }
 
 /** Ordered insertables plus the vendor-filtered count. Browsing only: an
- * active search filters through `doSearch` instead. */
+ * active search goes through `searchInsertables` instead. */
 export function filterInsertables(
     insertables: InsertableOut[],
     args: FilterArgs
@@ -51,6 +53,44 @@ export function filterInsertables(
 
     return {
         insertables: filtered,
-        filtered: { byGroup: 0, byVendor: filteredByVendor }
+        filtered: { byGroup: 0, byVendor: filteredByVendor },
+        hits: {}
     };
 }
+
+export interface SearchArgs {
+    searchDb: MiniSearch<SearchDocument>;
+    /** The library's insertables, which hits are resolved against. */
+    insertables: Insertables;
+    query: string;
+    filters?: SearchFilters;
+    /** Required by a `isFavorite` filter, which matches against it. */
+    favoritedInsertableIds?: Set<string>;
+    /** @default false */
+    showHidden?: boolean;
+}
+
+/** The search's hits as insertables, in the order it ranked them. */
+export function searchInsertables(args: SearchArgs): FilteredInsertables {
+    const { hits, filtered } = doSearch(
+        args.searchDb,
+        args.query,
+        args.filters,
+        args.favoritedInsertableIds,
+        args.showHidden
+    );
+
+    const insertables: InsertableOut[] = [];
+    const hitsById: Record<string, SearchHit> = {};
+    for (const hit of hits) {
+        const insertable = args.insertables[hit.id];
+        // The index is built from the library, so a miss means it moved on.
+        if (!insertable) {
+            continue;
+        }
+        insertables.push(insertable);
+        hitsById[hit.id] = hit;
+    }
+
+    return { insertables, filtered, hits: hitsById };
+}
diff --git a/src/frontend/routes/app/library/$libraryId/groups/$groupId.tsx b/src/frontend/routes/app/library/$libraryId/groups/$groupId.tsx
index 106b9810..648904e9 100644
--- a/src/frontend/routes/app/library/$libraryId/groups/$groupId.tsx
+++ b/src/frontend/routes/app/library/$libraryId/groups/$groupId.tsx
@@ -176,12 +176,12 @@ export function GroupListContent(props: GroupListCardsProps): ReactNode {
         );
     }
 
-    const filterResult = filterInsertables(groupInsertables, {
+    const result = filterInsertables(groupInsertables, {
         vendors: uiState.vendorFilters,
         isVisible: !hasEditorAccess(accessData.currentAccessLevel)
     });
 
-    if (filterResult.insertables.length === 0) {
+    if (result.insertables.length === 0) {
         return (
             <SectionError
                 icon={
@@ -197,17 +197,13 @@ export function GroupListContent(props: GroupListCardsProps): ReactNode {
         );
     }
 
-    const insertableCards = filterResult.insertables.map((insertable) => (
+    const insertableCards = result.insertables.map((insertable) => (
         <InsertableCard key={insertable.id} insertable={insertable} />
     ));
 
-    const callout = (
-        <SearchCallout objectLabel="element" filtered={filterResult.filtered} />
-    );
-
     return (
         <>
-            {callout}
+            <SearchCallout objectLabel="element" filtered={result.filtered} />
             <ItemTable>{insertableCards}</ItemTable>
         </>
     );

From 94f49ff128b0bc7d2b264bfec32c0d225d9ae3c6 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 31 Aug 2026 02:08:12 +0000
Subject: [PATCH 06/40] Favorite what is on screen, not the element default

Favoriting from the insert menu or a search result dropped the
configuration in front of the user, so the new favorite came back as the
element's default and had to be edited into the one just picked. The
button and menu item now carry it, canonical, the way the favorite menu
stores it.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018tgfuCHjVFvejjMe7WmEFL
---
 src/backend/features/favorites/routes.ts      |  8 ++++
 .../favorites/components/favorite-button.tsx  | 40 ++++++++++++++++---
 .../insert/components/insert-menu.tsx         |  2 +
 3 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/src/backend/features/favorites/routes.ts b/src/backend/features/favorites/routes.ts
index a03e0725..c8ef676a 100644
--- a/src/backend/features/favorites/routes.ts
+++ b/src/backend/features/favorites/routes.ts
@@ -22,6 +22,11 @@ const addFavoriteQuery = z.object({
     id: z.string().min(1)
 });
 
+/** The configuration the favorite opens with, when it was made from one. */
+const addFavoriteBody = z.object({
+    defaultConfiguration: z.record(z.string(), z.string()).optional()
+});
+
 const favoriteOrderBody = z.object({ favoriteOrder: z.array(z.string()) });
 
 const defaultConfigurationBody = z.object({
@@ -78,10 +83,12 @@ favoriteRoutes.post(
     "/favorites" + libraryRoute(),
     requireSignInMiddleware,
     validate("query", addFavoriteQuery),
+    validate("json", addFavoriteBody),
     async (c) => {
         const libraryId = getLibraryParam(c);
         const userId = await c.var.getUserId();
         const { insertableId, id: favoriteId } = c.req.valid("query");
+        const { defaultConfiguration } = c.req.valid("json");
 
         const db = getDb(c.env.DB);
 
@@ -105,6 +112,7 @@ favoriteRoutes.post(
                 userId,
                 libraryId,
                 insertableId,
+                defaultConfiguration,
                 sortOrder: existingCount.length
             })
             .onConflictDoNothing();
diff --git a/src/frontend/features/favorites/components/favorite-button.tsx b/src/frontend/features/favorites/components/favorite-button.tsx
index b1904292..9d8c0a72 100644
--- a/src/frontend/features/favorites/components/favorite-button.tsx
+++ b/src/frontend/features/favorites/components/favorite-button.tsx
@@ -9,6 +9,7 @@ import type {
     FavoritesData
 } from "@backend/features/favorites/contract";
 import type { InsertableOut } from "@backend/features/library/contract";
+import type { ParameterValues } from "@backend/features/configurations/models";
 import { LibraryId } from "@backend/features/library/library-id";
 import { queryClient } from "../../../lib/query-client";
 import { appError, handleAppError } from "../../../lib/errors";
@@ -30,6 +31,8 @@ interface UpdateFavoritesArgs {
     operation: Operation;
     insertable: InsertableOut;
     favoriteId: string;
+    /** Canonical, as the favorite menu stores it; absent means the default. */
+    defaultConfiguration?: ParameterValues;
 }
 
 function updateFavorites(
@@ -37,10 +40,15 @@ function updateFavorites(
     args: UpdateFavoritesArgs,
     libraryId: LibraryId
 ): FavoritesData | undefined {
-    const { favoriteId } = args;
+    const { favoriteId, defaultConfiguration } = args;
     const insertableId = args.insertable.id;
     if (args.operation === Operation.ADD) {
-        const fav: Favorite = { id: favoriteId, insertableId, libraryId };
+        const fav: Favorite = {
+            id: favoriteId,
+            insertableId,
+            libraryId,
+            defaultConfiguration
+        };
         data.favorites[favoriteId] = fav;
         data.favoriteOrder.push(favoriteId);
     } else {
@@ -70,6 +78,9 @@ function useUpdateFavoritesMutation() {
                     query: {
                         insertableId: args.insertable.id,
                         id: args.favoriteId
+                    },
+                    body: {
+                        defaultConfiguration: args.defaultConfiguration
                     }
                 });
             } else {
@@ -102,6 +113,11 @@ function useUpdateFavoritesMutation() {
 interface FavoriteButtonProps {
     favorite: Favorite | undefined;
     insertable: InsertableOut;
+    /**
+     * The configuration the new favorite opens with: what the caller is
+     * showing, rather than the element's own default.
+     */
+    defaultConfiguration?: ParameterValues;
     /**
      * Sizes the button to sit beside a full-height button rather than in a card row.
      * @default false
@@ -110,7 +126,7 @@ interface FavoriteButtonProps {
 }
 
 export function FavoriteButton(props: FavoriteButtonProps): ReactNode {
-    const { favorite, insertable, large } = props;
+    const { favorite, insertable, defaultConfiguration, large } = props;
     const isFavorite = favorite !== undefined;
 
     const [isHovered, setIsHovered] = useState(false);
@@ -138,7 +154,12 @@ export function FavoriteButton(props: FavoriteButtonProps): ReactNode {
             onClick={(event) => {
                 event.stopPropagation();
                 const favoriteId = favorite?.id ?? crypto.randomUUID();
-                mutation.mutate({ operation, insertable, favoriteId });
+                mutation.mutate({
+                    operation,
+                    insertable,
+                    favoriteId,
+                    defaultConfiguration
+                });
             }}
             title={operation === Operation.ADD ? "Favorite" : "Unfavorite"}
             onMouseEnter={() => setIsHovered(true)}
@@ -152,13 +173,15 @@ export function FavoriteButton(props: FavoriteButtonProps): ReactNode {
 interface FavoriteInsertableItemProps {
     favorite: Favorite | undefined;
     insertable: InsertableOut;
+    /** The configuration the new favorite opens with. */
+    defaultConfiguration?: ParameterValues;
 }
 
 /**
  * A menu item which can be used to favorite or unfavorite an insertable.
  */
 export function FavoriteInsertableItem(props: FavoriteInsertableItemProps) {
-    const { favorite, insertable } = props;
+    const { favorite, insertable, defaultConfiguration } = props;
     const isFavorite = favorite !== undefined;
     const operation = isFavorite ? Operation.REMOVE : Operation.ADD;
     const mutation = useUpdateFavoritesMutation();
@@ -175,7 +198,12 @@ export function FavoriteInsertableItem(props: FavoriteInsertableItemProps) {
             color={operation === Operation.ADD ? undefined : "red"}
             onClick={() => {
                 const favoriteId = favorite?.id ?? crypto.randomUUID();
-                mutation.mutate({ operation, insertable, favoriteId });
+                mutation.mutate({
+                    operation,
+                    insertable,
+                    favoriteId,
+                    defaultConfiguration
+                });
             }}
         >
             {operation === Operation.ADD ? "Favorite" : "Unfavorite"}
diff --git a/src/frontend/features/insert/components/insert-menu.tsx b/src/frontend/features/insert/components/insert-menu.tsx
index ff5cb009..5176d03f 100644
--- a/src/frontend/features/insert/components/insert-menu.tsx
+++ b/src/frontend/features/insert/components/insert-menu.tsx
@@ -135,6 +135,7 @@ export function InsertMenuContent(props: InsertMenuContentProps): ReactNode {
                         <FavoriteButton
                             favorite={favorite}
                             insertable={insertable}
+                            defaultConfiguration={canonicalConfiguration}
                             large
                         />
                     </RequireSignIn>
@@ -144,6 +145,7 @@ export function InsertMenuContent(props: InsertMenuContentProps): ReactNode {
                             insertable={insertable}
                             inInsertMenu
                             configuration={configuration}
+                            canonicalConfiguration={canonicalConfiguration}
                         />
                     </MenuButton>
                 </Group>

From eafd27af61fdcb8e4d90fbb36e80250296c7a8bc Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 31 Aug 2026 02:10:34 +0000
Subject: [PATCH 07/40] Let a standalone caller sign out

The app could only be signed in to: standalone there was no way to leave,
short of clearing cookies. Sign-out drops the session and the access
level resolved from it, then lands the caller back where they stood. Only
offered outside Onshape, whose panel session is Onshape's to end.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018tgfuCHjVFvejjMe7WmEFL
---
 src/backend/features/auth/caller.ts           |  5 +-
 src/backend/features/auth/routes.test.ts      | 55 +++++++++++++++++++
 src/backend/features/auth/routes.ts           | 18 ++++++
 src/backend/features/auth/session.ts          | 27 ++++++++-
 src/frontend/features/auth/sign-out.ts        | 10 ++++
 .../settings/components/settings-menu.tsx     | 28 +++++++++-
 6 files changed, 135 insertions(+), 8 deletions(-)
 create mode 100644 src/frontend/features/auth/sign-out.ts

diff --git a/src/backend/features/auth/caller.ts b/src/backend/features/auth/caller.ts
index 4ff2fc15..014be8c6 100644
--- a/src/backend/features/auth/caller.ts
+++ b/src/backend/features/auth/caller.ts
@@ -17,6 +17,7 @@ import {
     TOKEN_ENDPOINT
 } from "./onshape-oauth";
 import {
+    accessLevelKey,
     getSession,
     getSessionCompanyId,
     getSessionId,
@@ -132,10 +133,6 @@ export async function isSignedIn(c: AppContext): Promise<boolean> {
     return signedIn;
 }
 
-function accessLevelKey(sessionId: string): string {
-    return `access-level:${sessionId}`;
-}
-
 /** Returns the caller's access level, memoized in KV by session. */
 export async function getCachedAccessLevel(
     c: AppContext
diff --git a/src/backend/features/auth/routes.test.ts b/src/backend/features/auth/routes.test.ts
index 57cdcdfb..a1823291 100644
--- a/src/backend/features/auth/routes.test.ts
+++ b/src/backend/features/auth/routes.test.ts
@@ -46,3 +46,58 @@ describe("GET /access-data", () => {
         });
     });
 });
+
+describe("GET /auth/sign-out", () => {
+    const SESSION_COOKIE = "frc-design-app-cookie";
+
+    /** A signed-in session, as the OAuth callback would have left it. */
+    async function seedSession(sessionId: string) {
+        await env.KV.put(
+            `tokens:${sessionId}`,
+            JSON.stringify({
+                accessToken: "a",
+                refreshToken: "r",
+                expiresAt: Date.now() + 10000
+            })
+        );
+        await env.KV.put(`access-level:${sessionId}`, AccessLevel.ADMIN);
+    }
+
+    function signOut(redirectUrl: string, sessionId?: string) {
+        return createTestApp().request(
+            `/auth/sign-out?redirectUrl=${encodeURIComponent(redirectUrl)}`,
+            {
+                method: "GET",
+                headers: sessionId
+                    ? { Cookie: `${SESSION_COOKIE}=${sessionId}` }
+                    : {},
+                redirect: "manual"
+            },
+            env
+        );
+    }
+
+    it("drops the session and everything keyed to it", async () => {
+        await seedSession("session-1");
+
+        const res = await signOut("/app/library/frc-design-lib", "session-1");
+
+        expect(res.status).toBe(302);
+        expect(res.headers.get("Location")).toBe("/app/library/frc-design-lib");
+        expect(await env.KV.get("tokens:session-1")).toBeNull();
+        expect(await env.KV.get("access-level:session-1")).toBeNull();
+        expect(res.headers.get("Set-Cookie")).toContain(`${SESSION_COOKIE}=;`);
+    });
+
+    it("lands home rather than forwarding the caller offsite", async () => {
+        for (const redirectUrl of ["https://example.com", "//example.com"]) {
+            const res = await signOut(redirectUrl);
+            expect(res.headers.get("Location")).toBe("/");
+        }
+    });
+
+    it("signs out a caller who has no session to lose", async () => {
+        const res = await signOut("/app");
+        expect(res.status).toBe(302);
+    });
+});
diff --git a/src/backend/features/auth/routes.ts b/src/backend/features/auth/routes.ts
index f9e1f5bf..d4cb7a8b 100644
--- a/src/backend/features/auth/routes.ts
+++ b/src/backend/features/auth/routes.ts
@@ -5,6 +5,7 @@ import { cacheMiddleware } from "../../lib/cache";
 import { type AccessData } from "./access-level";
 import { isSignedIn } from "./caller";
 import { doCallback, doSignIn } from "./onshape-oauth";
+import { endSession } from "./session";
 
 /** The OAuth redirects, mounted at /auth. */
 export const authRoutes = getApp();
@@ -44,6 +45,23 @@ authRoutes.get("/sign-in", async (c) => {
     return c.redirect(authorizationUrl);
 });
 
+/**
+ * Standalone only: inside Onshape the panel's session is Onshape's to end.
+ * Where the caller lands is theirs to say, as long as it is this app.
+ */
+authRoutes.get("/sign-out", async (c) => {
+    await endSession(c);
+    return c.redirect(getLocalRedirect(c.req.query("redirectUrl")));
+});
+
+/** A path within the app, so the parameter cannot forward a caller offsite. */
+function getLocalRedirect(redirectUrl: string | undefined): string {
+    if (!redirectUrl?.startsWith("/") || redirectUrl.startsWith("//")) {
+        return "/";
+    }
+    return redirectUrl;
+}
+
 authRoutes.get("/callback", async (c) => {
     return doCallback(c);
 });
diff --git a/src/backend/features/auth/session.ts b/src/backend/features/auth/session.ts
index f88f9afe..46eaf1d0 100644
--- a/src/backend/features/auth/session.ts
+++ b/src/backend/features/auth/session.ts
@@ -1,7 +1,7 @@
 /** Session cookie plus the KV records it keys: the session and login state. */
 import { HttpStatus } from "http-status-ts";
 import { internalError } from "../../lib/api-error";
-import { getCookie, setCookie } from "hono/cookie";
+import { deleteCookie, getCookie, setCookie } from "hono/cookie";
 import { type AppContext } from "../../lib/context";
 
 const SESSION_COOKIE = "frc-design-app-cookie";
@@ -40,6 +40,31 @@ function sessionKey(sessionId: string): string {
     return `tokens:${sessionId}`;
 }
 
+/** Keyed by session, so it is dropped along with one. */
+export function accessLevelKey(sessionId: string): string {
+    return `access-level:${sessionId}`;
+}
+
+/**
+ * Signs the caller out: the tokens and what was resolved from them go, and the
+ * cookie with them, so the next request is simply a stranger's.
+ */
+export async function endSession(c: AppContext): Promise<void> {
+    const sessionId = getCookie(c, SESSION_COOKIE);
+    if (sessionId) {
+        await Promise.all([
+            c.env.KV.delete(sessionKey(sessionId)),
+            c.env.KV.delete(accessLevelKey(sessionId))
+        ]);
+    }
+    // Matched to how it was set, or the browser keeps the cookie.
+    deleteCookie(c, SESSION_COOKIE, {
+        path: "/",
+        secure: true,
+        sameSite: "None"
+    });
+}
+
 export async function saveSession(
     kv: KVNamespace,
     sessionId: string,
diff --git a/src/frontend/features/auth/sign-out.ts b/src/frontend/features/auth/sign-out.ts
new file mode 100644
index 00000000..a7b77318
--- /dev/null
+++ b/src/frontend/features/auth/sign-out.ts
@@ -0,0 +1,10 @@
+/**
+ * Ends the app's own session and reloads where the caller stands, which is what
+ * makes the next load fetch access data as a signed-out one.
+ */
+export function startSignOut(): void {
+    const url = new URL(window.location.href);
+    const redirectUrl = url.pathname + url.search;
+    window.location.href =
+        "/auth/sign-out?redirectUrl=" + encodeURIComponent(redirectUrl);
+}
diff --git a/src/frontend/features/settings/components/settings-menu.tsx b/src/frontend/features/settings/components/settings-menu.tsx
index 8e8ca187..2c191882 100644
--- a/src/frontend/features/settings/components/settings-menu.tsx
+++ b/src/frontend/features/settings/components/settings-menu.tsx
@@ -1,7 +1,8 @@
 import { useNavigate, useRouterState } from "@tanstack/react-router";
 import { DEFAULT_SETTINGS } from "@backend/features/settings/settings";
-import { Divider, Group, Text, Title } from "@mantine/core";
-import { FontWeight } from "../../../lib/style-constants";
+import { Button, Divider, Group, Text, Title } from "@mantine/core";
+import { SignOutIcon } from "@phosphor-icons/react";
+import { FontWeight, IconSize } from "../../../lib/style-constants";
 import { Dispatch, ReactNode, useMemo } from "react";
 import { Theme } from "@backend/features/settings/settings";
 import { hasEditorAccess } from "@backend/features/auth/access-level";
@@ -10,7 +11,12 @@ import { AccessLevel } from "@backend/features/auth/access-level";
 import { LibraryId } from "@backend/features/library/library-id";
 import { useSaveSettings } from "../settings";
 import { OpenUrlButton } from "../../../components/open-url-button";
-import { RequireAccessLevel, useAccessData } from "../../auth/access-level";
+import {
+    RequireAccessLevel,
+    RequireSignIn,
+    useAccessData
+} from "../../auth/access-level";
+import { startSignOut } from "../../auth/sign-out";
 import { useUiState } from "../../../lib/ui-state";
 import { FEEDBACK_FORM_URL } from "../../../lib/url";
 import { useIsConnectedToOnshape } from "../../../lib/onshape-params";
@@ -103,6 +109,22 @@ function UserSettings(): ReactNode {
             <SettingRow label="Submit feedback">
                 <OpenUrlButton text="Open form" url={FEEDBACK_FORM_URL} />
             </SettingRow>
+            {/* Onshape owns the session the panel runs in, so signing out is
+                only the standalone app's to offer. */}
+            {!isConnected && (
+                <RequireSignIn>
+                    <SettingRow label="Onshape account">
+                        <Button
+                            leftSection={<SignOutIcon size={IconSize.SMALL} />}
+                            variant="light"
+                            color="red"
+                            onClick={startSignOut}
+                        >
+                            Sign out
+                        </Button>
+                    </SettingRow>
+                </RequireSignIn>
+            )}
         </>
     );
 }

From c43d515bbdaded61d31ee2b4ffbbc752405ed876 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 31 Aug 2026 02:17:16 +0000
Subject: [PATCH 08/40] Hold FTCDesignLib behind a coming soon page

The tab stays, so the library is announced, but selecting it lands on a
zero state instead of an empty library: its groups, favorites and search
all render inside the route, so gating there covers them at once, and
the loader stops fetching what nothing will show. The search row goes
with them, having nothing left to search.

Also says why the group-restore latch is there, which a reviewer had to
ask: without it, leaving a group redirects straight back into it.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018tgfuCHjVFvejjMe7WmEFL
---
 src/frontend/components/app-navbar.tsx        | 19 +++++++---
 src/frontend/components/app-zero-state.tsx    | 12 +++++++
 .../library/components/coming-soon.tsx        | 24 +++++++++++++
 src/frontend/features/library/library-path.ts |  7 +++-
 .../routes/app/library/$libraryId/route.tsx   | 36 +++++++++++++++++--
 5 files changed, 89 insertions(+), 9 deletions(-)
 create mode 100644 src/frontend/features/library/components/coming-soon.tsx

diff --git a/src/frontend/components/app-navbar.tsx b/src/frontend/components/app-navbar.tsx
index 70509936..a43f0421 100644
--- a/src/frontend/components/app-navbar.tsx
+++ b/src/frontend/components/app-navbar.tsx
@@ -24,7 +24,11 @@ import frcDesignBook from "/frc-design-book.svg";
 import { openSettingsMenu } from "../features/settings/open-settings-menu";
 import { VendorMenu } from "../features/settings/components/vendor-filters";
 import { useUiState } from "../lib/ui-state";
-import { getLibraryName, useLibraryId } from "../features/library/library-path";
+import {
+    getLibraryName,
+    isComingSoon,
+    useLibraryId
+} from "../features/library/library-path";
 import { RequireAccessLevel } from "../features/auth/access-level";
 import { useSaveSettings } from "../features/settings/settings";
 import { useAccessData } from "../features/auth/access-level";
@@ -39,6 +43,9 @@ import { getLibraryVersionQuery } from "../features/library/queries";
  * brand and settings alongside, over a row holding search and its filters.
  */
 export function AppNavbar(): ReactNode {
+    // Nothing to search until the library opens.
+    const showSearch = !isComingSoon(useLibraryId());
+
     return (
         <Stack gap={0}>
             {/* Stretched so the tabs run the full height and their underline
@@ -59,10 +66,12 @@ export function AppNavbar(): ReactNode {
                     <SettingsButton />
                 </Group>
             </Group>
-            <Group gap="xs" p="sm" wrap="nowrap">
-                <SearchBar />
-                <VendorMenu />
-            </Group>
+            {showSearch && (
+                <Group gap="xs" p="sm" wrap="nowrap">
+                    <SearchBar />
+                    <VendorMenu />
+                </Group>
+            )}
         </Stack>
     );
 }
diff --git a/src/frontend/components/app-zero-state.tsx b/src/frontend/components/app-zero-state.tsx
index 5e1a2552..ca7155e1 100644
--- a/src/frontend/components/app-zero-state.tsx
+++ b/src/frontend/components/app-zero-state.tsx
@@ -93,6 +93,18 @@ export function SectionError(props: ErrorProps): ReactNode {
     );
 }
 
+interface PageMessageProps extends ZeroStateProps {
+    /** Pass true to keep the message closer to the top of the page. */
+    justifyUp?: boolean;
+}
+
+/** A page-level zero state that is not an error, so it carries no fallback. */
+export function PageMessage(props: PageMessageProps): ReactNode {
+    const { justifyUp, ...zeroState } = props;
+    const message = <ZeroState {...zeroState} />;
+    return justifyUp ? message : <Center mih="80vh">{message}</Center>;
+}
+
 interface PageErrorProps extends ErrorProps {
     /**
      * Pass in true to keep the error closer to the top of the page.
diff --git a/src/frontend/features/library/components/coming-soon.tsx b/src/frontend/features/library/components/coming-soon.tsx
new file mode 100644
index 00000000..8c884fb2
--- /dev/null
+++ b/src/frontend/features/library/components/coming-soon.tsx
@@ -0,0 +1,24 @@
+import { Box } from "@mantine/core";
+import { HammerIcon } from "@phosphor-icons/react";
+import { ReactNode } from "react";
+import { IconSize, PrimaryColor } from "../../../lib/style-constants";
+import { PageMessage } from "../../../components/app-zero-state";
+import { getLibraryName, useLibraryId } from "../library-path";
+
+/** Stands in for a library that is announced but has nothing to show yet. */
+export function ComingSoon(): ReactNode {
+    const libraryId = useLibraryId();
+    return (
+        <PageMessage
+            icon={
+                <Box
+                    component={HammerIcon}
+                    size={IconSize.PAGE}
+                    c={PrimaryColor.FILLED}
+                />
+            }
+            title={`${getLibraryName(libraryId)} is coming soon`}
+            description="It is still being put together. Check back soon!"
+        />
+    );
+}
diff --git a/src/frontend/features/library/library-path.ts b/src/frontend/features/library/library-path.ts
index ee4082d1..6cfd80f5 100644
--- a/src/frontend/features/library/library-path.ts
+++ b/src/frontend/features/library/library-path.ts
@@ -45,11 +45,16 @@ export function getLibraryName(libraryId: string): string {
     throw new Error("Unknown library: " + libraryId);
 }
 
+/** Announced, but with nothing to show yet. */
+export function isComingSoon(libraryId: string): boolean {
+    return libraryId === LibraryId.FTC_DESIGN_LIB;
+}
+
 /** Where a library is in its life; undefined once it is simply supported. */
 export function getLibraryStatus(libraryId: string): string | undefined {
     switch (libraryId) {
         case LibraryId.FTC_DESIGN_LIB:
-            return "Beta";
+            return "Coming soon";
         case LibraryId.MKCAD:
             return "Deprecated";
     }
diff --git a/src/frontend/routes/app/library/$libraryId/route.tsx b/src/frontend/routes/app/library/$libraryId/route.tsx
index 1dcbdca5..a355bcf4 100644
--- a/src/frontend/routes/app/library/$libraryId/route.tsx
+++ b/src/frontend/routes/app/library/$libraryId/route.tsx
@@ -1,4 +1,10 @@
-import { createFileRoute, notFound, redirect } from "@tanstack/react-router";
+import {
+    createFileRoute,
+    notFound,
+    Outlet,
+    redirect
+} from "@tanstack/react-router";
+import { ReactNode } from "react";
 import { queryClient } from "../../../../lib/query-client";
 import { getFavoritesQuery } from "../../../../features/favorites/queries";
 import {
@@ -8,12 +14,22 @@ import {
 import { getSearchDbQuery } from "../../../../features/search/queries";
 import { LibraryId } from "@backend/features/library/library-id";
 import { getUiState } from "../../../../lib/ui-state";
-import { isLibraryId } from "../../../../features/library/library-path";
+import {
+    isComingSoon,
+    isLibraryId,
+    useLibraryId
+} from "../../../../features/library/library-path";
+import { ComingSoon } from "../../../../features/library/components/coming-soon";
 
-/** Restoring the last group is an entry behavior, so it happens once per load. */
+/**
+ * Restoring the last group is an entry behavior, so it happens once per load.
+ * The latch is what ends it: leaving a group navigates here, which runs this
+ * again while `openGroupId` still names the group, and redirects straight back.
+ */
 let restoredGroup = false;
 
 export const Route = createFileRoute("/app/library/$libraryId")({
+    component: LibraryRoute,
     params: {
         // Narrowed by beforeLoad, which 404s an unknown library.
         parse: ({ libraryId }) => ({ libraryId: libraryId as LibraryId }),
@@ -25,6 +41,11 @@ export const Route = createFileRoute("/app/library/$libraryId")({
         if (!isLibraryId(params.libraryId)) {
             throw notFound();
         }
+        // A coming-soon library has no group to land in.
+        if (isComingSoon(params.libraryId)) {
+            restoredGroup = true;
+            return;
+        }
         // Client state, so the entry redirect can't restore it.
         const { openGroupId } = getUiState();
         if (openGroupId && !restoredGroup) {
@@ -38,6 +59,10 @@ export const Route = createFileRoute("/app/library/$libraryId")({
     },
     loader: async ({ params }) => {
         const { libraryId } = params;
+        // Nothing below is rendered, so nothing below is worth fetching.
+        if (isComingSoon(libraryId)) {
+            return;
+        }
         // The only awaited fetch: everything below keys its url off the version.
         const cacheVersion = await queryClient.ensureQueryData(
             getLibraryVersionQuery(libraryId)
@@ -51,3 +76,8 @@ export const Route = createFileRoute("/app/library/$libraryId")({
         void queryClient.prefetchQuery(getFavoritesQuery(libraryId));
     }
 });
+
+/** One gate for the whole library: its groups and search render inside it. */
+function LibraryRoute(): ReactNode {
+    return isComingSoon(useLibraryId()) ? <ComingSoon /> : <Outlet />;
+}

From e00642e6e0d565a52cadd4f4934564d7ee4d0d8a Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 31 Aug 2026 03:25:29 +0000
Subject: [PATCH 09/40] Resume in the last group from user data, not a client
 latch

Where a caller left off was client state, so the entry redirect could
not see it and the app had to bounce itself into the group after
loading, guarded by a module-level latch against redirecting straight
back out. The group now sits in the user row beside the library it
belongs to, and entry computes the whole landing url in one query: the
join is also the check, so a deleted group, or one left behind by a
library switch, lands in the library instead.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018tgfuCHjVFvejjMe7WmEFL
---
 drizzle/0007_resume_group.sql                 |   9 +
 drizzle/meta/0007_snapshot.json               | 510 ++++++++++++++++++
 drizzle/meta/_journal.json                    | 115 ++--
 src/backend/db/schema.ts                      |   5 +-
 src/backend/features/entry/routes.test.ts     |  46 ++
 src/backend/features/entry/routes.ts          |  23 +-
 src/backend/features/settings/routes.test.ts  |  21 +
 src/backend/features/settings/routes.ts       |   4 +-
 src/backend/features/settings/settings.ts     |   5 +-
 .../features/settings/local-settings.ts       |  10 +-
 src/frontend/features/settings/settings.ts    |  38 +-
 src/frontend/lib/ui-state.ts                  |   1 -
 .../library/$libraryId/groups/$groupId.tsx    |   5 +-
 .../routes/app/library/$libraryId/index.tsx   |   6 +-
 .../routes/app/library/$libraryId/route.tsx   |  30 +-
 src/frontend/routes/index.tsx                 |   9 +-
 16 files changed, 723 insertions(+), 114 deletions(-)
 create mode 100644 drizzle/0007_resume_group.sql
 create mode 100644 drizzle/meta/0007_snapshot.json

diff --git a/drizzle/0007_resume_group.sql b/drizzle/0007_resume_group.sql
new file mode 100644
index 00000000..8c2dd9bf
--- /dev/null
+++ b/drizzle/0007_resume_group.sql
@@ -0,0 +1,9 @@
+/*
+ Where a caller resumes moves from the browser to their user row, beside the
+ library it belongs to, so the entry redirect can compute the whole landing url
+ rather than the app bouncing itself into the group after it loads.
+
+ Starts null, which is the library itself: nobody's last group is known until
+ they open one.
+*/
+ALTER TABLE `users` ADD `group_id` text;
diff --git a/drizzle/meta/0007_snapshot.json b/drizzle/meta/0007_snapshot.json
new file mode 100644
index 00000000..6e6d47e7
--- /dev/null
+++ b/drizzle/meta/0007_snapshot.json
@@ -0,0 +1,510 @@
+{
+    "version": "6",
+    "dialect": "sqlite",
+    "id": "7f0e79d4-3077-4a1f-aeab-4d98a104be46",
+    "prevId": "2416035c-6b28-4014-a7b3-bdc33f803962",
+    "tables": {
+        "configurations": {
+            "name": "configurations",
+            "columns": {
+                "id": {
+                    "name": "id",
+                    "type": "text",
+                    "primaryKey": true,
+                    "notNull": true,
+                    "autoincrement": false
+                },
+                "parameters": {
+                    "name": "parameters",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false,
+                    "default": "'[]'"
+                },
+                "records": {
+                    "name": "records",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false,
+                    "default": "'[]'"
+                },
+                "build_issues": {
+                    "name": "build_issues",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false,
+                    "default": "'[]'"
+                }
+            },
+            "indexes": {},
+            "foreignKeys": {
+                "configurations_id_insertables_id_fk": {
+                    "name": "configurations_id_insertables_id_fk",
+                    "tableFrom": "configurations",
+                    "tableTo": "insertables",
+                    "columnsFrom": ["id"],
+                    "columnsTo": ["id"],
+                    "onDelete": "cascade",
+                    "onUpdate": "no action"
+                }
+            },
+            "compositePrimaryKeys": {},
+            "uniqueConstraints": {},
+            "checkConstraints": {}
+        },
+        "favorites": {
+            "name": "favorites",
+            "columns": {
+                "id": {
+                    "name": "id",
+                    "type": "text",
+                    "primaryKey": true,
+                    "notNull": true,
+                    "autoincrement": false
+                },
+                "user_id": {
+                    "name": "user_id",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false
+                },
+                "library_id": {
+                    "name": "library_id",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false
+                },
+                "insertable_id": {
+                    "name": "insertable_id",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false
+                },
+                "default_configuration": {
+                    "name": "default_configuration",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": false,
+                    "autoincrement": false
+                },
+                "sort_order": {
+                    "name": "sort_order",
+                    "type": "integer",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false,
+                    "default": 0
+                }
+            },
+            "indexes": {
+                "favorites_user_id_library_id_insertable_id_unique": {
+                    "name": "favorites_user_id_library_id_insertable_id_unique",
+                    "columns": ["user_id", "library_id", "insertable_id"],
+                    "isUnique": true
+                }
+            },
+            "foreignKeys": {
+                "favorites_user_id_users_id_fk": {
+                    "name": "favorites_user_id_users_id_fk",
+                    "tableFrom": "favorites",
+                    "tableTo": "users",
+                    "columnsFrom": ["user_id"],
+                    "columnsTo": ["id"],
+                    "onDelete": "no action",
+                    "onUpdate": "no action"
+                },
+                "favorites_library_id_libraries_id_fk": {
+                    "name": "favorites_library_id_libraries_id_fk",
+                    "tableFrom": "favorites",
+                    "tableTo": "libraries",
+                    "columnsFrom": ["library_id"],
+                    "columnsTo": ["id"],
+                    "onDelete": "no action",
+                    "onUpdate": "no action"
+                },
+                "favorites_insertable_id_insertables_id_fk": {
+                    "name": "favorites_insertable_id_insertables_id_fk",
+                    "tableFrom": "favorites",
+                    "tableTo": "insertables",
+                    "columnsFrom": ["insertable_id"],
+                    "columnsTo": ["id"],
+                    "onDelete": "cascade",
+                    "onUpdate": "no action"
+                }
+            },
+            "compositePrimaryKeys": {},
+            "uniqueConstraints": {},
+            "checkConstraints": {}
+        },
+        "groups": {
+            "name": "groups",
+            "columns": {
+                "id": {
+                    "name": "id",
+                    "type": "text",
+                    "primaryKey": true,
+                    "notNull": true,
+                    "autoincrement": false
+                },
+                "library_id": {
+                    "name": "library_id",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false
+                },
+                "name": {
+                    "name": "name",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false
+                },
+                "document_id": {
+                    "name": "document_id",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false
+                },
+                "version_id": {
+                    "name": "version_id",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false
+                },
+                "sort_alphabetically": {
+                    "name": "sort_alphabetically",
+                    "type": "integer",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false,
+                    "default": false
+                },
+                "sort_order": {
+                    "name": "sort_order",
+                    "type": "integer",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false,
+                    "default": 0
+                },
+                "small_thumbnail_url": {
+                    "name": "small_thumbnail_url",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": false,
+                    "autoincrement": false
+                },
+                "large_thumbnail_url": {
+                    "name": "large_thumbnail_url",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": false,
+                    "autoincrement": false
+                },
+                "build_issues": {
+                    "name": "build_issues",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false,
+                    "default": "'[]'"
+                },
+                "last_loaded_at": {
+                    "name": "last_loaded_at",
+                    "type": "integer",
+                    "primaryKey": false,
+                    "notNull": false,
+                    "autoincrement": false
+                }
+            },
+            "indexes": {
+                "groups_document_id_library_id_unique": {
+                    "name": "groups_document_id_library_id_unique",
+                    "columns": ["document_id", "library_id"],
+                    "isUnique": true
+                }
+            },
+            "foreignKeys": {
+                "groups_library_id_libraries_id_fk": {
+                    "name": "groups_library_id_libraries_id_fk",
+                    "tableFrom": "groups",
+                    "tableTo": "libraries",
+                    "columnsFrom": ["library_id"],
+                    "columnsTo": ["id"],
+                    "onDelete": "no action",
+                    "onUpdate": "no action"
+                }
+            },
+            "compositePrimaryKeys": {},
+            "uniqueConstraints": {},
+            "checkConstraints": {}
+        },
+        "insertables": {
+            "name": "insertables",
+            "columns": {
+                "id": {
+                    "name": "id",
+                    "type": "text",
+                    "primaryKey": true,
+                    "notNull": true,
+                    "autoincrement": false
+                },
+                "element_id": {
+                    "name": "element_id",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false
+                },
+                "group_id": {
+                    "name": "group_id",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false
+                },
+                "document_id": {
+                    "name": "document_id",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false
+                },
+                "library_id": {
+                    "name": "library_id",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false
+                },
+                "name": {
+                    "name": "name",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false
+                },
+                "element_type": {
+                    "name": "element_type",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false
+                },
+                "microversion_id": {
+                    "name": "microversion_id",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false
+                },
+                "is_visible": {
+                    "name": "is_visible",
+                    "type": "integer",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false,
+                    "default": false
+                },
+                "is_open_composite": {
+                    "name": "is_open_composite",
+                    "type": "integer",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false,
+                    "default": false
+                },
+                "supports_fasten": {
+                    "name": "supports_fasten",
+                    "type": "integer",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false,
+                    "default": false
+                },
+                "index_configurations": {
+                    "name": "index_configurations",
+                    "type": "integer",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false,
+                    "default": false
+                },
+                "version_id": {
+                    "name": "version_id",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false
+                },
+                "sort_order": {
+                    "name": "sort_order",
+                    "type": "integer",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false,
+                    "default": 0
+                },
+                "vendors": {
+                    "name": "vendors",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false,
+                    "default": "'[]'"
+                },
+                "small_thumbnail_url": {
+                    "name": "small_thumbnail_url",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": false,
+                    "autoincrement": false
+                },
+                "large_thumbnail_url": {
+                    "name": "large_thumbnail_url",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": false,
+                    "autoincrement": false
+                },
+                "fasten_info": {
+                    "name": "fasten_info",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": false,
+                    "autoincrement": false
+                },
+                "part_data": {
+                    "name": "part_data",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": false,
+                    "autoincrement": false
+                },
+                "build_issues": {
+                    "name": "build_issues",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false,
+                    "default": "'[]'"
+                },
+                "last_loaded_at": {
+                    "name": "last_loaded_at",
+                    "type": "integer",
+                    "primaryKey": false,
+                    "notNull": false,
+                    "autoincrement": false
+                }
+            },
+            "indexes": {},
+            "foreignKeys": {
+                "insertables_group_id_groups_id_fk": {
+                    "name": "insertables_group_id_groups_id_fk",
+                    "tableFrom": "insertables",
+                    "tableTo": "groups",
+                    "columnsFrom": ["group_id"],
+                    "columnsTo": ["id"],
+                    "onDelete": "cascade",
+                    "onUpdate": "no action"
+                },
+                "insertables_library_id_libraries_id_fk": {
+                    "name": "insertables_library_id_libraries_id_fk",
+                    "tableFrom": "insertables",
+                    "tableTo": "libraries",
+                    "columnsFrom": ["library_id"],
+                    "columnsTo": ["id"],
+                    "onDelete": "no action",
+                    "onUpdate": "no action"
+                }
+            },
+            "compositePrimaryKeys": {},
+            "uniqueConstraints": {},
+            "checkConstraints": {}
+        },
+        "libraries": {
+            "name": "libraries",
+            "columns": {
+                "id": {
+                    "name": "id",
+                    "type": "text",
+                    "primaryKey": true,
+                    "notNull": true,
+                    "autoincrement": false
+                },
+                "cache_version": {
+                    "name": "cache_version",
+                    "type": "integer",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false,
+                    "default": 0
+                }
+            },
+            "indexes": {},
+            "foreignKeys": {},
+            "compositePrimaryKeys": {},
+            "uniqueConstraints": {},
+            "checkConstraints": {}
+        },
+        "users": {
+            "name": "users",
+            "columns": {
+                "id": {
+                    "name": "id",
+                    "type": "text",
+                    "primaryKey": true,
+                    "notNull": true,
+                    "autoincrement": false
+                },
+                "theme": {
+                    "name": "theme",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false,
+                    "default": "'system'"
+                },
+                "library_id": {
+                    "name": "library_id",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false,
+                    "default": "'frc-design-lib'"
+                },
+                "group_id": {
+                    "name": "group_id",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": false,
+                    "autoincrement": false
+                }
+            },
+            "indexes": {},
+            "foreignKeys": {},
+            "compositePrimaryKeys": {},
+            "uniqueConstraints": {},
+            "checkConstraints": {}
+        }
+    },
+    "views": {},
+    "enums": {},
+    "_meta": {
+        "schemas": {},
+        "tables": {},
+        "columns": {}
+    },
+    "internal": {
+        "indexes": {}
+    }
+}
diff --git a/drizzle/meta/_journal.json b/drizzle/meta/_journal.json
index 391bafad..6164e539 100644
--- a/drizzle/meta/_journal.json
+++ b/drizzle/meta/_journal.json
@@ -1,55 +1,62 @@
 {
-  "version": "7",
-  "dialect": "sqlite",
-  "entries": [
-    {
-      "idx": 0,
-      "version": "6",
-      "when": 1785982272297,
-      "tag": "0000_init",
-      "breakpoints": true
-    },
-    {
-      "idx": 1,
-      "version": "6",
-      "when": 1786201159430,
-      "tag": "0001_sad_arclight",
-      "breakpoints": true
-    },
-    {
-      "idx": 2,
-      "version": "6",
-      "when": 1786201159431,
-      "tag": "0002_configuration_records",
-      "breakpoints": true
-    },
-    {
-      "idx": 3,
-      "version": "6",
-      "when": 1786511719906,
-      "tag": "0003_drop_search_db",
-      "breakpoints": true
-    },
-    {
-      "idx": 4,
-      "version": "6",
-      "when": 1786511719907,
-      "tag": "0004_explicit_thumbnail_urls",
-      "breakpoints": true
-    },
-    {
-      "idx": 5,
-      "version": "6",
-      "when": 1786511719908,
-      "tag": "0005_index_configurations",
-      "breakpoints": true
-    },
-    {
-      "idx": 6,
-      "version": "6",
-      "when": 1787265951428,
-      "tag": "0006_split_part_data",
-      "breakpoints": true
-    }
-  ]
-}
\ No newline at end of file
+    "version": "7",
+    "dialect": "sqlite",
+    "entries": [
+        {
+            "idx": 0,
+            "version": "6",
+            "when": 1785982272297,
+            "tag": "0000_init",
+            "breakpoints": true
+        },
+        {
+            "idx": 1,
+            "version": "6",
+            "when": 1786201159430,
+            "tag": "0001_sad_arclight",
+            "breakpoints": true
+        },
+        {
+            "idx": 2,
+            "version": "6",
+            "when": 1786201159431,
+            "tag": "0002_configuration_records",
+            "breakpoints": true
+        },
+        {
+            "idx": 3,
+            "version": "6",
+            "when": 1786511719906,
+            "tag": "0003_drop_search_db",
+            "breakpoints": true
+        },
+        {
+            "idx": 4,
+            "version": "6",
+            "when": 1786511719907,
+            "tag": "0004_explicit_thumbnail_urls",
+            "breakpoints": true
+        },
+        {
+            "idx": 5,
+            "version": "6",
+            "when": 1786511719908,
+            "tag": "0005_index_configurations",
+            "breakpoints": true
+        },
+        {
+            "idx": 6,
+            "version": "6",
+            "when": 1787265951428,
+            "tag": "0006_split_part_data",
+            "breakpoints": true
+        },
+        {
+            "idx": 7,
+            "version": "6",
+            "when": 1787265951429,
+            "tag": "0007_resume_group",
+            "breakpoints": true
+        }
+    ]
+}
diff --git a/src/backend/db/schema.ts b/src/backend/db/schema.ts
index 46d6e0ee..851eb6e6 100644
--- a/src/backend/db/schema.ts
+++ b/src/backend/db/schema.ts
@@ -145,7 +145,10 @@ export const users = sqliteTable("users", {
     libraryId: text("library_id")
         .$type<LibraryId>()
         .notNull()
-        .default(DEFAULT_SETTINGS.libraryId)
+        .default(DEFAULT_SETTINGS.libraryId),
+    // The group last opened in that library, which entry resumes in. Null for
+    // the library itself; a stale one resolves to that, so it is never cleaned.
+    groupId: text("group_id")
 });
 
 export const favorites = sqliteTable(
diff --git a/src/backend/features/entry/routes.test.ts b/src/backend/features/entry/routes.test.ts
index 07a28549..162f12f8 100644
--- a/src/backend/features/entry/routes.test.ts
+++ b/src/backend/features/entry/routes.test.ts
@@ -5,10 +5,13 @@ import { users } from "../../db/schema";
 import { LibraryId } from "../library/library-id";
 import { Theme } from "../settings/settings";
 import {
+    TEST_GROUP_ID,
     TEST_USER_ID,
     createTestApp,
     jsonRequest,
+    TEST_LIBRARY_ID,
     resetDb,
+    seedGroup,
     seedUser
 } from "../../../__test_utils__";
 import { getDb } from "../../db/client";
@@ -84,6 +87,49 @@ describe("GET /init", () => {
         expect(location.searchParams.get("theme")).toBe(Theme.SYSTEM);
     });
 
+    /** The library and group a user left off in, as their row records them. */
+    async function seedResume(libraryId: LibraryId, groupId: string | null) {
+        await seedUser(db);
+        await db
+            .update(users)
+            .set({ libraryId, groupId })
+            .where(eq(users.id, TEST_USER_ID));
+    }
+
+    async function entryPath(): Promise<string> {
+        const res = await createTestApp().request(
+            "/init",
+            jsonRequest("GET"),
+            env
+        );
+        return new URL(res.headers.get("Location")!, "http://x").pathname;
+    }
+
+    it("resumes in the group they last opened", async () => {
+        await seedGroup(db);
+        await seedResume(TEST_LIBRARY_ID, TEST_GROUP_ID);
+
+        expect(await entryPath()).toBe(
+            `/app/library/${TEST_LIBRARY_ID}/groups/${TEST_GROUP_ID}`
+        );
+    });
+
+    // The group is gone, so the caller lands in the library rather than on a
+    // "group not found" page.
+    it("falls back to the library when the group has been deleted", async () => {
+        await seedResume(TEST_LIBRARY_ID, "deleted-group");
+
+        expect(await entryPath()).toBe(`/app/library/${TEST_LIBRARY_ID}`);
+    });
+
+    // Whichever library they switched to, they have not opened a group in it.
+    it("ignores a group belonging to another library", async () => {
+        await seedGroup(db);
+        await seedResume(LibraryId.MKCAD, TEST_GROUP_ID);
+
+        expect(await entryPath()).toBe(`/app/library/${LibraryId.MKCAD}`);
+    });
+
     it("never caches the gate's verdict", async () => {
         const res = await createTestApp().request(
             "/init",
diff --git a/src/backend/features/entry/routes.ts b/src/backend/features/entry/routes.ts
index 00f08b83..c49cff17 100644
--- a/src/backend/features/entry/routes.ts
+++ b/src/backend/features/entry/routes.ts
@@ -2,9 +2,9 @@
  * `/init` is where Onshape lands. It gates on auth, then resumes the caller in
  * the library and theme they last used.
  */
-import { eq } from "drizzle-orm";
+import { and, eq } from "drizzle-orm";
 import { getDb } from "../../db/client";
-import { users } from "../../db/schema";
+import { group, users } from "../../db/schema";
 import { cacheMiddleware } from "../../lib/cache";
 import { getApp, type AppContext } from "../../lib/context";
 import { getSessionCompanyId } from "../auth/session";
@@ -19,9 +19,22 @@ function getRelativeUrl(requestUrl: string) {
 /** Builds the url the caller resumes at, seeded with the library and theme they last used. */
 async function getEntryUrl(c: AppContext): Promise<string> {
     const db = getDb(c.env.DB);
+    // The join is the check on the stored group: one deleted, or left behind by
+    // a library switch, comes back null and lands the caller in the library.
     const user = await db
-        .select({ libraryId: users.libraryId, theme: users.theme })
+        .select({
+            libraryId: users.libraryId,
+            theme: users.theme,
+            groupId: group.id
+        })
         .from(users)
+        .leftJoin(
+            group,
+            and(
+                eq(group.id, users.groupId),
+                eq(group.libraryId, users.libraryId)
+            )
+        )
         .where(eq(users.id, await c.var.getUserId()))
         .get();
 
@@ -33,7 +46,9 @@ async function getEntryUrl(c: AppContext): Promise<string> {
     search.set("theme", user?.theme ?? DEFAULT_SETTINGS.theme);
 
     const libraryId = user?.libraryId ?? DEFAULT_SETTINGS.libraryId;
-    return `/app/library/${libraryId}?${search.toString()}`;
+    const path = `/app/library/${libraryId}`;
+    const groupPath = user?.groupId ? `${path}/groups/${user.groupId}` : path;
+    return `${groupPath}?${search.toString()}`;
 }
 
 export const entryRoutes = getApp();
diff --git a/src/backend/features/settings/routes.test.ts b/src/backend/features/settings/routes.test.ts
index 4589bb98..e1bc59a5 100644
--- a/src/backend/features/settings/routes.test.ts
+++ b/src/backend/features/settings/routes.test.ts
@@ -36,4 +36,25 @@ describe("settings routes", () => {
             .get();
         expect(row?.theme).toBe(Theme.DARK);
     });
+
+    it("POST /settings records and clears the open group", async () => {
+        const app = createTestApp();
+        const post = (body: unknown) =>
+            app.request("/api/settings", jsonRequest("POST", body), env);
+        const storedGroupId = async () =>
+            (
+                await db
+                    .select()
+                    .from(users)
+                    .where(eq(users.id, TEST_USER_ID))
+                    .get()
+            )?.groupId;
+
+        await post({ groupId: "group-1" });
+        expect(await storedGroupId()).toBe("group-1");
+
+        // Null is leaving the group, which is not the same as saying nothing.
+        await post({ groupId: null });
+        expect(await storedGroupId()).toBeNull();
+    });
 });
diff --git a/src/backend/features/settings/routes.ts b/src/backend/features/settings/routes.ts
index c003eab4..19edb743 100644
--- a/src/backend/features/settings/routes.ts
+++ b/src/backend/features/settings/routes.ts
@@ -12,7 +12,9 @@ export const settingsRoutes = getApp();
 
 const settingsBody = z.object({
     theme: z.enum(Theme).optional(),
-    libraryId: z.enum(LibraryId).optional()
+    libraryId: z.enum(LibraryId).optional(),
+    // Null on leaving a group: the caller resumes in the library itself.
+    groupId: z.string().nullable().optional()
 });
 
 /** POST /api/settings — update the caller's stored settings */
diff --git a/src/backend/features/settings/settings.ts b/src/backend/features/settings/settings.ts
index c30a65ab..e67949ba 100644
--- a/src/backend/features/settings/settings.ts
+++ b/src/backend/features/settings/settings.ts
@@ -11,11 +11,14 @@ export interface Settings {
     theme: Theme;
     /** The library the caller last opened, and lands in next time. */
     libraryId: LibraryId;
+    /** The group they last opened in it; null for the library itself. */
+    groupId: string | null;
 }
 
 export type SettingsUpdate = Partial<Settings>;
 
 export const DEFAULT_SETTINGS: Settings = {
     theme: Theme.SYSTEM,
-    libraryId: LibraryId.FRC_DESIGN_LIB
+    libraryId: LibraryId.FRC_DESIGN_LIB,
+    groupId: null
 };
diff --git a/src/frontend/features/settings/local-settings.ts b/src/frontend/features/settings/local-settings.ts
index 2968c7bf..524ea756 100644
--- a/src/frontend/features/settings/local-settings.ts
+++ b/src/frontend/features/settings/local-settings.ts
@@ -1,8 +1,7 @@
-import { type LibraryId } from "@backend/features/library/library-id";
 import {
     DEFAULT_SETTINGS,
-    type SettingsUpdate,
-    type Theme
+    type Settings,
+    type SettingsUpdate
 } from "@backend/features/settings/settings";
 
 const SETTINGS_STORAGE_KEY = "frc-design-app-settings";
@@ -17,11 +16,12 @@ function readStored(): SettingsUpdate {
 }
 
 /** Locally-persisted settings (used when not signed in), with defaults filled. */
-export function readLocalSettings(): { theme: Theme; libraryId: LibraryId } {
+export function readLocalSettings(): Settings {
     const stored = readStored();
     return {
         theme: stored.theme ?? DEFAULT_SETTINGS.theme,
-        libraryId: stored.libraryId ?? DEFAULT_SETTINGS.libraryId
+        libraryId: stored.libraryId ?? DEFAULT_SETTINGS.libraryId,
+        groupId: stored.groupId ?? DEFAULT_SETTINGS.groupId
     };
 }
 
diff --git a/src/frontend/features/settings/settings.ts b/src/frontend/features/settings/settings.ts
index f5e75733..a2217a67 100644
--- a/src/frontend/features/settings/settings.ts
+++ b/src/frontend/features/settings/settings.ts
@@ -6,22 +6,24 @@ import { getAccessDataQuery } from "../auth/access-level";
 import { queryClient } from "../../lib/query-client";
 import { writeLocalSettings } from "./local-settings";
 
+async function saveSettings(newSettings: SettingsUpdate): Promise<void> {
+    // Resolved here rather than read off a render: a placeholder that says
+    // signed out would silently persist locally for a user who has a
+    // server-side row.
+    const { signedIn } =
+        await queryClient.ensureQueryData(getAccessDataQuery());
+    // Not signed in: no server-side user row; persist locally instead.
+    if (!signedIn) {
+        writeLocalSettings(newSettings);
+        return;
+    }
+    await apiPost("/settings", { body: newSettings });
+}
+
 export function useSaveSettings() {
     const { mutate } = useMutation({
         mutationKey: ["settings"],
-        mutationFn: async (newSettings: SettingsUpdate) => {
-            // Resolved here rather than read off a render: a placeholder that
-            // says signed out would silently persist locally for a user who
-            // has a server-side row.
-            const { signedIn } =
-                await queryClient.ensureQueryData(getAccessDataQuery());
-            // Not signed in: no server-side user row; persist locally instead.
-            if (!signedIn) {
-                writeLocalSettings(newSettings);
-                return;
-            }
-            return apiPost("/settings", { body: newSettings });
-        },
+        mutationFn: saveSettings,
         onError: () => {
             showErrorToast("Unexpectedly failed to update settings.");
         }
@@ -29,3 +31,13 @@ export function useSaveSettings() {
 
     return mutate;
 }
+
+/**
+ * Records where the caller is, for the entry redirect to resume at. Called from
+ * a route rather than a component, so it cannot be the mutation above.
+ */
+export function rememberOpenGroup(groupId: string | null): void {
+    void saveSettings({ groupId }).catch(() => {
+        // Resuming in the library instead of the group is not worth a toast.
+    });
+}
diff --git a/src/frontend/lib/ui-state.ts b/src/frontend/lib/ui-state.ts
index 9e67fca1..3252b55d 100644
--- a/src/frontend/lib/ui-state.ts
+++ b/src/frontend/lib/ui-state.ts
@@ -15,7 +15,6 @@ const UiStateSchema = z.object({
     isLibraryOpen: z.boolean().default(true),
     vendorFilters: z.array(VendorType).optional(),
     searchQuery: z.string().default(""),
-    openGroupId: z.string().optional(),
     fasten: z.boolean().default(true),
     /** The access level to view the app as; absent means the granted default. */
     accessLevel: AccessLevelType.optional()
diff --git a/src/frontend/routes/app/library/$libraryId/groups/$groupId.tsx b/src/frontend/routes/app/library/$libraryId/groups/$groupId.tsx
index 648904e9..1929bb15 100644
--- a/src/frontend/routes/app/library/$libraryId/groups/$groupId.tsx
+++ b/src/frontend/routes/app/library/$libraryId/groups/$groupId.tsx
@@ -35,13 +35,14 @@ import {
 import { ClearFiltersButton } from "../../../../../features/settings/components/vendor-filters";
 import { useLibraryQuery } from "../../../../../features/library/queries";
 import { useLibraryId } from "../../../../../features/library/library-path";
-import { useUiState, updateUiState } from "../../../../../lib/ui-state";
+import { useUiState } from "../../../../../lib/ui-state";
+import { rememberOpenGroup } from "../../../../../features/settings/settings";
 
 export const Route = createFileRoute("/app/library/$libraryId/groups/$groupId")(
     {
         component: GroupList,
         onEnter: (match) => {
-            updateUiState({ openGroupId: match.params.groupId });
+            rememberOpenGroup(match.params.groupId);
         }
     }
 );
diff --git a/src/frontend/routes/app/library/$libraryId/index.tsx b/src/frontend/routes/app/library/$libraryId/index.tsx
index 1a5ed140..d1e3c914 100644
--- a/src/frontend/routes/app/library/$libraryId/index.tsx
+++ b/src/frontend/routes/app/library/$libraryId/index.tsx
@@ -27,13 +27,15 @@ import {
     getLibraryStatus,
     useLibraryId
 } from "../../../../features/library/library-path";
-import { updateUiState, useUiState } from "../../../../lib/ui-state";
+import { useUiState } from "../../../../lib/ui-state";
+import { rememberOpenGroup } from "../../../../features/settings/settings";
 import { useIsSignedIn } from "../../../../features/auth/access-level";
 
 export const Route = createFileRoute("/app/library/$libraryId/")({
     component: HomeList,
+    // Back in the library itself, which is where entry should resume.
     onEnter: () => {
-        updateUiState({ openGroupId: undefined });
+        rememberOpenGroup(null);
     }
 });
 
diff --git a/src/frontend/routes/app/library/$libraryId/route.tsx b/src/frontend/routes/app/library/$libraryId/route.tsx
index a355bcf4..cd34990c 100644
--- a/src/frontend/routes/app/library/$libraryId/route.tsx
+++ b/src/frontend/routes/app/library/$libraryId/route.tsx
@@ -1,9 +1,4 @@
-import {
-    createFileRoute,
-    notFound,
-    Outlet,
-    redirect
-} from "@tanstack/react-router";
+import { createFileRoute, notFound, Outlet } from "@tanstack/react-router";
 import { ReactNode } from "react";
 import { queryClient } from "../../../../lib/query-client";
 import { getFavoritesQuery } from "../../../../features/favorites/queries";
@@ -13,7 +8,6 @@ import {
 } from "../../../../features/library/queries";
 import { getSearchDbQuery } from "../../../../features/search/queries";
 import { LibraryId } from "@backend/features/library/library-id";
-import { getUiState } from "../../../../lib/ui-state";
 import {
     isComingSoon,
     isLibraryId,
@@ -21,13 +15,6 @@ import {
 } from "../../../../features/library/library-path";
 import { ComingSoon } from "../../../../features/library/components/coming-soon";
 
-/**
- * Restoring the last group is an entry behavior, so it happens once per load.
- * The latch is what ends it: leaving a group navigates here, which runs this
- * again while `openGroupId` still names the group, and redirects straight back.
- */
-let restoredGroup = false;
-
 export const Route = createFileRoute("/app/library/$libraryId")({
     component: LibraryRoute,
     params: {
@@ -41,21 +28,6 @@ export const Route = createFileRoute("/app/library/$libraryId")({
         if (!isLibraryId(params.libraryId)) {
             throw notFound();
         }
-        // A coming-soon library has no group to land in.
-        if (isComingSoon(params.libraryId)) {
-            restoredGroup = true;
-            return;
-        }
-        // Client state, so the entry redirect can't restore it.
-        const { openGroupId } = getUiState();
-        if (openGroupId && !restoredGroup) {
-            restoredGroup = true;
-            throw redirect({
-                to: "/app/library/$libraryId/groups/$groupId",
-                params: { libraryId: params.libraryId, groupId: openGroupId }
-            });
-        }
-        restoredGroup = true;
     },
     loader: async ({ params }) => {
         const { libraryId } = params;
diff --git a/src/frontend/routes/index.tsx b/src/frontend/routes/index.tsx
index bcf09fe5..92ca6712 100644
--- a/src/frontend/routes/index.tsx
+++ b/src/frontend/routes/index.tsx
@@ -6,7 +6,14 @@ import { RootAppError } from "../components/root-error";
 // is handled server-side, so it never reaches this route.
 export const Route = createFileRoute("/")({
     beforeLoad: () => {
-        const { libraryId, theme } = readLocalSettings();
+        const { libraryId, theme, groupId } = readLocalSettings();
+        if (groupId) {
+            throw redirect({
+                to: "/app/library/$libraryId/groups/$groupId",
+                params: { libraryId, groupId },
+                search: { theme }
+            });
+        }
         throw redirect({
             to: "/app/library/$libraryId",
             params: { libraryId },

From 035e3a9da67fed59419355d35e2bf110c7e6b547 Mon Sep 17 00:00:00 2001
From: Alex Kempen <alex.bookreader@gmail.com>
Date: Sun, 30 Aug 2026 22:44:52 -0500
Subject: [PATCH 10/40] Remove inch handling

---
 src/backend/features/search/search-index.ts | 16 ++--------------
 1 file changed, 2 insertions(+), 14 deletions(-)

diff --git a/src/backend/features/search/search-index.ts b/src/backend/features/search/search-index.ts
index 1ccbead4..f0167ead 100644
--- a/src/backend/features/search/search-index.ts
+++ b/src/backend/features/search/search-index.ts
@@ -87,31 +87,19 @@ function canonicalizeNumbers(text: string): string {
     );
 }
 
-/**
- * A size's unit, in the spellings a part name uses. The mark is the form it
- * keeps, so `1 in`, `1in` and `1"` are one size. A trailing `-` or letter means
- * a word that merely starts with "in" (`in-line`, `insert`).
- */
-const INCH_UNIT = /(\d)\s*(?:"|inches|inch|in)(?![\w-])/gi;
-
-/** Numbers and their units in the one spelling everything is stored as. */
-function canonicalize(text: string): string {
-    return canonicalizeNumbers(text).replace(INCH_UNIT, '$1"');
-}
-
 /**
  * For direct, non-tokenized comparison: the index's canonicalization,
  * lowercased, so a `.5` query lines up with a stored `"1/2 Bearing"`.
  */
 export function normalizeForMatch(text: string): string {
-    return canonicalize(text).toLowerCase();
+    return canonicalizeNumbers(text).toLowerCase();
 }
 
 export function tokenize(text: string): string[] {
     // Canonicalize before splitting: fractions span `/` and `-`. Casing stays,
     // since processTerm splits on camelCase.
     return (
-        canonicalize(text)
+        canonicalizeNumbers(text)
             // An inch mark stays on its number and ends the token, so `1"` is a
             // size of its own rather than a prefix of `1.5`, `10`, and `16t`.
             .replace(/(\d")/g, `$1${deliminator}`)

From 42e1f1b2a16bd42e187c8c2e64cb4a4e6dd12775 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 31 Aug 2026 04:08:04 +0000
Subject: [PATCH 11/40] Make ui state the app's own store, and fold the selects
 in
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Six review notes, all pulling the same way — one local store the app
reads from, instead of state spread across a second localStorage key,
the url, and a hook returning a pair:

- ui-state gains useGetUiState/useSetUiState, so a component reaches for
  the half it wants instead of indexing a tuple.
- local-settings is gone: the caller's settings live in ui-state, which
  is now the source of truth for them. Saving still writes the row when
  they are signed in, which is what a browser running the app for the
  first time, and the Onshape launch, start from.
- The theme comes off ui-state rather than the url, so a standalone visit
  with no parameters still renders in it. The entry redirect seeds the
  account's theme once; /app takes it and drops the parameter, and the
  retained set is now the launch parameters by name.
- A sign-in leaves a flag in ui-state rather than a url marker, and
  returns to the entry point, which confirms it and resumes in one place.
- AppSelect and its option helpers had one caller, so they collapse into
  a SettingSelect beside it: values in, capitalized labels out, no memos.
- CHROME_BACKGROUND is jargon; it is the background of the bars framing
  the page, so FRAME_BACKGROUND.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018tgfuCHjVFvejjMe7WmEFL
---
 src/frontend/components/app-modal.tsx         |   6 +-
 src/frontend/components/app-navbar.tsx        |   9 +-
 src/frontend/components/app-select.tsx        |  34 ----
 src/frontend/components/open-app-modal.tsx    |   6 +-
 src/frontend/components/select-utils.ts       |  33 ----
 src/frontend/features/auth/access-level.tsx   |   4 +-
 src/frontend/features/auth/sign-in.ts         |  33 +---
 .../favorites/components/favorite-card.tsx    |   4 +-
 .../favorites/components/favorites-list.tsx   |   6 +-
 .../insert/components/insert-menu.tsx         |   7 +-
 .../settings/components/settings-menu.tsx     | 173 ++++++++----------
 .../settings/components/vendor-filters.tsx    |   8 +-
 .../features/settings/local-settings.ts       |  36 ----
 src/frontend/features/settings/settings.ts    |  13 +-
 src/frontend/lib/onshape-params.ts            |   7 +-
 src/frontend/lib/style-constants.ts           |   5 +-
 src/frontend/lib/ui-state.ts                  |  31 +++-
 src/frontend/routes/__root.tsx                |  12 +-
 .../library/$libraryId/groups/$groupId.tsx    |   6 +-
 .../routes/app/library/$libraryId/index.tsx   |   5 +-
 src/frontend/routes/app/route.tsx             |  31 +++-
 src/frontend/routes/index.tsx                 |  23 ++-
 src/frontend/theme.ts                         |   2 +-
 23 files changed, 205 insertions(+), 289 deletions(-)
 delete mode 100644 src/frontend/components/app-select.tsx
 delete mode 100644 src/frontend/components/select-utils.ts
 delete mode 100644 src/frontend/features/settings/local-settings.ts

diff --git a/src/frontend/components/app-modal.tsx b/src/frontend/components/app-modal.tsx
index f19a9a37..223bcc2e 100644
--- a/src/frontend/components/app-modal.tsx
+++ b/src/frontend/components/app-modal.tsx
@@ -1,13 +1,13 @@
 import { Group, type MantineSpacing, Stack } from "@mantine/core";
 import { PropsWithChildren, ReactNode } from "react";
-import { BORDER, CHROME_BACKGROUND } from "../lib/style-constants";
+import { BORDER, FRAME_BACKGROUND } from "../lib/style-constants";
 
 interface AppModalBodyProps extends PropsWithChildren {
     /** Space between children; content that spaces itself should pass 0. */
     gap?: MantineSpacing;
 }
 
-/** A modal's content, padded away from the chrome framing it. */
+/** A modal's content, padded away from the header and footer framing it. */
 export function AppModalBody(props: AppModalBodyProps): ReactNode {
     return (
         <Stack p="sm" gap={props.gap ?? "sm"}>
@@ -23,7 +23,7 @@ export function AppModalFooter(props: PropsWithChildren): ReactNode {
             justify="space-between"
             wrap="nowrap"
             p="sm"
-            bg={CHROME_BACKGROUND}
+            bg={FRAME_BACKGROUND}
             style={{ borderTop: BORDER }}
         >
             {props.children}
diff --git a/src/frontend/components/app-navbar.tsx b/src/frontend/components/app-navbar.tsx
index a43f0421..b26dd1c9 100644
--- a/src/frontend/components/app-navbar.tsx
+++ b/src/frontend/components/app-navbar.tsx
@@ -13,7 +13,7 @@ import {
 import { GearIcon, MagnifyingGlassIcon } from "@phosphor-icons/react";
 import {
     BORDER,
-    CHROME_BACKGROUND,
+    FRAME_BACKGROUND,
     IconSize,
     PrimaryColor
 } from "../lib/style-constants";
@@ -23,7 +23,7 @@ import { useNavigate } from "@tanstack/react-router";
 import frcDesignBook from "/frc-design-book.svg";
 import { openSettingsMenu } from "../features/settings/open-settings-menu";
 import { VendorMenu } from "../features/settings/components/vendor-filters";
-import { useUiState } from "../lib/ui-state";
+import { useGetUiState, useSetUiState } from "../lib/ui-state";
 import {
     getLibraryName,
     isComingSoon,
@@ -55,7 +55,7 @@ export function AppNavbar(): ReactNode {
                 px="sm"
                 wrap="nowrap"
                 align="stretch"
-                bg={CHROME_BACKGROUND}
+                bg={FRAME_BACKGROUND}
                 style={{ borderBottom: BORDER }}
             >
                 <FrcDesignBookIcon />
@@ -238,7 +238,8 @@ function selectAllInputText(ref: RefObject<HTMLInputElement | null>) {
 
 export function SearchBar() {
     const ref = useRef<HTMLInputElement>(null);
-    const [uiState, setUiState] = useUiState();
+    const uiState = useGetUiState();
+    const setUiState = useSetUiState();
     const libraryId = useLibraryId();
 
     const clearButton = uiState.searchQuery ? (
diff --git a/src/frontend/components/app-select.tsx b/src/frontend/components/app-select.tsx
deleted file mode 100644
index 14e9d398..00000000
--- a/src/frontend/components/app-select.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Select } from "@mantine/core";
-import { Dispatch, ReactNode } from "react";
-import { SelectOption } from "./select-utils";
-
-interface AppSelectProps {
-    option: SelectOption;
-    /**
-     * A list of options to choose from.
-     * Should be wrapped in a useMemo to ensure stability.
-     */
-    options: SelectOption[];
-    label: string;
-    onSelect: Dispatch<string>;
-}
-
-export function AppSelect(props: AppSelectProps): ReactNode {
-    const { option, options, onSelect, label } = props;
-
-    return (
-        <Select
-            label={label}
-            data={options}
-            value={option.value}
-            allowDeselect={false}
-            checkIconPosition="right"
-            comboboxProps={{ withinPortal: true }}
-            onChange={(value) => {
-                if (value !== null) {
-                    onSelect(value);
-                }
-            }}
-        />
-    );
-}
diff --git a/src/frontend/components/open-app-modal.tsx b/src/frontend/components/open-app-modal.tsx
index 316aa0a3..b83031e3 100644
--- a/src/frontend/components/open-app-modal.tsx
+++ b/src/frontend/components/open-app-modal.tsx
@@ -1,6 +1,6 @@
 import { modals } from "@mantine/modals";
 import type { ReactNode } from "react";
-import { BORDER, CHROME_BACKGROUND } from "../lib/style-constants";
+import { BORDER, FRAME_BACKGROUND } from "../lib/style-constants";
 
 interface OpenAppModalProps {
     title: ReactNode;
@@ -12,7 +12,7 @@ interface OpenAppModalProps {
 }
 
 /**
- * Opens a modal wearing the app's chrome. Its body is unpadded, so content
+ * Opens a modal framed like the rest of the app. Its body is unpadded, so content
  * belongs in an `AppModalBody` and actions in an `AppModalFooter`.
  */
 export function openAppModal(props: OpenAppModalProps): void {
@@ -34,7 +34,7 @@ export function openAppModal(props: OpenAppModalProps): void {
             // Drawn, not just shadowed, so the card reads as one panel.
             content: { border: BORDER },
             header: {
-                background: CHROME_BACKGROUND,
+                background: FRAME_BACKGROUND,
                 borderBottom: BORDER,
                 padding: "var(--mantine-spacing-sm)",
                 // Otherwise a Mantine minimum, not the padding, sets the height.
diff --git a/src/frontend/components/select-utils.ts b/src/frontend/components/select-utils.ts
deleted file mode 100644
index 89f03aba..00000000
--- a/src/frontend/components/select-utils.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { useMemo } from "react";
-
-export interface SelectOption {
-    value: string;
-    label: string;
-}
-
-export function makeSelectOption(
-    value: string,
-    labelFunction: (value: string) => string
-): SelectOption {
-    return {
-        value,
-        label: labelFunction(value)
-    };
-}
-
-export function makeSelectOptions(
-    values: string[],
-    labelFunction: (value: string) => string
-): SelectOption[] {
-    return values.map((value) => makeSelectOption(value, labelFunction));
-}
-
-export function useSelectOptions(
-    values: string[],
-    labelFunction: (value: string) => string
-): SelectOption[] {
-    return useMemo(
-        () => makeSelectOptions(values, labelFunction),
-        [values, labelFunction]
-    );
-}
diff --git a/src/frontend/features/auth/access-level.tsx b/src/frontend/features/auth/access-level.tsx
index 32d58dbf..2a4948dc 100644
--- a/src/frontend/features/auth/access-level.tsx
+++ b/src/frontend/features/auth/access-level.tsx
@@ -9,7 +9,7 @@ import {
 } from "@backend/features/auth/access-level";
 import { accessDataQueryKey } from "../../lib/query-keys";
 import { apiGet } from "../../lib/api-client";
-import { useUiState } from "../../lib/ui-state";
+import { useGetUiState } from "../../lib/ui-state";
 
 const DEFAULT_ACCESS_DATA: AccessData = {
     maxAccessLevel: AccessLevel.USER,
@@ -45,7 +45,7 @@ export interface ResolvedAccessData extends AccessData {
 export function useAccessData(): ResolvedAccessData {
     const { data, isPending } = useQuery(getAccessDataQuery());
     const serverData = data ?? DEFAULT_ACCESS_DATA;
-    const chosenLevel = useUiState()[0].accessLevel;
+    const chosenLevel = useGetUiState().accessLevel;
     return useMemo(() => {
         const desired = chosenLevel ?? DEFAULT_ACCESS_LEVEL;
         // A stored choice can outlive the access that allowed it; clamp to max.
diff --git a/src/frontend/features/auth/sign-in.ts b/src/frontend/features/auth/sign-in.ts
index e54414a2..5a9b0804 100644
--- a/src/frontend/features/auth/sign-in.ts
+++ b/src/frontend/features/auth/sign-in.ts
@@ -1,35 +1,12 @@
-import { useEffect } from "react";
-import { useNavigate, useSearch } from "@tanstack/react-router";
-import { showSuccessToast } from "../../lib/notifications";
-
-const SIGNED_IN_PARAM = "justSignedIn";
+import { updateUiState } from "../../lib/ui-state";
 
 /**
- * Redirects to the Onshape OAuth flow, returning to the current location with a
- * marker so the app can confirm the sign-in once it lands back.
+ * Redirects to the Onshape OAuth flow, returning to the app's entry point,
+ * which resumes where the caller left off and confirms the sign-in.
  */
 export function startSignIn(): void {
-    const url = new URL(window.location.href);
-    url.searchParams.set(SIGNED_IN_PARAM, "true");
-    const redirectUrl = url.pathname + url.search;
+    updateUiState({ justSignedIn: true });
+    const redirectUrl = "/" + window.location.search;
     window.location.href =
         "/auth/sign-in?redirectUrl=" + encodeURIComponent(redirectUrl);
 }
-
-/** Confirms a sign-in once the caller lands back from Onshape, then clears the marker. */
-export function useSignInToast(): void {
-    const justSignedIn = useSearch({ from: "/app" }).justSignedIn;
-    const navigate = useNavigate({ from: "/app" });
-    useEffect(() => {
-        // The OAuth callback only redirects here on success, so the marker's
-        // presence is the confirmation.
-        if (!justSignedIn) {
-            return;
-        }
-        showSuccessToast("Signed in to Onshape.");
-        void navigate({
-            search: (prev) => ({ ...prev, [SIGNED_IN_PARAM]: undefined }),
-            replace: true
-        });
-    }, [justSignedIn, navigate]);
-}
diff --git a/src/frontend/features/favorites/components/favorite-card.tsx b/src/frontend/features/favorites/components/favorite-card.tsx
index 0a39ae85..3dba636f 100644
--- a/src/frontend/features/favorites/components/favorite-card.tsx
+++ b/src/frontend/features/favorites/components/favorite-card.tsx
@@ -21,7 +21,7 @@ import { useIsInsertableHidden } from "../../library/card-hooks";
 import { CardThumbnail } from "../../thumbnails/components/thumbnail";
 import { useIsAssemblyInPartStudio } from "../../insert/insert-hooks";
 import { ChangeOrderItems } from "../../../components/change-order";
-import { useUiState } from "../../../lib/ui-state";
+import { useGetUiState } from "../../../lib/ui-state";
 import { useIsConnectedToOnshape } from "../../../lib/onshape-params";
 import {
     openCannotDeriveAssemblyAlert,
@@ -114,7 +114,7 @@ interface FavoriteMenuItemsProps {
 function FavoriteMenuItems(props: FavoriteMenuItemsProps): ReactNode {
     const { insertable, favorite } = props;
 
-    const uiState = useUiState()[0];
+    const uiState = useGetUiState();
     const isConnected = useIsConnectedToOnshape();
 
     const setFavoriteOrderMutation = useSetFavoriteOrderMutation();
diff --git a/src/frontend/features/favorites/components/favorites-list.tsx b/src/frontend/features/favorites/components/favorites-list.tsx
index 26f00faf..c17fc703 100644
--- a/src/frontend/features/favorites/components/favorites-list.tsx
+++ b/src/frontend/features/favorites/components/favorites-list.tsx
@@ -11,7 +11,7 @@ import {
 import { getFavoriteForInsertable } from "@backend/features/favorites/contract";
 import type { FavoritesData } from "@backend/features/favorites/contract";
 import type { Insertables } from "@backend/features/library/contract";
-import { useUiState } from "../../../lib/ui-state";
+import { useGetUiState } from "../../../lib/ui-state";
 import {
     SectionError,
     SectionLoading
@@ -32,7 +32,7 @@ import { hasEditorAccess } from "@backend/features/auth/access-level";
  * Unlike the normal DocumentList, this list can be searched directly.
  */
 export function FavoritesList(): ReactNode {
-    const { searchQuery, vendorFilters } = useUiState()[0];
+    const { searchQuery, vendorFilters } = useGetUiState();
 
     const favoritesQuery = useFavoritesQuery();
     const libraryQuery = useLibraryQuery();
@@ -94,7 +94,7 @@ interface FavoriteSearchResultsProps {
 function FavoriteSearchResults(props: FavoriteSearchResultsProps): ReactNode {
     const { query, insertables, favoritesData } = props;
 
-    const vendorFilters = useUiState()[0].vendorFilters;
+    const vendorFilters = useGetUiState().vendorFilters;
     const accessData = useAccessData();
     const searchDbQuery = useSearchDbQuery();
 
diff --git a/src/frontend/features/insert/components/insert-menu.tsx b/src/frontend/features/insert/components/insert-menu.tsx
index 5176d03f..5dde47e8 100644
--- a/src/frontend/features/insert/components/insert-menu.tsx
+++ b/src/frontend/features/insert/components/insert-menu.tsx
@@ -24,7 +24,7 @@ import {
 } from "@backend/features/configurations/models";
 import { encodeCanonicalConfiguration } from "@backend/features/configurations/canonical";
 import { useFavoritesQuery } from "../../favorites/queries";
-import { useUiState } from "../../../lib/ui-state";
+import { useGetUiState, useSetUiState } from "../../../lib/ui-state";
 import { notifications } from "@mantine/notifications";
 import { RequireSignIn, useIsSignedIn } from "../../auth/access-level";
 import { useIsConnectedToOnshape } from "../../../lib/onshape-params";
@@ -73,7 +73,7 @@ export function InsertMenuContent(props: InsertMenuContentProps): ReactNode {
         !insertable.isConfigurable
     ).data?.records[0];
 
-    // The title lives in the modal's chrome, so it's updated rather than
+    // The title lives in the modal's header, so it's updated rather than
     // rendered: the header follows the configuration as the user changes it.
     useEffect(() => {
         modals.updateModal({
@@ -201,7 +201,8 @@ function InsertButtons(props: InsertButtonsProps): ReactNode {
     const insertMutation = useInsertMutation(insertable, configuration, {
         isFavorite
     });
-    const [uiState, setUiState] = useUiState();
+    const uiState = useGetUiState();
+    const setUiState = useSetUiState();
 
     const isLoadingConfiguration = useIsFetchingConfiguration(
         insertable.id,
diff --git a/src/frontend/features/settings/components/settings-menu.tsx b/src/frontend/features/settings/components/settings-menu.tsx
index 2c191882..85219c03 100644
--- a/src/frontend/features/settings/components/settings-menu.tsx
+++ b/src/frontend/features/settings/components/settings-menu.tsx
@@ -1,13 +1,13 @@
-import { useNavigate, useRouterState } from "@tanstack/react-router";
-import { DEFAULT_SETTINGS } from "@backend/features/settings/settings";
-import { Button, Divider, Group, Text, Title } from "@mantine/core";
+import { DEFAULT_SETTINGS, Theme } from "@backend/features/settings/settings";
+import { Button, Divider, Group, Select, Text, Title } from "@mantine/core";
 import { SignOutIcon } from "@phosphor-icons/react";
 import { FontWeight, IconSize } from "../../../lib/style-constants";
-import { Dispatch, ReactNode, useMemo } from "react";
-import { Theme } from "@backend/features/settings/settings";
-import { hasEditorAccess } from "@backend/features/auth/access-level";
-import { isWithinAccessLevel } from "@backend/features/auth/access-level";
-import { AccessLevel } from "@backend/features/auth/access-level";
+import { ReactNode } from "react";
+import {
+    AccessLevel,
+    hasEditorAccess,
+    isWithinAccessLevel
+} from "@backend/features/auth/access-level";
 import { LibraryId } from "@backend/features/library/library-id";
 import { useSaveSettings } from "../settings";
 import { OpenUrlButton } from "../../../components/open-url-button";
@@ -17,15 +17,10 @@ import {
     useAccessData
 } from "../../auth/access-level";
 import { startSignOut } from "../../auth/sign-out";
-import { useUiState } from "../../../lib/ui-state";
+import { useGetUiState, useSetUiState } from "../../../lib/ui-state";
 import { FEEDBACK_FORM_URL } from "../../../lib/url";
 import { useIsConnectedToOnshape } from "../../../lib/onshape-params";
 import { useLibraryId } from "../../library/library-path";
-import { AppSelect } from "../../../components/app-select";
-import {
-    makeSelectOption,
-    useSelectOptions
-} from "../../../components/select-utils";
 import { ReloadGroupsButton } from "../../library/components/reload-groups-button";
 
 /**
@@ -43,66 +38,76 @@ function SettingRow(props: { label: string; children: ReactNode }): ReactNode {
 }
 
 /** Capitalizes the first letter of a string and lower cases everything else. */
-function capitalize(val: string) {
-    return val[0].toUpperCase() + val.slice(1).toLowerCase();
+function capitalize(value: string) {
+    return value[0].toUpperCase() + value.slice(1).toLowerCase();
 }
 
-export function SettingsMenuContent(): ReactNode {
-    const accessData = useAccessData();
+interface SettingSelectProps<T extends string> {
+    label: string;
+    value: T;
+    /** Shown capitalized, in the order given. */
+    options: T[];
+    onSelect: (value: T) => void;
+}
 
-    let adminSettings: ReactNode = null;
-    // Unlike all other checks, this one uses maxAccessLevel so you can still switch from user to admin
-    if (hasEditorAccess(accessData.maxAccessLevel)) {
-        adminSettings = (
-            <>
-                <Title order={6} mt="md">
-                    Admin Settings
-                </Title>
-                <Divider mb="sm" />
-                <AdminSettings />
-            </>
-        );
-    }
+/** A setting chosen from a short list of named values. */
+function SettingSelect<T extends string>(props: SettingSelectProps<T>) {
+    const { label, value, options, onSelect } = props;
+    return (
+        <Select
+            label={label}
+            data={options.map((option) => ({
+                value: option,
+                label: capitalize(option)
+            }))}
+            value={value}
+            allowDeselect={false}
+            checkIconPosition="right"
+            comboboxProps={{ withinPortal: true }}
+            onChange={(selected) => {
+                if (selected !== null) {
+                    onSelect(selected);
+                }
+            }}
+        />
+    );
+}
+
+export function SettingsMenuContent(): ReactNode {
+    const { maxAccessLevel } = useAccessData();
 
     return (
         <>
             <UserSettings />
-            {adminSettings}
+            {/* Unlike all other checks, this one uses maxAccessLevel so you can
+                still switch back up from user to admin. */}
+            {hasEditorAccess(maxAccessLevel) && (
+                <>
+                    <Title order={6} mt="md">
+                        Admin Settings
+                    </Title>
+                    <Divider mb="sm" />
+                    <AdminSettings />
+                </>
+            )}
         </>
     );
 }
 
 function UserSettings(): ReactNode {
-    // The modal renders at the root, outside the route matches, so navigate by
-    // exact path: a bare navigate would resolve to the route `from` names.
-    const location = useRouterState({ select: (state) => state.location });
-    const navigate = useNavigate();
-    const saveSettings = useSaveSettings();
     const libraryId = useLibraryId();
     const isConnected = useIsConnectedToOnshape();
-    const theme = location.search.theme ?? DEFAULT_SETTINGS.theme;
 
     return (
         <>
-            <ThemeSelect
-                theme={theme}
-                onThemeSelect={(theme) => {
-                    // The url renders it; the write-behind decides what the
-                    // entry redirect seeds next time.
-                    saveSettings({ theme });
-                    void navigate({
-                        to: location.pathname,
-                        search: (prev) => ({ ...prev, theme })
-                    });
-                }}
-            />
+            <ThemeSelect />
             {/* Only worth offering from inside Onshape's panel, which is what
                 the standalone app is roomier than. */}
             {isConnected && (
                 <SettingRow label="Open outside Onshape">
                     <OpenUrlButton
                         text="Open app"
-                        url={standaloneUrl(libraryId, theme)}
+                        url={standaloneUrl(libraryId)}
                     />
                 </SettingRow>
             )}
@@ -131,34 +136,23 @@ function UserSettings(): ReactNode {
 
 /**
  * The app's own url for the current library, free of the params Onshape
- * launches it with — carrying those over is what would keep it embedded.
+ * launches it with — carrying those over is what would keep it embedded. The
+ * settings come along on their own, being the same browser's.
  */
-function standaloneUrl(libraryId: LibraryId, theme: Theme): string {
-    const url = new URL(`/app/library/${libraryId}`, window.location.origin);
-    url.searchParams.set("theme", theme);
-    return url.toString();
+function standaloneUrl(libraryId: LibraryId): string {
+    return new URL(`/app/library/${libraryId}`, window.location.origin).href;
 }
 
-interface ThemeSelectProps {
-    theme: Theme;
-    onThemeSelect: Dispatch<Theme>;
-}
-
-function ThemeSelect(props: ThemeSelectProps): ReactNode {
-    const { theme, onThemeSelect } = props;
-
-    // Use a memo to stabilize access levels so Select's activeItem tracks properly between renders
-    const themes = useSelectOptions(
-        [Theme.SYSTEM, Theme.DARK, Theme.LIGHT],
-        capitalize
-    );
+function ThemeSelect(): ReactNode {
+    const theme = useGetUiState().theme;
+    const saveSettings = useSaveSettings();
 
     return (
-        <AppSelect
-            option={makeSelectOption(theme, capitalize)}
-            options={themes}
+        <SettingSelect
             label="Theme"
-            onSelect={(value) => onThemeSelect(value as Theme)}
+            value={theme ?? DEFAULT_SETTINGS.theme}
+            options={[Theme.SYSTEM, Theme.DARK, Theme.LIGHT]}
+            onSelect={(theme) => saveSettings({ theme })}
         />
     );
 }
@@ -181,32 +175,19 @@ function AdminSettings(): ReactNode {
 }
 
 function AccessLevelSelect(): ReactNode {
-    const accessData = useAccessData();
-    const setUiState = useUiState()[1];
-
-    const { maxAccessLevel, currentAccessLevel } = accessData;
-    // Use a memo to stabilize access levels so Select's activeItem tracks properly between renders
-    const accessLevels = useSelectOptions(
-        useMemo(
-            () =>
-                [
-                    AccessLevel.ADMIN,
-                    AccessLevel.EDITOR,
-                    AccessLevel.USER
-                ].filter((level) => isWithinAccessLevel(level, maxAccessLevel)),
-            [maxAccessLevel]
-        ),
-        capitalize
-    );
+    const { maxAccessLevel, currentAccessLevel } = useAccessData();
+    const setUiState = useSetUiState();
 
     return (
-        <AppSelect
+        <SettingSelect
             label="Access level"
-            option={makeSelectOption(currentAccessLevel, capitalize)}
-            options={accessLevels}
-            onSelect={(value) => {
-                setUiState({ accessLevel: value as AccessLevel });
-            }}
+            value={currentAccessLevel}
+            options={[
+                AccessLevel.ADMIN,
+                AccessLevel.EDITOR,
+                AccessLevel.USER
+            ].filter((level) => isWithinAccessLevel(level, maxAccessLevel))}
+            onSelect={(accessLevel) => setUiState({ accessLevel })}
         />
     );
 }
diff --git a/src/frontend/features/settings/components/vendor-filters.tsx b/src/frontend/features/settings/components/vendor-filters.tsx
index 2b77f3de..80dddca6 100644
--- a/src/frontend/features/settings/components/vendor-filters.tsx
+++ b/src/frontend/features/settings/components/vendor-filters.tsx
@@ -4,7 +4,7 @@ import { IconSize } from "../../../lib/style-constants";
 import { ReactNode } from "react";
 import { getVendorName } from "@backend/features/library/vendors";
 import { Vendor } from "@backend/features/library/vendors";
-import { useUiState } from "../../../lib/ui-state";
+import { useGetUiState, useSetUiState } from "../../../lib/ui-state";
 import { AppContextMenu } from "../../../components/app-menu";
 
 interface ClearFiltersButtonProps {
@@ -19,7 +19,8 @@ interface ClearFiltersButtonProps {
 }
 
 export function ClearFiltersButton(props: ClearFiltersButtonProps): ReactNode {
-    const [uiState, setUiState] = useUiState();
+    const uiState = useGetUiState();
+    const setUiState = useSetUiState();
     const text = props.text ?? "Clear filters";
     const small = props.small ?? false;
 
@@ -46,7 +47,8 @@ export function ClearFiltersButton(props: ClearFiltersButtonProps): ReactNode {
  * vendor checkbox items. `undefined` filters mean "all vendors active".
  */
 export function VendorMenu(): ReactNode {
-    const [uiState, setUiState] = useUiState();
+    const uiState = useGetUiState();
+    const setUiState = useSetUiState();
     const hasFilters = uiState.vendorFilters !== undefined;
 
     const menuItems = (
diff --git a/src/frontend/features/settings/local-settings.ts b/src/frontend/features/settings/local-settings.ts
deleted file mode 100644
index 524ea756..00000000
--- a/src/frontend/features/settings/local-settings.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import {
-    DEFAULT_SETTINGS,
-    type Settings,
-    type SettingsUpdate
-} from "@backend/features/settings/settings";
-
-const SETTINGS_STORAGE_KEY = "frc-design-app-settings";
-
-function readStored(): SettingsUpdate {
-    try {
-        const raw = localStorage.getItem(SETTINGS_STORAGE_KEY);
-        return raw ? (JSON.parse(raw) as SettingsUpdate) : {};
-    } catch {
-        return {};
-    }
-}
-
-/** Locally-persisted settings (used when not signed in), with defaults filled. */
-export function readLocalSettings(): Settings {
-    const stored = readStored();
-    return {
-        theme: stored.theme ?? DEFAULT_SETTINGS.theme,
-        libraryId: stored.libraryId ?? DEFAULT_SETTINGS.libraryId,
-        groupId: stored.groupId ?? DEFAULT_SETTINGS.groupId
-    };
-}
-
-/** Merges and persists settings locally, used when not signed in. */
-export function writeLocalSettings(newSettings: SettingsUpdate): void {
-    try {
-        const merged = { ...readStored(), ...newSettings };
-        localStorage.setItem(SETTINGS_STORAGE_KEY, JSON.stringify(merged));
-    } catch {
-        // Ignore storage failures (e.g. private browsing).
-    }
-}
diff --git a/src/frontend/features/settings/settings.ts b/src/frontend/features/settings/settings.ts
index a2217a67..656fa777 100644
--- a/src/frontend/features/settings/settings.ts
+++ b/src/frontend/features/settings/settings.ts
@@ -4,17 +4,20 @@ import { showErrorToast } from "../../lib/notifications";
 import { apiPost } from "../../lib/api-client";
 import { getAccessDataQuery } from "../auth/access-level";
 import { queryClient } from "../../lib/query-client";
-import { writeLocalSettings } from "./local-settings";
+import { updateUiState } from "../../lib/ui-state";
 
+/**
+ * Applies a setting locally, where the app reads it from, and saves it to the
+ * caller's row when they have one — which is what a browser running the app for
+ * the first time, and the Onshape launch, start from.
+ */
 async function saveSettings(newSettings: SettingsUpdate): Promise<void> {
+    updateUiState(newSettings);
     // Resolved here rather than read off a render: a placeholder that says
-    // signed out would silently persist locally for a user who has a
-    // server-side row.
+    // signed out would skip the save for a user who has a server-side row.
     const { signedIn } =
         await queryClient.ensureQueryData(getAccessDataQuery());
-    // Not signed in: no server-side user row; persist locally instead.
     if (!signedIn) {
-        writeLocalSettings(newSettings);
         return;
     }
     await apiPost("/settings", { body: newSettings });
diff --git a/src/frontend/lib/onshape-params.ts b/src/frontend/lib/onshape-params.ts
index ea986e35..a3b0297a 100644
--- a/src/frontend/lib/onshape-params.ts
+++ b/src/frontend/lib/onshape-params.ts
@@ -10,11 +10,10 @@ export interface OnshapeParams extends ElementPath {
     elementType: ElementType;
     /** The color scheme Onshape is using, forwarded by the entry redirect. */
     systemTheme: ColorTheme;
-    /** The caller's saved theme, seeded by the entry redirect. */
-    theme: Theme;
+    /** The account's saved theme, seeded by the entry redirect and then taken
+     * into ui-state, which is where the app reads it from. */
+    theme?: Theme;
     server: string;
-    /** Set on the sign-in redirect so the app confirms success once. */
-    justSignedIn?: string;
 }
 
 /**
diff --git a/src/frontend/lib/style-constants.ts b/src/frontend/lib/style-constants.ts
index 564eb5e0..c6103519 100644
--- a/src/frontend/lib/style-constants.ts
+++ b/src/frontend/lib/style-constants.ts
@@ -25,8 +25,9 @@ export enum FontWeight {
 
 export const BORDER = "1px solid var(--mantine-color-default-border)";
 
-/** A step off the page: the navbar's tab row, a modal's header and footer. */
-export const CHROME_BACKGROUND =
+/** A step off the page, for the bars framing it: the navbar's tab row, a
+ * modal's header and footer. */
+export const FRAME_BACKGROUND =
     "light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-8))";
 
 /**
diff --git a/src/frontend/lib/ui-state.ts b/src/frontend/lib/ui-state.ts
index 3252b55d..61da90b4 100644
--- a/src/frontend/lib/ui-state.ts
+++ b/src/frontend/lib/ui-state.ts
@@ -1,13 +1,17 @@
 import { useSyncExternalStore } from "react";
 import * as z from "zod";
 import { AccessLevel } from "@backend/features/auth/access-level";
+import { LibraryId } from "@backend/features/library/library-id";
 import { Vendor } from "@backend/features/library/vendors";
+import { DEFAULT_SETTINGS, Theme } from "@backend/features/settings/settings";
 
 // Increment this when a breaking change is made to the schema
 const LATEST_VERSION = 3;
 
 const VendorType = z.enum(Object.values(Vendor));
 const AccessLevelType = z.enum(Object.values(AccessLevel));
+const ThemeType = z.enum(Object.values(Theme));
+const LibraryIdType = z.enum(Object.values(LibraryId));
 
 const UiStateSchema = z.object({
     version: z.number().default(1), // We can't default the parsed version to LATEST_VERSION because of old versions floating around
@@ -17,10 +21,19 @@ const UiStateSchema = z.object({
     searchQuery: z.string().default(""),
     fasten: z.boolean().default(true),
     /** The access level to view the app as; absent means the granted default. */
-    accessLevel: AccessLevelType.optional()
+    accessLevel: AccessLevelType.optional(),
+    /** Set on leaving for Onshape, so the app can confirm the sign-in on return. */
+    justSignedIn: z.boolean().default(false),
+    // The caller's settings, which this is the source of truth for. A signed-in
+    // caller also has them server-side, which is what a browser that has never
+    // run the app starts from.
+    theme: ThemeType.default(DEFAULT_SETTINGS.theme),
+    libraryId: LibraryIdType.default(DEFAULT_SETTINGS.libraryId),
+    /** The group last opened in that library; null for the library itself. */
+    groupId: z.string().nullable().default(DEFAULT_SETTINGS.groupId)
 });
 
-type UiState = z.infer<typeof UiStateSchema>;
+export type UiState = z.infer<typeof UiStateSchema>;
 
 type Subscriber = () => void;
 
@@ -108,9 +121,15 @@ export function updateUiState(partialState: Partial<UiState>): UiState {
 
 export type SetUiState = (uiState: Partial<UiState>) => void;
 
-export function useUiState(): [UiState, SetUiState] {
-    // Create a react version of the state to trigger re-renders
-    const reactUiState = useSyncExternalStore(subscribeToUiState, getUiState);
+/** The current state, re-rendering the caller whenever it changes. */
+export function useGetUiState(): UiState {
+    return useSyncExternalStore(subscribeToUiState, getUiState);
+}
 
-    return [reactUiState, updateUiState];
+/** Merges into the state; every reader of it re-renders. */
+// The setter half of the pair above: a component reaches for one or the other,
+// so both read as hooks even though setting needs no state of its own.
+// eslint-disable-next-line react-x/no-unnecessary-use-prefix
+export function useSetUiState(): SetUiState {
+    return updateUiState;
 }
diff --git a/src/frontend/routes/__root.tsx b/src/frontend/routes/__root.tsx
index 110c7d8d..b9b00e28 100644
--- a/src/frontend/routes/__root.tsx
+++ b/src/frontend/routes/__root.tsx
@@ -13,7 +13,7 @@ import { useColorScheme } from "@mantine/hooks";
 import { queryClient } from "../lib/query-client";
 import { createAppTheme } from "../theme";
 import { getColorTheme } from "../lib/onshape-params";
-import { DEFAULT_SETTINGS } from "@backend/features/settings/settings";
+import { useGetUiState } from "../lib/ui-state";
 import { NotFoundError, RootCrash } from "../components/root-error";
 
 export const Route = createRootRoute({
@@ -26,21 +26,21 @@ export const Route = createRootRoute({
 });
 
 function RootComponent(): ReactNode {
-    // Both come off the url — the entry redirect seeds them and a switch
-    // rewrites them — so the first paint is already the right colors.
+    // The library comes off the url, so the first paint is already its color.
     const search = useSearch({ strict: false });
     const params = useParams({ strict: false });
+    const { theme: savedTheme, libraryId } = useGetUiState();
 
     const theme = useMemo(
-        () => createAppTheme(params.libraryId ?? DEFAULT_SETTINGS.libraryId),
-        [params.libraryId]
+        () => createAppTheme(params.libraryId ?? libraryId),
+        [params.libraryId, libraryId]
     );
 
     // Onshape puts its own scheme on the url when it launches us; standalone
     // there is none, and the OS is what "system" means.
     const osColorScheme = useColorScheme();
     const colorTheme = getColorTheme(
-        search.theme ?? DEFAULT_SETTINGS.theme,
+        savedTheme,
         search.systemTheme ?? osColorScheme
     );
 
diff --git a/src/frontend/routes/app/library/$libraryId/groups/$groupId.tsx b/src/frontend/routes/app/library/$libraryId/groups/$groupId.tsx
index 1929bb15..5409536b 100644
--- a/src/frontend/routes/app/library/$libraryId/groups/$groupId.tsx
+++ b/src/frontend/routes/app/library/$libraryId/groups/$groupId.tsx
@@ -35,7 +35,7 @@ import {
 import { ClearFiltersButton } from "../../../../../features/settings/components/vendor-filters";
 import { useLibraryQuery } from "../../../../../features/library/queries";
 import { useLibraryId } from "../../../../../features/library/library-path";
-import { useUiState } from "../../../../../lib/ui-state";
+import { useGetUiState } from "../../../../../lib/ui-state";
 import { rememberOpenGroup } from "../../../../../features/settings/settings";
 
 export const Route = createFileRoute("/app/library/$libraryId/groups/$groupId")(
@@ -54,7 +54,7 @@ function GroupList(): ReactNode {
         from: "/app/library/$libraryId/groups/$groupId"
     });
 
-    const uiState = useUiState()[0];
+    const uiState = useGetUiState();
 
     if (libraryQuery.isPending) {
         return <SectionLoading title="Loading group..." />;
@@ -157,7 +157,7 @@ export function GroupListContent(props: GroupListCardsProps): ReactNode {
     const { group, insertables } = props;
 
     const accessData = useAccessData();
-    const uiState = useUiState()[0];
+    const uiState = useGetUiState();
 
     const groupInsertables = group.insertableOrder
         .map((insertableId) => insertables[insertableId])
diff --git a/src/frontend/routes/app/library/$libraryId/index.tsx b/src/frontend/routes/app/library/$libraryId/index.tsx
index d1e3c914..841f4dc6 100644
--- a/src/frontend/routes/app/library/$libraryId/index.tsx
+++ b/src/frontend/routes/app/library/$libraryId/index.tsx
@@ -27,7 +27,7 @@ import {
     getLibraryStatus,
     useLibraryId
 } from "../../../../features/library/library-path";
-import { useUiState } from "../../../../lib/ui-state";
+import { useGetUiState, useSetUiState } from "../../../../lib/ui-state";
 import { rememberOpenGroup } from "../../../../features/settings/settings";
 import { useIsSignedIn } from "../../../../features/auth/access-level";
 
@@ -50,7 +50,8 @@ interface Section {
 }
 
 function HomeList(): ReactNode {
-    const [uiState, setUiState] = useUiState();
+    const uiState = useGetUiState();
+    const setUiState = useSetUiState();
     // Not persisted: search results open on every visit, unlike the library.
     const [isSearchOpen, setIsSearchOpen] = useState(true);
     const libraryId = useLibraryId();
diff --git a/src/frontend/routes/app/route.tsx b/src/frontend/routes/app/route.tsx
index 0967ab05..da339db8 100644
--- a/src/frontend/routes/app/route.tsx
+++ b/src/frontend/routes/app/route.tsx
@@ -1,6 +1,7 @@
 import {
     createFileRoute,
     Outlet,
+    redirect,
     retainSearchParams,
     type SearchSchemaInput
 } from "@tanstack/react-router";
@@ -12,7 +13,7 @@ import { OnshapeParams } from "../../lib/onshape-params";
 import { AppNavbar } from "../../components/app-navbar";
 import { SectionLoading } from "../../components/app-zero-state";
 import { useMessageListener } from "../../lib/messages";
-import { useSignInToast } from "../../features/auth/sign-in";
+import { updateUiState } from "../../lib/ui-state";
 import { RootAppError } from "../../components/root-error";
 
 export const Route = createFileRoute("/app")({
@@ -21,7 +22,32 @@ export const Route = createFileRoute("/app")({
         return search as unknown as OnshapeParams;
     },
     search: {
-        middlewares: [retainSearchParams(true)]
+        // What Onshape launched us with, which every navigation keeps. The
+        // theme rides along too, but only as far as beforeLoad below.
+        middlewares: [
+            retainSearchParams([
+                "documentId",
+                "instanceId",
+                "instanceType",
+                "elementId",
+                "elementType",
+                "systemTheme",
+                "server"
+            ])
+        ]
+    },
+    beforeLoad: ({ search, location }) => {
+        // The entry redirect seeds the theme the account last saved; ui-state
+        // is what the app reads from here on, so take it and drop the
+        // parameter rather than leave a second answer in the url.
+        if (search.theme) {
+            updateUiState({ theme: search.theme });
+            throw redirect({
+                to: location.pathname,
+                search: { ...search, theme: undefined },
+                replace: true
+            });
+        }
     },
     errorComponent: RootAppError
 });
@@ -32,7 +58,6 @@ function App() {
     const { ref: headerRef, height: headerHeight } = useElementSize();
 
     useMessageListener();
-    useSignInToast();
 
     return (
         <AppShell header={{ height: headerHeight || 56 }}>
diff --git a/src/frontend/routes/index.tsx b/src/frontend/routes/index.tsx
index 92ca6712..7a3d09f6 100644
--- a/src/frontend/routes/index.tsx
+++ b/src/frontend/routes/index.tsx
@@ -1,23 +1,32 @@
 import { createFileRoute, redirect } from "@tanstack/react-router";
-import { readLocalSettings } from "../features/settings/local-settings";
+import { getUiState, updateUiState } from "../lib/ui-state";
+import { showSuccessToast } from "../lib/notifications";
 import { RootAppError } from "../components/root-error";
 
-// Direct entry for a user opening the app outside Onshape. Onshape's own launch
-// is handled server-side, so it never reaches this route.
+// Direct entry for a user opening the app outside Onshape, and where signing in
+// returns to. Onshape's own launch is handled server-side, so it never reaches
+// this route.
 export const Route = createFileRoute("/")({
-    beforeLoad: () => {
-        const { libraryId, theme, groupId } = readLocalSettings();
+    beforeLoad: ({ search }) => {
+        const { libraryId, groupId, justSignedIn } = getUiState();
+        if (justSignedIn) {
+            updateUiState({ justSignedIn: false });
+            // Onshape only sends the caller back here on success, so arriving
+            // with the flag set is the confirmation.
+            showSuccessToast("Signed in to Onshape.");
+        }
+        // Whatever Onshape launched with rides along; only the path is ours.
         if (groupId) {
             throw redirect({
                 to: "/app/library/$libraryId/groups/$groupId",
                 params: { libraryId, groupId },
-                search: { theme }
+                search
             });
         }
         throw redirect({
             to: "/app/library/$libraryId",
             params: { libraryId },
-            search: { theme }
+            search
         });
     },
     errorComponent: RootAppError
diff --git a/src/frontend/theme.ts b/src/frontend/theme.ts
index 33f7149e..12cab245 100644
--- a/src/frontend/theme.ts
+++ b/src/frontend/theme.ts
@@ -33,7 +33,7 @@ function getLibraryColor(libraryId: string): string {
     }
 }
 
-/** The chrome stays neutral; a library's color is an accent on its controls. */
+/** The frame stays neutral; a library's color is an accent on its controls. */
 export function createAppTheme(libraryId: string) {
     return createTheme({
         colors: { frcGreen },

From c207934cf28c9d5a5811f6bef9ca45e201e087d1 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 31 Aug 2026 04:10:50 +0000
Subject: [PATCH 12/40] Drop the tests for the unit folding that was removed

The mark still ends its number, which is what the tests that remain
cover; `1 in` still reaches the 1" configuration through the term
scoring rather than through canonicalization.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018tgfuCHjVFvejjMe7WmEFL
---
 src/frontend/features/search/search.test.ts | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/src/frontend/features/search/search.test.ts b/src/frontend/features/search/search.test.ts
index 6ecfb6c6..89066f67 100644
--- a/src/frontend/features/search/search.test.ts
+++ b/src/frontend/features/search/search.test.ts
@@ -75,23 +75,6 @@ describe("tokenize", () => {
         expect(tokenize("1/2 Bearing")).toEqual(["0.5", "Bearing"]);
     });
 
-    it("spells a size's unit as the mark, however it was written", () => {
-        for (const size of ['1"', "1in", "1 in", "1 inch", "1 inches"]) {
-            expect(tokenize(size + " Standoff")).toEqual(['1"', "Standoff"]);
-        }
-        expect(tokenize("1/2 in Standoff")).toEqual(['0.5"', "Standoff"]);
-    });
-
-    // Only a unit is folded away; a word that merely starts with it is a word.
-    it("leaves a word beginning with the unit alone", () => {
-        expect(tokenize("8 in-line Insert")).toEqual([
-            "8",
-            "in",
-            "line",
-            "Insert"
-        ]);
-    });
-
     // The mark is what makes `1"` a size rather than a prefix of 1.5 and 16T.
     it("keeps an inch mark on the number it measures", () => {
         expect(tokenize('1" Hex Shaft')).toEqual(['1"', "Hex", "Shaft"]);

From 80ae0f42dc54125dcbdd40e46dc89fb4270fdd59 Mon Sep 17 00:00:00 2001
From: Alex Kempen <alex.bookreader@gmail.com>
Date: Sun, 30 Aug 2026 23:11:28 -0500
Subject: [PATCH 13/40] Refactor vendor parsing

---
 src/backend/features/configurations/utils.ts | 12 ++++++------
 src/backend/features/library/vendors.test.ts |  4 ++--
 src/backend/features/library/vendors.ts      |  6 +++---
 src/backend/features/load/parse-vendors.ts   |  4 ++--
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/backend/features/configurations/utils.ts b/src/backend/features/configurations/utils.ts
index 74a78814..d085bad1 100644
--- a/src/backend/features/configurations/utils.ts
+++ b/src/backend/features/configurations/utils.ts
@@ -16,8 +16,7 @@ import {
 import {
     Vendor,
     getVendorPartUrl,
-    parsePartNumberVendor,
-    toVendor
+    parseVendorFromPartNumber
 } from "../library/vendors";
 import { LogicalOp, QuantityType, Unit } from "./enums";
 import { type EvaluateOptions, valueWithUnits } from "./input-parser";
@@ -98,10 +97,11 @@ export function getPartUrl(
     if (record.description && /^https?:\/\//i.test(record.description)) {
         return record.description;
     }
-    const vendor =
-        parsePartNumberVendor(record.partNumber) ??
-        toVendor(record.vendor) ??
-        (vendors.length === 1 ? vendors[0] : undefined);
+    // WCP-123 -> WCP
+    let vendor = parseVendorFromPartNumber(record.partNumber);
+    if (!vendor && vendors.length === 1) {
+        vendor = vendors[0];
+    }
     return getVendorPartUrl(vendor, record.partNumber);
 }
 
diff --git a/src/backend/features/library/vendors.test.ts b/src/backend/features/library/vendors.test.ts
index 6d07e7f4..60618f9e 100644
--- a/src/backend/features/library/vendors.test.ts
+++ b/src/backend/features/library/vendors.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { Vendor, getVendorPartUrl, toVendor } from "./vendors";
+import { Vendor, getVendorPartUrl, parseVendor } from "./vendors";
 
 describe("getVendorPartUrl", () => {
     // Each vendor writes its own casing, and only some have a per-part page.
@@ -53,7 +53,7 @@ describe("toVendor", () => {
         ["", undefined],
         [undefined, undefined]
     ])("resolves %s", (text, expected) => {
-        expect(toVendor(text)).toBe(expected);
+        expect(parseVendor(text)).toBe(expected);
     });
 });
 
diff --git a/src/backend/features/library/vendors.ts b/src/backend/features/library/vendors.ts
index 29563eed..bc2c7f02 100644
--- a/src/backend/features/library/vendors.ts
+++ b/src/backend/features/library/vendors.ts
@@ -19,7 +19,7 @@ export enum Vendor {
  * Resolves the free text Onshape carries as a vendor to one we know, written
  * either as its code or as its full name.
  */
-export function toVendor(vendor: string | undefined): Vendor | undefined {
+export function parseVendor(vendor: string | undefined): Vendor | undefined {
     const text = vendor?.trim().toUpperCase();
     if (!text) {
         return undefined;
@@ -35,10 +35,10 @@ export function toVendor(vendor: string | undefined): Vendor | undefined {
  * The vendor a part number names itself, e.g. `WCP-1025` — more precise than an
  * insertable's tagging, which is generic wherever one part spans vendors.
  */
-export function parsePartNumberVendor(
+export function parseVendorFromPartNumber(
     partNumber: string | undefined
 ): Vendor | undefined {
-    return toVendor(/^([A-Za-z]+)-/.exec(partNumber?.trim() ?? "")?.[1]);
+    return parseVendor(/^([A-Za-z]+)-/.exec(partNumber?.trim() ?? "")?.[1]);
 }
 
 /**
diff --git a/src/backend/features/load/parse-vendors.ts b/src/backend/features/load/parse-vendors.ts
index 5c725dea..06f0c3dc 100644
--- a/src/backend/features/load/parse-vendors.ts
+++ b/src/backend/features/load/parse-vendors.ts
@@ -1,4 +1,4 @@
-import { Vendor, toVendor } from "../library/vendors";
+import { Vendor, parseVendor } from "../library/vendors";
 import {
     ParameterType,
     type ConfigurationParameter,
@@ -18,7 +18,7 @@ export function parseNameVendor(name: string): Vendor | undefined {
 
 /** A vendor an option names, as a token within its label or as the whole of it. */
 function parseOptionVendor(optionName: string): Vendor | undefined {
-    return parseNameVendor(optionName) ?? toVendor(optionName);
+    return parseNameVendor(optionName) ?? parseVendor(optionName);
 }
 
 export function parseVendors(

From 0b7810a9135675113addd370875784670e7563e4 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 31 Aug 2026 12:41:20 +0000
Subject: [PATCH 14/40] Consolidate trimming, and give the part-number rule one
 home
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Trimming and case-folding were sprinkled across the record parser, the
vendor lookup, the index and the frontend's display rule, and the
placeholder rule ran only at render — so `N/A` reached the index and
searching it returned noise, while "repeats the name" was written twice.

`clean` and `equalsIgnoreCase` are now a shared leaf, and one
`meaningfulPartNumber` says whether a number identifies anything. The
frontend's displayPartNumber delegates to it, so what is shown and what
is indexed cannot drift apart. The escaped-slash literals read as
strings while they are being touched.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018tgfuCHjVFvejjMe7WmEFL
---
 .../configurations/part-number.test.ts        | 24 ++++++++++++++
 .../features/configurations/part-number.ts    | 20 ++++++++++++
 src/backend/features/configurations/utils.ts  |  5 ++-
 src/backend/features/library/vendors.ts       |  9 ++++--
 .../load/parse-configuration-records.ts       | 24 ++++++--------
 src/backend/lib/text.test.ts                  | 31 +++++++++++++++++++
 src/backend/lib/text.ts                       | 15 +++++++++
 src/frontend/lib/part-number.test.ts          | 20 ------------
 src/frontend/lib/part-number.ts               | 18 +----------
 9 files changed, 111 insertions(+), 55 deletions(-)
 create mode 100644 src/backend/features/configurations/part-number.test.ts
 create mode 100644 src/backend/features/configurations/part-number.ts
 create mode 100644 src/backend/lib/text.test.ts
 create mode 100644 src/backend/lib/text.ts
 delete mode 100644 src/frontend/lib/part-number.test.ts

diff --git a/src/backend/features/configurations/part-number.test.ts b/src/backend/features/configurations/part-number.test.ts
new file mode 100644
index 00000000..ce96049a
--- /dev/null
+++ b/src/backend/features/configurations/part-number.test.ts
@@ -0,0 +1,24 @@
+import { describe, expect, it } from "vitest";
+import { meaningfulPartNumber } from "./part-number";
+
+describe("meaningfulPartNumber", () => {
+    it.each(["N/A", "n/a", " N/a "])("hides the placeholder %s", (value) => {
+        expect(meaningfulPartNumber(value)).toBeUndefined();
+    });
+
+    it.each([undefined, null, "", "  "])("hides a blank %s", (value) => {
+        expect(meaningfulPartNumber(value)).toBeUndefined();
+    });
+
+    it("hides a number that only repeats the name it sits under", () => {
+        expect(meaningfulPartNumber(" spacer ", "Spacer")).toBeUndefined();
+    });
+
+    it("keeps a real number, trimmed", () => {
+        expect(meaningfulPartNumber(" WCP-1025 ", "Gearbox")).toBe("WCP-1025");
+    });
+
+    it("keeps one that merely contains the placeholder", () => {
+        expect(meaningfulPartNumber("NA-1234")).toBe("NA-1234");
+    });
+});
diff --git a/src/backend/features/configurations/part-number.ts b/src/backend/features/configurations/part-number.ts
new file mode 100644
index 00000000..e462ff58
--- /dev/null
+++ b/src/backend/features/configurations/part-number.ts
@@ -0,0 +1,20 @@
+import { clean, equalsIgnoreCase } from "../../lib/text";
+
+/** Admins write this in where a generic part has no real number to give. */
+const PLACEHOLDER_PART_NUMBER = new RegExp("^n/a$", "i");
+
+/**
+ * The part number when it identifies the part, and nothing when it doesn't — a
+ * placeholder, or a repeat of the name it sits under. One rule for indexing and
+ * display alike, so a number nobody can search for is never shown either.
+ */
+export function meaningfulPartNumber(
+    partNumber: string | undefined | null,
+    name?: string | null
+): string | undefined {
+    const text = clean(partNumber);
+    if (!text || PLACEHOLDER_PART_NUMBER.test(text)) {
+        return undefined;
+    }
+    return equalsIgnoreCase(text, name) ? undefined : text;
+}
diff --git a/src/backend/features/configurations/utils.ts b/src/backend/features/configurations/utils.ts
index d085bad1..578812ff 100644
--- a/src/backend/features/configurations/utils.ts
+++ b/src/backend/features/configurations/utils.ts
@@ -90,11 +90,14 @@ export function evaluateCondition(
  * The page for a part, in descending precision: a description that is already a
  * url, then the vendor the part number names, then the taggings standing in.
  */
+/** A description holding a link is the link, rather than a description. */
+const ABSOLUTE_URL = new RegExp("^https?://", "i");
+
 export function getPartUrl(
     record: PartMetadata,
     vendors: Vendor[] = []
 ): string | undefined {
-    if (record.description && /^https?:\/\//i.test(record.description)) {
+    if (record.description && ABSOLUTE_URL.test(record.description)) {
         return record.description;
     }
     // WCP-123 -> WCP
diff --git a/src/backend/features/library/vendors.ts b/src/backend/features/library/vendors.ts
index bc2c7f02..81fd8e98 100644
--- a/src/backend/features/library/vendors.ts
+++ b/src/backend/features/library/vendors.ts
@@ -1,3 +1,8 @@
+import { clean } from "../../lib/text";
+
+/** A part number's leading letters, which name the vendor that sells it. */
+const VENDOR_PREFIX = new RegExp("^([A-Za-z]+)-");
+
 /** The vendors an insertable can come from, and how they are displayed. */
 export enum Vendor {
     AM = "AM",
@@ -20,7 +25,7 @@ export enum Vendor {
  * either as its code or as its full name.
  */
 export function parseVendor(vendor: string | undefined): Vendor | undefined {
-    const text = vendor?.trim().toUpperCase();
+    const text = clean(vendor)?.toUpperCase();
     if (!text) {
         return undefined;
     }
@@ -38,7 +43,7 @@ export function parseVendor(vendor: string | undefined): Vendor | undefined {
 export function parseVendorFromPartNumber(
     partNumber: string | undefined
 ): Vendor | undefined {
-    return parseVendor(/^([A-Za-z]+)-/.exec(partNumber?.trim() ?? "")?.[1]);
+    return parseVendor(VENDOR_PREFIX.exec(clean(partNumber) ?? "")?.[1]);
 }
 
 /**
diff --git a/src/backend/features/load/parse-configuration-records.ts b/src/backend/features/load/parse-configuration-records.ts
index 70eed9c8..1ffe291c 100644
--- a/src/backend/features/load/parse-configuration-records.ts
+++ b/src/backend/features/load/parse-configuration-records.ts
@@ -31,6 +31,7 @@ import type {
 } from "../../lib/onshape/types";
 import { type LoadContext, getOnshapeApiFromContext } from "./context";
 import { ONSHAPE_STEP_RETRIES } from "./steps";
+import { clean } from "../../lib/text";
 
 /** Configurations fetched per workflow step. */
 const BATCH_SIZE = 20;
@@ -59,8 +60,7 @@ export const INDEXING_ISSUE_TYPES = [
     BuildIssueType.CONFIGURATION_LIMIT_EXCEEDED,
     BuildIssueType.MANUAL_INDEXING_REQUIRED,
     BuildIssueType.MULTIPLE_PARTS,
-    BuildIssueType.UNSTABLE_COMPOSITE,
-    BuildIssueType.NO_PART_NUMBER
+    BuildIssueType.UNSTABLE_COMPOSITE
 ];
 
 /** Whether to index an insertable, and how to flag it if we don't. */
@@ -107,12 +107,6 @@ export function decideIndexing(
     return { shouldIndex, buildIssues: [], configurations };
 }
 
-/** Trims a raw metadata value; a missing or blank one becomes `null`. */
-function normalizeText(value: string | undefined | null): string | undefined {
-    const trimmed = value?.trim();
-    return trimmed ? trimmed : undefined;
-}
-
 /** What a part studio's parts resolve to, before build issues are decided. */
 export interface PartsEvaluation {
     /** True when more than one part could be the one to index. */
@@ -170,11 +164,11 @@ export function parsePartStudioRecord(
     const part = evaluation.partToUse;
     return {
         configuration,
-        partNumber: normalizeText(part?.partNumber),
-        name: normalizeText(part?.name),
-        description: normalizeText(part?.description),
-        material: normalizeText(part?.material?.displayName),
-        vendor: normalizeText(part?.vendor),
+        partNumber: clean(part?.partNumber),
+        name: clean(part?.name),
+        description: clean(part?.description),
+        material: clean(part?.material?.displayName),
+        vendor: clean(part?.vendor),
         hasMultipleParts: evaluation.hasMultipleParts,
         isOpenComposite: evaluation.isOpenComposite
     };
@@ -192,10 +186,10 @@ const METADATA_FIELDS = {
 /** Reads a metadata property value as text; materials arrive as `{displayName}`. */
 function readMetadataValue(value: unknown): string | undefined {
     if (typeof value === "string") {
-        return normalizeText(value);
+        return clean(value);
     }
     if (value && typeof value === "object" && "displayName" in value) {
-        return normalizeText((value as { displayName?: string }).displayName);
+        return clean((value as { displayName?: string }).displayName);
     }
     return undefined;
 }
diff --git a/src/backend/lib/text.test.ts b/src/backend/lib/text.test.ts
new file mode 100644
index 00000000..24bf40f0
--- /dev/null
+++ b/src/backend/lib/text.test.ts
@@ -0,0 +1,31 @@
+import { describe, expect, it } from "vitest";
+import { clean, equalsIgnoreCase } from "./text";
+
+describe("clean", () => {
+    it("trims the value", () => {
+        expect(clean("  WCP-1025 ")).toBe("WCP-1025");
+    });
+
+    it.each([undefined, null, "", "   "])(
+        "reads %s as nothing at all",
+        (value) => {
+            expect(clean(value)).toBeUndefined();
+        }
+    );
+});
+
+describe("equalsIgnoreCase", () => {
+    it("ignores case and surrounding space", () => {
+        expect(equalsIgnoreCase(" Spacer ", "spacer")).toBe(true);
+    });
+
+    it("separates different text", () => {
+        expect(equalsIgnoreCase("Spacer", "Standoff")).toBe(false);
+    });
+
+    // Two parts with nothing to say are not thereby the same part.
+    it("does not equate two blanks with a value", () => {
+        expect(equalsIgnoreCase("  ", undefined)).toBe(true);
+        expect(equalsIgnoreCase("Spacer", undefined)).toBe(false);
+    });
+});
diff --git a/src/backend/lib/text.ts b/src/backend/lib/text.ts
new file mode 100644
index 00000000..5d0b3fc5
--- /dev/null
+++ b/src/backend/lib/text.ts
@@ -0,0 +1,15 @@
+/** Trimming and casing, defined once: both sides import this leaf. */
+
+/** A value's meaningful text, or nothing when it is blank. */
+export function clean(text: string | undefined | null): string | undefined {
+    const trimmed = text?.trim();
+    return trimmed ? trimmed : undefined;
+}
+
+/** Whether two values say the same thing, ignoring case and surrounding space. */
+export function equalsIgnoreCase(
+    a: string | undefined | null,
+    b: string | undefined | null
+): boolean {
+    return clean(a)?.toLowerCase() === clean(b)?.toLowerCase();
+}
diff --git a/src/frontend/lib/part-number.test.ts b/src/frontend/lib/part-number.test.ts
deleted file mode 100644
index fe629aa9..00000000
--- a/src/frontend/lib/part-number.test.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { displayPartNumber } from "./part-number";
-
-describe("displayPartNumber", () => {
-    it.each(["N/A", "n/a", " N/a "])("hides the placeholder %s", (value) => {
-        expect(displayPartNumber(value)).toBeUndefined();
-    });
-
-    it("hides a number that only repeats the name it sits under", () => {
-        expect(displayPartNumber(" spacer ", "Spacer")).toBeUndefined();
-    });
-
-    it("keeps a real number, trimmed", () => {
-        expect(displayPartNumber(" WCP-1025 ", "Gearbox")).toBe("WCP-1025");
-    });
-
-    it("keeps one that merely contains the placeholder", () => {
-        expect(displayPartNumber("NA-1234")).toBe("NA-1234");
-    });
-});
diff --git a/src/frontend/lib/part-number.ts b/src/frontend/lib/part-number.ts
index e0987111..4935e52b 100644
--- a/src/frontend/lib/part-number.ts
+++ b/src/frontend/lib/part-number.ts
@@ -1,17 +1 @@
-/** Admins write this in where a generic part has no real number to give. */
-const PLACEHOLDER_PART_NUMBER = /^n\/a$/i;
-
-/**
- * The part number to show, or nothing when it identifies nothing — a
- * placeholder, or a repeat of the name it sits under.
- */
-export function displayPartNumber(
-    partNumber: string | undefined,
-    name?: string
-): string | undefined {
-    const text = partNumber?.trim();
-    if (!text || PLACEHOLDER_PART_NUMBER.test(text)) {
-        return undefined;
-    }
-    return text.toLowerCase() === name?.trim().toLowerCase() ? undefined : text;
-}
+export { meaningfulPartNumber as displayPartNumber } from "@backend/features/configurations/part-number";

From 6dcb0f6b333521376732ac38b6a25d8f6e0b6fae Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 31 Aug 2026 12:41:22 +0000
Subject: [PATCH 15/40] Index a part number as an identifier, not as a
 description
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

One tokenizer ran over every field, so a part number was read as prose:
217-2600 became 217 and 2600, TTB-0016 lost its zeros, and the fraction
in TTB-0016-5/32 was folded into a decimal. None of that identifies the
part any more.

Tokenizing is now field-aware. A part number is indexed as typed plus
its segments, so it is found whole or by either half, zeros included. A
name keeps the decimal canonicalization its sizes need, since the
standards write the same measurement as 1/2" and 0.5". A query has no
field, so it offers both readings — minus the pieces that would only
flood: a bare size is not split into digits, and the lone letters left
by splitting `n/a` are dropped. Commas no longer stick to the word
before them, which the dimensions in a name are full of.

The frontend scorer reads each field the same way, and the leading-zero
underline hack goes with the zeros it worked around.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018tgfuCHjVFvejjMe7WmEFL
---
 .../features/search/search-index.test.ts      | 304 +++++++++++++++++-
 src/backend/features/search/search-index.ts   | 163 ++++++----
 src/frontend/features/search/search.test.ts   | 117 +++----
 src/frontend/features/search/search.ts        |  67 ++--
 4 files changed, 502 insertions(+), 149 deletions(-)

diff --git a/src/backend/features/search/search-index.test.ts b/src/backend/features/search/search-index.test.ts
index 7a82df11..d9029f47 100644
--- a/src/backend/features/search/search-index.test.ts
+++ b/src/backend/features/search/search-index.test.ts
@@ -1,8 +1,202 @@
 import { describe, expect, it } from "vitest";
-import { toSearchRecords } from "./search-index";
+import {
+    buildSearchDb,
+    normalizeForMatch,
+    processTerm,
+    tokenize,
+    tokenizeName,
+    tokenizePartNumber,
+    tokenizeQuery,
+    toSearchRecords
+} from "./search-index";
+import { LibraryOut } from "../library/contract";
+import { ElementType } from "../../lib/onshape/element-type";
 import { Vendor } from "../library/vendors";
 import { configurationRecord as record } from "../../../__test_utils__/configuration-fixtures";
 
+// A part number identifies the part; splitting or folding it makes it name a
+// different one, so it is indexed as typed alongside its segments.
+describe("tokenizePartNumber", () => {
+    it("keeps the number whole, and adds its segments", () => {
+        expect(tokenizePartNumber("WCP-1025")).toEqual([
+            "wcp-1025",
+            "wcp",
+            "1025"
+        ]);
+    });
+
+    it("keeps leading zeros, which spell the segment", () => {
+        expect(tokenizePartNumber("TTB-0016")).toEqual([
+            "ttb-0016",
+            "ttb",
+            "0016"
+        ]);
+    });
+
+    it("leaves a fraction inside a number alone", () => {
+        expect(tokenizePartNumber("TTB-0016-5/32")).toEqual([
+            "ttb-0016-5/32",
+            "ttb",
+            "0016",
+            "5",
+            "32"
+        ]);
+    });
+
+    it("does not read a number as a quantity", () => {
+        expect(tokenizePartNumber("217-2600")).toEqual([
+            "217-2600",
+            "217",
+            "2600"
+        ]);
+    });
+
+    it.each(["", "   "])("has nothing to say about %s", (value) => {
+        expect(tokenizePartNumber(value)).toEqual([]);
+    });
+});
+
+// A name describes the part, so its sizes are read as sizes.
+describe("tokenizeName", () => {
+    it("splits on punctuation, keeping the words whole", () => {
+        expect(tokenizeName('1" Linear (REV)')).toEqual([
+            '1"',
+            "Linear",
+            "REV"
+        ]);
+        expect(tokenizeName("Bearings & Bushings #X-Contact")).toEqual([
+            "Bearings",
+            "Bushings",
+            "X",
+            "Contact"
+        ]);
+    });
+
+    // The standards write the same measurement both ways, so one decimal form
+    // is what lets either spelling find the other.
+    it("canonicalizes fractions and decimals to a 2-dp decimal", () => {
+        expect(tokenizeName("1/2")).toEqual(["0.5"]);
+        expect(tokenizeName(".5")).toEqual(["0.5"]);
+        expect(tokenizeName("0.50")).toEqual(["0.5"]);
+        expect(tokenizeName("3/4")).toEqual(["0.75"]);
+        expect(tokenizeName("1-1/2")).toEqual(["1.5"]);
+        expect(tokenizeName("1/3")).toEqual(["0.33"]);
+    });
+
+    it.each([
+        ['1/2" Hex Bearing (1.125" OD, 0.313" WD, Flanged)', '0.5"'],
+        // Stored to 2dp, so `1.125` and `1.13` are one size.
+        ['1/2" Hex Bearing (1.125" OD, 0.313" WD, Flanged)', '1.13"'],
+        ['#10-32 x 2.5" L SHCS', "10"],
+        // Sizes are stored to 2dp, so `.159` and `.16` are one size.
+        [".159 ID x SplineXL OD MotionX Hub", "0.16"]
+    ])("reads the sizes in %s", (name, size) => {
+        expect(tokenizeName(name)).toContain(size);
+    });
+
+    it("keeps a thread spec's halves apart", () => {
+        expect(tokenizeName("#10-32 Screw")).toEqual(["10", "32", "Screw"]);
+    });
+
+    // The standards list a part's dimensions in a comma-separated aside.
+    it("does not leave a comma stuck to the word before it", () => {
+        expect(tokenizeName('1.125" OD, Flanged')).toEqual([
+            '1.13"',
+            "OD",
+            "Flanged"
+        ]);
+    });
+
+    // The mark is what makes `1"` a size rather than a prefix of 1.5 and 16T.
+    it("keeps an inch mark on the number it measures", () => {
+        expect(tokenizeName('1" Hex Shaft')).toEqual(['1"', "Hex", "Shaft"]);
+        expect(tokenizeName('1/2" Hex')).toEqual(['0.5"', "Hex"]);
+        expect(tokenizeName('1"x2" Tube')).toEqual(['1"', 'x2"', "Tube"]);
+    });
+
+    it("still drops quotes that quote something", () => {
+        expect(tokenizeName('The "Long" Bracket')).toEqual([
+            "The",
+            "Long",
+            "Bracket"
+        ]);
+    });
+});
+
+describe("processTerm", () => {
+    it.each(["MAXSpline", "MaxSpline"])("splits %s into its words", (term) => {
+        expect(processTerm(term)).toEqual(
+            expect.arrayContaining(["max", "spline", "maxspline"])
+        );
+    });
+
+    it.each([
+        ["SplineXL", ["spline", "xl"]],
+        ["roboRIO", ["robo", "rio"]],
+        ["MAXTube", ["max", "tube"]]
+    ])("splits the product name %s", (term, words) => {
+        expect(processTerm(term)).toEqual(expect.arrayContaining(words));
+    });
+
+    // Its segments are already separate tokens; splitting the code again would
+    // only invent words inside it.
+    it("leaves a part number whole", () => {
+        expect(processTerm("WCP-1025", "partNumbers")).toEqual(["wcp-1025"]);
+    });
+});
+
+describe("tokenize", () => {
+    it("reads each field the way that field is written", () => {
+        expect(tokenize("TTB-0016-5/32", "partNumbers")).toContain("0016");
+        expect(tokenize("TTB-0016-5/32", "partNames")).toEqual([
+            "TTB",
+            "16",
+            "0.16"
+        ]);
+    });
+});
+
+// A query has no field, so it has to offer both readings: the caller may have
+// typed a size or a part number.
+describe("tokenizeQuery", () => {
+    it("offers the part number as typed, and as a name would read it", () => {
+        expect(tokenizeQuery("TTB-0016")).toEqual(
+            expect.arrayContaining(["ttb", "0016", "ttb-0016"])
+        );
+    });
+
+    // `1` prefix-matches every number in the library, so a size is not split
+    // into the segments a part number would be.
+    it("does not split a bare size into its digits", () => {
+        expect(tokenizeQuery("1/2")).toEqual(["0.5", "1/2"]);
+    });
+
+    it("leaves an ordinary word alone", () => {
+        expect(tokenizeQuery("bearing")).toEqual(["bearing"]);
+    });
+
+    // Splitting the placeholder leaves `n` and `a`, and a one-letter prefix
+    // matches most of the library.
+    it.each(["n/a", "N/A"])(
+        "drops the letters left over from splitting %s",
+        (query) => {
+            expect(tokenizeQuery(query)).toEqual(["n/a"]);
+        }
+    );
+
+    it("keeps a lone digit, which names a size", () => {
+        expect(tokenizeQuery("1")).toEqual(["1"]);
+    });
+});
+
+describe("normalizeForMatch", () => {
+    it("reads a written size and its decimal as one string", () => {
+        expect(normalizeForMatch('1/2" Hex')).toBe(
+            normalizeForMatch('.5" hex')
+        );
+    });
+});
+
 describe("toSearchRecords", () => {
     it("drops a part number that only repeats the name", () => {
         const [result] = toSearchRecords([
@@ -45,4 +239,112 @@ describe("toSearchRecords", () => {
     it("drops a record with neither", () => {
         expect(toSearchRecords([record({})])).toHaveLength(0);
     });
+
+    // The placeholder an admin writes in identifies nothing, so it is dropped
+    // here rather than indexed and shown.
+    it("drops a placeholder part number", () => {
+        const [result] = toSearchRecords([
+            record({ partNumber: "N/A", name: "Spacer" })
+        ]);
+        expect(result).toMatchObject({ partNumber: undefined, name: "Spacer" });
+    });
+
+    it("will not link a placeholder to a vendor", () => {
+        const [result] = toSearchRecords(
+            [record({ partNumber: "N/A", name: "Spacer" })],
+            [Vendor.WCP]
+        );
+        expect(result.url).toBeUndefined();
+    });
+
+    it("drops a record the placeholder leaves with nothing", () => {
+        expect(toSearchRecords([record({ partNumber: "N/A" })])).toEqual([]);
+    });
+
+    it("keeps the first of a repeated (number, name)", () => {
+        expect(
+            toSearchRecords([
+                record({ partNumber: "WCP-1025", name: "Gear" }),
+                record({ partNumber: "WCP-1025", name: "Gear" })
+            ])
+        ).toHaveLength(1);
+    });
+});
+
+function library(name: string, vendors: Vendor[] = []): LibraryOut {
+    return {
+        groupOrder: ["g1"],
+        groups: {
+            g1: {
+                id: "g1",
+                documentId: "d1",
+                path: { documentId: "d1", instanceId: "v1", instanceType: "v" },
+                name: "Group",
+                isLoaded: true,
+                insertableOrder: ["i1"]
+            }
+        },
+        insertables: {
+            i1: {
+                id: "i1",
+                elementId: "e1",
+                groupId: "g1",
+                documentId: "d1",
+                versionId: "v1",
+                path: {
+                    documentId: "d1",
+                    instanceId: "v1",
+                    instanceType: "v",
+                    elementId: "e1"
+                },
+                name,
+                microversionId: "mv1",
+                isVisible: true,
+                supportsFasten: false,
+                elementType: ElementType.PART_STUDIO,
+                isConfigurable: false,
+                vendors
+            }
+        }
+    };
+}
+
+describe("buildSearchDb", () => {
+    /** The document as the index stored it. */
+    const stored = (db: ReturnType<typeof buildSearchDb>) =>
+        db.getStoredFields("i1") as unknown as Record<string, unknown>;
+
+    it("keeps a placeholder part number out of the index and the records", () => {
+        const db = buildSearchDb(library("Spacer"), {
+            i1: [
+                record({
+                    partNumber: "N/A",
+                    name: "Spacer",
+                    configuration: {}
+                })
+            ]
+        });
+        expect(db.search("n/a")).toEqual([]);
+        expect(stored(db).records).toEqual([
+            expect.objectContaining({ partNumber: undefined })
+        ]);
+    });
+
+    // The vendor is a resolution fallback, not something to match against.
+    it("never searches the vendor", () => {
+        const db = buildSearchDb(library("Spacer", [Vendor.WCP]), {
+            i1: [
+                record({
+                    partNumber: "WCP-1025",
+                    name: "Spacer",
+                    vendor: "WestCoast Products",
+                    configuration: {}
+                })
+            ]
+        });
+        expect(db.search("westcoast")).toEqual([]);
+        expect(stored(db).records).toEqual([
+            expect.not.objectContaining({ vendor: expect.anything() })
+        ]);
+    });
 });
diff --git a/src/backend/features/search/search-index.ts b/src/backend/features/search/search-index.ts
index f0167ead..614469c5 100644
--- a/src/backend/features/search/search-index.ts
+++ b/src/backend/features/search/search-index.ts
@@ -7,31 +7,20 @@ import { LibraryOut } from "../library/contract";
 import { Vendor } from "../library/vendors";
 import { ConfigurationRecord, SearchRecord } from "../configurations/models";
 import { getPartUrl } from "../configurations/utils";
+import { meaningfulPartNumber } from "../configurations/part-number";
+import { clean } from "../../lib/text";
 
-const deliminator = "^";
+/** Where a name breaks: punctuation and space, plus a quote used as a quote. */
+const NAME_SEPARATORS = new RegExp("(?<!\\d)\"|[-()',#&\\s/]+");
 
-/**
- * Adds spaces to a given string so prefix matching is more efficient.
- */
-export function processTerm(term: string): string[] {
-    // Split between lowercase-to-uppercase (camelCase -> camel case)
-    const camelSplit = term
-        .replace(/([a-z])([A-Z])/g, `$1${deliminator}$2`)
-        .split(deliminator);
-
-    // Insert spaces to handle MAXTube->MAX Tube, VEXpro->VEX pro
-    const pascalSplit = term
-        .replace(/([A-Z])([A-Z][a-z])/g, `$1${deliminator}$2`)
-        .split(deliminator);
+/** Where a part number breaks into segments, keeping the whole alongside. */
+const PART_NUMBER_SEPARATORS = new RegExp("[-/]+");
 
-    const base = term.toLowerCase();
-
-    const terms = [...camelSplit, ...pascalSplit, base].map((t) =>
-        t.toLowerCase()
-    );
-    // Deduplicate
-    return Array.from(new Set(terms));
-}
+/** camelCase and PascalCase boundaries: MAXSpline -> max spline, MAXTube -> max tube. */
+const WORD_BOUNDARIES = new RegExp(
+    "(?<=[a-z])(?=[A-Z])|(?<=[A-Z])(?=[A-Z][a-z])",
+    "g"
+);
 
 // A mixed number, simple fraction, decimal (incl. leading-dot), or plain
 // integer. Alternatives are ordered longest-first so `1-1/2` is consumed whole,
@@ -51,7 +40,8 @@ function toDecimal(value: number): string {
 
 /**
  * Rewrites numbers and fractions to one 2-dp decimal, at index and query time
- * alike — which is what lets the raw fragments go unstored.
+ * alike — which is what lets the raw fragments go unstored. Names only: a part
+ * number is an identifier, and 217-2600 is not two thousand six hundred.
  */
 function canonicalizeNumbers(text: string): string {
     return text.replace(
@@ -95,17 +85,92 @@ export function normalizeForMatch(text: string): string {
     return canonicalizeNumbers(text).toLowerCase();
 }
 
-export function tokenize(text: string): string[] {
-    // Canonicalize before splitting: fractions span `/` and `-`. Casing stays,
+/**
+ * A name's words, with its sizes in the one decimal spelling. The inch mark
+ * stays on its number, so `1"` is a size rather than a prefix of `1.5` and `16t`.
+ */
+export function tokenizeName(text: string): string[] {
+    // Canonicalized before splitting: fractions span `/` and `-`. Casing stays,
     // since processTerm splits on camelCase.
-    return (
-        canonicalizeNumbers(text)
-            // An inch mark stays on its number and ends the token, so `1"` is a
-            // size of its own rather than a prefix of `1.5`, `10`, and `16t`.
-            .replace(/(\d")/g, `$1${deliminator}`)
-            .split(/(?<!\d)"|[-()'#&\s^/]+/)
-            .filter(Boolean)
-    );
+    return splitWithMarks(canonicalizeNumbers(text));
+}
+
+/** Splits on `NAME_SEPARATORS`, keeping a `"` that measures its number. */
+function splitWithMarks(text: string): string[] {
+    const tokens: string[] = [];
+    for (const piece of text.split(NAME_SEPARATORS)) {
+        // The split consumed the separators, so an inch mark left inside a
+        // piece ends the token it measures: `1"x2"` is two sizes.
+        for (const token of piece.split(/(?<=")/)) {
+            if (token) tokens.push(token);
+        }
+    }
+    return tokens;
+}
+
+/**
+ * A part number identifies, it does not describe: it is indexed as typed, plus
+ * its segments, so `WCP-1025` is found by the whole number or either half.
+ */
+export function tokenizePartNumber(text: string): string[] {
+    const whole = clean(text)?.toLowerCase();
+    if (!whole) {
+        return [];
+    }
+    const segments = whole.split(PART_NUMBER_SEPARATORS).filter(Boolean);
+    return Array.from(new Set([whole, ...segments]));
+}
+
+/** The fields holding an identifier rather than a description. */
+function isPartNumberField(field?: string): boolean {
+    return field === "partNumbers";
+}
+
+/** Splits a field's text the way that field reads; a query has no field. */
+export function tokenize(text: string, field?: string): string[] {
+    if (field === undefined) {
+        return tokenizeQuery(text);
+    }
+    return isPartNumberField(field)
+        ? tokenizePartNumber(text)
+        : tokenizeName(text);
+}
+
+/**
+ * A query is split both ways, since the caller may have typed either kind of
+ * text: the words of a name, and the literal a part number is indexed as.
+ */
+export function tokenizeQuery(text: string): string[] {
+    const tokens = new Set(tokenizeName(text));
+    for (const word of text.trim().toLowerCase().split(/\s+/)) {
+        if (!word) {
+            continue;
+        }
+        // Segments only for something carrying a letter, which is what a part
+        // number does: splitting a bare `1/2` would search `1`, and a prefix
+        // that short matches every number in the library.
+        for (const token of /[a-z]/.test(word)
+            ? tokenizePartNumber(word)
+            : [word]) {
+            tokens.add(token);
+        }
+    }
+    // A lone letter is the leftover of splitting something like `n/a`, and as a
+    // prefix it matches most of the library. A lone digit is a size, so it stays.
+    return Array.from(tokens).filter((token) => !/^[a-z]$/i.test(token));
+}
+
+/**
+ * Adds the words inside a compound term, so `MAXSpline` is found by `spline`.
+ * A part number is left whole: its segments are already separate tokens.
+ */
+export function processTerm(term: string, field?: string): string[] {
+    const base = term.toLowerCase();
+    if (isPartNumberField(field)) {
+        return [base];
+    }
+    const words = term.split(WORD_BOUNDARIES).map((word) => word.toLowerCase());
+    return Array.from(new Set([...words, base]));
 }
 
 export interface SearchDocument {
@@ -155,22 +220,11 @@ function uniqueJoin(values: (string | undefined)[]): string {
     ).join(" ");
 }
 
-/**
- * A part number repeating the name identifies nothing — it is what a generic
- * part is given for want of a real one — so it is neither shown nor searched.
- */
-function withoutRepeatedPartNumber(
-    record: ConfigurationRecord
-): ConfigurationRecord {
-    const repeated =
-        record.partNumber?.trim().toLowerCase() ===
-        record.name?.trim().toLowerCase();
-    return repeated ? { ...record, partNumber: undefined } : record;
-}
-
 /**
  * Keeps the first of each distinct (part number, name) in enumeration order and
- * drops records with neither. First-wins is what keeps the latest revision.
+ * drops records with neither. First-wins is what keeps the latest revision. A
+ * number that identifies nothing is dropped here, so it never reaches the
+ * index, the stored records, or a vendor url.
  */
 export function toSearchRecords(
     records: ConfigurationRecord[],
@@ -179,20 +233,21 @@ export function toSearchRecords(
     const seen = new Set<string>();
     const searchRecords: SearchRecord[] = [];
     for (const raw of records) {
-        const record = withoutRepeatedPartNumber(raw);
-        if (!record.partNumber && !record.name) {
+        const partNumber = meaningfulPartNumber(raw.partNumber, raw.name);
+        const name = clean(raw.name);
+        if (!partNumber && !name) {
             continue;
         }
-        const key = JSON.stringify([record.partNumber, record.name]);
+        const key = JSON.stringify([partNumber, name]);
         if (seen.has(key)) {
             continue;
         }
         seen.add(key);
         searchRecords.push({
-            partNumber: record.partNumber,
-            name: record.name,
-            url: getPartUrl(record, vendors),
-            configuration: record.configuration
+            partNumber,
+            name,
+            url: getPartUrl({ ...raw, partNumber }, vendors),
+            configuration: raw.configuration
         });
     }
     return searchRecords;
diff --git a/src/frontend/features/search/search.test.ts b/src/frontend/features/search/search.test.ts
index 89066f67..46ab0bc6 100644
--- a/src/frontend/features/search/search.test.ts
+++ b/src/frontend/features/search/search.test.ts
@@ -2,8 +2,6 @@ import { describe, expect, it } from "vitest";
 import MiniSearch from "minisearch";
 import {
     buildSearchDb,
-    processTerm,
-    tokenize,
     type SearchDocument
 } from "@backend/features/search/search-index";
 import { doSearch, type Position } from "./search";
@@ -25,72 +23,6 @@ const record = (
 const search = (searchDb: MiniSearch<SearchDocument>, query: string) =>
     doSearch(searchDb, query, undefined, undefined, true);
 
-describe("processTerm", () => {
-    it.each(["MAXSpline", "MaxSpline"])("splits %s into its words", (term) => {
-        expect(processTerm(term)).toEqual(
-            expect.arrayContaining(["max", "spline", "maxspline"])
-        );
-    });
-});
-
-describe("tokenize", () => {
-    it("splits on punctuation, keeping the words whole", () => {
-        expect(tokenize('1" Linear (REV)')).toEqual(['1"', "Linear", "REV"]);
-        expect(tokenize("10-32 Bearings & Bushings #X-Contact")).toEqual([
-            "10",
-            "32",
-            "Bearings",
-            "Bushings",
-            "X",
-            "Contact"
-        ]);
-    });
-
-    it("canonicalizes fractions and decimals to a 2-dp decimal", () => {
-        expect(tokenize("1/2")).toEqual(["0.5"]);
-        expect(tokenize(".5")).toEqual(["0.5"]);
-        expect(tokenize("0.50")).toEqual(["0.5"]);
-        expect(tokenize("3/4")).toEqual(["0.75"]);
-        expect(tokenize("1-1/2")).toEqual(["1.5"]);
-        expect(tokenize("1.5")).toEqual(["1.5"]);
-        expect(tokenize("1/3")).toEqual(["0.33"]);
-    });
-
-    it("keeps a leading-zero part segment out of a mixed number", () => {
-        // "0016" numbers the part; only the "5/32" is a size.
-        expect(tokenize("TTB-0016-5/32")).toEqual(["TTB", "16", "0.16"]);
-    });
-
-    it("drops leading zeros so either spelling of a segment matches", () => {
-        expect(tokenize("TTB-0016")).toEqual(["TTB", "16"]);
-        expect(tokenize("TTB-16")).toEqual(["TTB", "16"]);
-    });
-
-    it("leaves thread specs and part numbers untouched", () => {
-        expect(tokenize("10-32")).toEqual(["10", "32"]);
-        expect(tokenize("217-2600")).toEqual(["217", "2600"]);
-    });
-
-    it("canonicalizes a fraction inside a name", () => {
-        expect(tokenize("1/2 Bearing")).toEqual(["0.5", "Bearing"]);
-    });
-
-    // The mark is what makes `1"` a size rather than a prefix of 1.5 and 16T.
-    it("keeps an inch mark on the number it measures", () => {
-        expect(tokenize('1" Hex Shaft')).toEqual(['1"', "Hex", "Shaft"]);
-        expect(tokenize('1/2" Hex')).toEqual(['0.5"', "Hex"]);
-        expect(tokenize('Bearing 1"')).toEqual(["Bearing", '1"']);
-    });
-
-    it("still drops quotes that quote something", () => {
-        expect(tokenize('The "Long" Bracket')).toEqual([
-            "The",
-            "Long",
-            "Bracket"
-        ]);
-    });
-});
-
 function library(name = "Bracket"): LibraryOut {
     return {
         groupOrder: ["g1"],
@@ -290,6 +222,49 @@ describe("doSearch size matching", () => {
     });
 });
 
+// A part number is a code: it retrieves its part whole, by either half, and
+// with the zeros and separators it was written with.
+describe("doSearch part numbers", () => {
+    const searchDb = buildSearchDb(library("Hex Standoff"), {
+        i1: [
+            record("WCP-1025", {}, "Standoff"),
+            record("TTB-0016-5/32", { size: "small" }, "Small Standoff")
+        ]
+    });
+
+    it.each(["WCP-1025", "wcp-1025", "WCP", "1025"])(
+        "finds the part by %s",
+        (query) => {
+            const { hits } = search(searchDb, query);
+            expect(hits[0]?.id).toBe("i1");
+        }
+    );
+
+    it("keeps the zeros a segment was written with", () => {
+        expect(search(searchDb, "0016").hits[0]?.partNumber).toBe(
+            "TTB-0016-5/32"
+        );
+    });
+
+    it("picks the record whose number was typed out in full", () => {
+        expect(search(searchDb, "WCP-1025").hits[0].partNumber).toBe(
+            "WCP-1025"
+        );
+        expect(search(searchDb, "TTB-0016-5/32").hits[0].partNumber).toBe(
+            "TTB-0016-5/32"
+        );
+    });
+
+    // The placeholder never reaches the index, so it matches nothing rather
+    // than every part an admin left it on.
+    it("returns nothing for the placeholder", () => {
+        const withPlaceholders = buildSearchDb(library("Spacer"), {
+            i1: [record("N/A", {}, "Spacer")]
+        });
+        expect(search(withPlaceholders, "n/a").hits).toEqual([]);
+    });
+});
+
 describe("doSearch highlighting", () => {
     /** The characters `positions` underline, merged the way applyRanges does. */
     function highlighted(text: string, positions: Position[]): string {
@@ -356,8 +331,8 @@ describe("doSearch highlighting", () => {
             ).toBe("217");
         });
 
-        // The segment after a leading-zero one used to be folded into a mixed
-        // number, leaving nothing in the text for the query to underline.
+        // A part number is indexed as typed, so the whole of what was typed
+        // is there in the text to underline, dash and zeros included.
         it("underlines a leading-zero segment of the part number", () => {
             const { hits } = search(
                 buildSearchDb(library(), {
@@ -370,7 +345,7 @@ describe("doSearch highlighting", () => {
                     hits[0].partNumber!,
                     hits[0].partNumberPositions ?? []
                 )
-            ).toBe("TTB0016");
+            ).toBe("TTB-0016");
         });
 
         it("underlines the typed prefix of the part name", () => {
diff --git a/src/frontend/features/search/search.ts b/src/frontend/features/search/search.ts
index 2ae81908..c883ac73 100644
--- a/src/frontend/features/search/search.ts
+++ b/src/frontend/features/search/search.ts
@@ -3,7 +3,8 @@ import { Vendor } from "@backend/features/library/vendors";
 import {
     SearchDocument,
     normalizeForMatch,
-    tokenize
+    tokenizeName,
+    tokenizePartNumber
 } from "@backend/features/search/search-index";
 import {
     ParameterValues,
@@ -173,10 +174,10 @@ function matchedRecord(
 ): SearchRecord | undefined {
     const matchedFields = Object.values(result.match).flat();
     const byNumber = matchedFields.includes("partNumbers")
-        ? findBestRecord(query, document.records, (r) => r.partNumber)
+        ? findBestRecord(query, document.records, (r) => r.partNumber, LITERAL)
         : undefined;
     const byName = matchedFields.includes("partNames")
-        ? findBestRecord(query, document.records, (r) => r.name)
+        ? findBestRecord(query, document.records, (r) => r.name, DESCRIPTIVE)
         : undefined;
 
     const best = [byNumber, byName]
@@ -191,6 +192,27 @@ interface RecordMatch {
     score: number;
 }
 
+/**
+ * How a field's text is read for scoring: a part number is compared as typed,
+ * a name around the decimals its sizes are indexed as.
+ */
+interface FieldReader {
+    normalize: (text: string) => string;
+    terms: (text: string) => string[];
+}
+
+/** A part number identifies: `217-2600` is a code, not a number. */
+const LITERAL: FieldReader = {
+    normalize: (text) => text.trim().toLowerCase(),
+    terms: tokenizePartNumber
+};
+
+/** A name describes, so `1/2`, `.5` and `0.5` are one size. */
+const DESCRIPTIVE: FieldReader = {
+    normalize: normalizeForMatch,
+    terms: (text) => tokenizeName(text).map((term) => term.toLowerCase())
+};
+
 /**
  * How well one term is answered: a term matched whole beats one matched as a
  * prefix, which every longer number satisfies too — `1` names the size `1"`,
@@ -210,8 +232,12 @@ function termScore(valueTerms: string[], queryTerm: string): number {
 }
 
 /** How much of the query the value covers, term by term. */
-function coveredTerms(value: string, queryTerms: string[]): number {
-    const valueTerms = tokenize(value).map((term) => term.toLowerCase());
+function coveredTerms(
+    value: string,
+    queryTerms: string[],
+    field: FieldReader
+): number {
+    const valueTerms = field.terms(value);
     return queryTerms.reduce(
         (score, queryTerm) => score + termScore(valueTerms, queryTerm),
         0
@@ -225,7 +251,8 @@ function coveredTerms(value: string, queryTerms: string[]): number {
 function matchScore(
     value: string,
     normalizedQuery: string,
-    queryTerms: string[]
+    queryTerms: string[],
+    field: FieldReader
 ): number {
     let whole = 0;
     if (value === normalizedQuery) {
@@ -237,7 +264,8 @@ function matchScore(
     }
     // Outweighs full term coverage, which is worth 2 a term.
     return (
-        whole * (2 * queryTerms.length + 1) + coveredTerms(value, queryTerms)
+        whole * (2 * queryTerms.length + 1) +
+        coveredTerms(value, queryTerms, field)
     );
 }
 
@@ -248,21 +276,22 @@ function matchScore(
 function findBestRecord(
     query: string,
     records: SearchRecord[],
-    selector: (record: SearchRecord) => string | undefined
+    selector: (record: SearchRecord) => string | undefined,
+    field: FieldReader
 ): RecordMatch | undefined {
-    // Canonicalize the same way the index did, so a fraction/decimal query lines
-    // up with the stored original (e.g. `.5` matches a `"1/2 Bearing"` name).
-    const normalizedQuery = normalizeForMatch(query.trim());
+    // Read the query the way the field was indexed, so a `.5` query lines up
+    // with a stored "1/2 Bearing" and a typed part number with itself.
+    const normalizedQuery = field.normalize(query.trim());
     if (records.length === 0 || normalizedQuery === "") {
         return undefined;
     }
-    const queryTerms = tokenize(query).map((term) => term.toLowerCase());
+    const queryTerms = field.terms(query);
 
     let best: RecordMatch | undefined;
     for (const record of records) {
-        const value = normalizeForMatch(selector(record) ?? "");
+        const value = field.normalize(selector(record) ?? "");
         if (!value) continue;
-        const score = matchScore(value, normalizedQuery, queryTerms);
+        const score = matchScore(value, normalizedQuery, queryTerms, field);
         if (score > (best?.score ?? 0)) {
             best = { record, score };
         }
@@ -310,15 +339,7 @@ function generateHighlightPositions(
             new RegExp(escapeRegExp(term), "g")
         );
         for (const match of matchedLocations) {
-            // A number is indexed without its leading zeros, so underline the
-            // digits it landed inside too: `16` should light up all of `0016`.
-            const leadingZeros = /^\d+$/.test(term)
-                ? /0*$/.exec(haystack.slice(0, match.index))![0].length
-                : 0;
-            positions.push({
-                start: match.index - leadingZeros,
-                length: length + leadingZeros
-            });
+            positions.push({ start: match.index, length });
         }
     }
 

From 346be192349033136b38d89a2af04a2fbeb90bc5 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 31 Aug 2026 12:41:23 +0000
Subject: [PATCH 16/40] Remove the no-part-number check

Some vendors genuinely sell parts without part numbers, so the warning
fired as noise on them. Checking the format of a number that is there is
the useful check, and that is a separate piece of work.

Stored rows keep the issue until a reload recomputes them, where it
renders as nothing at all rather than an error.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018tgfuCHjVFvejjMe7WmEFL
---
 .../features/build-checker/checks.test.ts     | 39 +------------------
 src/backend/features/build-checker/checks.ts  | 28 +------------
 src/backend/features/build-checker/issues.ts  |  5 ---
 .../features/library/insertables/routes.ts    |  8 +---
 src/backend/features/load/load-insertable.ts  |  6 +--
 5 files changed, 4 insertions(+), 82 deletions(-)

diff --git a/src/backend/features/build-checker/checks.test.ts b/src/backend/features/build-checker/checks.test.ts
index 6cdb9144..8a04a6ec 100644
--- a/src/backend/features/build-checker/checks.test.ts
+++ b/src/backend/features/build-checker/checks.test.ts
@@ -5,7 +5,6 @@ import { BuildIssueType } from "./issues";
 import { DEFAULT_CANONICAL_CONFIGURATION } from "../configurations/canonical";
 import { thumbnailUrl } from "../thumbnails/keys";
 import { checkGroup, checkInsertable } from "./checks";
-import { configurationRecord } from "../../../__test_utils__/configuration-fixtures";
 
 /** What uploadThumbnails returns: the element's default configuration. */
 const THUMBNAILS: ThumbnailUrls = {
@@ -56,14 +55,10 @@ describe("checkGroup", () => {
     });
 });
 
-/** Only the part number matters to these checks. */
-const record = (partNumber?: string) => configurationRecord({ partNumber });
-
 describe("checkInsertable", () => {
     const HEALTHY_INSERTABLE = {
         vendors: [Vendor.REV],
-        thumbnailUrls: THUMBNAILS,
-        probes: [record("217-2600")]
+        thumbnailUrls: THUMBNAILS
     };
 
     it("returns no issues when vendors are parsed and thumbnails generated", () => {
@@ -85,36 +80,4 @@ describe("checkInsertable", () => {
         });
         expect(issues).toEqual([{ type: BuildIssueType.THUMBNAIL_FAILED }]);
     });
-
-    it("warns when a vendor part indexed without a part number", () => {
-        const issues = checkInsertable({
-            ...HEALTHY_INSERTABLE,
-            probes: [record(), record()]
-        });
-        expect(issues).toEqual([{ type: BuildIssueType.NO_PART_NUMBER }]);
-    });
-
-    it("does not warn when only some configurations lack one", () => {
-        const issues = checkInsertable({
-            ...HEALTHY_INSERTABLE,
-            probes: [record(), record("217-2600")]
-        });
-        expect(issues).toEqual([]);
-    });
-
-    // Nobody sells it, so having no part number is the expected state.
-    it("does not warn about a custom part", () => {
-        const issues = checkInsertable({
-            ...HEALTHY_INSERTABLE,
-            vendors: [Vendor.CUSTOM],
-            probes: [record()]
-        });
-        expect(issues).toEqual([]);
-    });
-
-    // Nothing was probed, so there is nothing to conclude.
-    it("does not warn when the insertable is not indexed", () => {
-        const issues = checkInsertable({ ...HEALTHY_INSERTABLE, probes: [] });
-        expect(issues).toEqual([]);
-    });
 });
diff --git a/src/backend/features/build-checker/checks.ts b/src/backend/features/build-checker/checks.ts
index 1643e83c..38ae9132 100644
--- a/src/backend/features/build-checker/checks.ts
+++ b/src/backend/features/build-checker/checks.ts
@@ -1,7 +1,6 @@
 import { ThumbnailUrls } from "../thumbnails/types";
-import { Vendor, isCustomPart } from "../library/vendors";
+import { Vendor } from "../library/vendors";
 import { addBuildIssue, BuildIssue, BuildIssueType } from "./issues";
-import type { PartMetadata } from "../configurations/models";
 
 interface GroupCheckInput {
     /** Whether the Onshape document has a designated thumbnail tab/element. */
@@ -42,8 +41,6 @@ interface InsertableCheckInput {
     vendors: Vendor[];
     /** The uploaded thumbnail URLs, or `null` when generation failed. */
     thumbnailUrls: ThumbnailUrls | null;
-    /** Every probe of the element: its own, plus one per indexed configuration. */
-    probes: (PartMetadata | null)[];
 }
 
 /**
@@ -63,28 +60,5 @@ export function checkInsertable(input: InsertableCheckInput): BuildIssue[] {
         issues = addBuildIssue(issues, { type: BuildIssueType.NO_VENDORS });
     }
 
-    issues = addBuildIssue(
-        issues,
-        ...checkIndexedPartNumber(input.vendors, input.probes)
-    );
-
     return issues;
 }
-
-/**
- * A custom part is expected to have no part number; anything a vendor sells
- * should have one in at least one configuration.
- */
-/** Every probe of an element: its own, plus one per indexed configuration. */
-export function checkIndexedPartNumber(
-    vendors: Vendor[],
-    probes: (PartMetadata | null)[]
-): BuildIssue[] {
-    const read = probes.filter((probe) => probe !== null);
-    if (isCustomPart(vendors) || read.length === 0) {
-        return [];
-    }
-    return read.some((probe) => probe.partNumber)
-        ? []
-        : [{ type: BuildIssueType.NO_PART_NUMBER }];
-}
diff --git a/src/backend/features/build-checker/issues.ts b/src/backend/features/build-checker/issues.ts
index 1d0065cd..0c948a65 100644
--- a/src/backend/features/build-checker/issues.ts
+++ b/src/backend/features/build-checker/issues.ts
@@ -21,7 +21,6 @@ export enum BuildIssueType {
     THUMBNAIL_FAILED = "thumbnail-failed",
     NO_THUMBNAIL_TAB = "no-thumbnail-tab",
     NO_VENDORS = "no-vendors",
-    NO_PART_NUMBER = "no-part-number",
     NO_PARTS = "no-parts",
     NO_UNHIDDEN_INSERTABLES = "no-unhidden-insertables",
     CONFIGURATION_LIMIT_EXCEEDED = "configuration-limit-exceeded",
@@ -43,7 +42,6 @@ export type BuildIssue =
     | BuildIssueOf<BuildIssueType.THUMBNAIL_FAILED>
     | BuildIssueOf<BuildIssueType.NO_THUMBNAIL_TAB>
     | BuildIssueOf<BuildIssueType.NO_VENDORS>
-    | BuildIssueOf<BuildIssueType.NO_PART_NUMBER>
     | BuildIssueOf<BuildIssueType.NO_PARTS>
     | BuildIssueOf<BuildIssueType.NO_UNHIDDEN_INSERTABLES>
     | BuildIssueOf<BuildIssueType.CONFIGURATION_LIMIT_EXCEEDED>
@@ -62,8 +60,6 @@ export function getIssueDescription(issue: BuildIssue): string {
             return "No thumbnail tab set";
         case BuildIssueType.NO_VENDORS:
             return "No vendors could be parsed";
-        case BuildIssueType.NO_PART_NUMBER:
-            return "No part number in any configuration, though a vendor sells this";
         case BuildIssueType.NO_PARTS:
             return "This part studio has no parts";
         case BuildIssueType.NO_UNHIDDEN_INSERTABLES:
@@ -97,7 +93,6 @@ export function getIssueSeverity(issue: BuildIssue): BuildIssueSeverity {
         case BuildIssueType.NO_THUMBNAIL_TAB:
         case BuildIssueType.CONFIGURATION_LIMIT_EXCEEDED:
         case BuildIssueType.MANUAL_INDEXING_REQUIRED:
-        case BuildIssueType.NO_PART_NUMBER:
             return BuildIssueSeverity.WARNING;
         case BuildIssueType.NO_VENDORS:
             return BuildIssueSeverity.INFO;
diff --git a/src/backend/features/library/insertables/routes.ts b/src/backend/features/library/insertables/routes.ts
index 4eda9937..c70440e2 100644
--- a/src/backend/features/library/insertables/routes.ts
+++ b/src/backend/features/library/insertables/routes.ts
@@ -39,7 +39,6 @@ import { FastenMateBuilder } from "../../../lib/onshape/objects/assembly-feature
 import { parseFastenInfo } from "../../load/parse-fasten";
 import { getFastenQuery } from "./fasten-query";
 import { addBuildIssue, clearBuildIssue } from "../../build-checker/issues";
-import { checkIndexedPartNumber } from "../../build-checker/checks";
 
 export const insertableRoutes = getApp();
 
@@ -165,12 +164,7 @@ insertableRoutes.post(
         const buildIssues = addBuildIssue(
             clearBuildIssue(row.buildIssues, ...INDEXING_ISSUE_TYPES),
             ...indexed.buildIssues,
-            ...indexing.buildIssues,
-            // Vendors are read, not re-derived: the load path wrote them.
-            ...checkIndexedPartNumber(row.vendors, [
-                indexed.partMetadata,
-                ...indexed.records
-            ])
+            ...indexing.buildIssues
         );
 
         // A configurations row exists exactly when the insertable is configurable.
diff --git a/src/backend/features/load/load-insertable.ts b/src/backend/features/load/load-insertable.ts
index 31b490ed..fc4eed65 100644
--- a/src/backend/features/load/load-insertable.ts
+++ b/src/backend/features/load/load-insertable.ts
@@ -117,11 +117,7 @@ export async function loadInsertable(
 
     const buildIssues = addBuildIssue(
         hasParts
-            ? checkInsertable({
-                  vendors,
-                  thumbnailUrls,
-                  probes: [recordsResult.partMetadata, ...recordsResult.records]
-              })
+            ? checkInsertable({ vendors, thumbnailUrls })
             : parts.buildIssues,
         ...recordsResult.buildIssues,
         ...indexing.buildIssues

From 676c6d4465fa687929c90eb523e6f31d3fdb2988 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 31 Aug 2026 12:48:16 +0000
Subject: [PATCH 17/40] Restore the part's own vendor as a url fallback
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The rename refactor replaced the resolution chain with an if-chain and
dropped its middle arm, so a record naming McMaster-Carr resolved to the
insertable's tagging instead — which its test says it should not. Put
the arm back, in the new shape.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018tgfuCHjVFvejjMe7WmEFL
---
 src/backend/features/configurations/utils.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/backend/features/configurations/utils.ts b/src/backend/features/configurations/utils.ts
index 578812ff..6de2ef8c 100644
--- a/src/backend/features/configurations/utils.ts
+++ b/src/backend/features/configurations/utils.ts
@@ -16,6 +16,7 @@ import {
 import {
     Vendor,
     getVendorPartUrl,
+    parseVendor,
     parseVendorFromPartNumber
 } from "../library/vendors";
 import { LogicalOp, QuantityType, Unit } from "./enums";
@@ -100,8 +101,10 @@ export function getPartUrl(
     if (record.description && ABSOLUTE_URL.test(record.description)) {
         return record.description;
     }
-    // WCP-123 -> WCP
+    // WCP-123 -> WCP, then what the part says it is, then the insertable's
+    // tagging when it names one vendor and one only.
     let vendor = parseVendorFromPartNumber(record.partNumber);
+    vendor ??= parseVendor(record.vendor);
     if (!vendor && vendors.length === 1) {
         vendor = vendors[0];
     }

From 66345049df4cf4c96d2b45b1ae40c749cfa86519 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 31 Aug 2026 12:59:00 +0000
Subject: [PATCH 18/40] Answer a typed letter, and store both spellings of a
 measurement
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Dropping every one-letter term took the first keystroke of every search
with it, and answering as the caller types is most of what the search
is for. Only a letter left behind by splitting a longer word is dropped
now — the `n` and `a` of `n/a`, which was the case that wanted it.

The same measurement reaches the library written both ways: one vendor
writes .196 as .2 and the next writes .19. A name is stored and searched
as both spellings, so either finds the part. Most numbers spell the same
either way and cost nothing.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018tgfuCHjVFvejjMe7WmEFL
---
 .../features/search/search-index.test.ts      | 34 ++++++++--
 src/backend/features/search/search-index.ts   | 65 ++++++++++++++-----
 src/frontend/features/search/search.test.ts   | 23 +++++++
 3 files changed, 100 insertions(+), 22 deletions(-)

diff --git a/src/backend/features/search/search-index.test.ts b/src/backend/features/search/search-index.test.ts
index d9029f47..dab6fa11 100644
--- a/src/backend/features/search/search-index.test.ts
+++ b/src/backend/features/search/search-index.test.ts
@@ -103,10 +103,23 @@ describe("tokenizeName", () => {
         expect(tokenizeName('1.125" OD, Flanged')).toEqual([
             '1.13"',
             "OD",
-            "Flanged"
+            "Flanged",
+            '1.12"'
         ]);
     });
 
+    // One vendor writes .196 as .2 and the next writes .19, so the part is
+    // stored as both and either spelling finds it.
+    it("spells a measurement as what it rounds to and what it starts", () => {
+        expect(tokenizeName(".196 ID Hub")).toEqual([
+            "0.2",
+            "ID",
+            "Hub",
+            "0.19"
+        ]);
+        expect(tokenizeName('2.140" L')).toEqual(['2.14"', "L"]);
+    });
+
     // The mark is what makes `1"` a size rather than a prefix of 1.5 and 16T.
     it("keeps an inch mark on the number it measures", () => {
         expect(tokenizeName('1" Hex Shaft')).toEqual(['1"', "Hex", "Shaft"]);
@@ -151,7 +164,8 @@ describe("tokenize", () => {
         expect(tokenize("TTB-0016-5/32", "partNames")).toEqual([
             "TTB",
             "16",
-            "0.16"
+            "0.16",
+            "0.15"
         ]);
     });
 });
@@ -160,9 +174,9 @@ describe("tokenize", () => {
 // typed a size or a part number.
 describe("tokenizeQuery", () => {
     it("offers the part number as typed, and as a name would read it", () => {
-        expect(tokenizeQuery("TTB-0016")).toEqual(
-            expect.arrayContaining(["ttb", "0016", "ttb-0016"])
-        );
+        expect(
+            tokenizeQuery("TTB-0016").map((term) => term.toLowerCase())
+        ).toEqual(expect.arrayContaining(["ttb", "16", "0016", "ttb-0016"]));
     });
 
     // `1` prefix-matches every number in the library, so a size is not split
@@ -184,8 +198,14 @@ describe("tokenizeQuery", () => {
         }
     );
 
-    it("keeps a lone digit, which names a size", () => {
-        expect(tokenizeQuery("1")).toEqual(["1"]);
+    // Answering as the caller types is the point, and the first keystroke is
+    // one character.
+    it.each(["l", "L", "1"])("still searches for a typed %s", (query) => {
+        expect(tokenizeQuery(query)).toEqual([query]);
+    });
+
+    it("keeps a letter typed beside another word", () => {
+        expect(tokenizeQuery("L bracket")).toEqual(["L", "bracket"]);
     });
 });
 
diff --git a/src/backend/features/search/search-index.ts b/src/backend/features/search/search-index.ts
index 614469c5..0c798ea2 100644
--- a/src/backend/features/search/search-index.ts
+++ b/src/backend/features/search/search-index.ts
@@ -33,17 +33,28 @@ function withoutLeadingZeros(digits: string): string {
     return digits.replace(/^0+(?=\d)/, "");
 }
 
-/** One 2-dp decimal, the single form every number is stored and queried as. */
-function toDecimal(value: number): string {
-    return String(Math.round(value * 100) / 100);
-}
+/** How a measurement is spelled to 2dp: what it rounds to, and what it starts. */
+type DecimalSpelling = (value: number) => string;
+
+const rounded: DecimalSpelling = (value) =>
+    String(Math.round(value * 100) / 100);
+const truncated: DecimalSpelling = (value) =>
+    String(Math.trunc(value * 100) / 100);
+
+/**
+ * Both spellings of a measurement, since the library writes the same one either
+ * way: `.196` is written `.2` by one vendor and `.19` by the next. Storing and
+ * searching both is what lets either find the part. Most numbers spell the same
+ * both ways and so cost nothing.
+ */
+const DECIMAL_SPELLINGS: DecimalSpelling[] = [rounded, truncated];
 
 /**
  * Rewrites numbers and fractions to one 2-dp decimal, at index and query time
  * alike — which is what lets the raw fragments go unstored. Names only: a part
  * number is an identifier, and 217-2600 is not two thousand six hundred.
  */
-function canonicalizeNumbers(text: string): string {
+function canonicalizeNumbers(text: string, toDecimal: DecimalSpelling): string {
     return text.replace(
         NUMERIC_PATTERN,
         (match, mixedWhole, mixedNum, mixedDen, fracNum, fracDen) => {
@@ -82,7 +93,7 @@ function canonicalizeNumbers(text: string): string {
  * lowercased, so a `.5` query lines up with a stored `"1/2 Bearing"`.
  */
 export function normalizeForMatch(text: string): string {
-    return canonicalizeNumbers(text).toLowerCase();
+    return canonicalizeNumbers(text, rounded).toLowerCase();
 }
 
 /**
@@ -90,9 +101,17 @@ export function normalizeForMatch(text: string): string {
  * stays on its number, so `1"` is a size rather than a prefix of `1.5` and `16t`.
  */
 export function tokenizeName(text: string): string[] {
+    const tokens = new Set<string>();
     // Canonicalized before splitting: fractions span `/` and `-`. Casing stays,
     // since processTerm splits on camelCase.
-    return splitWithMarks(canonicalizeNumbers(text));
+    for (const toDecimal of DECIMAL_SPELLINGS) {
+        for (const token of splitWithMarks(
+            canonicalizeNumbers(text, toDecimal)
+        )) {
+            tokens.add(token);
+        }
+    }
+    return Array.from(tokens);
 }
 
 /** Splits on `NAME_SEPARATORS`, keeping a `"` that measures its number. */
@@ -141,23 +160,39 @@ export function tokenize(text: string, field?: string): string[] {
  * text: the words of a name, and the literal a part number is indexed as.
  */
 export function tokenizeQuery(text: string): string[] {
-    const tokens = new Set(tokenizeName(text));
-    for (const word of text.trim().toLowerCase().split(/\s+/)) {
+    const tokens: string[] = [];
+    // The name reading keeps its case, for processTerm to split camelCase on,
+    // so the literal reading of the same word is a duplicate rather than a
+    // second term to search.
+    const seen = new Set<string>();
+    for (const word of text.trim().split(/\s+/)) {
         if (!word) {
             continue;
         }
         // Segments only for something carrying a letter, which is what a part
         // number does: splitting a bare `1/2` would search `1`, and a prefix
         // that short matches every number in the library.
-        for (const token of /[a-z]/.test(word)
+        const literal = /[a-z]/i.test(word)
             ? tokenizePartNumber(word)
-            : [word]) {
-            tokens.add(token);
+            : [word.toLowerCase()];
+        for (const token of [...tokenizeName(word), ...literal]) {
+            if (isStrayLetter(token, word) || seen.has(token.toLowerCase())) {
+                continue;
+            }
+            seen.add(token.toLowerCase());
+            tokens.push(token);
         }
     }
-    // A lone letter is the leftover of splitting something like `n/a`, and as a
-    // prefix it matches most of the library. A lone digit is a size, so it stays.
-    return Array.from(tokens).filter((token) => !/^[a-z]$/i.test(token));
+    return tokens;
+}
+
+/**
+ * Whether a token is a letter left behind by splitting a longer word, as `n/a`
+ * leaves `n` and `a`: as a prefix it matches most of the library. A letter the
+ * caller actually typed is a search, and answering it as they type is the point.
+ */
+function isStrayLetter(token: string, word: string): boolean {
+    return word.length > 1 && token.length === 1 && /[a-z]/i.test(token);
 }
 
 /**
diff --git a/src/frontend/features/search/search.test.ts b/src/frontend/features/search/search.test.ts
index 46ab0bc6..78a4c763 100644
--- a/src/frontend/features/search/search.test.ts
+++ b/src/frontend/features/search/search.test.ts
@@ -222,6 +222,29 @@ describe("doSearch size matching", () => {
     });
 });
 
+// The same measurement is written .196, .2 and .19 across the library, so a
+// part is stored as both spellings and either one finds it.
+describe("doSearch measurements", () => {
+    const searchDb = buildSearchDb(library("MotionX Hub"), {
+        i1: [record("WCP-1", {}, ".196 ID x SplineXL OD")]
+    });
+
+    it.each([".196", ".19", ".2", "0.19"])("finds the part by %s", (query) => {
+        expect(search(searchDb, query).hits[0]?.id).toBe("i1");
+    });
+});
+
+// Results arrive as the caller types, and the first keystroke is one letter.
+describe("doSearch single letters", () => {
+    const searchDb = buildSearchDb(library("Hex Standoff"), {
+        i1: [record("TTB-0016", {}, "Standoff")]
+    });
+
+    it.each(["h", "s", "t"])("answers a typed %s", (query) => {
+        expect(search(searchDb, query).hits[0]?.id).toBe("i1");
+    });
+});
+
 // A part number is a code: it retrieves its part whole, by either half, and
 // with the zeros and separators it was written with.
 describe("doSearch part numbers", () => {

From de85dc95966f53da8f9bff40c4f9b6b0d364b75f Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 31 Aug 2026 13:07:20 +0000
Subject: [PATCH 19/40] Answer the placeholder with nothing, rather than with
 its letters
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The stray-letter rule was the wrong shape for what it was protecting
against. Nothing carries `n/a` — ingest drops it — but typing it split
into `n` and `a`, and a one-letter prefix answers with most of the
library. The placeholder is now recognized where it is typed, by the
same rule that drops it where it is stored, so it finds nothing and the
rest of the query is read as usual.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018tgfuCHjVFvejjMe7WmEFL
---
 .../configurations/part-number.test.ts        | 15 ++++++++++++-
 .../features/configurations/part-number.ts    |  7 ++++++-
 .../features/search/search-index.test.ts      | 15 +++++++------
 src/backend/features/search/search-index.ts   | 21 ++++++++-----------
 4 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/src/backend/features/configurations/part-number.test.ts b/src/backend/features/configurations/part-number.test.ts
index ce96049a..85438a04 100644
--- a/src/backend/features/configurations/part-number.test.ts
+++ b/src/backend/features/configurations/part-number.test.ts
@@ -1,5 +1,18 @@
 import { describe, expect, it } from "vitest";
-import { meaningfulPartNumber } from "./part-number";
+import { isPlaceholderPartNumber, meaningfulPartNumber } from "./part-number";
+
+describe("isPlaceholderPartNumber", () => {
+    it.each(["N/A", "n/a", " N/a "])("reads %s as the placeholder", (value) => {
+        expect(isPlaceholderPartNumber(value)).toBe(true);
+    });
+
+    it.each(["NA-1234", "n", "WCP-1025"])(
+        "reads %s as a part number",
+        (value) => {
+            expect(isPlaceholderPartNumber(value)).toBe(false);
+        }
+    );
+});
 
 describe("meaningfulPartNumber", () => {
     it.each(["N/A", "n/a", " N/a "])("hides the placeholder %s", (value) => {
diff --git a/src/backend/features/configurations/part-number.ts b/src/backend/features/configurations/part-number.ts
index e462ff58..66f98ff5 100644
--- a/src/backend/features/configurations/part-number.ts
+++ b/src/backend/features/configurations/part-number.ts
@@ -3,6 +3,11 @@ import { clean, equalsIgnoreCase } from "../../lib/text";
 /** Admins write this in where a generic part has no real number to give. */
 const PLACEHOLDER_PART_NUMBER = new RegExp("^n/a$", "i");
 
+/** Whether text is the placeholder, which identifies nothing anywhere. */
+export function isPlaceholderPartNumber(text: string): boolean {
+    return PLACEHOLDER_PART_NUMBER.test(text.trim());
+}
+
 /**
  * The part number when it identifies the part, and nothing when it doesn't — a
  * placeholder, or a repeat of the name it sits under. One rule for indexing and
@@ -13,7 +18,7 @@ export function meaningfulPartNumber(
     name?: string | null
 ): string | undefined {
     const text = clean(partNumber);
-    if (!text || PLACEHOLDER_PART_NUMBER.test(text)) {
+    if (!text || isPlaceholderPartNumber(text)) {
         return undefined;
     }
     return equalsIgnoreCase(text, name) ? undefined : text;
diff --git a/src/backend/features/search/search-index.test.ts b/src/backend/features/search/search-index.test.ts
index dab6fa11..8b31dac3 100644
--- a/src/backend/features/search/search-index.test.ts
+++ b/src/backend/features/search/search-index.test.ts
@@ -191,12 +191,15 @@ describe("tokenizeQuery", () => {
 
     // Splitting the placeholder leaves `n` and `a`, and a one-letter prefix
     // matches most of the library.
-    it.each(["n/a", "N/A"])(
-        "drops the letters left over from splitting %s",
-        (query) => {
-            expect(tokenizeQuery(query)).toEqual(["n/a"]);
-        }
-    );
+    // Nothing carries the placeholder, and searching its letters would answer
+    // with whatever starts with `n` or `a`.
+    it.each(["n/a", "N/A"])("has nothing to search for in %s", (query) => {
+        expect(tokenizeQuery(query)).toEqual([]);
+    });
+
+    it("still reads the rest of a query the placeholder is in", () => {
+        expect(tokenizeQuery("n/a bearing")).toEqual(["bearing"]);
+    });
 
     // Answering as the caller types is the point, and the first keystroke is
     // one character.
diff --git a/src/backend/features/search/search-index.ts b/src/backend/features/search/search-index.ts
index 0c798ea2..f5bb3935 100644
--- a/src/backend/features/search/search-index.ts
+++ b/src/backend/features/search/search-index.ts
@@ -7,7 +7,10 @@ import { LibraryOut } from "../library/contract";
 import { Vendor } from "../library/vendors";
 import { ConfigurationRecord, SearchRecord } from "../configurations/models";
 import { getPartUrl } from "../configurations/utils";
-import { meaningfulPartNumber } from "../configurations/part-number";
+import {
+    isPlaceholderPartNumber,
+    meaningfulPartNumber
+} from "../configurations/part-number";
 import { clean } from "../../lib/text";
 
 /** Where a name breaks: punctuation and space, plus a quote used as a quote. */
@@ -166,7 +169,10 @@ export function tokenizeQuery(text: string): string[] {
     // second term to search.
     const seen = new Set<string>();
     for (const word of text.trim().split(/\s+/)) {
-        if (!word) {
+        // Ingest drops the placeholder, so nothing carries it; typed, it is
+        // still the word for a part number nobody has, and searching its
+        // letters would answer with whatever starts with `n` or `a`.
+        if (!word || isPlaceholderPartNumber(word)) {
             continue;
         }
         // Segments only for something carrying a letter, which is what a part
@@ -176,7 +182,7 @@ export function tokenizeQuery(text: string): string[] {
             ? tokenizePartNumber(word)
             : [word.toLowerCase()];
         for (const token of [...tokenizeName(word), ...literal]) {
-            if (isStrayLetter(token, word) || seen.has(token.toLowerCase())) {
+            if (seen.has(token.toLowerCase())) {
                 continue;
             }
             seen.add(token.toLowerCase());
@@ -186,15 +192,6 @@ export function tokenizeQuery(text: string): string[] {
     return tokens;
 }
 
-/**
- * Whether a token is a letter left behind by splitting a longer word, as `n/a`
- * leaves `n` and `a`: as a prefix it matches most of the library. A letter the
- * caller actually typed is a search, and answering it as they type is the point.
- */
-function isStrayLetter(token: string, word: string): boolean {
-    return word.length > 1 && token.length === 1 && /[a-z]/i.test(token);
-}
-
 /**
  * Adds the words inside a compound term, so `MAXSpline` is found by `spline`.
  * A part number is left whole: its segments are already separate tokens.

From 0652c362dd0cc34859c9d8931ecf482fc65afcef Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 31 Aug 2026 13:31:26 +0000
Subject: [PATCH 20/40] Push the search and library sections from an if, not a
 ternary

The two branches were a 35-line ternary argument, which read as one
expression when it is really the same push either way.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018tgfuCHjVFvejjMe7WmEFL
---
 .../routes/app/library/$libraryId/index.tsx   | 65 +++++++++----------
 1 file changed, 31 insertions(+), 34 deletions(-)

diff --git a/src/frontend/routes/app/library/$libraryId/index.tsx b/src/frontend/routes/app/library/$libraryId/index.tsx
index 841f4dc6..17227884 100644
--- a/src/frontend/routes/app/library/$libraryId/index.tsx
+++ b/src/frontend/routes/app/library/$libraryId/index.tsx
@@ -73,40 +73,37 @@ function HomeList(): ReactNode {
 
     // One slot below favorites, showing search results while a query is active
     // and the library otherwise. The differing `value` remounts it on the swap.
-    sections.push(
-        uiState.searchQuery
-            ? {
-                  value: "search",
-                  icon: (
-                      <MagnifyingGlassIcon
-                          size={IconSize.MEDIUM}
-                          color={PrimaryColor.FILLED}
-                      />
-                  ),
-                  title: <AppTitle title="Search Results" />,
-                  panel: (
-                      <SearchResults
-                          query={uiState.searchQuery}
-                          filters={{ vendors: uiState.vendorFilters }}
-                      />
-                  ),
-                  opened: isSearchOpen,
-                  setOpened: setIsSearchOpen
-              }
-            : {
-                  value: "library",
-                  icon: (
-                      <BooksIcon
-                          size={IconSize.MEDIUM}
-                          color={PrimaryColor.FILLED}
-                      />
-                  ),
-                  title: <LibraryTitle libraryId={libraryId} />,
-                  panel: <LibraryList />,
-                  opened: uiState.isLibraryOpen,
-                  setOpened: (opened) => setUiState({ isLibraryOpen: opened })
-              }
-    );
+    if (uiState.searchQuery) {
+        sections.push({
+            value: "search",
+            icon: (
+                <MagnifyingGlassIcon
+                    size={IconSize.MEDIUM}
+                    color={PrimaryColor.FILLED}
+                />
+            ),
+            title: <AppTitle title="Search Results" />,
+            panel: (
+                <SearchResults
+                    query={uiState.searchQuery}
+                    filters={{ vendors: uiState.vendorFilters }}
+                />
+            ),
+            opened: isSearchOpen,
+            setOpened: setIsSearchOpen
+        });
+    } else {
+        sections.push({
+            value: "library",
+            icon: (
+                <BooksIcon size={IconSize.MEDIUM} color={PrimaryColor.FILLED} />
+            ),
+            title: <LibraryTitle libraryId={libraryId} />,
+            panel: <LibraryList />,
+            opened: uiState.isLibraryOpen,
+            setOpened: (opened) => setUiState({ isLibraryOpen: opened })
+        });
+    }
 
     const handleChange = (opened: string[]) => {
         for (const section of sections) {

From 764b07343a65e9c8029599b9ca336427b8a19a9d Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 31 Aug 2026 14:15:52 +0000
Subject: [PATCH 21/40] Name the colors once, and give a themed icon its own
 component

Seventeen icons were each wrapped in a Box to take a Mantine color, and
the colors themselves were written at every control: c="red" here,
color="yellow" there. AppIcon is that wrapper, and StatusColor names what
each color means, so an error looks like an error everywhere and the
theme's variables stay out of the markup.

The build-status icons collapse into one mapping from severity, since
their four branches differed only in the icon and the color. Elements
become parts in the group's zero state, which is what a library holds.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018tgfuCHjVFvejjMe7WmEFL
---
 src/frontend/components/alerts.tsx            |  13 +-
 src/frontend/components/app-icon.tsx          |  43 ++++++
 src/frontend/components/app-menu.tsx          |   4 +-
 src/frontend/components/app-navbar.tsx        |   8 +-
 src/frontend/components/app-title.tsx         |  13 +-
 src/frontend/components/app-zero-state.tsx    |   7 +-
 .../build-status/components/build-status.tsx  | 140 ++++++++----------
 .../favorites/components/favorite-button.tsx  |  18 ++-
 .../favorites/components/favorites-list.tsx   |  10 +-
 .../library/components/card-components.tsx    |  28 ++--
 .../library/components/coming-soon.tsx        |   8 +-
 .../library/components/group-card.tsx         |   8 +-
 .../search/components/search-errors.tsx       |  19 ++-
 .../settings/components/settings-menu.tsx     |  12 +-
 src/frontend/lib/style-constants.ts           |  23 +++
 .../library/$libraryId/groups/$groupId.tsx    |  10 +-
 16 files changed, 228 insertions(+), 136 deletions(-)
 create mode 100644 src/frontend/components/app-icon.tsx

diff --git a/src/frontend/components/alerts.tsx b/src/frontend/components/alerts.tsx
index db40e178..a8d6dd7e 100644
--- a/src/frontend/components/alerts.tsx
+++ b/src/frontend/components/alerts.tsx
@@ -1,8 +1,9 @@
 import { modals } from "@mantine/modals";
-import { Box, Text } from "@mantine/core";
+import { Text } from "@mantine/core";
 import { WarningIcon } from "@phosphor-icons/react";
 import { AppTitle } from "./app-title";
-import { IconSize } from "../lib/style-constants";
+import { IconSize, StatusColor } from "../lib/style-constants";
+import { AppIcon } from "./app-icon";
 
 interface OpenWarningAlertProps {
     title: string;
@@ -14,10 +15,10 @@ function openWarningAlert(props: OpenWarningAlertProps): void {
         title: (
             <AppTitle
                 icon={
-                    <Box
-                        component={WarningIcon}
-                        fz={IconSize.MEDIUM}
-                        c="yellow"
+                    <AppIcon
+                        icon={WarningIcon}
+                        size={IconSize.MEDIUM}
+                        color={StatusColor.WARNING}
                     />
                 }
                 title={props.title}
diff --git a/src/frontend/components/app-icon.tsx b/src/frontend/components/app-icon.tsx
new file mode 100644
index 00000000..1b7e2253
--- /dev/null
+++ b/src/frontend/components/app-icon.tsx
@@ -0,0 +1,43 @@
+import { Box } from "@mantine/core";
+import type { Icon, IconWeight } from "@phosphor-icons/react";
+import { ComponentPropsWithRef, ReactNode } from "react";
+import { IconSize, StatusColor } from "../lib/style-constants";
+
+export interface AppIconProps
+    // Rendered through Box, which owns these two as style props.
+    extends Omit<ComponentPropsWithRef<"svg">, "color" | "display"> {
+    icon: Icon;
+    /** @default IconSize.SMALL */
+    size?: IconSize;
+    /** A theme color; without one the icon takes the surrounding text's. */
+    color?: StatusColor | string;
+    /** @default "regular" */
+    weight?: IconWeight;
+    /** What a screen reader calls an icon that carries meaning on its own. */
+    label?: string;
+}
+
+/**
+ * A Phosphor icon in a theme color. Box is what resolves the color name, and
+ * sizing goes through `fz` because Box writes its own `style`, which is what
+ * would drop the icon's own.
+ */
+export function AppIcon({
+    icon,
+    size = IconSize.SMALL,
+    color,
+    weight,
+    label,
+    ...others
+}: AppIconProps): ReactNode {
+    return (
+        <Box
+            component={icon}
+            fz={size}
+            c={color}
+            weight={weight}
+            aria-label={label}
+            {...others}
+        />
+    );
+}
diff --git a/src/frontend/components/app-menu.tsx b/src/frontend/components/app-menu.tsx
index 52934994..b0834f4d 100644
--- a/src/frontend/components/app-menu.tsx
+++ b/src/frontend/components/app-menu.tsx
@@ -1,7 +1,7 @@
 import { PropsWithChildren, ReactNode } from "react";
 import { FloatingPosition, Menu, ActionIcon } from "@mantine/core";
 import { DotsThreeIcon } from "@phosphor-icons/react";
-import { IconSize } from "../lib/style-constants";
+import { IconSize, StatusColor } from "../lib/style-constants";
 
 interface AppContextMenuProps {
     menuItems: ReactNode;
@@ -77,7 +77,7 @@ export function MenuButton(props: MenuButtonProps): ReactNode {
         <AppContextMenu controlledByButton menuItems={children}>
             <ActionIcon
                 variant="subtle"
-                color="gray"
+                color={StatusColor.NEUTRAL}
                 size={large ? "input-sm" : undefined}
                 title="View options"
                 onClick={(e) => e.stopPropagation()}
diff --git a/src/frontend/components/app-navbar.tsx b/src/frontend/components/app-navbar.tsx
index b26dd1c9..bfbd7ae5 100644
--- a/src/frontend/components/app-navbar.tsx
+++ b/src/frontend/components/app-navbar.tsx
@@ -15,7 +15,9 @@ import {
     BORDER,
     FRAME_BACKGROUND,
     IconSize,
-    PrimaryColor
+    PrimaryColor,
+    RADIUS,
+    StatusColor
 } from "../lib/style-constants";
 import { ReactNode, RefObject, useRef } from "react";
 import { useNavigate } from "@tanstack/react-router";
@@ -129,7 +131,7 @@ function FrcDesignBookIcon(): ReactNode {
             bg={PrimaryColor.FILLED}
             c={PrimaryColor.CONTRAST}
             style={{
-                borderRadius: "var(--mantine-radius-sm)",
+                borderRadius: RADIUS,
                 display: "grid",
                 placeItems: "center"
             }}
@@ -216,7 +218,7 @@ export function SettingsButton() {
     return (
         <ActionIcon
             variant="subtle"
-            color="gray"
+            color={StatusColor.NEUTRAL}
             title="Settings"
             my="auto"
             size="lg"
diff --git a/src/frontend/components/app-title.tsx b/src/frontend/components/app-title.tsx
index aa5741ce..18ee2369 100644
--- a/src/frontend/components/app-title.tsx
+++ b/src/frontend/components/app-title.tsx
@@ -11,8 +11,13 @@ import {
 import { ArrowSquareOutIcon, CheckIcon, CopyIcon } from "@phosphor-icons/react";
 import type { ReactNode } from "react";
 import type { SearchRecord } from "@backend/features/configurations/models";
-import { FontWeight, IconSize, TITLE_ICON_NUDGE } from "../lib/style-constants";
-import { displayPartNumber } from "../lib/part-number";
+import {
+    FontWeight,
+    IconSize,
+    StatusColor,
+    TITLE_ICON_NUDGE
+} from "../lib/style-constants";
+import { meaningfulPartNumber } from "@backend/features/configurations/part-number";
 
 interface AppTitleProps {
     title: ReactNode;
@@ -51,7 +56,7 @@ export function AppTitle(props: AppTitleProps): ReactNode {
                         miw={0}
                         fz="xs"
                         lh="xs"
-                        c="dimmed"
+                        c={StatusColor.DIMMED}
                     >
                         {subtitle}
                     </Group>
@@ -72,7 +77,7 @@ interface MenuTitleProps {
  * number is what identifies what gets inserted. */
 export function MenuTitle(props: MenuTitleProps): ReactNode {
     const { name, record, icon } = props;
-    const partNumber = displayPartNumber(record?.partNumber, name);
+    const partNumber = meaningfulPartNumber(record?.partNumber, name);
     return (
         <AppTitle
             icon={icon}
diff --git a/src/frontend/components/app-zero-state.tsx b/src/frontend/components/app-zero-state.tsx
index ca7155e1..35169946 100644
--- a/src/frontend/components/app-zero-state.tsx
+++ b/src/frontend/components/app-zero-state.tsx
@@ -1,10 +1,11 @@
-import { Box, Center, EmptyState, Loader } from "@mantine/core";
+import { Center, EmptyState, Loader } from "@mantine/core";
 import { XIcon } from "@phosphor-icons/react";
-import { IconSize } from "../lib/style-constants";
+import { IconSize, StatusColor } from "../lib/style-constants";
 import { type JSX, ReactNode } from "react";
+import { AppIcon } from "./app-icon";
 
 const DEFAULT_ERROR_ICON = (
-    <Box component={XIcon} size={IconSize.PAGE} c="red" />
+    <AppIcon icon={XIcon} size={IconSize.PAGE} color={StatusColor.ERROR} />
 );
 
 interface ZeroStateProps {
diff --git a/src/frontend/features/build-status/components/build-status.tsx b/src/frontend/features/build-status/components/build-status.tsx
index 249359ae..631671e4 100644
--- a/src/frontend/features/build-status/components/build-status.tsx
+++ b/src/frontend/features/build-status/components/build-status.tsx
@@ -1,6 +1,5 @@
 import {
     Badge,
-    Box,
     Divider,
     Group,
     HoverCard,
@@ -21,7 +20,6 @@ import {
     XIcon
 } from "@phosphor-icons/react";
 import {
-    ComponentPropsWithRef,
     ReactNode,
     createContext,
     use,
@@ -59,10 +57,17 @@ import {
     MAX_COUNTED_CONFIGURATIONS,
     MAX_PART_NUMBER_CONFIGURATIONS
 } from "@backend/features/configurations/combinations";
-import { FontWeight, IconSize } from "../../../lib/style-constants";
+import {
+    FontWeight,
+    IconSize,
+    RADIUS,
+    StatusColor,
+    statusBackground
+} from "../../../lib/style-constants";
 import { RequireAccessLevel } from "../../auth/access-level";
 import { useBuildStatusQuery } from "../queries";
-import { useJobStatusQuery } from "../../library/queries";
+import { useIsJobRunning } from "../../library/queries";
+import { AppIcon, type AppIconProps } from "../../../components/app-icon";
 import {
     useSetVisibilityMutation,
     useToggleInsertAndFastenMutation,
@@ -114,65 +119,44 @@ function useGroupBuildIssues(
     }, [groupStatus, insertableStatuses]);
 }
 
-interface IssueIconProps
-    // Rendered through Box, which owns these two as style props.
-    extends Omit<ComponentPropsWithRef<"svg">, "color" | "display"> {
+interface IssueIconProps extends Omit<AppIconProps, "icon" | "color"> {
     /** The severity to render, or null if all checks pass. */
     severity: BuildIssueSeverity | null;
-    /** @default IconSize.SMALL */
-    size?: number;
 }
 
-/** Renders the icon for a build-issue severity in its severity color. */
-export function IssueIcon({
-    severity,
-    ref,
-    ...others
-}: IssueIconProps): ReactNode {
+/** The icon each severity is drawn as; `ok` is a build with nothing to say. */
+const SEVERITY_ICONS = {
+    [BuildIssueSeverity.ERROR]: WarningOctagonIcon,
+    [BuildIssueSeverity.WARNING]: WarningIcon,
+    [BuildIssueSeverity.INFO]: InfoIcon,
+    ok: CheckIcon
+};
+
+/** The color a severity is spoken in; null is a build with nothing to say. */
+function severityColor(severity: BuildIssueSeverity | null): StatusColor {
     switch (severity) {
         case BuildIssueSeverity.ERROR:
-            return (
-                <Box
-                    component={WarningOctagonIcon}
-                    ref={ref}
-                    size={IconSize.SMALL}
-                    c="red"
-                    {...others}
-                />
-            );
+            return StatusColor.ERROR;
         case BuildIssueSeverity.WARNING:
-            return (
-                <Box
-                    component={WarningIcon}
-                    ref={ref}
-                    size={IconSize.SMALL}
-                    c="yellow"
-                    {...others}
-                />
-            );
+            return StatusColor.WARNING;
         case BuildIssueSeverity.INFO:
-            return (
-                <Box
-                    component={InfoIcon}
-                    ref={ref}
-                    size={IconSize.SMALL}
-                    c="blue"
-                    {...others}
-                />
-            );
+            return StatusColor.INFO;
         case null:
-            return (
-                <Box
-                    component={CheckIcon}
-                    ref={ref}
-                    size={IconSize.SMALL}
-                    c="green"
-                    {...others}
-                />
-            );
+            return StatusColor.SUCCESS;
     }
 }
 
+/** Renders the icon for a build-issue severity in its severity color. */
+export function IssueIcon({ severity, ...others }: IssueIconProps): ReactNode {
+    return (
+        <AppIcon
+            icon={SEVERITY_ICONS[severity ?? "ok"]}
+            color={severityColor(severity)}
+            {...others}
+        />
+    );
+}
+
 interface BuildStatusCardProps {
     /** The group/insertable name shown in the header. */
     name: string;
@@ -249,7 +233,7 @@ function BuildStatusHoverCard({
     hoverMenu
 }: BuildStatusBadgeProps): ReactNode {
     const maxSeverity = getMaxSeverity(issues);
-    const jobRunning = useJobStatusQuery().data?.running ?? false;
+    const jobRunning = useIsJobRunning();
 
     // Remounting is the only way to close an uncontrolled HoverCard on demand.
     const [cardKey, setCardKey] = useState(0);
@@ -327,7 +311,7 @@ function LastModified({
 }: {
     lastLoadedAt: number | null;
 }): ReactNode {
-    const jobRunning = useJobStatusQuery().data?.running ?? false;
+    const jobRunning = useIsJobRunning();
     if (jobRunning) {
         return (
             <Tooltip label="The library is being loaded from Onshape in the background">
@@ -343,7 +327,7 @@ function LastModified({
             <Group
                 gap={4}
                 wrap="nowrap"
-                c="dimmed"
+                c={StatusColor.DIMMED}
                 style={{ whiteSpace: "nowrap", flexShrink: 0 }}
             >
                 <ClockIcon size={IconSize.TINY} />
@@ -364,7 +348,7 @@ function SeverityBadges({ issues }: { issues: BuildIssue[] }): ReactNode {
             <Badge
                 size="sm"
                 variant="light"
-                color="green"
+                color={StatusColor.SUCCESS}
                 leftSection={<CheckIcon size={IconSize.TINY} />}
             >
                 All checks pass
@@ -424,11 +408,14 @@ function CountBadge({
     );
 }
 
-function countSeverities(issues: BuildIssue[]): {
+/** How many issues of each severity a build carries. */
+interface SeverityCounts {
     error: number;
     warning: number;
     info: number;
-} {
+}
+
+function countSeverities(issues: BuildIssue[]): SeverityCounts {
     const counts = { error: 0, warning: 0, info: 0 };
     for (const issue of issues) {
         switch (getIssueSeverity(issue)) {
@@ -469,7 +456,7 @@ function IssueCallout({ issue }: { issue: BuildIssue }): ReactNode {
             p="xs"
             style={{
                 backgroundColor: severityBackground(severity),
-                borderRadius: "var(--mantine-radius-sm)"
+                borderRadius: RADIUS
             }}
         >
             {/* Nudge the icon down so it aligns with the first line of text. */}
@@ -484,14 +471,7 @@ function IssueCallout({ issue }: { issue: BuildIssue }): ReactNode {
 
 /** The light background tint for a build-issue callout. */
 function severityBackground(severity: BuildIssueSeverity): string {
-    switch (severity) {
-        case BuildIssueSeverity.ERROR:
-            return "var(--mantine-color-red-light)";
-        case BuildIssueSeverity.WARNING:
-            return "var(--mantine-color-yellow-light)";
-        case BuildIssueSeverity.INFO:
-            return "var(--mantine-color-blue-light)";
-    }
+    return statusBackground(severityColor(severity));
 }
 
 /** Build-status badge pre-wired for an insertable. */
@@ -571,7 +551,7 @@ export function GroupStatusBadge({
 /** A dimmed section header, e.g. "Admin" or "Parsed". */
 function SectionHeader({ children }: { children: ReactNode }): ReactNode {
     return (
-        <Text size="xs" fw={FontWeight.SEMI_BOLD} c="dimmed">
+        <Text size="xs" fw={FontWeight.SEMI_BOLD} c={StatusColor.DIMMED}>
             {children}
         </Text>
     );
@@ -590,7 +570,7 @@ function ControlRow(props: {
         <Group justify="space-between" wrap="nowrap" gap="md" align="center">
             <div style={{ minWidth: 0 }}>
                 <Text size="sm">{props.label}</Text>
-                <Text size="xs" c="dimmed">
+                <Text size="xs" c={StatusColor.DIMMED}>
                     {props.description}
                 </Text>
             </div>
@@ -899,10 +879,10 @@ function ExcludedFromPropertiesIcon({
             withArrow
             events={{ hover: true, focus: true, touch: true }}
         >
-            <Box
-                component={FileXIcon}
+            <AppIcon
+                icon={FileXIcon}
                 size={IconSize.SMALL}
-                c="dimmed"
+                color={StatusColor.DIMMED}
                 style={{ flexShrink: 0 }}
             />
         </Tooltip>
@@ -924,7 +904,7 @@ function ParameterTypeBadge({
         : getParameterTypeLabel(parameter.type);
 
     const badge = (
-        <Badge size="xs" variant="light" color="gray">
+        <Badge size="xs" variant="light" color={StatusColor.NEUTRAL}>
             {label}
         </Badge>
     );
@@ -978,9 +958,17 @@ function ParsedRow({
 function StateValue({ value }: { value: StateRowValue }): ReactNode {
     if (value.kind === "bool") {
         return value.value ? (
-            <Box component={CheckIcon} size={IconSize.SMALL} c="green" />
+            <AppIcon
+                icon={CheckIcon}
+                size={IconSize.SMALL}
+                color={StatusColor.SUCCESS}
+            />
         ) : (
-            <Box component={XIcon} size={IconSize.SMALL} c="red" />
+            <AppIcon
+                icon={XIcon}
+                size={IconSize.SMALL}
+                color={StatusColor.ERROR}
+            />
         );
     }
 
@@ -994,7 +982,7 @@ function StateValue({ value }: { value: StateRowValue }): ReactNode {
 
     if (value.vendors.length === 0) {
         return (
-            <Text size="sm" c="dimmed">
+            <Text size="sm" c={StatusColor.DIMMED}>
                 None
             </Text>
         );
@@ -1006,7 +994,7 @@ function StateValue({ value }: { value: StateRowValue }): ReactNode {
                     key={vendor}
                     size="sm"
                     variant="light"
-                    color="blue"
+                    color={StatusColor.INFO}
                     title={getVendorName(vendor)}
                 >
                     {vendor}
diff --git a/src/frontend/features/favorites/components/favorite-button.tsx b/src/frontend/features/favorites/components/favorite-button.tsx
index 9d8c0a72..013c9c40 100644
--- a/src/frontend/features/favorites/components/favorite-button.tsx
+++ b/src/frontend/features/favorites/components/favorite-button.tsx
@@ -1,6 +1,6 @@
-import { ActionIcon, Box, Menu } from "@mantine/core";
+import { ActionIcon, Menu } from "@mantine/core";
 import { HeartIcon, HeartBreakIcon } from "@phosphor-icons/react";
-import { IconSize } from "../../../lib/style-constants";
+import { IconSize, StatusColor } from "../../../lib/style-constants";
 import { useMutation } from "@tanstack/react-query";
 import { ReactNode, useState } from "react";
 import { apiDelete, apiPost } from "../../../lib/api-client";
@@ -21,6 +21,7 @@ import {
 } from "../../library/library-path";
 import { favoritesQueryKey } from "../../../lib/query-keys";
 import { useRefreshFavorites } from "../../../lib/refresh";
+import { AppIcon } from "../../../components/app-icon";
 
 enum Operation {
     ADD,
@@ -149,7 +150,7 @@ export function FavoriteButton(props: FavoriteButtonProps): ReactNode {
     return (
         <ActionIcon
             variant="subtle"
-            color="gray"
+            color={StatusColor.NEUTRAL}
             size={large ? "input-sm" : undefined}
             onClick={(event) => {
                 event.stopPropagation();
@@ -227,7 +228,12 @@ export function FavoriteIcon(props: FavoriteIconProps): ReactNode {
     // fz, not size: Box builds its own `style`, dropping the font-size that
     // Phosphor's `size` sets, which shrank the icon to 1em.
     return full ? (
-        <Box component={HeartIcon} fz={size} c="red" weight="fill" />
+        <AppIcon
+            icon={HeartIcon}
+            size={size}
+            color={StatusColor.ERROR}
+            weight="fill"
+        />
     ) : (
         <HeartIcon size={size} />
     );
@@ -242,5 +248,7 @@ interface UnfavoriteIconProps {
 
 export function UnfavoriteIcon(props: UnfavoriteIconProps): ReactNode {
     const { size = IconSize.SMALL } = props;
-    return <Box component={HeartBreakIcon} fz={size} c="red" />;
+    return (
+        <AppIcon icon={HeartBreakIcon} size={size} color={StatusColor.ERROR} />
+    );
 }
diff --git a/src/frontend/features/favorites/components/favorites-list.tsx b/src/frontend/features/favorites/components/favorites-list.tsx
index c17fc703..d7959c43 100644
--- a/src/frontend/features/favorites/components/favorites-list.tsx
+++ b/src/frontend/features/favorites/components/favorites-list.tsx
@@ -1,7 +1,6 @@
-import { Box } from "@mantine/core";
 import { useAccessData } from "../../auth/access-level";
 import { HeartBreakIcon } from "@phosphor-icons/react";
-import { IconSize } from "../../../lib/style-constants";
+import { IconSize, StatusColor } from "../../../lib/style-constants";
 import { ReactNode } from "react";
 import {
     FilteredInsertables,
@@ -26,6 +25,7 @@ import { useFavoritesQuery } from "../queries";
 import { useLibraryQuery } from "../../library/queries";
 import { useSearchDbQuery } from "../../search/queries";
 import { hasEditorAccess } from "@backend/features/auth/access-level";
+import { AppIcon } from "../../../components/app-icon";
 
 /**
  * A list of current favorite cards.
@@ -44,10 +44,10 @@ export function FavoritesList(): ReactNode {
             <SectionError
                 title="Failed to load favorites."
                 icon={
-                    <Box
-                        component={HeartBreakIcon}
+                    <AppIcon
+                        icon={HeartBreakIcon}
                         size={IconSize.SECTION}
-                        c="red"
+                        color={StatusColor.ERROR}
                     />
                 }
             />
diff --git a/src/frontend/features/library/components/card-components.tsx b/src/frontend/features/library/components/card-components.tsx
index f3e49147..bbcee7ee 100644
--- a/src/frontend/features/library/components/card-components.tsx
+++ b/src/frontend/features/library/components/card-components.tsx
@@ -1,4 +1,4 @@
-import { Anchor, Box, Group, Menu, Stack, Table, Text } from "@mantine/core";
+import { Anchor, Group, Menu, Stack, Table, Text } from "@mantine/core";
 import {
     ArrowSquareOutIcon,
     EyeSlashIcon,
@@ -6,8 +6,8 @@ import {
     LinkIcon,
     PlusIcon
 } from "@phosphor-icons/react";
-import { IconSize } from "../../../lib/style-constants";
-import { displayPartNumber } from "../../../lib/part-number";
+import { IconSize, StatusColor } from "../../../lib/style-constants";
+import { meaningfulPartNumber } from "@backend/features/configurations/part-number";
 import { copyUrlToClipboard, makeUrl, openUrlInNewTab } from "../../../lib/url";
 import { PropsWithChildren, ReactNode, useCallback } from "react";
 import { AppContextMenu, MenuButton } from "../../../components/app-menu";
@@ -32,6 +32,7 @@ import { ElementType } from "@backend/lib/onshape/element-type";
 import { ParameterValues } from "@backend/features/configurations/models";
 import { useSearch } from "@tanstack/react-router";
 import { RequireAccessLevel } from "../../auth/access-level";
+import { AppIcon } from "../../../components/app-icon";
 
 interface OpenDocumentItemsProps {
     /** Any Onshape path; a shell group's stops at the document. */
@@ -176,11 +177,11 @@ export function CardTitle(props: CardTitleProps) {
             {/* After the badge: toggling visibility would otherwise shift the
                 badge, dragging its open hover card out from under the cursor. */}
             {showHiddenTag && (
-                <Box
-                    component={EyeSlashIcon}
+                <AppIcon
+                    icon={EyeSlashIcon}
                     size={IconSize.SMALL}
-                    c="yellow"
-                    alt="Hidden"
+                    color={StatusColor.WARNING}
+                    label="Hidden"
                 />
             )}
         </Group>
@@ -202,14 +203,21 @@ function PartNameAndNumber(props: PartNameAndNumberProps): ReactNode {
         searchHit?.partName?.toLowerCase() !== title.toLowerCase()
             ? searchHit?.partName
             : undefined;
-    const partNumber = displayPartNumber(searchHit?.partNumber, title);
+    const partNumber = meaningfulPartNumber(searchHit?.partNumber, title);
 
     if (!partName && !partNumber) {
         return null;
     }
 
     return (
-        <Group gap={4} wrap="nowrap" miw={0} fz="xs" lh="xs" c="dimmed">
+        <Group
+            gap={4}
+            wrap="nowrap"
+            miw={0}
+            fz="xs"
+            lh="xs"
+            c={StatusColor.DIMMED}
+        >
             {partName && (
                 <Text inherit truncate miw={0}>
                     <HighlightedText
@@ -342,7 +350,7 @@ export function AdminOptionsSubmenu(props: PropsWithChildren): ReactNode {
             <Menu.Sub>
                 <Menu.Sub.Target>
                     <Menu.Sub.Item
-                        color="yellow"
+                        color={StatusColor.WARNING}
                         leftSection={<GearIcon size={IconSize.SMALL} />}
                     >
                         Admin options
diff --git a/src/frontend/features/library/components/coming-soon.tsx b/src/frontend/features/library/components/coming-soon.tsx
index 8c884fb2..936278b2 100644
--- a/src/frontend/features/library/components/coming-soon.tsx
+++ b/src/frontend/features/library/components/coming-soon.tsx
@@ -1,9 +1,9 @@
-import { Box } from "@mantine/core";
 import { HammerIcon } from "@phosphor-icons/react";
 import { ReactNode } from "react";
 import { IconSize, PrimaryColor } from "../../../lib/style-constants";
 import { PageMessage } from "../../../components/app-zero-state";
 import { getLibraryName, useLibraryId } from "../library-path";
+import { AppIcon } from "../../../components/app-icon";
 
 /** Stands in for a library that is announced but has nothing to show yet. */
 export function ComingSoon(): ReactNode {
@@ -11,10 +11,10 @@ export function ComingSoon(): ReactNode {
     return (
         <PageMessage
             icon={
-                <Box
-                    component={HammerIcon}
+                <AppIcon
+                    icon={HammerIcon}
                     size={IconSize.PAGE}
-                    c={PrimaryColor.FILLED}
+                    color={PrimaryColor.FILLED}
                 />
             }
             title={`${getLibraryName(libraryId)} is coming soon`}
diff --git a/src/frontend/features/library/components/group-card.tsx b/src/frontend/features/library/components/group-card.tsx
index f8fb8b4e..aaf1802b 100644
--- a/src/frontend/features/library/components/group-card.tsx
+++ b/src/frontend/features/library/components/group-card.tsx
@@ -5,7 +5,7 @@ import {
     EyeSlashIcon,
     TrashIcon
 } from "@phosphor-icons/react";
-import { IconSize } from "../../../lib/style-constants";
+import { IconSize, StatusColor } from "../../../lib/style-constants";
 import { useNavigate } from "@tanstack/react-router";
 import { PropsWithChildren, ReactNode } from "react";
 import { GroupOut, LibraryOut } from "@backend/features/library/contract";
@@ -141,7 +141,7 @@ function ShowAllElementsMenuItem({
     const mutation = useSetVisibilityMutation(insertableOrder, true);
     return (
         <Menu.Item
-            color="blue"
+            color={StatusColor.INFO}
             leftSection={<EyeIcon size={IconSize.SMALL} />}
             onClick={() => mutation.mutate()}
         >
@@ -158,7 +158,7 @@ function HideAllElementsMenuItem({
     const mutation = useSetVisibilityMutation(insertableOrder, false);
     return (
         <Menu.Item
-            color="red"
+            color={StatusColor.ERROR}
             leftSection={<EyeSlashIcon size={IconSize.SMALL} />}
             onClick={() => mutation.mutate()}
         >
@@ -185,7 +185,7 @@ function DeleteGroupMenuItem({ groupId }: { groupId: string }): ReactNode {
     return (
         <Menu.Item
             leftSection={<TrashIcon size={IconSize.SMALL} />}
-            color="red"
+            color={StatusColor.ERROR}
             onClick={() => mutation.mutate()}
         >
             Delete
diff --git a/src/frontend/features/search/components/search-errors.tsx b/src/frontend/features/search/components/search-errors.tsx
index 3edf867c..0fa884e7 100644
--- a/src/frontend/features/search/components/search-errors.tsx
+++ b/src/frontend/features/search/components/search-errors.tsx
@@ -1,16 +1,17 @@
-import { Alert, Box, Button, Group, Text } from "@mantine/core";
+import { Alert, Button, Group, Text } from "@mantine/core";
 import {
     HeartBreakIcon,
     InfoIcon,
     MagnifyingGlassIcon
 } from "@phosphor-icons/react";
-import { IconSize } from "../../../lib/style-constants";
+import { IconSize, StatusColor } from "../../../lib/style-constants";
 import { ReactNode } from "react";
 import { ClearFiltersButton } from "../../settings/components/vendor-filters";
 import { FilterResult, ObjectLabel, plural } from "../search";
 import { useNavigate } from "@tanstack/react-router";
 import { SectionError } from "../../../components/app-zero-state";
 import { useLibraryId } from "../../library/library-path";
+import { AppIcon } from "../../../components/app-icon";
 
 function getGroupString(filtered: FilterResult, objectLabel: ObjectLabel) {
     if (filtered.byGroup > 1) {
@@ -42,7 +43,7 @@ interface FilterCalloutProps {
 function Callout(props: { text: string; action: ReactNode }): ReactNode {
     return (
         <Alert
-            color="blue"
+            color={StatusColor.INFO}
             p="xs"
             icon={<InfoIcon size={IconSize.MEDIUM} />}
             styles={{ body: { minWidth: 0 } }}
@@ -92,13 +93,17 @@ export function NoSearchResultError(
 
     const icon =
         objectLabel === "search result" ? (
-            <Box
-                component={MagnifyingGlassIcon}
+            <AppIcon
+                icon={MagnifyingGlassIcon}
                 size={IconSize.SECTION}
-                c="yellow"
+                color={StatusColor.WARNING}
             />
         ) : (
-            <Box component={HeartBreakIcon} size={IconSize.SECTION} c="red" />
+            <AppIcon
+                icon={HeartBreakIcon}
+                size={IconSize.SECTION}
+                color={StatusColor.ERROR}
+            />
         );
 
     if (filtered.byGroup > 0) {
diff --git a/src/frontend/features/settings/components/settings-menu.tsx b/src/frontend/features/settings/components/settings-menu.tsx
index 85219c03..4efd6d7a 100644
--- a/src/frontend/features/settings/components/settings-menu.tsx
+++ b/src/frontend/features/settings/components/settings-menu.tsx
@@ -1,7 +1,11 @@
 import { DEFAULT_SETTINGS, Theme } from "@backend/features/settings/settings";
 import { Button, Divider, Group, Select, Text, Title } from "@mantine/core";
 import { SignOutIcon } from "@phosphor-icons/react";
-import { FontWeight, IconSize } from "../../../lib/style-constants";
+import {
+    FontWeight,
+    IconSize,
+    StatusColor
+} from "../../../lib/style-constants";
 import { ReactNode } from "react";
 import {
     AccessLevel,
@@ -18,11 +22,13 @@ import {
 } from "../../auth/access-level";
 import { startSignOut } from "../../auth/sign-out";
 import { useGetUiState, useSetUiState } from "../../../lib/ui-state";
-import { FEEDBACK_FORM_URL } from "../../../lib/url";
 import { useIsConnectedToOnshape } from "../../../lib/onshape-params";
 import { useLibraryId } from "../../library/library-path";
 import { ReloadGroupsButton } from "../../library/components/reload-groups-button";
 
+/** The FRCDesign feedback form, which the setting below opens. */
+const FEEDBACK_FORM_URL = "https://forms.gle/WVXUwnrrpLGKdiBx9";
+
 /**
  * A labeled row holding a single setting control.
  */
@@ -122,7 +128,7 @@ function UserSettings(): ReactNode {
                         <Button
                             leftSection={<SignOutIcon size={IconSize.SMALL} />}
                             variant="light"
-                            color="red"
+                            color={StatusColor.ERROR}
                             onClick={startSignOut}
                         >
                             Sign out
diff --git a/src/frontend/lib/style-constants.ts b/src/frontend/lib/style-constants.ts
index c6103519..6a4df66a 100644
--- a/src/frontend/lib/style-constants.ts
+++ b/src/frontend/lib/style-constants.ts
@@ -25,6 +25,29 @@ export enum FontWeight {
 
 export const BORDER = "1px solid var(--mantine-color-default-border)";
 
+/** The corner every box of ours is cut with, matching the theme's default. */
+export const RADIUS = "var(--mantine-radius-sm)";
+
+/**
+ * The colors state is spoken in, as Mantine names them. Named here rather than
+ * written at each control, so an error looks like an error everywhere.
+ */
+export enum StatusColor {
+    ERROR = "red",
+    WARNING = "yellow",
+    INFO = "blue",
+    SUCCESS = "green",
+    /** A control that should not compete with the library's accent. */
+    NEUTRAL = "gray",
+    /** Secondary text: the metadata beside a name. */
+    DIMMED = "dimmed"
+}
+
+/** The same color as a tint to sit content on, e.g. a callout's background. */
+export function statusBackground(color: StatusColor): string {
+    return `var(--mantine-color-${color}-light)`;
+}
+
 /** A step off the page, for the bars framing it: the navbar's tab row, a
  * modal's header and footer. */
 export const FRAME_BACKGROUND =
diff --git a/src/frontend/routes/app/library/$libraryId/groups/$groupId.tsx b/src/frontend/routes/app/library/$libraryId/groups/$groupId.tsx
index 5409536b..c6f1a008 100644
--- a/src/frontend/routes/app/library/$libraryId/groups/$groupId.tsx
+++ b/src/frontend/routes/app/library/$libraryId/groups/$groupId.tsx
@@ -15,7 +15,8 @@ import {
 import {
     BORDER,
     IconSize,
-    SECTION_HEADER_HEIGHT
+    SECTION_HEADER_HEIGHT,
+    StatusColor
 } from "../../../../../lib/style-constants";
 import { ReactNode } from "react";
 import { SearchResults } from "../../../../../features/search/components/search-results";
@@ -37,6 +38,7 @@ import { useLibraryQuery } from "../../../../../features/library/queries";
 import { useLibraryId } from "../../../../../features/library/library-path";
 import { useGetUiState } from "../../../../../lib/ui-state";
 import { rememberOpenGroup } from "../../../../../features/settings/settings";
+import { AppIcon } from "../../../../../components/app-icon";
 
 export const Route = createFileRoute("/app/library/$libraryId/groups/$groupId")(
     {
@@ -186,10 +188,10 @@ export function GroupListContent(props: GroupListCardsProps): ReactNode {
         return (
             <SectionError
                 icon={
-                    <Box
-                        component={WarningIcon}
+                    <AppIcon
+                        icon={WarningIcon}
                         size={IconSize.SECTION}
-                        c="yellow"
+                        color={StatusColor.WARNING}
                     />
                 }
                 title="All elements are hidden by filters"

From 36df93aadefb71ee2153565f47b5c7649b177481 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 31 Aug 2026 14:16:13 +0000
Subject: [PATCH 22/40] Say what the caller can do about a refusal, and drop
 the rate-limit kind

A rate limit reached the client as its own kind carrying the seconds to
wait, which nothing on the client read: the loader is what waits, and all
the caller can do is try again. It is a handled message now.

401 and 403 take its place as kinds, because those do differ in what the
caller can do: a missing session is offered a sign-in in the toast
itself, where before both said "try signing in again" and left them to
find the button.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018tgfuCHjVFvejjMe7WmEFL
---
 src/backend/features/auth/guards.ts           | 13 ++---
 .../library/insertables/routes.test.ts        |  7 +--
 src/backend/lib/api-error.ts                  | 33 ++++++++-----
 src/backend/lib/errors.test.ts                | 22 +++++++--
 src/backend/lib/errors.ts                     | 25 +++++-----
 src/frontend/lib/errors.ts                    | 48 +++++++++++--------
 src/frontend/lib/notifications.tsx            |  2 +-
 7 files changed, 91 insertions(+), 59 deletions(-)

diff --git a/src/backend/features/auth/guards.ts b/src/backend/features/auth/guards.ts
index 36fa1798..f8e6ed0e 100644
--- a/src/backend/features/auth/guards.ts
+++ b/src/backend/features/auth/guards.ts
@@ -1,16 +1,14 @@
 /** The two gates routes mount: signed in to Onshape at all, and on the admin team. */
 import type { MiddlewareHandler } from "hono";
-import { handledError } from "../../lib/api-error";
-import { HttpStatus } from "http-status-ts";
+import { forbiddenError, signInRequiredError } from "../../lib/api-error";
 import type { AppContext, AppContextEnv } from "../../lib/context";
 import { hasEditorAccess } from "./access-level";
 import { isSignedIn } from "./caller";
 
 async function requireSignIn(c: AppContext): Promise<void> {
     if (!(await isSignedIn(c))) {
-        throw handledError(
-            "You must be signed in to Onshape to use this functionality",
-            HttpStatus.UNAUTHORIZED
+        throw signInRequiredError(
+            "You must be signed in to Onshape to use this functionality"
         );
     }
 }
@@ -33,9 +31,8 @@ export const requireEditorMiddleware: MiddlewareHandler<AppContextEnv> = async (
 ) => {
     await requireSignIn(c);
     if (!hasEditorAccess(await c.var.getAccessLevel())) {
-        throw handledError(
-            "You must be on the admin team to use this functionality",
-            HttpStatus.FORBIDDEN
+        throw forbiddenError(
+            "You must be on the admin team to use this functionality"
         );
     }
     await next();
diff --git a/src/backend/features/library/insertables/routes.test.ts b/src/backend/features/library/insertables/routes.test.ts
index 13f2eaa4..92d4f64c 100644
--- a/src/backend/features/library/insertables/routes.test.ts
+++ b/src/backend/features/library/insertables/routes.test.ts
@@ -203,10 +203,11 @@ describe("insertable routes", () => {
             jsonRequest("POST", { indexConfigurations: true }),
             env
         );
-        // Surfaced to the client rather than silently enabling.
+        // Surfaced to the client rather than silently enabling. How long to
+        // wait is the loader's business; the caller is told to try again.
         expect(res.status).toBe(429);
-        const body: { retryAfterSeconds: number } = await res.json();
-        expect(body.retryAfterSeconds).toBe(450);
+        const body: { message: string } = await res.json();
+        expect(body.message).toContain("rate limit");
 
         const row = await readInsertable(TEST_PART_STUDIO_ID);
         expect(row?.indexConfigurations).toBe(false);
diff --git a/src/backend/lib/api-error.ts b/src/backend/lib/api-error.ts
index e70b24e5..c7a1b436 100644
--- a/src/backend/lib/api-error.ts
+++ b/src/backend/lib/api-error.ts
@@ -1,13 +1,16 @@
 /**
  * The one shape every failed /api response takes; `kind` tells the client what
- * to do and carries what that kind needs. A leaf module the frontend imports.
+ * to do about it. A leaf module the frontend imports.
  */
+import { HttpStatus } from "http-status-ts";
 
 export enum ApiErrorKind {
     /** `message` is written for the user; show it. */
     HANDLED = "handled",
-    /** Onshape is rate limiting us, and said how long to wait. */
-    RATE_LIMITED = "rate-limited",
+    /** No usable Onshape session: the client can offer to sign in again. */
+    SIGN_IN_REQUIRED = "sign-in-required",
+    /** Signed in, but this caller is not allowed to do it. */
+    FORBIDDEN = "forbidden",
     /** `message` is for the logs. The client shows its own wording instead. */
     INTERNAL = "internal"
 }
@@ -19,8 +22,9 @@ interface ApiErrorOf<K extends ApiErrorKind> {
 
 export type ApiErrorBody =
     | ApiErrorOf<ApiErrorKind.HANDLED>
-    | ApiErrorOf<ApiErrorKind.INTERNAL>
-    | (ApiErrorOf<ApiErrorKind.RATE_LIMITED> & { retryAfterSeconds: number });
+    | ApiErrorOf<ApiErrorKind.SIGN_IN_REQUIRED>
+    | ApiErrorOf<ApiErrorKind.FORBIDDEN>
+    | ApiErrorOf<ApiErrorKind.INTERNAL>;
 
 /** Thrown by a route; the app's error handler turns it into the response. */
 export class ApiError extends Error {
@@ -44,13 +48,18 @@ export function internalError(message: string, status: number): ApiError {
     return new ApiError({ kind: ApiErrorKind.INTERNAL, message }, status);
 }
 
-export function rateLimitedError(
-    message: string,
-    status: number,
-    retryAfterSeconds: number
-): ApiError {
+/** The caller has no session Onshape accepts; the client can offer them one. */
+export function signInRequiredError(message: string): ApiError {
     return new ApiError(
-        { kind: ApiErrorKind.RATE_LIMITED, message, retryAfterSeconds },
-        status
+        { kind: ApiErrorKind.SIGN_IN_REQUIRED, message },
+        HttpStatus.UNAUTHORIZED
+    );
+}
+
+/** The caller is known, and this is not theirs to do. */
+export function forbiddenError(message: string): ApiError {
+    return new ApiError(
+        { kind: ApiErrorKind.FORBIDDEN, message },
+        HttpStatus.FORBIDDEN
     );
 }
diff --git a/src/backend/lib/errors.test.ts b/src/backend/lib/errors.test.ts
index 7565f0b0..07aa12e3 100644
--- a/src/backend/lib/errors.test.ts
+++ b/src/backend/lib/errors.test.ts
@@ -13,8 +13,8 @@ describe("api error responses", () => {
         await resetDb(db);
     });
 
-    // Written for the user, so the client shows it verbatim.
-    it("marks a gate's refusal as handled", async () => {
+    // Written for the user, and the kind tells the client what to offer them.
+    it("marks a signed-out caller's refusal as needing a sign-in", async () => {
         const app = createTestApp({ signedIn: false });
 
         const res = await app.request(
@@ -25,11 +25,27 @@ describe("api error responses", () => {
 
         expect(res.status).toBe(401);
         expect(await res.json()).toMatchObject({
-            kind: ApiErrorKind.HANDLED,
+            kind: ApiErrorKind.SIGN_IN_REQUIRED,
             message: expect.stringContaining("signed in")
         });
     });
 
+    it("marks a caller without the access as forbidden", async () => {
+        const app = createTestApp({ accessLevel: AccessLevel.USER });
+
+        const res = await app.request(
+            `/api/reload-groups/library/${LibraryId.FRC_DESIGN_LIB}`,
+            jsonRequest("POST"),
+            env
+        );
+
+        expect(res.status).toBe(403);
+        expect(await res.json()).toMatchObject({
+            kind: ApiErrorKind.FORBIDDEN,
+            message: expect.stringContaining("admin team")
+        });
+    });
+
     // A malformed request is our bug, so the client falls back to its own
     // wording rather than showing a validator's message.
     it("marks a rejected request as internal", async () => {
diff --git a/src/backend/lib/errors.ts b/src/backend/lib/errors.ts
index cb1f6c2c..0ec3f6a2 100644
--- a/src/backend/lib/errors.ts
+++ b/src/backend/lib/errors.ts
@@ -5,9 +5,10 @@ import { OnshapeApiError, OnshapeRateLimitError } from "./onshape/client";
 import {
     ApiError,
     ApiErrorKind,
+    forbiddenError,
     handledError,
     internalError,
-    rateLimitedError
+    signInRequiredError
 } from "./api-error";
 import type { AppContextEnv } from "./context";
 
@@ -17,19 +18,21 @@ import type { AppContextEnv } from "./context";
  */
 function fromOnshapeError(error: OnshapeApiError): ApiError {
     if (error instanceof OnshapeRateLimitError) {
-        return rateLimitedError(
+        // How long to wait is the loader's business, not the caller's: all
+        // they can do is try again.
+        return handledError(
             "Onshape rate limit reached. Please try again shortly.",
-            HttpStatus.TOO_MANY_REQUESTS,
-            error.retryAfterSeconds
+            HttpStatus.TOO_MANY_REQUESTS
         );
     }
-    if (
-        error.status === HttpStatus.UNAUTHORIZED ||
-        error.status === HttpStatus.FORBIDDEN
-    ) {
-        return handledError(
-            "Onshape refused the request. Try signing in again.",
-            error.status
+    if (error.status === HttpStatus.UNAUTHORIZED) {
+        return signInRequiredError(
+            "Onshape did not accept the session. Signing in again should fix it."
+        );
+    }
+    if (error.status === HttpStatus.FORBIDDEN) {
+        return forbiddenError(
+            "Onshape would not allow that. Your account may not have access to this document."
         );
     }
     return internalError(
diff --git a/src/frontend/lib/errors.ts b/src/frontend/lib/errors.ts
index cbff181b..3d501dc1 100644
--- a/src/frontend/lib/errors.ts
+++ b/src/frontend/lib/errors.ts
@@ -1,5 +1,6 @@
 import { ApiErrorKind, type ApiErrorBody } from "@backend/lib/api-error";
-import { showErrorToast } from "./notifications";
+import { renderNotification, showErrorToast } from "./notifications";
+import { startSignIn } from "../features/auth/sign-in";
 
 /**
  * A failure worth telling the user about, from the backend or raised here.
@@ -18,27 +19,22 @@ export function appError(message: string): AppError {
     return new AppError({ kind: ApiErrorKind.HANDLED, message });
 }
 
+/** The kinds whose message was written for the user to read. */
+const SPOKEN_KINDS: ApiErrorBody["kind"][] = [
+    ApiErrorKind.HANDLED,
+    ApiErrorKind.SIGN_IN_REQUIRED,
+    ApiErrorKind.FORBIDDEN
+];
+
 /** Builds an {@link AppError} from a failed /api response body. */
 export function fromApiErrorBody(body: unknown): AppError {
     const parsed = body as Partial<ApiErrorBody> | undefined;
-    switch (parsed?.kind) {
-        case ApiErrorKind.HANDLED:
-            return new AppError({
-                kind: ApiErrorKind.HANDLED,
-                message: parsed.message ?? ""
-            });
-        case ApiErrorKind.RATE_LIMITED:
-            return new AppError({
-                kind: ApiErrorKind.RATE_LIMITED,
-                message: parsed.message ?? "",
-                retryAfterSeconds: parsed.retryAfterSeconds ?? 0
-            });
-        default:
-            return new AppError({
-                kind: ApiErrorKind.INTERNAL,
-                message: parsed?.message ?? ""
-            });
-    }
+    const kind = SPOKEN_KINDS.find((spoken) => spoken === parsed?.kind);
+    // Anything unrecognized is a failure we did not write wording for.
+    return new AppError({
+        kind: kind ?? ApiErrorKind.INTERNAL,
+        message: parsed?.message ?? ""
+    });
 }
 
 export function getAppErrorHandler(defaultMessage: string, toastId?: string) {
@@ -47,7 +43,8 @@ export function getAppErrorHandler(defaultMessage: string, toastId?: string) {
 
 /**
  * Only an error carrying wording meant for the user shows its own message;
- * anything else gets `defaultMessage`, written for the caller's context.
+ * anything else gets `defaultMessage`, written for the caller's context. A
+ * failure the caller can act on says so, and offers them the action.
  */
 export function handleAppError(
     error: Error,
@@ -56,8 +53,17 @@ export function handleAppError(
 ) {
     if (error instanceof AppError) {
         switch (error.body.kind) {
+            case ApiErrorKind.SIGN_IN_REQUIRED:
+                showErrorToast(
+                    renderNotification(error.body.message, {
+                        text: "Sign in",
+                        onClick: startSignIn
+                    }),
+                    toastKey
+                );
+                return;
             case ApiErrorKind.HANDLED:
-            case ApiErrorKind.RATE_LIMITED:
+            case ApiErrorKind.FORBIDDEN:
                 showErrorToast(error.body.message, toastKey);
                 return;
             case ApiErrorKind.INTERNAL:
diff --git a/src/frontend/lib/notifications.tsx b/src/frontend/lib/notifications.tsx
index 18a28719..a0b76865 100644
--- a/src/frontend/lib/notifications.tsx
+++ b/src/frontend/lib/notifications.tsx
@@ -114,7 +114,7 @@ export function showSuccessToast(message: string, id?: string): string {
     });
 }
 
-export function showErrorToast(message: string, id?: string): string {
+export function showErrorToast(message: ReactNode, id?: string): string {
     return showToast({
         id,
         color: "red",

From 48dc1915da2c486f56a11970c97c2ffdc53b608f Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 31 Aug 2026 14:16:15 +0000
Subject: [PATCH 23/40] Make ui state readable, and unusable stored state
 recoverable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Names and comments first: the private writer was `setUiState` beside the
public `useSetUiState`, the storage key was written twice, and both
accessors called themselves asynchronous while being neither.

The parse was the real problem. State stored by an older build, or naming
a library that no longer exists, threw inside getUiState — which routes
call before rendering, so the app would fail to start with nothing but
clearing site data to recover. It falls back to the defaults now: losing
a preference beats losing the app.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018tgfuCHjVFvejjMe7WmEFL
---
 src/frontend/lib/ui-state.ts | 84 +++++++++++++++++-------------------
 1 file changed, 40 insertions(+), 44 deletions(-)

diff --git a/src/frontend/lib/ui-state.ts b/src/frontend/lib/ui-state.ts
index 61da90b4..16bffb24 100644
--- a/src/frontend/lib/ui-state.ts
+++ b/src/frontend/lib/ui-state.ts
@@ -5,16 +5,20 @@ import { LibraryId } from "@backend/features/library/library-id";
 import { Vendor } from "@backend/features/library/vendors";
 import { DEFAULT_SETTINGS, Theme } from "@backend/features/settings/settings";
 
-// Increment this when a breaking change is made to the schema
+/** Bumped when a change to the schema makes stored state unusable. */
 const LATEST_VERSION = 3;
 
+const STORAGE_KEY = "uiState";
+
 const VendorType = z.enum(Object.values(Vendor));
 const AccessLevelType = z.enum(Object.values(AccessLevel));
 const ThemeType = z.enum(Object.values(Theme));
 const LibraryIdType = z.enum(Object.values(LibraryId));
 
 const UiStateSchema = z.object({
-    version: z.number().default(1), // We can't default the parsed version to LATEST_VERSION because of old versions floating around
+    // Defaulted to the first version rather than the latest: state stored
+    // before the field existed is old state, not current state.
+    version: z.number().default(1),
     isFavoritesOpen: z.boolean().default(false),
     isLibraryOpen: z.boolean().default(true),
     vendorFilters: z.array(VendorType).optional(),
@@ -39,29 +43,15 @@ type Subscriber = () => void;
 
 const subscribers = new Set<Subscriber>();
 
-let uiStateCache: UiState | null = null;
-
-function setUiState(uiState: UiState) {
-    const parsed = UiStateSchema.parse(uiState);
-
-    // Sets always set latest version
-    parsed.version = LATEST_VERSION;
+/** The state this session is working from; the store is written behind it. */
+let currentState: UiState | null = null;
 
-    // Only update if changed
-    if (
-        uiStateCache === null ||
-        JSON.stringify(parsed) !== JSON.stringify(uiStateCache)
-    ) {
-        uiStateCache = parsed;
-        writeStorage(JSON.stringify(parsed));
-        subscribers.forEach((callback) => callback());
-    }
-}
+const defaultState = (): UiState => UiStateSchema.parse({});
 
 /** Blocked or partitioned storage must not break the app, only its memory. */
 function readStorage(): string | null {
     try {
-        return window.localStorage.getItem("uiState");
+        return window.localStorage.getItem(STORAGE_KEY);
     } catch {
         return null;
     }
@@ -69,36 +59,38 @@ function readStorage(): string | null {
 
 function writeStorage(value: string): void {
     try {
-        window.localStorage.setItem("uiState", value);
+        window.localStorage.setItem(STORAGE_KEY, value);
     } catch {
         // Nothing to do; the in-memory cache still serves this session.
     }
 }
 
 /**
- * Asynchronously retrieves the current UI state.
+ * What was stored, or the defaults when it cannot be used: written by an older
+ * version, hand-edited, or naming something the app has since dropped. Losing a
+ * preference beats failing to start.
  */
-export function getUiState(): UiState {
-    if (uiStateCache) return uiStateCache;
-
+function readStoredState(): UiState {
     const raw = readStorage();
-    // Nothing in storage, initialize with defaults
     if (!raw) {
-        uiStateCache = UiStateSchema.parse({});
-        return uiStateCache;
+        return defaultState();
     }
-
-    uiStateCache = UiStateSchema.parse(
-        // Convert null to undefined for optional fields
-        JSON.parse(raw, (_key, value) => value ?? undefined)
-    );
-
-    if (uiStateCache.version < LATEST_VERSION) {
-        // Always reset to defaults for simplicity
-        // Updated version will get set in the next version
-        uiStateCache = UiStateSchema.parse({});
+    try {
+        const parsed = UiStateSchema.safeParse(
+            // A stored null reads as absent, which is what a default fills.
+            JSON.parse(raw, (_key, value) => value ?? undefined)
+        );
+        return parsed.success && parsed.data.version >= LATEST_VERSION
+            ? parsed.data
+            : defaultState();
+    } catch {
+        return defaultState();
     }
-    return uiStateCache;
+}
+
+export function getUiState(): UiState {
+    currentState ??= readStoredState();
+    return currentState;
 }
 
 function subscribeToUiState(callback: Subscriber) {
@@ -106,16 +98,20 @@ function subscribeToUiState(callback: Subscriber) {
     return () => subscribers.delete(callback);
 }
 
-/**
- * Asynchronously updates the current UI state.
- */
+/** Merges into the state, stores it, and tells every reader it changed. */
 export function updateUiState(partialState: Partial<UiState>): UiState {
-    const newState = {
+    const newState: UiState = {
         ...getUiState(),
         ...partialState,
+        // Writing always stamps the version the shape actually has.
         version: LATEST_VERSION
     };
-    setUiState(newState);
+    if (JSON.stringify(newState) === JSON.stringify(currentState)) {
+        return newState;
+    }
+    currentState = newState;
+    writeStorage(JSON.stringify(newState));
+    subscribers.forEach((callback) => callback());
     return newState;
 }
 

From befa38b2320cdb85a83553065f0221008a4981fe Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 31 Aug 2026 14:16:16 +0000
Subject: [PATCH 24/40] Tidy the leftovers a review found
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- The frontend's part-number module re-exported one backend function
  under a second name; its two callers now import the rule itself.
- parseUrl parses an Onshape document url, so parseOnshapeUrl.
- The feedback form url sat in url.tsx; it belongs to the setting that
  opens it.
- The default access level is granted as well as viewed, so a dev
  override is not clamped back to user while access data is pending.
- RequireAccessLevel asked "is it admin, or is it editor" in two
  branches, which is isWithinAccessLevel — and answers a required USER
  level correctly, which the branches did not.
- useIsJobRunning is the read several places wanted, leaving the refresh
  on finish to its single owner.
- SeverityCounts is an interface rather than an inline shape.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018tgfuCHjVFvejjMe7WmEFL
---
 src/frontend/features/auth/access-level.tsx   | 33 ++++++++-----------
 .../library/components/add-group-menu.tsx     |  4 +--
 src/frontend/features/library/queries.ts      |  5 +++
 src/frontend/lib/part-number.ts               |  1 -
 src/frontend/lib/refresh.ts                   |  4 +--
 src/frontend/lib/url.tsx                      |  7 +---
 6 files changed, 24 insertions(+), 30 deletions(-)
 delete mode 100644 src/frontend/lib/part-number.ts

diff --git a/src/frontend/features/auth/access-level.tsx b/src/frontend/features/auth/access-level.tsx
index 2a4948dc..7818c073 100644
--- a/src/frontend/features/auth/access-level.tsx
+++ b/src/frontend/features/auth/access-level.tsx
@@ -3,24 +3,27 @@ import { queryOptions, useQuery } from "@tanstack/react-query";
 import {
     AccessLevel,
     type AccessData,
-    hasAdminAccess,
-    hasEditorAccess,
     isWithinAccessLevel
 } from "@backend/features/auth/access-level";
 import { accessDataQueryKey } from "../../lib/query-keys";
 import { apiGet } from "../../lib/api-client";
 import { useGetUiState } from "../../lib/ui-state";
 
-const DEFAULT_ACCESS_DATA: AccessData = {
-    maxAccessLevel: AccessLevel.USER,
-    signedIn: false
-};
-
 /** The level the app is viewed as by default; the dev override grants it too. */
 const DEFAULT_ACCESS_LEVEL =
     (import.meta.env.VITE_ACCESS_LEVEL_OVERRIDE as AccessLevel | undefined) ??
     AccessLevel.USER;
 
+/**
+ * What the app assumes until the server answers. The default level is granted
+ * as well as viewed, or the clamp below would drop the dev override back to
+ * user for as long as the query is pending.
+ */
+const DEFAULT_ACCESS_DATA: AccessData = {
+    maxAccessLevel: DEFAULT_ACCESS_LEVEL,
+    signedIn: false
+};
+
 export function getAccessDataQuery() {
     return queryOptions<AccessData>({
         queryKey: accessDataQueryKey(),
@@ -82,18 +85,10 @@ export function RequireAccessLevel(props: RequireAccessLevelProps) {
         ? accessData.maxAccessLevel
         : accessData.currentAccessLevel;
 
-    if (
-        requiredAccessLevel === AccessLevel.ADMIN &&
-        hasAdminAccess(currentAccessLevel)
-    ) {
-        return props.children;
-    } else if (
-        requiredAccessLevel === AccessLevel.EDITOR &&
-        hasEditorAccess(currentAccessLevel)
-    ) {
-        return props.children;
-    }
-    return null;
+    // Reads backwards: the level held is the ceiling the requirement fits under.
+    return isWithinAccessLevel(requiredAccessLevel, currentAccessLevel)
+        ? props.children
+        : null;
 }
 
 export function RequireSignIn(props: PropsWithChildren) {
diff --git a/src/frontend/features/library/components/add-group-menu.tsx b/src/frontend/features/library/components/add-group-menu.tsx
index 3ab40bb6..4c3e8747 100644
--- a/src/frontend/features/library/components/add-group-menu.tsx
+++ b/src/frontend/features/library/components/add-group-menu.tsx
@@ -7,7 +7,7 @@ import { IconSize } from "../../../lib/style-constants";
 import { ReactNode, useState } from "react";
 import { useMutation } from "@tanstack/react-query";
 import { apiPost } from "../../../lib/api-client";
-import { parseUrl } from "../../../lib/url";
+import { parseOnshapeUrl } from "../../../lib/url";
 import { appError, getAppErrorHandler } from "../../../lib/errors";
 import { showInfoToast, showLoadingToast } from "../../../lib/notifications";
 import { queryClient } from "../../../lib/query-client";
@@ -34,7 +34,7 @@ function AddGroupMenuContent(props: AddGroupMenuContentProps): ReactNode {
     const mutation = useMutation({
         mutationKey: ["add-group"],
         mutationFn: async () => {
-            const newDocumentId = parseUrl(url)?.documentId;
+            const newDocumentId = parseOnshapeUrl(url)?.documentId;
             if (!newDocumentId) {
                 throw appError("Failed to parse url.");
             }
diff --git a/src/frontend/features/library/queries.ts b/src/frontend/features/library/queries.ts
index 4309efda..d24a0c1b 100644
--- a/src/frontend/features/library/queries.ts
+++ b/src/frontend/features/library/queries.ts
@@ -90,6 +90,11 @@ export function getJobStatusQuery(libraryId: LibraryId, canPoll: boolean) {
  * Job status for the current library. The endpoint is editor-only and needs an
  * Onshape session, so callers who have neither don't poll it at all.
  */
+/** Whether a library load is running, which several places show a spinner for. */
+export function useIsJobRunning(): boolean {
+    return useJobStatusQuery().data?.running ?? false;
+}
+
 export function useJobStatusQuery() {
     const libraryId = useLibraryId();
     const { signedIn, currentAccessLevel } = useAccessData();
diff --git a/src/frontend/lib/part-number.ts b/src/frontend/lib/part-number.ts
deleted file mode 100644
index 4935e52b..00000000
--- a/src/frontend/lib/part-number.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { meaningfulPartNumber as displayPartNumber } from "@backend/features/configurations/part-number";
diff --git a/src/frontend/lib/refresh.ts b/src/frontend/lib/refresh.ts
index d347e0ab..9e4b8f82 100644
--- a/src/frontend/lib/refresh.ts
+++ b/src/frontend/lib/refresh.ts
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef } from "react";
 import { useRouter } from "@tanstack/react-router";
 import { queryClient } from "./query-client";
-import { useJobStatusQuery } from "../features/library/queries";
+import { useIsJobRunning } from "../features/library/queries";
 import {
     accessDataQueryKey,
     favoritesQueryKey,
@@ -42,7 +42,7 @@ export function useRefreshFavorites(): () => Promise<void> {
 /** Polls whether a load job is running and refreshes the library once it finishes. */
 export function useJobStatus(): boolean {
     const refreshLibrary = useRefreshLibrary();
-    const running = useJobStatusQuery().data?.running ?? false;
+    const running = useIsJobRunning();
     // A ref, not state: tracking the previous value to detect the finished
     // transition shouldn't trigger a render (and set-state-in-effect is banned).
     const wasRunning = useRef(running);
diff --git a/src/frontend/lib/url.tsx b/src/frontend/lib/url.tsx
index e7909fc3..94706a02 100644
--- a/src/frontend/lib/url.tsx
+++ b/src/frontend/lib/url.tsx
@@ -39,7 +39,7 @@ export function makeUrl(path: DocumentPath): string {
  * Parses an Onshape document URL into an ElementPath.
  * Returns `undefined` if the URL could not be parsed successfully.
  */
-export function parseUrl(urlString: string): ElementPath | undefined {
+export function parseOnshapeUrl(urlString: string): ElementPath | undefined {
     try {
         // Example pathname: /documents/769b556baf61d32b18813fd0/w/e6d6c2b3a472b97a7e352949/e/8a0c13d3b2b68a99502dc436
         const url = new URL(urlString);
@@ -73,8 +73,3 @@ export async function copyUrlToClipboard(url: string): Promise<void> {
         autoClose: 3000
     });
 }
-
-/**
- * URL of the FRCDesign feedback Google Form.
- */
-export const FEEDBACK_FORM_URL = "https://forms.gle/WVXUwnrrpLGKdiBx9";

From aad0abd65de96131677fb5f16f4ade02fedcc729 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 1 Sep 2026 01:19:32 +0000
Subject: [PATCH 25/40] Spell a canonical value the way the parser measures it

Canonicalizing a quantity rounded the parsed base value to seven decimals
of its own choosing and assembled the unit string by hand, beside a
module that already knows what a value is measured in and how close two
of them have to be to count as one. formatBaseValue is that spelling:
base units, to the decimals the tolerance distinguishes, so two values
the parser reads as equal cannot key two renders.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018tgfuCHjVFvejjMe7WmEFL
---
 .../features/configurations/canonical.test.ts | 18 ++++++++++--
 .../features/configurations/canonical.ts      | 27 ++++--------------
 .../features/configurations/input-parser.ts   | 28 +++++++++++++++++--
 3 files changed, 47 insertions(+), 26 deletions(-)

diff --git a/src/backend/features/configurations/canonical.test.ts b/src/backend/features/configurations/canonical.test.ts
index 9e847fe6..f14a0812 100644
--- a/src/backend/features/configurations/canonical.test.ts
+++ b/src/backend/features/configurations/canonical.test.ts
@@ -140,9 +140,23 @@ describe("quantity canonicalization", () => {
     });
 
     it("spells an angle in radians", () => {
+        const spelled = canonicalizeConfiguration({ angle: "180 deg" }, [
+            angle
+        ]).angle;
+        expect(spelled).toMatch(/ rad$/);
+        // To the decimals the parser's angle tolerance distinguishes, rather
+        // than a precision of this module's own.
+        expect(Number.parseFloat(spelled)).toBeCloseTo(Math.PI, 10);
+    });
+
+    // Values the parser reads as equal have to spell the same, or they key two
+    // renders of one configuration.
+    it("spells a difference below the tolerance the same way", () => {
         expect(
-            canonicalizeConfiguration({ angle: "180 deg" }, [angle])
-        ).toEqual({ angle: `${Number(Math.PI.toFixed(7))} rad` });
+            canonicalizeConfiguration({ length: "0.02540000000001 m" }, [
+                length
+            ])
+        ).toEqual(canonicalizeConfiguration({ length: "1 in" }, [length]));
     });
 
     // The document's display units used to decide the spelling, so the same
diff --git a/src/backend/features/configurations/canonical.ts b/src/backend/features/configurations/canonical.ts
index 069424f2..82db3bc1 100644
--- a/src/backend/features/configurations/canonical.ts
+++ b/src/backend/features/configurations/canonical.ts
@@ -7,9 +7,8 @@ import {
     ParameterType,
     type ParameterValues
 } from "./models";
-import { QuantityType, Unit, getUnitDisplayStr } from "./enums";
 import { evaluateCondition } from "./utils";
-import { evaluateBaseValue } from "./input-parser";
+import { evaluateBaseValue, formatBaseValue } from "./input-parser";
 
 /** The element default, which is what an empty canonical configuration encodes. */
 export const DEFAULT_CANONICAL_CONFIGURATION = "";
@@ -17,36 +16,22 @@ export const DEFAULT_CANONICAL_CONFIGURATION = "";
 /** The key for an element's default configuration (what everything falls back to). */
 export const DEFAULT_CONFIGURATION_KEY = "default";
 
-/** Decimals kept on a base-unit value: 0.1 µm, past any real CAD tolerance. */
-const BASE_UNIT_PRECISION = 7;
-
-/** Base units, so the spelling never depends on the document's display units. */
-function baseUnit(quantityType: QuantityType): Unit {
-    if (quantityType === QuantityType.LENGTH) return Unit.METER;
-    if (quantityType === QuantityType.ANGLE) return Unit.RADIAN;
-    return Unit.UNITLESS;
-}
-
 /** Normalizes one parameter's raw value to its canonical spelling. */
 function canonicalizeValue(
     parameter: ConfigurationParameter,
     value: string
 ): string {
     if (parameter.type === ParameterType.QUANTITY) {
-        // "1in", "1 in", "(0.5 + 0.5) in" and "25.4 mm" are one configuration.
-        // Unparseable values ride as-is.
+        // "1in", "1 in", "(0.5 + 0.5) in" and "25.4 mm" are one configuration:
+        // the parser reads them all to the same base value, which spells it in
+        // the units and precision Onshape itself compares in. Unparseable
+        // values ride as-is.
         const base = evaluateBaseValue(
             value,
             parameter.quantityType,
             parameter.unit
         );
-        if (base === undefined) {
-            return value.trim();
-        }
-        const unit = baseUnit(parameter.quantityType);
-        const rounded = Number(base.toFixed(BASE_UNIT_PRECISION));
-        const suffix = getUnitDisplayStr(unit);
-        return suffix ? `${rounded} ${suffix}` : `${rounded}`;
+        return base === undefined ? value.trim() : formatBaseValue(base);
     }
     if (parameter.type === ParameterType.BOOLEAN) {
         return value.trim().toLowerCase();
diff --git a/src/backend/features/configurations/input-parser.ts b/src/backend/features/configurations/input-parser.ts
index 7d9848d5..30801f9f 100644
--- a/src/backend/features/configurations/input-parser.ts
+++ b/src/backend/features/configurations/input-parser.ts
@@ -30,6 +30,28 @@ export function valueWithUnits(value: number, unit: Unit): ValueWithUnits {
     return { value: value * getUnitFactor(unit), type: getUnitType(unit) };
 }
 
+/** What a type is measured in once parsed, which is what Onshape stores. */
+function baseUnit(type: UnitType): Unit {
+    switch (type) {
+        case "length":
+            return Unit.METER;
+        case "angle":
+            return Unit.RADIAN;
+        case "number":
+            return Unit.UNITLESS;
+    }
+}
+
+/**
+ * The one spelling of a value: its base unit, to the decimals its tolerance
+ * distinguishes. Two values this module reads as equal spell the same, which
+ * is what makes the spelling worth keying on.
+ */
+export function formatBaseValue(value: ValueWithUnits): string {
+    const precision = Math.round(-Math.log10(TOLERANCE[value.type]));
+    return formatValueWithUnits(value, baseUnit(value.type), precision);
+}
+
 function tolerantEqualsZero(value: ValueWithUnits) {
     return tolerantEquals(value, { value: 0, type: value.type });
 }
@@ -83,7 +105,7 @@ type UnitType = "length" | "angle" | "number";
 
 type Operator = "+" | "-" | "*" | "/";
 
-interface ValueWithUnits {
+export interface ValueWithUnits {
     value: number;
     type: UnitType;
 }
@@ -660,7 +682,7 @@ export function evaluateBaseValue(
     input: string,
     quantityType: QuantityType,
     defaultUnit: Unit
-): number | undefined {
+): ValueWithUnits | undefined {
     let value: ValueWithUnits;
     try {
         value = evaluateExpressionValue(parseExpression(input), quantityType);
@@ -674,7 +696,7 @@ export function evaluateBaseValue(
     ) {
         value = applyDefaultUnit(value, defaultUnit);
     }
-    return value.value;
+    return value;
 }
 
 export function evaluateExpression(

From 3f56a310939d8e03ee07f06baceedf277f356614 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 1 Sep 2026 01:19:33 +0000
Subject: [PATCH 26/40] Pass the configuration row through, and say the cache's
 reason

The build status mapped a configuration row into a shape that differed
from it only by dropping the id, so the id joins the contract and the row
goes through as it is. Its private cache gets the reason written down:
the body is the same for every editor, but a shared cache would hand it
to whoever asked for the url next.

isSignedIn reads as the one question it answers, and clean stops saying
"blank is nothing" twice.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018tgfuCHjVFvejjMe7WmEFL
---
 src/backend/features/auth/caller.ts           | 25 +++++++++----------
 .../features/build-checker/contract.ts        |  2 ++
 src/backend/features/build-checker/routes.ts  | 10 +++-----
 src/backend/lib/text.ts                       |  3 +--
 4 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/src/backend/features/auth/caller.ts b/src/backend/features/auth/caller.ts
index 014be8c6..3b43c898 100644
--- a/src/backend/features/auth/caller.ts
+++ b/src/backend/features/auth/caller.ts
@@ -109,26 +109,25 @@ function getAccessLevelOverride(c: AppContext): AccessLevel | undefined {
     return c.env.VITE_ACCESS_LEVEL_OVERRIDE as AccessLevel | undefined;
 }
 
+/** Whether the session resolves to tokens Onshape will take. */
+async function hasOnshapeSession(c: AppContext): Promise<boolean> {
+    try {
+        await c.var.getOnshapeApi();
+        return true;
+    } catch {
+        return false;
+    }
+}
+
 /**
  * Whether the caller has a valid Onshape session, memoized on the request.
- * `FORCE_SIGNED_IN` forces it true for testing.
+ * `FORCE_SIGNED_IN` stands in for the session it cannot have in development.
  */
 export async function isSignedIn(c: AppContext): Promise<boolean> {
     const cached = c.get("signedIn");
     if (cached !== undefined) return cached;
 
-    let signedIn: boolean;
-    if (isForceSignedIn(c)) {
-        signedIn = true;
-    } else {
-        try {
-            await c.var.getOnshapeApi();
-            signedIn = true;
-        } catch {
-            signedIn = false;
-        }
-    }
-
+    const signedIn = isForceSignedIn(c) || (await hasOnshapeSession(c));
     c.set("signedIn", signedIn);
     return signedIn;
 }
diff --git a/src/backend/features/build-checker/contract.ts b/src/backend/features/build-checker/contract.ts
index 1e35f8a7..0b3afe96 100644
--- a/src/backend/features/build-checker/contract.ts
+++ b/src/backend/features/build-checker/contract.ts
@@ -4,6 +4,8 @@ import { ElementType } from "../../lib/onshape/element-type";
 import { Vendor } from "../library/vendors";
 
 export interface ConfigurationBuildStatus {
+    /** The insertable's id, which a configuration row is keyed by. */
+    id: string;
     buildIssues: BuildIssue[];
     parameters: ConfigurationParameter[];
 }
diff --git a/src/backend/features/build-checker/routes.ts b/src/backend/features/build-checker/routes.ts
index b2b9dace..a5623ea7 100644
--- a/src/backend/features/build-checker/routes.ts
+++ b/src/backend/features/build-checker/routes.ts
@@ -17,6 +17,8 @@ export const buildStatusRoutes = getApp();
 buildStatusRoutes.get(
     "/build-status" + libraryRoute(),
     requireEditorMiddleware,
+    // The same for every editor, but only for an editor: a shared cache would
+    // hand it to whoever asked for the url next.
     cacheMiddleware(CachePolicy.PRIVATE_CACHE),
     async (c) => {
         const libraryId = getLibraryParam(c);
@@ -82,7 +84,6 @@ buildStatusRoutes.get(
 
         const insertablesOut: Record<string, InsertableBuildStatus> = {};
         for (const ins of allInsertables) {
-            const config = configMap.get(ins.id);
             insertablesOut[ins.id] = {
                 buildIssues: ins.buildIssues,
                 elementType: ins.elementType,
@@ -90,12 +91,7 @@ buildStatusRoutes.get(
                 supportsFasten: ins.supportsFasten,
                 indexConfigurations: ins.indexConfigurations,
                 vendors: ins.vendors,
-                configuration: config
-                    ? {
-                          buildIssues: config.buildIssues,
-                          parameters: config.parameters
-                      }
-                    : undefined,
+                configuration: configMap.get(ins.id),
                 lastLoadedAt: ins.lastLoadedAt
             };
         }
diff --git a/src/backend/lib/text.ts b/src/backend/lib/text.ts
index 5d0b3fc5..96fbacd2 100644
--- a/src/backend/lib/text.ts
+++ b/src/backend/lib/text.ts
@@ -2,8 +2,7 @@
 
 /** A value's meaningful text, or nothing when it is blank. */
 export function clean(text: string | undefined | null): string | undefined {
-    const trimmed = text?.trim();
-    return trimmed ? trimmed : undefined;
+    return text?.trim() || undefined;
 }
 
 /** Whether two values say the same thing, ignoring case and surrounding space. */

From d0a74d0bc357fb5d46f96f2adbc408f70af32dcf Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 1 Sep 2026 02:17:08 +0000
Subject: [PATCH 27/40] Spell out the thumbnail query, and stop storing a
 stand-in

`c`, `i` and `warm` become `configuration`, `insertableId` and
`renderThumbnail`, which is what the flag asks for: start the render this
url is missing. `v` stays, being the cache version every immutable url
carries, and the one stored urls already hold.

The stand-in served while a configuration renders was cached for a
minute, which is a minute of anyone asking that url getting the old
answer after the real render landed. It is a body the url does not
promise, so nothing stores it now: the next request is free to see past
it, and polling for a thumbnail we want costs an R2 read.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018tgfuCHjVFvejjMe7WmEFL
---
 src/backend/features/thumbnails/keys.ts       | 21 ++++----
 .../features/thumbnails/routes.test.ts        | 49 +++++++++----------
 src/backend/features/thumbnails/routes.ts     | 38 +++++++-------
 src/backend/lib/cache.ts                      | 12 +++--
 src/backend/lib/context.ts                    |  2 +-
 .../favorites/components/favorite-card.tsx    |  2 +-
 .../library/components/insertable-card.tsx    |  2 +-
 .../thumbnails/components/thumbnail.tsx       | 12 ++---
 8 files changed, 67 insertions(+), 71 deletions(-)

diff --git a/src/backend/features/thumbnails/keys.ts b/src/backend/features/thumbnails/keys.ts
index 2223faff..3f9a9fd8 100644
--- a/src/backend/features/thumbnails/keys.ts
+++ b/src/backend/features/thumbnails/keys.ts
@@ -5,9 +5,6 @@ import {
 } from "../configurations/canonical";
 import { ThumbnailSize } from "./types";
 
-/** Short on purpose: the real render can land at any moment and must take over. */
-export const THUMBNAIL_FALLBACK_CACHE_TTL = 60;
-
 /** Marks a response as the element default standing in for an unrendered configuration. */
 export const THUMBNAIL_FALLBACK_HEADER = "X-Thumbnail-Fallback";
 
@@ -30,9 +27,9 @@ export interface ThumbnailUrlOptions {
     size: ThumbnailSize;
     /** Empty (the default) serves the element's own thumbnail. */
     canonicalConfiguration: string;
-    /** Whether a miss should kick off generating this configuration. */
-    warm?: boolean;
-    /** Only needed to warm: it is what the render resolves the element from. */
+    /** Whether a miss should start rendering this configuration. */
+    renderThumbnail?: boolean;
+    /** Only needed to render: what the render resolves the element from. */
     insertableId?: string;
     /**
      * Which poll this is. The worker ignores it; it is what keeps each poll off
@@ -47,16 +44,18 @@ export function thumbnailUrl({
     microversionId,
     size,
     canonicalConfiguration,
-    warm,
+    renderThumbnail,
     insertableId,
     attempt
 }: ThumbnailUrlOptions): string {
+    // `v` is the one abbreviation: it is the cache version every immutable url
+    // carries, and a render is pinned to the microversion it was taken from.
     const query = new URLSearchParams({ v: microversionId });
     if (canonicalConfiguration !== DEFAULT_CANONICAL_CONFIGURATION) {
-        query.set("c", canonicalConfiguration);
-        if (warm && insertableId) {
-            query.set("warm", "true");
-            query.set("i", insertableId);
+        query.set("configuration", canonicalConfiguration);
+        if (renderThumbnail && insertableId) {
+            query.set("renderThumbnail", "true");
+            query.set("insertableId", insertableId);
         }
         // Omitted on the first, so it shares a url with everything else asking
         // for this configuration.
diff --git a/src/backend/features/thumbnails/routes.test.ts b/src/backend/features/thumbnails/routes.test.ts
index 64c31eda..485deac1 100644
--- a/src/backend/features/thumbnails/routes.test.ts
+++ b/src/backend/features/thumbnails/routes.test.ts
@@ -2,12 +2,7 @@ import { env } from "cloudflare:workers";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { createTestApp, jsonRequest } from "../../../__test_utils__";
 import { ThumbnailSize } from "./types";
-import {
-    THUMBNAIL_FALLBACK_CACHE_TTL,
-    THUMBNAIL_FALLBACK_HEADER,
-    thumbnailKey,
-    thumbnailUrl
-} from "./keys";
+import { THUMBNAIL_FALLBACK_HEADER, thumbnailKey, thumbnailUrl } from "./keys";
 import {
     DEFAULT_CANONICAL_CONFIGURATION,
     canonicalConfigurationKey
@@ -126,9 +121,9 @@ describe("thumbnail serving", () => {
         expect(res.headers.get("Cache-Control")).toBe("private, no-store");
     });
 
-    // A configuration we haven't rendered stands in with the element's default,
-    // cached briefly so the real render can take over as soon as it lands.
-    it("falls back to the default thumbnail, cached only briefly", async () => {
+    // A configuration we haven't rendered stands in with the element's default.
+    // Nothing stores it, so the real render is seen the moment it lands.
+    it("falls back to the default thumbnail, stored by nobody", async () => {
         const elementId = "fallback-element";
         await env.BLOB.put(
             thumbnailKey(elementId, MICROVERSION, SIZE),
@@ -145,9 +140,7 @@ describe("thumbnail serving", () => {
         );
         expect(res.status).toBe(200);
         expect(await res.text()).toBe("default-bytes");
-        expect(res.headers.get("Cache-Control")).toBe(
-            `public, max-age=${THUMBNAIL_FALLBACK_CACHE_TTL}`
-        );
+        expect(res.headers.get("Cache-Control")).toBe("private, no-store");
     });
 
     it("prefers the configuration's own thumbnail once it exists", async () => {
@@ -180,7 +173,7 @@ describe("thumbnail serving", () => {
     });
 });
 
-describe("warming a configuration's thumbnail", () => {
+describe("rendering a configuration's thumbnail", () => {
     afterEach(() => vi.restoreAllMocks());
 
     /** Seeds only the default, so a configuration request always misses. */
@@ -191,29 +184,33 @@ describe("warming a configuration's thumbnail", () => {
         );
     }
 
-    it("passes warm as a boolean the validator accepts", () => {
+    it("passes renderThumbnail as a boolean the validator accepts", () => {
         const url = thumbnailUrl({
             elementId: "any",
             microversionId: MICROVERSION,
             size: SIZE,
             canonicalConfiguration: CANONICAL_CONFIGURATION,
-            warm: true,
+            renderThumbnail: true,
             insertableId: INSERTABLE_ID
         });
-        expect(new URL(url, "http://x").searchParams.get("warm")).toBe("true");
+        expect(
+            new URL(url, "http://x").searchParams.get("renderThumbnail")
+        ).toBe("true");
     });
 
-    // Without one there is nothing to resolve the element from, so warming is
-    // simply not requested.
-    it("omits warm when no insertable is named", () => {
+    // Without one there is nothing to resolve the element from, so the render
+    // is simply not requested.
+    it("omits renderThumbnail when no insertable is named", () => {
         const url = thumbnailUrl({
             elementId: "any",
             microversionId: MICROVERSION,
             size: SIZE,
             canonicalConfiguration: CANONICAL_CONFIGURATION,
-            warm: true
+            renderThumbnail: true
         });
-        expect(new URL(url, "http://x").searchParams.get("warm")).toBeNull();
+        expect(
+            new URL(url, "http://x").searchParams.get("renderThumbnail")
+        ).toBeNull();
     });
 
     it("starts the render on a miss", async () => {
@@ -229,7 +226,7 @@ describe("warming a configuration's thumbnail", () => {
                 microversionId: MICROVERSION,
                 size: SIZE,
                 canonicalConfiguration: CANONICAL_CONFIGURATION,
-                warm: true,
+                renderThumbnail: true,
                 insertableId: INSERTABLE_ID
             }),
             SESSION_ID
@@ -260,7 +257,7 @@ describe("warming a configuration's thumbnail", () => {
                 microversionId: MICROVERSION,
                 size: SIZE,
                 canonicalConfiguration: CANONICAL_CONFIGURATION,
-                warm: true,
+                renderThumbnail: true,
                 insertableId: INSERTABLE_ID
             })
         );
@@ -272,7 +269,7 @@ describe("warming a configuration's thumbnail", () => {
 
     // Search results show many configurations at once; one cold search must not
     // kick off a render per row.
-    it("does not start the render when warm is absent", async () => {
+    it("does not start the render when renderThumbnail is absent", async () => {
         const elementId = "cold-element";
         await seedDefaultOnly(elementId);
         const createSpy = vi.spyOn(env.THUMBNAIL_WORKFLOW, "create");
@@ -329,9 +326,9 @@ describe("warming a configuration's thumbnail", () => {
         expect(urlFor(1)).toBe("1");
     });
 
-    it("rejects a warm that is not a boolean", async () => {
+    it("rejects a renderThumbnail that is not a boolean", async () => {
         const res = await get(
-            `/api/thumbnail/${SIZE}/any?v=${MICROVERSION}&c=x&warm=maybe`
+            `/api/thumbnail/${SIZE}/any?v=${MICROVERSION}&configuration=x&renderThumbnail=maybe`
         );
         expect(res.status).toBe(400);
     });
diff --git a/src/backend/features/thumbnails/routes.ts b/src/backend/features/thumbnails/routes.ts
index 72722636..8e934a5f 100644
--- a/src/backend/features/thumbnails/routes.ts
+++ b/src/backend/features/thumbnails/routes.ts
@@ -1,14 +1,10 @@
 import { z } from "zod";
 import { validate } from "../../lib/validate";
-import { CachePolicy, cacheMiddleware, setCacheTtl } from "../../lib/cache";
+import { CachePolicy, cacheMiddleware, setUncacheable } from "../../lib/cache";
 import { getApp } from "../../lib/context";
 
 import { ThumbnailSize } from "./types";
-import {
-    THUMBNAIL_FALLBACK_CACHE_TTL,
-    THUMBNAIL_FALLBACK_HEADER,
-    thumbnailKey
-} from "./keys";
+import { THUMBNAIL_FALLBACK_HEADER, thumbnailKey } from "./keys";
 import {
     DEFAULT_CANONICAL_CONFIGURATION,
     DEFAULT_CONFIGURATION_KEY,
@@ -34,15 +30,16 @@ const canonicalConfigurationQuery = z
 const storedThumbnailQuery = z.object({
     /** The microversion, part of the key — which is what makes a hit immutable. */
     v: z.string().min(1),
-    c: canonicalConfigurationQuery,
-    warm: z.stringbool().default(false),
-    /** The insertable to render from; only sent with `warm`. */
-    i: z.string().optional()
+    configuration: canonicalConfigurationQuery,
+    renderThumbnail: z.stringbool().default(false),
+    /** The insertable to render from; only sent with `renderThumbnail`. */
+    insertableId: z.string().optional()
 });
 
 /**
- * GET /api/thumbnail/:size/:elementId?v=&c=&warm= — an unrendered configuration
- * falls back to the element default, and `warm` kicks off the real render.
+ * GET /api/thumbnail/:size/:elementId?v=&configuration=&renderThumbnail= — an
+ * unrendered configuration falls back to the element default, and
+ * `renderThumbnail` starts the real render.
  */
 thumbnailRoutes.get(
     "/thumbnail/:size/:elementId",
@@ -53,9 +50,9 @@ thumbnailRoutes.get(
         const { size, elementId } = c.req.valid("param");
         const {
             v: microversionId,
-            c: canonicalConfiguration,
-            warm,
-            i: insertableId
+            configuration: canonicalConfiguration,
+            renderThumbnail,
+            insertableId
         } = c.req.valid("query");
         const configurationKey = canonicalConfigurationKey(
             canonicalConfiguration
@@ -72,8 +69,8 @@ thumbnailRoutes.get(
             return c.notFound();
         }
 
-        if (warm && insertableId) {
-            await warmConfigurationThumbnail(c, {
+        if (renderThumbnail && insertableId) {
+            await startConfigurationRender(c, {
                 insertableId,
                 canonicalConfiguration
             });
@@ -86,8 +83,9 @@ thumbnailRoutes.get(
         if (!fallback) {
             return c.notFound();
         }
-        // Unlike a hit, this url does not pin these bytes.
-        setCacheTtl(c, THUMBNAIL_FALLBACK_CACHE_TTL);
+        // Unlike a hit, this url does not pin these bytes: the real render can
+        // land at any moment, and whoever asks next should see it.
+        setUncacheable(c);
         const response = thumbnailResponse(fallback);
         response.headers.set(THUMBNAIL_FALLBACK_HEADER, "1");
         return response;
@@ -104,7 +102,7 @@ function thumbnailResponse(object: R2ObjectBody): Response {
  * Concurrent requests can each start a run. Rare, and the workflow skips a
  * render that is already stored, which a reused id would rule out permanently.
  */
-async function warmConfigurationThumbnail(
+async function startConfigurationRender(
     c: AppContext,
     params: Omit<ThumbnailWorkflowParams, "sessionId">
 ): Promise<void> {
diff --git a/src/backend/lib/cache.ts b/src/backend/lib/cache.ts
index bc7c025e..6c860810 100644
--- a/src/backend/lib/cache.ts
+++ b/src/backend/lib/cache.ts
@@ -23,9 +23,12 @@ export function immutableCacheControl(
     return `${policy}, max-age=${IMMUTABLE_CACHE_TTL}, immutable`;
 }
 
-/** Overrides the route's immutable default for a body its url does not pin. */
-export function setCacheTtl(c: AppContext, maxAge: number): void {
-    c.set("cacheTtl", maxAge);
+/**
+ * Marks a body the url does not pin: a stand-in for something not rendered yet.
+ * Nothing stores it, so the next request is the one that sees past it.
+ */
+export function setUncacheable(c: AppContext): void {
+    c.set("uncacheable", true);
 }
 
 /** Declares how a route's response may be cached, and enforces what that takes. */
@@ -56,10 +59,9 @@ export function cacheMiddleware(
             c.header("Cache-Control", NO_STORE);
             return;
         }
-        const ttl = c.get("cacheTtl");
         c.header(
             "Cache-Control",
-            ttl === undefined ? cacheControl : `${policy}, max-age=${ttl}`
+            c.get("uncacheable") ? NO_STORE : cacheControl
         );
     };
 }
diff --git a/src/backend/lib/context.ts b/src/backend/lib/context.ts
index 172da95e..ba815096 100644
--- a/src/backend/lib/context.ts
+++ b/src/backend/lib/context.ts
@@ -30,7 +30,7 @@ interface AppVariables {
     /** Internal cache for `isSignedIn` in features/auth/caller.ts. */
     signedIn?: boolean;
     /** Set by `setCacheTtl`; read by `cacheMiddleware`. */
-    cacheTtl?: number;
+    uncacheable?: boolean;
     /** Injected by {@link bindCaller}; see {@link Caller}. */
     getOnshapeApi: () => Promise<OAuthApi>;
     getUserId: () => Promise<string>;
diff --git a/src/frontend/features/favorites/components/favorite-card.tsx b/src/frontend/features/favorites/components/favorite-card.tsx
index 3dba636f..a622410d 100644
--- a/src/frontend/features/favorites/components/favorite-card.tsx
+++ b/src/frontend/features/favorites/components/favorite-card.tsx
@@ -85,7 +85,7 @@ export function FavoriteCard(props: FavoriteCardProps): ReactNode {
                                     encodeCanonicalConfiguration(
                                         favorite.defaultConfiguration ?? {}
                                     ),
-                                warm: true,
+                                renderThumbnail: true,
                                 insertableId: insertable.id
                             }}
                         />
diff --git a/src/frontend/features/library/components/insertable-card.tsx b/src/frontend/features/library/components/insertable-card.tsx
index 1dcd138f..3080fbcf 100644
--- a/src/frontend/features/library/components/insertable-card.tsx
+++ b/src/frontend/features/library/components/insertable-card.tsx
@@ -89,7 +89,7 @@ export function InsertableCard(props: InsertableCardProps): ReactNode {
                                     ),
                                 // A cold search would otherwise start a render
                                 // per row.
-                                warm: false
+                                renderThumbnail: false
                             }}
                         />
                     }
diff --git a/src/frontend/features/thumbnails/components/thumbnail.tsx b/src/frontend/features/thumbnails/components/thumbnail.tsx
index 25e03d0a..0b3b1758 100644
--- a/src/frontend/features/thumbnails/components/thumbnail.tsx
+++ b/src/frontend/features/thumbnails/components/thumbnail.tsx
@@ -49,11 +49,11 @@ export interface ThumbnailTarget {
     /** Empty means the element default. */
     canonicalConfiguration: string;
     /**
-     * Surfaces where the user picked the configuration warm it; a cold search
-     * would otherwise start a render per row.
+     * Whether a miss should start rendering: surfaces where the user picked the
+     * configuration do, where a search would otherwise render a row at a time.
      */
-    warm: boolean;
-    /** Only needed to warm: what the render resolves the element from. */
+    renderThumbnail: boolean;
+    /** Only needed to render: what the render resolves the element from. */
     insertableId?: string;
 }
 
@@ -181,7 +181,7 @@ const PREVIEW_POLL_MS = 4000;
  * How many polls apart to ask for the render again. One request is meant to
  * start it; this only covers the run never having been queued at all.
  */
-const WARM_EVERY_POLLS = 15;
+const RENDER_EVERY_POLLS = 15;
 
 /**
  * The last render actually produced, kept across configuration changes: the
@@ -222,7 +222,7 @@ export function PreviewImage(props: PreviewImageProps): ReactNode {
             microversionId,
             size,
             canonicalConfiguration,
-            warm: attempt % WARM_EVERY_POLLS === 0,
+            renderThumbnail: attempt % RENDER_EVERY_POLLS === 0,
             insertableId,
             attempt
         });

From da5208dc83afec165180099f1f4b33ff2240217f Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 1 Sep 2026 03:41:18 +0000
Subject: [PATCH 28/40] Let the thumbnail route say how each answer may be
 cached

Reaching for the middleware meant a context flag telling it to undo
itself, for the one route whose answers genuinely differ: stored bytes
the url pins, a stand-in it does not, and a miss that must stay
retryable. setCache says that per response, and the middleware goes back
to being for routes whose every answer is alike.

The query param is canonicalConfiguration, since that is what it is: a
url that took an ordinary configuration would key a different render.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018tgfuCHjVFvejjMe7WmEFL
---
 src/backend/features/thumbnails/keys.ts   |  2 +-
 src/backend/features/thumbnails/routes.ts | 41 ++++++++++++++++-------
 src/backend/lib/cache.ts                  | 26 ++++++++------
 src/backend/lib/context.ts                |  1 -
 4 files changed, 44 insertions(+), 26 deletions(-)

diff --git a/src/backend/features/thumbnails/keys.ts b/src/backend/features/thumbnails/keys.ts
index 3f9a9fd8..71970b5b 100644
--- a/src/backend/features/thumbnails/keys.ts
+++ b/src/backend/features/thumbnails/keys.ts
@@ -52,7 +52,7 @@ export function thumbnailUrl({
     // carries, and a render is pinned to the microversion it was taken from.
     const query = new URLSearchParams({ v: microversionId });
     if (canonicalConfiguration !== DEFAULT_CANONICAL_CONFIGURATION) {
-        query.set("configuration", canonicalConfiguration);
+        query.set("canonicalConfiguration", canonicalConfiguration);
         if (renderThumbnail && insertableId) {
             query.set("renderThumbnail", "true");
             query.set("insertableId", insertableId);
diff --git a/src/backend/features/thumbnails/routes.ts b/src/backend/features/thumbnails/routes.ts
index 8e934a5f..af207822 100644
--- a/src/backend/features/thumbnails/routes.ts
+++ b/src/backend/features/thumbnails/routes.ts
@@ -1,6 +1,7 @@
 import { z } from "zod";
+import { HttpStatus } from "http-status-ts";
 import { validate } from "../../lib/validate";
-import { CachePolicy, cacheMiddleware, setUncacheable } from "../../lib/cache";
+import { CachePolicy, setCache } from "../../lib/cache";
 import { getApp } from "../../lib/context";
 
 import { ThumbnailSize } from "./types";
@@ -30,27 +31,29 @@ const canonicalConfigurationQuery = z
 const storedThumbnailQuery = z.object({
     /** The microversion, part of the key — which is what makes a hit immutable. */
     v: z.string().min(1),
-    configuration: canonicalConfigurationQuery,
+    canonicalConfiguration: canonicalConfigurationQuery,
     renderThumbnail: z.stringbool().default(false),
     /** The insertable to render from; only sent with `renderThumbnail`. */
     insertableId: z.string().optional()
 });
 
 /**
- * GET /api/thumbnail/:size/:elementId?v=&configuration=&renderThumbnail= — an
- * unrendered configuration falls back to the element default, and
+ * GET /api/thumbnail/:size/:elementId?v=&canonicalConfiguration=&renderThumbnail=
+ * — an unrendered configuration falls back to the element default, and
  * `renderThumbnail` starts the real render.
+ *
+ * Each answer says how it may be cached rather than the route saying it once:
+ * stored bytes are pinned by the url, a stand-in and a miss are not.
  */
 thumbnailRoutes.get(
     "/thumbnail/:size/:elementId",
-    cacheMiddleware(CachePolicy.PUBLIC_CACHE),
     validate("param", storedThumbnailParams),
     validate("query", storedThumbnailQuery),
     async (c) => {
         const { size, elementId } = c.req.valid("param");
         const {
             v: microversionId,
-            configuration: canonicalConfiguration,
+            canonicalConfiguration,
             renderThumbnail,
             insertableId
         } = c.req.valid("query");
@@ -62,11 +65,16 @@ thumbnailRoutes.get(
             thumbnailKey(elementId, microversionId, size, configurationKey)
         );
         if (object) {
-            return thumbnailResponse(object);
+            // The microversion and the configuration are both in the url, so
+            // these bytes are the only ones it will ever mean.
+            return setCache(
+                thumbnailResponse(object),
+                CachePolicy.PUBLIC_CACHE
+            );
         }
 
         if (configurationKey === DEFAULT_CONFIGURATION_KEY) {
-            return c.notFound();
+            return notRenderedYet();
         }
 
         if (renderThumbnail && insertableId) {
@@ -81,17 +89,24 @@ thumbnailRoutes.get(
             thumbnailKey(elementId, microversionId, size)
         );
         if (!fallback) {
-            return c.notFound();
+            return notRenderedYet();
         }
-        // Unlike a hit, this url does not pin these bytes: the real render can
-        // land at any moment, and whoever asks next should see it.
-        setUncacheable(c);
         const response = thumbnailResponse(fallback);
         response.headers.set(THUMBNAIL_FALLBACK_HEADER, "1");
-        return response;
+        // Unlike a hit, this url does not pin these bytes: the real render can
+        // land at any moment, and whoever asks next should see it.
+        return setCache(response, CachePolicy.NO_CACHE);
     }
 );
 
+/** Nothing to serve yet, and a render landing later must not be shadowed. */
+function notRenderedYet(): Response {
+    return setCache(
+        new Response(null, { status: HttpStatus.NOT_FOUND }),
+        CachePolicy.NO_CACHE
+    );
+}
+
 function thumbnailResponse(object: R2ObjectBody): Response {
     const headers = new Headers();
     object.writeHttpMetadata(headers);
diff --git a/src/backend/lib/cache.ts b/src/backend/lib/cache.ts
index 6c860810..c4ebb9ad 100644
--- a/src/backend/lib/cache.ts
+++ b/src/backend/lib/cache.ts
@@ -1,7 +1,7 @@
 import { type MiddlewareHandler } from "hono";
 import { internalError } from "./api-error";
 import { HttpStatus } from "http-status-ts";
-import { type AppContext, type AppContextEnv } from "./context";
+import { type AppContextEnv } from "./context";
 
 /** A year — a versioned url's content never changes, only its version does. */
 const IMMUTABLE_CACHE_TTL = 365 * 24 * 3600;
@@ -23,12 +23,21 @@ export function immutableCacheControl(
     return `${policy}, max-age=${IMMUTABLE_CACHE_TTL}, immutable`;
 }
 
+/** What a policy says, as the header says it. */
+function cacheControl(policy: CachePolicy): string {
+    return policy === CachePolicy.NO_CACHE
+        ? NO_STORE
+        : immutableCacheControl(policy);
+}
+
 /**
- * Marks a body the url does not pin: a stand-in for something not rendered yet.
- * Nothing stores it, so the next request is the one that sees past it.
+ * Declares how one response may be cached, for a route whose answers differ:
+ * the same url can serve bytes it pins and a stand-in it does not. Routes
+ * whose every answer is alike take {@link cacheMiddleware} instead.
  */
-export function setUncacheable(c: AppContext): void {
-    c.set("uncacheable", true);
+export function setCache(response: Response, policy: CachePolicy): Response {
+    response.headers.set("Cache-Control", cacheControl(policy));
+    return response;
 }
 
 /** Declares how a route's response may be cached, and enforces what that takes. */
@@ -42,8 +51,6 @@ export function cacheMiddleware(
         };
     }
 
-    const cacheControl = immutableCacheControl(policy);
-
     return async (c, next) => {
         // An immutable response has to be pinned by something, or the next
         // version of it is unreachable behind the cache.
@@ -59,9 +66,6 @@ export function cacheMiddleware(
             c.header("Cache-Control", NO_STORE);
             return;
         }
-        c.header(
-            "Cache-Control",
-            c.get("uncacheable") ? NO_STORE : cacheControl
-        );
+        c.header("Cache-Control", cacheControl(policy));
     };
 }
diff --git a/src/backend/lib/context.ts b/src/backend/lib/context.ts
index ba815096..d87c304f 100644
--- a/src/backend/lib/context.ts
+++ b/src/backend/lib/context.ts
@@ -30,7 +30,6 @@ interface AppVariables {
     /** Internal cache for `isSignedIn` in features/auth/caller.ts. */
     signedIn?: boolean;
     /** Set by `setCacheTtl`; read by `cacheMiddleware`. */
-    uncacheable?: boolean;
     /** Injected by {@link bindCaller}; see {@link Caller}. */
     getOnshapeApi: () => Promise<OAuthApi>;
     getUserId: () => Promise<string>;

From 9aa5cb80dcd0ad88ef44f512c35876b1b316b866 Mon Sep 17 00:00:00 2001
From: Alex Kempen <alex.bookreader@gmail.com>
Date: Mon, 31 Aug 2026 22:48:40 -0500
Subject: [PATCH 29/40] Reword onshape errors

---
 src/backend/lib/errors.ts | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/backend/lib/errors.ts b/src/backend/lib/errors.ts
index 0ec3f6a2..c9b3f8b1 100644
--- a/src/backend/lib/errors.ts
+++ b/src/backend/lib/errors.ts
@@ -18,21 +18,19 @@ import type { AppContextEnv } from "./context";
  */
 function fromOnshapeError(error: OnshapeApiError): ApiError {
     if (error instanceof OnshapeRateLimitError) {
-        // How long to wait is the loader's business, not the caller's: all
-        // they can do is try again.
         return handledError(
-            "Onshape rate limit reached. Please try again shortly.",
+            "Onshape rate limit reached. Please try again later.",
             HttpStatus.TOO_MANY_REQUESTS
         );
     }
     if (error.status === HttpStatus.UNAUTHORIZED) {
         return signInRequiredError(
-            "Onshape did not accept the session. Signing in again should fix it."
+            "Onshape did not accept the session. Try signing in again."
         );
     }
     if (error.status === HttpStatus.FORBIDDEN) {
         return forbiddenError(
-            "Onshape would not allow that. Your account may not have access to this document."
+            "Onshape rejected the operation. Make sure you have access to this document and you're signed in to the correct Onshape enterprise."
         );
     }
     return internalError(

From b3754091da5ee86d745495e5036b622cbf45a8f7 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 1 Sep 2026 03:55:49 +0000
Subject: [PATCH 30/40] Type an error's status as one that can carry a body

Every c.json in the error handler cast its status through never, because
ApiError carried a bare number and c.json takes the statuses a body is
allowed with. Carrying Hono's ContentfulStatusCode instead drops all four
casts and makes the constraint real: a 204 as an error status is now a
type error rather than a response the client cannot read.

The import is type-only, so the leaf the frontend imports stays free of
Hono in the bundle.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018tgfuCHjVFvejjMe7WmEFL
---
 src/backend/lib/api-error.ts | 15 ++++++++++++---
 src/backend/lib/errors.ts    |  8 ++++----
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/backend/lib/api-error.ts b/src/backend/lib/api-error.ts
index c7a1b436..d04c6f00 100644
--- a/src/backend/lib/api-error.ts
+++ b/src/backend/lib/api-error.ts
@@ -3,6 +3,9 @@
  * to do about it. A leaf module the frontend imports.
  */
 import { HttpStatus } from "http-status-ts";
+// Type-only, so this stays a leaf the frontend can import: the statuses that
+// can carry a body, which is every status an error of ours is sent with.
+import type { ContentfulStatusCode } from "hono/utils/http-status";
 
 export enum ApiErrorKind {
     /** `message` is written for the user; show it. */
@@ -30,7 +33,7 @@ export type ApiErrorBody =
 export class ApiError extends Error {
     constructor(
         readonly body: ApiErrorBody,
-        readonly status: number
+        readonly status: ContentfulStatusCode
     ) {
         super(body.message);
         this.name = "ApiError";
@@ -39,12 +42,18 @@ export class ApiError extends Error {
 }
 
 /** The wording reaches the user, so write it for them. */
-export function handledError(message: string, status: number): ApiError {
+export function handledError(
+    message: string,
+    status: ContentfulStatusCode
+): ApiError {
     return new ApiError({ kind: ApiErrorKind.HANDLED, message }, status);
 }
 
 /** The client will show its own wording; this text is only for the logs. */
-export function internalError(message: string, status: number): ApiError {
+export function internalError(
+    message: string,
+    status: ContentfulStatusCode
+): ApiError {
     return new ApiError({ kind: ApiErrorKind.INTERNAL, message }, status);
 }
 
diff --git a/src/backend/lib/errors.ts b/src/backend/lib/errors.ts
index c9b3f8b1..f5a3a914 100644
--- a/src/backend/lib/errors.ts
+++ b/src/backend/lib/errors.ts
@@ -41,14 +41,14 @@ function fromOnshapeError(error: OnshapeApiError): ApiError {
 
 export const errorHandler: ErrorHandler<AppContextEnv> = (err, c) => {
     if (err instanceof ApiError) {
-        return c.json(err.body, err.status as never);
+        return c.json(err.body, err.status);
     }
     if (err instanceof OnshapeApiError) {
         const apiError = fromOnshapeError(err);
         if (apiError.body.kind === ApiErrorKind.INTERNAL) {
             console.error(err);
         }
-        return c.json(apiError.body, apiError.status as never);
+        return c.json(apiError.body, apiError.status);
     }
     // A raw HTTPException is a validator rejecting a malformed request, which
     // is our bug rather than something the user can act on.
@@ -56,12 +56,12 @@ export const errorHandler: ErrorHandler<AppContextEnv> = (err, c) => {
         console.error(err);
         return c.json(
             { kind: ApiErrorKind.INTERNAL, message: err.message },
-            err.status as never
+            err.status
         );
     }
     console.error(err);
     return c.json(
         { kind: ApiErrorKind.INTERNAL, message: "Internal Server Error" },
-        HttpStatus.INTERNAL_SERVER_ERROR as never
+        HttpStatus.INTERNAL_SERVER_ERROR
     );
 };

From 7835b3d44ca20f186e5e9b031c3b4529ceede06b Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 1 Sep 2026 04:01:08 +0000
Subject: [PATCH 31/40] Name the request's auth for what routes ask it
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

"Caller" was already the word for the person making a request — it is in
sixty comments — so a type of that name read as modelling them, when it
is really the answers a route can ask for about them. CallerFactory
compounded it with the Java-ism.

RequestAuth is those answers, AuthResolver is how one request's are
resolved, bindAuth puts them behind c.var, and productionAuth answers for
real. caller.ts becomes request-auth.ts; the prose keeps saying caller,
which is what it always meant.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018tgfuCHjVFvejjMe7WmEFL
---
 src/__test_utils__/test-app.ts                |  4 +--
 src/backend/app.ts                            |  8 ++---
 src/backend/features/auth/guards.ts           |  2 +-
 .../{caller.test.ts => request-auth.test.ts}  |  4 +--
 .../auth/{caller.ts => request-auth.ts}       | 11 +++---
 src/backend/features/auth/routes.ts           |  2 +-
 src/backend/features/load/context.ts          |  2 +-
 src/backend/index.ts                          |  4 +--
 src/backend/lib/context.ts                    | 34 ++++++++++---------
 9 files changed, 37 insertions(+), 34 deletions(-)
 rename src/backend/features/auth/{caller.test.ts => request-auth.test.ts} (94%)
 rename src/backend/features/auth/{caller.ts => request-auth.ts} (93%)

diff --git a/src/__test_utils__/test-app.ts b/src/__test_utils__/test-app.ts
index 82f352d7..4b886d03 100644
--- a/src/__test_utils__/test-app.ts
+++ b/src/__test_utils__/test-app.ts
@@ -19,8 +19,8 @@ export interface TestAppOptions {
 }
 
 /**
- * The real app from `createApp`, with a stub caller in place of
- * `productionCaller`. Drive it with `app.request(path, init, env)`.
+ * The real app from `createApp`, answering its auth questions from `options`
+ * instead of `productionAuth`. Drive it with `app.request(path, init, env)`.
  */
 export function createTestApp(options: TestAppOptions = {}) {
     const signedIn = options.signedIn ?? true;
diff --git a/src/backend/app.ts b/src/backend/app.ts
index f5cc5ae8..e6cdddbd 100644
--- a/src/backend/app.ts
+++ b/src/backend/app.ts
@@ -1,5 +1,5 @@
 /**
- * Composition root: binds the caller onto every request and mounts each
+ * Composition root: binds the request's auth onto every request and mounts each
  * feature's routes. Everything it wires lives in a feature or in lib.
  */
 import { accessRoutes, authRoutes } from "./features/auth/routes";
@@ -14,7 +14,7 @@ import { settingsRoutes } from "./features/settings/routes";
 import { thumbnailRoutes } from "./features/thumbnails/routes";
 import { logger } from "hono/logger";
 import { cacheMiddleware } from "./lib/cache";
-import { bindCaller, getApp, type CallerFactory } from "./lib/context";
+import { bindAuth, getApp, type AuthResolver } from "./lib/context";
 import { errorHandler } from "./lib/errors";
 
 const apiRoutes = [
@@ -29,14 +29,14 @@ const apiRoutes = [
     buildStatusRoutes
 ];
 
-export function createApp(makeCaller: CallerFactory) {
+export function createApp(resolveAuth: AuthResolver) {
     const app = getApp();
 
     // Reaches Workers Logs, which wrangler.jsonc enables. Only /init, /api/*
     // and /auth/* run the Worker, so static assets are not logged.
     app.use("*", logger());
 
-    app.use("*", bindCaller(makeCaller));
+    app.use("*", bindAuth(resolveAuth));
 
     for (const routes of apiRoutes) {
         app.route("/api", routes);
diff --git a/src/backend/features/auth/guards.ts b/src/backend/features/auth/guards.ts
index f8e6ed0e..5a117104 100644
--- a/src/backend/features/auth/guards.ts
+++ b/src/backend/features/auth/guards.ts
@@ -3,7 +3,7 @@ import type { MiddlewareHandler } from "hono";
 import { forbiddenError, signInRequiredError } from "../../lib/api-error";
 import type { AppContext, AppContextEnv } from "../../lib/context";
 import { hasEditorAccess } from "./access-level";
-import { isSignedIn } from "./caller";
+import { isSignedIn } from "./request-auth";
 
 async function requireSignIn(c: AppContext): Promise<void> {
     if (!(await isSignedIn(c))) {
diff --git a/src/backend/features/auth/caller.test.ts b/src/backend/features/auth/request-auth.test.ts
similarity index 94%
rename from src/backend/features/auth/caller.test.ts
rename to src/backend/features/auth/request-auth.test.ts
index 8a5d0b82..4483d54c 100644
--- a/src/backend/features/auth/caller.test.ts
+++ b/src/backend/features/auth/request-auth.test.ts
@@ -2,11 +2,11 @@ import { env } from "cloudflare:workers";
 import { env as processEnv } from "process";
 import { afterEach, describe, expect, it } from "vitest";
 import { AccessLevel } from "./access-level";
-import { productionCaller } from "./caller";
+import { productionAuth } from "./request-auth";
 import { createApp } from "../../app";
 import { jsonRequest } from "../../../__test_utils__";
 
-const app = createApp(productionCaller);
+const app = createApp(productionAuth);
 
 /** What the real caller resolves for a request carrying no Onshape session. */
 async function getMaxAccessLevel(override?: AccessLevel): Promise<AccessLevel> {
diff --git a/src/backend/features/auth/caller.ts b/src/backend/features/auth/request-auth.ts
similarity index 93%
rename from src/backend/features/auth/caller.ts
rename to src/backend/features/auth/request-auth.ts
index 3b43c898..42d2e2a0 100644
--- a/src/backend/features/auth/caller.ts
+++ b/src/backend/features/auth/request-auth.ts
@@ -1,6 +1,7 @@
 /**
- * Resolves who is calling from their session, memoized in KV. `createApp` binds
- * `productionCaller` onto every request; guards and routes read it via `c.var`.
+ * Answers a request's auth questions from its session, memoized in KV.
+ * `createApp` binds `productionAuth` onto every request; guards and routes ask
+ * it through `c.var`.
  */
 import { env as processEnv } from "process";
 import { OAuthApi } from "../../lib/onshape/client";
@@ -9,7 +10,7 @@ import {
     getSessionInfo,
     getUserId
 } from "../../lib/onshape/endpoints/users";
-import { type AppContext, type CallerFactory } from "../../lib/context";
+import { type AppContext, type AuthResolver } from "../../lib/context";
 import { AccessLevel } from "./access-level";
 import {
     getOauthClient,
@@ -152,10 +153,10 @@ export async function getCachedAccessLevel(
 }
 
 /**
- * Production wiring. getUserId only runs behind requireSignInMiddleware;
+ * The real answers. getUserId only runs behind requireSignInMiddleware;
  * getAccessLevel falls back to USER for anyone without a real Onshape session.
  */
-export const productionCaller: CallerFactory = (c) => ({
+export const productionAuth: AuthResolver = (c) => ({
     getOnshapeApi: () => getOnshapeApi(c),
     getUserId: () => {
         // FORCE_SIGNED_IN has no real Onshape session; use a stable fake id.
diff --git a/src/backend/features/auth/routes.ts b/src/backend/features/auth/routes.ts
index d4cb7a8b..7fbde5a7 100644
--- a/src/backend/features/auth/routes.ts
+++ b/src/backend/features/auth/routes.ts
@@ -3,7 +3,7 @@ import { internalError } from "../../lib/api-error";
 import { getApp } from "../../lib/context";
 import { cacheMiddleware } from "../../lib/cache";
 import { type AccessData } from "./access-level";
-import { isSignedIn } from "./caller";
+import { isSignedIn } from "./request-auth";
 import { doCallback, doSignIn } from "./onshape-oauth";
 import { endSession } from "./session";
 
diff --git a/src/backend/features/load/context.ts b/src/backend/features/load/context.ts
index 7c14b5e4..e7137b86 100644
--- a/src/backend/features/load/context.ts
+++ b/src/backend/features/load/context.ts
@@ -1,6 +1,6 @@
 import type { WorkflowStep } from "cloudflare:workers";
 import type { AppBindings } from "../../lib/context";
-import { getOnshapeApiFromSessionId } from "../auth/caller";
+import { getOnshapeApiFromSessionId } from "../auth/request-auth";
 import type { OnshapeApi } from "../../lib/onshape/client";
 import type { ElementType } from "../../lib/onshape/element-type";
 import type { LibraryId } from "../library/library-id";
diff --git a/src/backend/index.ts b/src/backend/index.ts
index 4fc3f2b6..ec0563bd 100644
--- a/src/backend/index.ts
+++ b/src/backend/index.ts
@@ -4,6 +4,6 @@ export {
 } from "./features/load/workflows";
 export { ThumbnailWorkflow } from "./features/thumbnails/workflow";
 import { createApp } from "./app";
-import { productionCaller } from "./features/auth/caller";
+import { productionAuth } from "./features/auth/request-auth";
 
-export default createApp(productionCaller);
+export default createApp(productionAuth);
diff --git a/src/backend/lib/context.ts b/src/backend/lib/context.ts
index d87c304f..acbc47a0 100644
--- a/src/backend/lib/context.ts
+++ b/src/backend/lib/context.ts
@@ -25,12 +25,11 @@ export interface AppBindings {
 }
 
 interface AppVariables {
-    /** Internal cache for `getOnshapeApi` in features/auth/caller.ts. */
+    /** Internal cache for `getOnshapeApi` in features/auth/request-auth.ts. */
     onshapeApi?: OAuthApi;
-    /** Internal cache for `isSignedIn` in features/auth/caller.ts. */
+    /** Internal cache for `isSignedIn` in features/auth/request-auth.ts. */
     signedIn?: boolean;
-    /** Set by `setCacheTtl`; read by `cacheMiddleware`. */
-    /** Injected by {@link bindCaller}; see {@link Caller}. */
+    /** Injected by {@link bindAuth}; see {@link RequestAuth}. */
     getOnshapeApi: () => Promise<OAuthApi>;
     getUserId: () => Promise<string>;
     getAccessLevel: () => Promise<AccessLevel>;
@@ -45,28 +44,31 @@ export interface AppContextEnv {
 export type AppContext = Context<AppContextEnv>;
 
 /**
- * Who is making the request, injected per request so tests can substitute a
- * caller without an Onshape session. `productionCaller` is the real one.
+ * What a route may ask about the request it is serving: who is making it, and
+ * what they are allowed to do. Resolved lazily, so a route that asks nothing
+ * calls Onshape not at all, and answered per request, so a test can answer
+ * without a session. `productionAuth` answers for real.
  */
-export interface Caller {
+export interface RequestAuth {
     getOnshapeApi: () => Promise<OAuthApi>;
     getUserId: () => Promise<string>;
     getAccessLevel: () => Promise<AccessLevel>;
     isAuthenticated: () => Promise<boolean>;
 }
 
-export type CallerFactory = (c: AppContext) => Caller;
+/** How one request's answers are resolved; the app is built with one. */
+export type AuthResolver = (c: AppContext) => RequestAuth;
 
-/** Binds the caller's lookups onto each request, behind `c.var`. */
-export function bindCaller(
-    makeCaller: CallerFactory
+/** Puts the request's own answers behind `c.var`, for routes to ask. */
+export function bindAuth(
+    resolveAuth: AuthResolver
 ): MiddlewareHandler<AppContextEnv> {
     return async (c, next) => {
-        const caller = makeCaller(c);
-        c.set("getOnshapeApi", caller.getOnshapeApi);
-        c.set("getUserId", caller.getUserId);
-        c.set("getAccessLevel", caller.getAccessLevel);
-        c.set("isAuthenticated", caller.isAuthenticated);
+        const auth = resolveAuth(c);
+        c.set("getOnshapeApi", auth.getOnshapeApi);
+        c.set("getUserId", auth.getUserId);
+        c.set("getAccessLevel", auth.getAccessLevel);
+        c.set("isAuthenticated", auth.isAuthenticated);
         await next();
     };
 }

From c2a0c5aa25716249587e89b6a1d28e47379df54e Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 1 Sep 2026 04:21:01 +0000
Subject: [PATCH 32/40] Name a stored record's configuration for what it is
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A stored record keys on the canonical spelling of its selection, not on the
selection as written, so call the field canonicalConfiguration everywhere it is
stored or read — including in the D1 records column and the R2 search index.

The parse side still holds the selection as sent to Onshape, which only
becomes canonical in toResult, so it gets its own ProbedRecord.

Stored records only carry the new field after a library reload.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018tgfuCHjVFvejjMe7WmEFL
---
 src/__test_utils__/configuration-fixtures.ts  |  2 +-
 src/backend/features/configurations/models.ts | 21 ++++++++++----
 .../features/configurations/routes.test.ts    |  2 +-
 .../features/configurations/utils.test.ts     |  4 +--
 src/backend/features/configurations/utils.ts  |  6 ++--
 .../features/load/load-insertable.test.ts     |  6 ++--
 .../load/parse-configuration-records.ts       | 29 ++++++++++---------
 .../features/search/search-index.test.ts      |  4 +--
 src/backend/features/search/search-index.ts   |  2 +-
 .../library/components/insertable-card.tsx    |  8 ++---
 src/frontend/features/search/search.test.ts   | 22 +++++++-------
 src/frontend/features/search/search.ts        |  8 ++---
 12 files changed, 63 insertions(+), 51 deletions(-)

diff --git a/src/__test_utils__/configuration-fixtures.ts b/src/__test_utils__/configuration-fixtures.ts
index ae9be4b5..52af81ed 100644
--- a/src/__test_utils__/configuration-fixtures.ts
+++ b/src/__test_utils__/configuration-fixtures.ts
@@ -87,7 +87,7 @@ export function configurationRecord(
     overrides: Partial<ConfigurationRecord> = {}
 ): ConfigurationRecord {
     return {
-        configuration: {},
+        canonicalConfiguration: {},
         hasMultipleParts: false,
         isOpenComposite: false,
         ...overrides
diff --git a/src/backend/features/configurations/models.ts b/src/backend/features/configurations/models.ts
index e4b9e612..9878a2f8 100644
--- a/src/backend/features/configurations/models.ts
+++ b/src/backend/features/configurations/models.ts
@@ -85,8 +85,11 @@ export interface SearchRecord {
     name?: string;
     /** The vendor's page for this part, when one can be resolved. */
     url?: string;
-    /** The (enumerated) parameter values that produce it; empty for the default. */
-    configuration: ParameterValues;
+    /**
+     * The (enumerated) parameter values that produce it, canonical so it keys
+     * the same render the insert menu asks for; empty for the default.
+     */
+    canonicalConfiguration: ParameterValues;
 }
 
 export type ConfigurationParameter =
@@ -161,14 +164,20 @@ export interface PartMetadata {
 }
 
 /**
- * {@link PartMetadata} for one specific configuration — the same fields, plus
- * the parameter values that produced them. Stored only for an indexed insertable.
+ * {@link PartMetadata} for one selection, as it came back from Onshape — keyed
+ * by the selection as written rather than as it is stored.
  */
-export interface ConfigurationRecord extends PartMetadata {
-    /** The parameter values that produce it. */
+export interface ProbedRecord extends PartMetadata {
+    /** The selection probed, before it is canonicalized for storage. */
     configuration: ParameterValues;
 }
 
+/** A probe as it is stored. Kept only for an indexed insertable. */
+export interface ConfigurationRecord extends PartMetadata {
+    /** The parameter values that produce it, in their canonical spelling. */
+    canonicalConfiguration: ParameterValues;
+}
+
 /**
  * An insertable's configuration: the parameters it exposes and a record for each
  * configuration we probed. Mirrors the `configurations` row.
diff --git a/src/backend/features/configurations/routes.test.ts b/src/backend/features/configurations/routes.test.ts
index d606233c..0ea130be 100644
--- a/src/backend/features/configurations/routes.test.ts
+++ b/src/backend/features/configurations/routes.test.ts
@@ -69,7 +69,7 @@ describe("configuration routes", () => {
                     partNumber: "WCP-0405",
                     name: "2x1 Tube",
                     url: "https://wcproducts.com/products/wcp-0405",
-                    configuration: {}
+                    canonicalConfiguration: {}
                 }
             ]
         });
diff --git a/src/backend/features/configurations/utils.test.ts b/src/backend/features/configurations/utils.test.ts
index 66801852..bb1e22ae 100644
--- a/src/backend/features/configurations/utils.test.ts
+++ b/src/backend/features/configurations/utils.test.ts
@@ -4,10 +4,10 @@ import { PartMetadata, SearchRecord } from "./models";
 import { Vendor } from "../library/vendors";
 
 function rec(
-    configuration: Record<string, string>,
+    canonicalConfiguration: Record<string, string>,
     partNumber = "PN"
 ): SearchRecord {
-    return { partNumber, configuration };
+    return { partNumber, canonicalConfiguration };
 }
 
 describe("findRecordForConfiguration", () => {
diff --git a/src/backend/features/configurations/utils.ts b/src/backend/features/configurations/utils.ts
index 6de2ef8c..0578197f 100644
--- a/src/backend/features/configurations/utils.ts
+++ b/src/backend/features/configurations/utils.ts
@@ -33,9 +33,9 @@ export function findRecordForConfiguration(
     let best: SearchRecord | undefined;
     let bestKeys = -1;
     for (const record of records) {
-        const keys = Object.keys(record.configuration);
+        const keys = Object.keys(record.canonicalConfiguration);
         const matches = keys.every(
-            (key) => configuration[key] === record.configuration[key]
+            (key) => configuration[key] === record.canonicalConfiguration[key]
         );
         if (matches && keys.length > bestKeys) {
             best = record;
@@ -229,5 +229,5 @@ export function toRecords(
     records: ConfigurationRecord[]
 ): ConfigurationRecord[] {
     if (!partMetadata) return records;
-    return [{ ...partMetadata, configuration: {} }, ...records];
+    return [{ ...partMetadata, canonicalConfiguration: {} }, ...records];
 }
diff --git a/src/backend/features/load/load-insertable.test.ts b/src/backend/features/load/load-insertable.test.ts
index 7d7db0c3..e9a25a45 100644
--- a/src/backend/features/load/load-insertable.test.ts
+++ b/src/backend/features/load/load-insertable.test.ts
@@ -30,8 +30,10 @@ function readInsertable() {
 const partMetadata = (partNumber?: string): PartMetadata =>
     configurationRecord({ partNumber });
 
-const record = (partNumber?: string, configuration: ParameterValues = {}) =>
-    configurationRecord({ partNumber, configuration });
+const record = (
+    partNumber?: string,
+    canonicalConfiguration: ParameterValues = {}
+) => configurationRecord({ partNumber, canonicalConfiguration });
 
 describe("saveInsertable", () => {
     beforeEach(async () => {
diff --git a/src/backend/features/load/parse-configuration-records.ts b/src/backend/features/load/parse-configuration-records.ts
index 1ffe291c..38eb5ba4 100644
--- a/src/backend/features/load/parse-configuration-records.ts
+++ b/src/backend/features/load/parse-configuration-records.ts
@@ -10,7 +10,8 @@ import {
     ParameterValues,
     ConfigurationParameter,
     PartMetadata,
-    ConfigurationRecord
+    ConfigurationRecord,
+    ProbedRecord
 } from "../configurations/models";
 import {
     addBuildIssue,
@@ -150,7 +151,7 @@ export function parsePartStudioRecord(
     parts: OnshapePart[],
     configuration: ParameterValues,
     isOpenComposite: boolean
-): ConfigurationRecord {
+): ProbedRecord {
     const evaluation = evaluateParts(parts);
     // An element that is an open composite everywhere else has no part to read
     // in a configuration that loses it; toResult raises the build issue.
@@ -198,9 +199,9 @@ function readMetadataValue(value: unknown): string | undefined {
 export function parseAssemblyRecord(
     metadata: OnshapeMetadataObject,
     configuration: ParameterValues
-): ConfigurationRecord {
+): ProbedRecord {
     // An assembly is never a composite, so it reads nothing about one.
-    const record: ConfigurationRecord = {
+    const record: ProbedRecord = {
         configuration,
         hasMultipleParts: false,
         isOpenComposite: false
@@ -236,7 +237,7 @@ export async function parseConfigurationRecords(
     );
     const batches = planBatches(configurations, parameters);
 
-    const batchRecords: ConfigurationRecord[][] = [];
+    const batchRecords: ProbedRecord[][] = [];
     for (const batch of batches) {
         batchRecords.push(
             await fetchBatch(
@@ -278,7 +279,7 @@ export async function loadConfigurationRecords(
     );
     const batches = planBatches(configurations, parameters);
 
-    const batchRecords: ConfigurationRecord[][] = [];
+    const batchRecords: ProbedRecord[][] = [];
     for (const [index, batch] of batches.entries()) {
         batchRecords.push(
             await ctx.step.do(
@@ -328,7 +329,7 @@ async function probeConfiguration(
     elementType: ElementType,
     configuration: ParameterValues,
     isOpenComposite: boolean
-): Promise<ConfigurationRecord> {
+): Promise<ProbedRecord> {
     if (elementType === ElementType.ASSEMBLY) {
         return parseAssemblyRecord(
             await getElementMetadata(client, elementPath, configuration),
@@ -349,8 +350,8 @@ async function fetchBatch(
     elementType: ElementType,
     batch: ParameterValues[],
     isOpenComposite: boolean
-): Promise<ConfigurationRecord[]> {
-    const records: ConfigurationRecord[] = [];
+): Promise<ProbedRecord[]> {
+    const records: ProbedRecord[] = [];
     for (const configuration of batch) {
         records.push(
             await probeConfiguration(
@@ -367,7 +368,7 @@ async function fetchBatch(
 
 /** Onshape's vendor when a part carries one, otherwise the parsed one. */
 function resolveVendor(
-    record: ConfigurationRecord,
+    record: ProbedRecord,
     parameters: ConfigurationParameter[]
 ): string | undefined {
     return (
@@ -378,8 +379,8 @@ function resolveVendor(
 
 /** Folds the default probe and every batch together, the default first. */
 function toResult(
-    defaultRecord: ConfigurationRecord,
-    batches: ConfigurationRecord[][],
+    defaultRecord: ProbedRecord,
+    batches: ProbedRecord[][],
     parameters: ConfigurationParameter[]
 ): ConfigurationRecordsResult {
     // The element's own probe describes the element, not a configuration of it,
@@ -396,12 +397,12 @@ function toResult(
 
     // Canonical, so a record addresses the same thumbnail the insert menu does
     // for the same selection.
-    const records = batches.flat().map((record) => ({
+    const records: ConfigurationRecord[] = batches.flat().map((record) => ({
         ...record,
         // Read before canonicalizing, which drops a selection that is the
         // default — including a default vendor option.
         vendor: resolveVendor(record, parameters),
-        configuration: canonicalizeConfiguration(
+        canonicalConfiguration: canonicalizeConfiguration(
             record.configuration,
             parameters
         )
diff --git a/src/backend/features/search/search-index.test.ts b/src/backend/features/search/search-index.test.ts
index 8b31dac3..71a94904 100644
--- a/src/backend/features/search/search-index.test.ts
+++ b/src/backend/features/search/search-index.test.ts
@@ -343,7 +343,7 @@ describe("buildSearchDb", () => {
                 record({
                     partNumber: "N/A",
                     name: "Spacer",
-                    configuration: {}
+                    canonicalConfiguration: {}
                 })
             ]
         });
@@ -361,7 +361,7 @@ describe("buildSearchDb", () => {
                     partNumber: "WCP-1025",
                     name: "Spacer",
                     vendor: "WestCoast Products",
-                    configuration: {}
+                    canonicalConfiguration: {}
                 })
             ]
         });
diff --git a/src/backend/features/search/search-index.ts b/src/backend/features/search/search-index.ts
index f5bb3935..09097faa 100644
--- a/src/backend/features/search/search-index.ts
+++ b/src/backend/features/search/search-index.ts
@@ -279,7 +279,7 @@ export function toSearchRecords(
             partNumber,
             name,
             url: getPartUrl({ ...raw, partNumber }, vendors),
-            configuration: raw.configuration
+            canonicalConfiguration: raw.canonicalConfiguration
         });
     }
     return searchRecords;
diff --git a/src/frontend/features/library/components/insertable-card.tsx b/src/frontend/features/library/components/insertable-card.tsx
index 3080fbcf..1fd22d25 100644
--- a/src/frontend/features/library/components/insertable-card.tsx
+++ b/src/frontend/features/library/components/insertable-card.tsx
@@ -68,7 +68,7 @@ export function InsertableCard(props: InsertableCardProps): ReactNode {
 
                 openInsertMenu({
                     insertable,
-                    defaultConfiguration: searchHit?.configuration
+                    defaultConfiguration: searchHit?.canonicalConfiguration
                 });
             }}
             left={
@@ -85,7 +85,7 @@ export function InsertableCard(props: InsertableCardProps): ReactNode {
                                 microversionId: insertable.microversionId,
                                 canonicalConfiguration:
                                     encodeCanonicalConfiguration(
-                                        searchHit?.configuration ?? {}
+                                        searchHit?.canonicalConfiguration ?? {}
                                     ),
                                 // A cold search would otherwise start a render
                                 // per row.
@@ -107,7 +107,7 @@ export function InsertableCard(props: InsertableCardProps): ReactNode {
                     <FavoriteButton
                         favorite={favorite}
                         insertable={insertable}
-                        defaultConfiguration={searchHit?.configuration}
+                        defaultConfiguration={searchHit?.canonicalConfiguration}
                     />
                 </RequireSignIn>
             }
@@ -115,7 +115,7 @@ export function InsertableCard(props: InsertableCardProps): ReactNode {
                 <InsertableMenuItems
                     favorite={favorite}
                     insertable={insertable}
-                    configuration={searchHit?.configuration}
+                    configuration={searchHit?.canonicalConfiguration}
                 />
             }
         />
diff --git a/src/frontend/features/search/search.test.ts b/src/frontend/features/search/search.test.ts
index 78a4c763..8826e4c7 100644
--- a/src/frontend/features/search/search.test.ts
+++ b/src/frontend/features/search/search.test.ts
@@ -15,9 +15,9 @@ import { configurationRecord } from "../../../__test_utils__/configuration-fixtu
 
 const record = (
     partNumber: string | undefined,
-    configuration: ParameterValues,
+    canonicalConfiguration: ParameterValues,
     name?: string
-) => configurationRecord({ partNumber, configuration, name });
+) => configurationRecord({ partNumber, canonicalConfiguration, name });
 
 /** Hidden insertables shown: these tests are about matching, not visibility. */
 const search = (searchDb: MiniSearch<SearchDocument>, query: string) =>
@@ -74,7 +74,7 @@ describe("doSearch part-number matching", () => {
         const { hits } = search(searchDb, "217-2601");
         expect(hits).toHaveLength(1);
         expect(hits[0].id).toBe("i1");
-        expect(hits[0].configuration).toEqual({ length: "long" });
+        expect(hits[0].canonicalConfiguration).toEqual({ length: "long" });
     });
 
     // "Bracket 217" matches the part-number field on "217", but no single record
@@ -91,7 +91,7 @@ describe("doSearch part-number matching", () => {
         const { hits } = search(searchDb, "Bracket");
         expect(hits).toHaveLength(1);
         // The insertable's own name matched, so the row shows its default config.
-        expect(hits[0].configuration).toEqual({ length: "short" });
+        expect(hits[0].canonicalConfiguration).toEqual({ length: "short" });
         expect(hits[0].partNumber).toBe("217-2600");
     });
 
@@ -106,7 +106,7 @@ describe("doSearch part-number matching", () => {
         });
         const { hits } = search(searchDb, "217-2600");
         expect(hits).toHaveLength(1);
-        expect(hits[0].configuration).toEqual({ version: "latest" });
+        expect(hits[0].canonicalConfiguration).toEqual({ version: "latest" });
     });
 });
 
@@ -123,23 +123,23 @@ describe("doSearch configuration matching", () => {
 
     it("picks the configuration a term of the query names", () => {
         const { hits } = search(searchDb, "maxspline 24t");
-        expect(hits[0].configuration).toEqual({ teeth: "24" });
+        expect(hits[0].canonicalConfiguration).toEqual({ teeth: "24" });
         expect(hits[0].partNumber).toBe("WCP-1235");
     });
 
     it("picks it from the distinguishing term alone", () => {
         const { hits } = search(searchDb, "36t");
-        expect(hits[0].configuration).toEqual({ teeth: "36" });
+        expect(hits[0].canonicalConfiguration).toEqual({ teeth: "36" });
     });
 
     it("keeps the default when no term distinguishes a configuration", () => {
         const { hits } = search(searchDb, "maxspline gear");
-        expect(hits[0].configuration).toEqual({});
+        expect(hits[0].canonicalConfiguration).toEqual({});
     });
 
     it("lets a part number typed in full outrank a looser name match", () => {
         const { hits } = search(searchDb, "WCP-1236");
-        expect(hits[0].configuration).toEqual({ teeth: "36" });
+        expect(hits[0].canonicalConfiguration).toEqual({ teeth: "36" });
     });
 });
 
@@ -206,7 +206,7 @@ describe("doSearch size matching", () => {
         (query) => {
             const { hits } = search(searchDb, query);
             expect(hits[0].partName).toBe('1" Hex Standoff');
-            expect(hits[0].configuration).toEqual({ length: "1 in" });
+            expect(hits[0].canonicalConfiguration).toEqual({ length: "1 in" });
         }
     );
 
@@ -405,7 +405,7 @@ describe("doSearch name matching", () => {
         expect(hits).toHaveLength(1);
         expect(hits[0].partName).toBe("3/4 Bearing");
         expect(hits[0].partNumber).toBe("217-2601");
-        expect(hits[0].configuration).toEqual({ length: "long" });
+        expect(hits[0].canonicalConfiguration).toEqual({ length: "long" });
     });
 
     it("finds a fractional name by its decimal forms (.5, 0.5, 1/2)", () => {
diff --git a/src/frontend/features/search/search.ts b/src/frontend/features/search/search.ts
index c883ac73..1fff51bb 100644
--- a/src/frontend/features/search/search.ts
+++ b/src/frontend/features/search/search.ts
@@ -36,10 +36,10 @@ export interface SearchHit {
     id: string;
     positions: Position[];
     /**
-     * The best-matching configuration for this hit, used to pre-fill the insert
-     * menu — its part number, name, and the parameter values that produce it.
+     * The best-matching record for this hit, used to pre-fill the insert menu —
+     * its part number, name, and the canonical values that produce it.
      */
-    configuration?: ParameterValues;
+    canonicalConfiguration?: ParameterValues;
     partNumber?: string;
     partName?: string;
     /** The vendor's page for the part number, when one can be derived. */
@@ -138,7 +138,7 @@ export function doSearch(
                     document.name,
                     "name"
                 ),
-                configuration: record?.configuration,
+                canonicalConfiguration: record?.canonicalConfiguration,
                 partNumber,
                 partName,
                 url: record?.url,

From 9e18b6277a402c5c12d552c45b74b4dfc18ad0a6 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 1 Sep 2026 04:53:26 +0000
Subject: [PATCH 33/40] Make a canonical configuration one thing: text
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three things were called some variant of "configuration", and two of them
shared a name under different types: the selection a user made, that selection
normalized into a map, and the text form of that map addressing a render.

There is no normalized map any more. canonicalizeConfiguration returns the
text directly, so a canonicalConfiguration is always a string and a
configuration is always ParameterValues — and the few places that want a
selection back out of the text decode it there. Records, the search index and
a favorite's stored selection all hold the text, which is also what the
thumbnail url carries and what the R2 key hashes.

Also collapses the two identical encoders into encodeConfiguration, and
replaces the hand-rolled cyrb53 with crypto.subtle: Workers implements
WebCrypto, so a truncated SHA-256 needs no dependency. That makes the key
async, which every call site already was.

Stored records only carry the new shape after a library reload. Favorites are
converted in place by 0008, which json_each walks in parameter order.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018tgfuCHjVFvejjMe7WmEFL
---
 drizzle/0008_canonical_configuration.sql      |  20 +
 drizzle/meta/0008_snapshot.json               | 510 ++++++++++++++++++
 drizzle/meta/_journal.json                    |   7 +
 src/__test_utils__/configuration-fixtures.ts  |   2 +-
 src/backend/db/schema.ts                      |   7 +-
 .../features/configurations/canonical.test.ts | 101 ++--
 .../features/configurations/canonical.ts      |  61 +--
 src/backend/features/configurations/models.ts |  11 +-
 .../features/configurations/routes.test.ts    |   2 +-
 .../features/configurations/utils.test.ts     |  67 ++-
 src/backend/features/configurations/utils.ts  |  52 +-
 src/backend/features/favorites/contract.ts    |   4 +-
 src/backend/features/favorites/routes.test.ts |  12 +-
 src/backend/features/favorites/routes.ts      |  22 +-
 .../features/load/load-insertable.test.ts     |  13 +-
 .../load/parse-configuration-records.ts       |   9 +-
 .../features/search/search-index.test.ts      |   4 +-
 .../features/thumbnails/routes.test.ts        |  15 +-
 src/backend/features/thumbnails/routes.ts     |   7 +-
 src/backend/features/thumbnails/store.ts      |   4 +-
 src/backend/lib/onshape/endpoints/metadata.ts |   4 +-
 src/backend/lib/onshape/endpoints/parts.ts    |   4 +-
 .../favorites/components/favorite-button.tsx  |  29 +-
 .../favorites/components/favorite-card.tsx    |  25 +-
 .../favorites/components/favorite-menu.tsx    |  49 +-
 .../features/favorites/open-favorite-menu.tsx |   8 +-
 .../insert/components/configurations.tsx      |  30 +-
 .../insert/components/insert-menu.tsx         |  33 +-
 .../library/components/insertable-card.tsx    |  32 +-
 src/frontend/features/search/search.test.ts   |  63 ++-
 src/frontend/features/search/search.ts        |   9 +-
 src/frontend/lib/url.tsx                      |   4 +-
 32 files changed, 890 insertions(+), 330 deletions(-)
 create mode 100644 drizzle/0008_canonical_configuration.sql
 create mode 100644 drizzle/meta/0008_snapshot.json

diff --git a/drizzle/0008_canonical_configuration.sql b/drizzle/0008_canonical_configuration.sql
new file mode 100644
index 00000000..3f689384
--- /dev/null
+++ b/drizzle/0008_canonical_configuration.sql
@@ -0,0 +1,20 @@
+/*
+ A favorite stored the selection to insert as a map of parameter values, which
+ had to be canonical for its thumbnail to key the same render as everyone
+ else's. It now stores the canonical form itself — the text every equivalent
+ selection shares — and the insert menu reads the values back out of it.
+
+ json_each walks the stored map in document order, which is the parameter order
+ it was written in, so a converted row spells its selection the way
+ canonicalizeConfiguration would.
+*/
+ALTER TABLE `favorites` ADD `canonical_configuration` text;
+--> statement-breakpoint
+UPDATE `favorites`
+SET `canonical_configuration` = (
+    SELECT group_concat(entry.key || '=' || entry.value, ';')
+    FROM json_each(`favorites`.`default_configuration`) AS entry
+)
+WHERE `default_configuration` IS NOT NULL;
+--> statement-breakpoint
+ALTER TABLE `favorites` DROP COLUMN `default_configuration`;
diff --git a/drizzle/meta/0008_snapshot.json b/drizzle/meta/0008_snapshot.json
new file mode 100644
index 00000000..7860c76a
--- /dev/null
+++ b/drizzle/meta/0008_snapshot.json
@@ -0,0 +1,510 @@
+{
+    "version": "6",
+    "dialect": "sqlite",
+    "id": "709941d2-0da5-4b40-816f-13880cddee28",
+    "prevId": "7f0e79d4-3077-4a1f-aeab-4d98a104be46",
+    "tables": {
+        "configurations": {
+            "name": "configurations",
+            "columns": {
+                "id": {
+                    "name": "id",
+                    "type": "text",
+                    "primaryKey": true,
+                    "notNull": true,
+                    "autoincrement": false
+                },
+                "parameters": {
+                    "name": "parameters",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false,
+                    "default": "'[]'"
+                },
+                "records": {
+                    "name": "records",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false,
+                    "default": "'[]'"
+                },
+                "build_issues": {
+                    "name": "build_issues",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false,
+                    "default": "'[]'"
+                }
+            },
+            "indexes": {},
+            "foreignKeys": {
+                "configurations_id_insertables_id_fk": {
+                    "name": "configurations_id_insertables_id_fk",
+                    "tableFrom": "configurations",
+                    "tableTo": "insertables",
+                    "columnsFrom": ["id"],
+                    "columnsTo": ["id"],
+                    "onDelete": "cascade",
+                    "onUpdate": "no action"
+                }
+            },
+            "compositePrimaryKeys": {},
+            "uniqueConstraints": {},
+            "checkConstraints": {}
+        },
+        "favorites": {
+            "name": "favorites",
+            "columns": {
+                "id": {
+                    "name": "id",
+                    "type": "text",
+                    "primaryKey": true,
+                    "notNull": true,
+                    "autoincrement": false
+                },
+                "user_id": {
+                    "name": "user_id",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false
+                },
+                "library_id": {
+                    "name": "library_id",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false
+                },
+                "insertable_id": {
+                    "name": "insertable_id",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false
+                },
+                "sort_order": {
+                    "name": "sort_order",
+                    "type": "integer",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false,
+                    "default": 0
+                },
+                "canonical_configuration": {
+                    "name": "canonical_configuration",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": false,
+                    "autoincrement": false
+                }
+            },
+            "indexes": {
+                "favorites_user_id_library_id_insertable_id_unique": {
+                    "name": "favorites_user_id_library_id_insertable_id_unique",
+                    "columns": ["user_id", "library_id", "insertable_id"],
+                    "isUnique": true
+                }
+            },
+            "foreignKeys": {
+                "favorites_user_id_users_id_fk": {
+                    "name": "favorites_user_id_users_id_fk",
+                    "tableFrom": "favorites",
+                    "tableTo": "users",
+                    "columnsFrom": ["user_id"],
+                    "columnsTo": ["id"],
+                    "onDelete": "no action",
+                    "onUpdate": "no action"
+                },
+                "favorites_library_id_libraries_id_fk": {
+                    "name": "favorites_library_id_libraries_id_fk",
+                    "tableFrom": "favorites",
+                    "tableTo": "libraries",
+                    "columnsFrom": ["library_id"],
+                    "columnsTo": ["id"],
+                    "onDelete": "no action",
+                    "onUpdate": "no action"
+                },
+                "favorites_insertable_id_insertables_id_fk": {
+                    "name": "favorites_insertable_id_insertables_id_fk",
+                    "tableFrom": "favorites",
+                    "tableTo": "insertables",
+                    "columnsFrom": ["insertable_id"],
+                    "columnsTo": ["id"],
+                    "onDelete": "cascade",
+                    "onUpdate": "no action"
+                }
+            },
+            "compositePrimaryKeys": {},
+            "uniqueConstraints": {},
+            "checkConstraints": {}
+        },
+        "groups": {
+            "name": "groups",
+            "columns": {
+                "id": {
+                    "name": "id",
+                    "type": "text",
+                    "primaryKey": true,
+                    "notNull": true,
+                    "autoincrement": false
+                },
+                "library_id": {
+                    "name": "library_id",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false
+                },
+                "name": {
+                    "name": "name",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false
+                },
+                "document_id": {
+                    "name": "document_id",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false
+                },
+                "version_id": {
+                    "name": "version_id",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false
+                },
+                "sort_alphabetically": {
+                    "name": "sort_alphabetically",
+                    "type": "integer",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false,
+                    "default": false
+                },
+                "sort_order": {
+                    "name": "sort_order",
+                    "type": "integer",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false,
+                    "default": 0
+                },
+                "small_thumbnail_url": {
+                    "name": "small_thumbnail_url",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": false,
+                    "autoincrement": false
+                },
+                "large_thumbnail_url": {
+                    "name": "large_thumbnail_url",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": false,
+                    "autoincrement": false
+                },
+                "build_issues": {
+                    "name": "build_issues",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false,
+                    "default": "'[]'"
+                },
+                "last_loaded_at": {
+                    "name": "last_loaded_at",
+                    "type": "integer",
+                    "primaryKey": false,
+                    "notNull": false,
+                    "autoincrement": false
+                }
+            },
+            "indexes": {
+                "groups_document_id_library_id_unique": {
+                    "name": "groups_document_id_library_id_unique",
+                    "columns": ["document_id", "library_id"],
+                    "isUnique": true
+                }
+            },
+            "foreignKeys": {
+                "groups_library_id_libraries_id_fk": {
+                    "name": "groups_library_id_libraries_id_fk",
+                    "tableFrom": "groups",
+                    "tableTo": "libraries",
+                    "columnsFrom": ["library_id"],
+                    "columnsTo": ["id"],
+                    "onDelete": "no action",
+                    "onUpdate": "no action"
+                }
+            },
+            "compositePrimaryKeys": {},
+            "uniqueConstraints": {},
+            "checkConstraints": {}
+        },
+        "insertables": {
+            "name": "insertables",
+            "columns": {
+                "id": {
+                    "name": "id",
+                    "type": "text",
+                    "primaryKey": true,
+                    "notNull": true,
+                    "autoincrement": false
+                },
+                "element_id": {
+                    "name": "element_id",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false
+                },
+                "group_id": {
+                    "name": "group_id",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false
+                },
+                "document_id": {
+                    "name": "document_id",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false
+                },
+                "library_id": {
+                    "name": "library_id",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false
+                },
+                "name": {
+                    "name": "name",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false
+                },
+                "element_type": {
+                    "name": "element_type",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false
+                },
+                "microversion_id": {
+                    "name": "microversion_id",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false
+                },
+                "is_visible": {
+                    "name": "is_visible",
+                    "type": "integer",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false,
+                    "default": false
+                },
+                "is_open_composite": {
+                    "name": "is_open_composite",
+                    "type": "integer",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false,
+                    "default": false
+                },
+                "supports_fasten": {
+                    "name": "supports_fasten",
+                    "type": "integer",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false,
+                    "default": false
+                },
+                "index_configurations": {
+                    "name": "index_configurations",
+                    "type": "integer",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false,
+                    "default": false
+                },
+                "version_id": {
+                    "name": "version_id",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false
+                },
+                "sort_order": {
+                    "name": "sort_order",
+                    "type": "integer",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false,
+                    "default": 0
+                },
+                "vendors": {
+                    "name": "vendors",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false,
+                    "default": "'[]'"
+                },
+                "small_thumbnail_url": {
+                    "name": "small_thumbnail_url",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": false,
+                    "autoincrement": false
+                },
+                "large_thumbnail_url": {
+                    "name": "large_thumbnail_url",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": false,
+                    "autoincrement": false
+                },
+                "fasten_info": {
+                    "name": "fasten_info",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": false,
+                    "autoincrement": false
+                },
+                "part_data": {
+                    "name": "part_data",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": false,
+                    "autoincrement": false
+                },
+                "build_issues": {
+                    "name": "build_issues",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false,
+                    "default": "'[]'"
+                },
+                "last_loaded_at": {
+                    "name": "last_loaded_at",
+                    "type": "integer",
+                    "primaryKey": false,
+                    "notNull": false,
+                    "autoincrement": false
+                }
+            },
+            "indexes": {},
+            "foreignKeys": {
+                "insertables_group_id_groups_id_fk": {
+                    "name": "insertables_group_id_groups_id_fk",
+                    "tableFrom": "insertables",
+                    "tableTo": "groups",
+                    "columnsFrom": ["group_id"],
+                    "columnsTo": ["id"],
+                    "onDelete": "cascade",
+                    "onUpdate": "no action"
+                },
+                "insertables_library_id_libraries_id_fk": {
+                    "name": "insertables_library_id_libraries_id_fk",
+                    "tableFrom": "insertables",
+                    "tableTo": "libraries",
+                    "columnsFrom": ["library_id"],
+                    "columnsTo": ["id"],
+                    "onDelete": "no action",
+                    "onUpdate": "no action"
+                }
+            },
+            "compositePrimaryKeys": {},
+            "uniqueConstraints": {},
+            "checkConstraints": {}
+        },
+        "libraries": {
+            "name": "libraries",
+            "columns": {
+                "id": {
+                    "name": "id",
+                    "type": "text",
+                    "primaryKey": true,
+                    "notNull": true,
+                    "autoincrement": false
+                },
+                "cache_version": {
+                    "name": "cache_version",
+                    "type": "integer",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false,
+                    "default": 0
+                }
+            },
+            "indexes": {},
+            "foreignKeys": {},
+            "compositePrimaryKeys": {},
+            "uniqueConstraints": {},
+            "checkConstraints": {}
+        },
+        "users": {
+            "name": "users",
+            "columns": {
+                "id": {
+                    "name": "id",
+                    "type": "text",
+                    "primaryKey": true,
+                    "notNull": true,
+                    "autoincrement": false
+                },
+                "theme": {
+                    "name": "theme",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false,
+                    "default": "'system'"
+                },
+                "library_id": {
+                    "name": "library_id",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": true,
+                    "autoincrement": false,
+                    "default": "'frc-design-lib'"
+                },
+                "group_id": {
+                    "name": "group_id",
+                    "type": "text",
+                    "primaryKey": false,
+                    "notNull": false,
+                    "autoincrement": false
+                }
+            },
+            "indexes": {},
+            "foreignKeys": {},
+            "compositePrimaryKeys": {},
+            "uniqueConstraints": {},
+            "checkConstraints": {}
+        }
+    },
+    "views": {},
+    "enums": {},
+    "_meta": {
+        "schemas": {},
+        "tables": {},
+        "columns": {}
+    },
+    "internal": {
+        "indexes": {}
+    }
+}
diff --git a/drizzle/meta/_journal.json b/drizzle/meta/_journal.json
index 6164e539..87138ffe 100644
--- a/drizzle/meta/_journal.json
+++ b/drizzle/meta/_journal.json
@@ -57,6 +57,13 @@
             "when": 1787265951429,
             "tag": "0007_resume_group",
             "breakpoints": true
+        },
+        {
+            "idx": 8,
+            "version": "6",
+            "when": 1787265951430,
+            "tag": "0008_canonical_configuration",
+            "breakpoints": true
         }
     ]
 }
diff --git a/src/__test_utils__/configuration-fixtures.ts b/src/__test_utils__/configuration-fixtures.ts
index 52af81ed..d99e6e92 100644
--- a/src/__test_utils__/configuration-fixtures.ts
+++ b/src/__test_utils__/configuration-fixtures.ts
@@ -87,7 +87,7 @@ export function configurationRecord(
     overrides: Partial<ConfigurationRecord> = {}
 ): ConfigurationRecord {
     return {
-        canonicalConfiguration: {},
+        canonicalConfiguration: "",
         hasMultipleParts: false,
         isOpenComposite: false,
         ...overrides
diff --git a/src/backend/db/schema.ts b/src/backend/db/schema.ts
index 851eb6e6..85720fec 100644
--- a/src/backend/db/schema.ts
+++ b/src/backend/db/schema.ts
@@ -5,7 +5,6 @@ import { LibraryId } from "../features/library/library-id";
 import { DEFAULT_SETTINGS, Theme } from "../features/settings/settings";
 import { Vendor } from "../features/library/vendors";
 import {
-    ParameterValues,
     ConfigurationParameter,
     ConfigurationRecord,
     PartMetadata
@@ -167,9 +166,9 @@ export const favorites = sqliteTable(
         insertableId: text("insertable_id")
             .notNull()
             .references(() => insertables.id, { onDelete: "cascade" }),
-        defaultConfiguration: text("default_configuration", {
-            mode: "json"
-        }).$type<ParameterValues | null>(),
+        // The selection the favorite opens with, canonical so its thumbnail
+        // names the same render everyone else's does. Null for the default.
+        canonicalConfiguration: text("canonical_configuration"),
         sortOrder: integer("sort_order").notNull().default(0)
     },
     (t) => [unique().on(t.userId, t.libraryId, t.insertableId)]
diff --git a/src/backend/features/configurations/canonical.test.ts b/src/backend/features/configurations/canonical.test.ts
index f14a0812..bf432936 100644
--- a/src/backend/features/configurations/canonical.test.ts
+++ b/src/backend/features/configurations/canonical.test.ts
@@ -2,9 +2,8 @@ import { describe, expect, it } from "vitest";
 import {
     DEFAULT_CANONICAL_CONFIGURATION,
     DEFAULT_CONFIGURATION_KEY,
-    canonicalConfigurationKey,
     canonicalizeConfiguration,
-    encodeCanonicalConfiguration
+    toConfigurationKey
 } from "./canonical";
 import { ParameterValues, VisibilityType } from "./models";
 import { QuantityType, Unit } from "./enums";
@@ -14,11 +13,9 @@ import {
     quantityParam
 } from "../../../__test_utils__/configuration-fixtures";
 
-/** The key of an already-canonical selection, which is what callers compare. */
-function keyOf(canonicalConfiguration: ParameterValues): string {
-    return canonicalConfigurationKey(
-        encodeCanonicalConfiguration(canonicalConfiguration)
-    );
+/** The key a canonical selection resolves to, which is what callers compare. */
+function keyOf(canonicalConfiguration: string): Promise<string> {
+    return toConfigurationKey(canonicalConfiguration);
 }
 
 describe("canonicalizeConfiguration", () => {
@@ -35,30 +32,30 @@ describe("canonicalizeConfiguration", () => {
 
     it("drops values that match the parameter default", () => {
         // "s" and "false" are the defaults, so Onshape renders them anyway.
-        expect(canon({ size: "s", flag: "false", length: "1 in" })).toEqual({});
+        expect(canon({ size: "s", flag: "false", length: "1 in" })).toBe(
+            DEFAULT_CANONICAL_CONFIGURATION
+        );
     });
 
     it("keeps only what differs from the defaults", () => {
-        expect(canon({ size: "l", flag: "false" })).toEqual({ size: "l" });
+        expect(canon({ size: "l", flag: "false" })).toBe("size=l");
     });
 
-    it("emits parameters in declaration order, not object order", () => {
+    it("names parameters in declaration order, not object order", () => {
         const a = canon({ flag: "true", size: "l" });
-        const b = canon({ size: "l", flag: "true" });
-        expect(Object.keys(a)).toEqual(["size", "flag"]);
-        expect(encodeCanonicalConfiguration(a)).toBe(
-            encodeCanonicalConfiguration(b)
-        );
-        expect(keyOf(a)).toBe(keyOf(b));
+        expect(a).toBe("size=l;flag=true");
+        expect(canon({ size: "l", flag: "true" })).toBe(a);
     });
 
-    it("collapses equivalent quantity spellings", () => {
-        const keys = ["2in", "2 in", "(1 + 1) in"].map((value) =>
-            keyOf(canon({ length: value }))
+    it("collapses equivalent quantity spellings", async () => {
+        const keys = await Promise.all(
+            ["2in", "2 in", "(1 + 1) in"].map((value) =>
+                keyOf(canon({ length: value }))
+            )
         );
         expect(new Set(keys).size).toBe(1);
         // ...and it is not the default key, since 2 in != the 1 in default.
-        expect(keys[0]).not.toBe(keyOf({}));
+        expect(keys[0]).not.toBe(await keyOf(DEFAULT_CANONICAL_CONFIGURATION));
     });
 
     it("drops a parameter hidden by its visibility condition", () => {
@@ -70,13 +67,13 @@ describe("canonicalizeConfiguration", () => {
             }
         });
         // size=l hides `hidden`, so its value can't affect the render.
-        expect(canon({ size: "l", hidden: "y" }, [size, hidden])).toEqual({
-            size: "l"
-        });
+        expect(canon({ size: "l", hidden: "y" }, [size, hidden])).toBe(
+            "size=l"
+        );
     });
 
     it("ignores parameters that aren't set", () => {
-        expect(canon({ size: "l" })).toEqual({ size: "l" });
+        expect(canon({ size: "l" })).toBe("size=l");
     });
 });
 
@@ -91,7 +88,7 @@ describe("canonical keys agree across surfaces", () => {
     const length = quantityParam("length");
     const parameters = [size, flag, finish, length];
 
-    it("keys an enumerated record and the equivalent selection alike", () => {
+    it("keys an enumerated record and the equivalent selection alike", async () => {
         // What indexing stores: enumerated values, no cosmetic/quantity params.
         const record = canonicalizeConfiguration(
             { size: "l", flag: "false" },
@@ -102,10 +99,10 @@ describe("canonical keys agree across surfaces", () => {
             { size: "l", flag: "false", finish: "matte", length: "1 in" },
             parameters
         );
-        expect(keyOf(record)).toBe(keyOf(selection));
+        expect(await keyOf(record)).toBe(await keyOf(selection));
     });
 
-    it("keys a non-default cosmetic or quantity value differently", () => {
+    it("keys a non-default cosmetic or quantity value differently", async () => {
         // Enumeration never varies these, but they do change what renders, so
         // the selection must not collide with the enumerated record.
         const record = canonicalizeConfiguration({ size: "l" }, parameters);
@@ -115,8 +112,8 @@ describe("canonical keys agree across surfaces", () => {
         ];
         for (const selection of selections) {
             expect(
-                keyOf(canonicalizeConfiguration(selection, parameters))
-            ).not.toBe(keyOf(record));
+                await keyOf(canonicalizeConfiguration(selection, parameters))
+            ).not.toBe(await keyOf(record));
         }
     });
 });
@@ -133,16 +130,16 @@ describe("quantity canonicalization", () => {
 
     it("spells a length in meters, whatever unit was typed", () => {
         for (const value of ["2 in", "50.8 mm", "5.08 cm", "(1 + 1) in"]) {
-            expect(
-                canonicalizeConfiguration({ length: value }, [length])
-            ).toEqual({ length: "0.0508 m" });
+            expect(canonicalizeConfiguration({ length: value }, [length])).toBe(
+                "length=0.0508 m"
+            );
         }
     });
 
     it("spells an angle in radians", () => {
         const spelled = canonicalizeConfiguration({ angle: "180 deg" }, [
             angle
-        ]).angle;
+        ]).replace("angle=", "");
         expect(spelled).toMatch(/ rad$/);
         // To the decimals the parser's angle tolerance distinguishes, rather
         // than a precision of this module's own.
@@ -168,38 +165,32 @@ describe("quantity canonicalization", () => {
     });
 
     it("drops a value equal to the default in another unit", () => {
-        expect(
-            canonicalizeConfiguration({ length: "25.4 mm" }, [length])
-        ).toEqual({});
+        expect(canonicalizeConfiguration({ length: "25.4 mm" }, [length])).toBe(
+            DEFAULT_CANONICAL_CONFIGURATION
+        );
     });
 
     it("keeps an unparseable value as typed", () => {
-        expect(
-            canonicalizeConfiguration({ length: "#value" }, [length])
-        ).toEqual({ length: "#value" });
+        expect(canonicalizeConfiguration({ length: "#value" }, [length])).toBe(
+            "length=#value"
+        );
     });
 });
 
-describe("canonicalConfigurationKey", () => {
-    it("maps an empty configuration to the default key", () => {
-        expect(keyOf({})).toBe(DEFAULT_CONFIGURATION_KEY);
-    });
-
-    it("gives different configurations different keys", () => {
-        expect(keyOf({ a: "1" })).not.toBe(keyOf({ a: "2" }));
+describe("toConfigurationKey", () => {
+    it("maps the element default to the default key", async () => {
+        expect(await keyOf(DEFAULT_CANONICAL_CONFIGURATION)).toBe(
+            DEFAULT_CONFIGURATION_KEY
+        );
     });
-});
 
-describe("encodeCanonicalConfiguration", () => {
-    it("encodes the default as the empty string", () => {
-        expect(encodeCanonicalConfiguration({})).toBe(
-            DEFAULT_CANONICAL_CONFIGURATION
-        );
+    it("gives different configurations different keys", async () => {
+        expect(await keyOf("a=1")).not.toBe(await keyOf("a=2"));
     });
 
-    it("joins values in the order canonicalizing emitted them", () => {
-        expect(encodeCanonicalConfiguration({ size: "l", flag: "true" })).toBe(
-            "size=l;flag=true"
+    it("gives one configuration one key, every time", async () => {
+        expect(await keyOf("size=l;flag=true")).toBe(
+            await keyOf("size=l;flag=true")
         );
     });
 });
diff --git a/src/backend/features/configurations/canonical.ts b/src/backend/features/configurations/canonical.ts
index 82db3bc1..a56d7013 100644
--- a/src/backend/features/configurations/canonical.ts
+++ b/src/backend/features/configurations/canonical.ts
@@ -1,16 +1,19 @@
 /**
- * A `canonicalConfiguration` addresses a render — thumbnails, R2 keys, search
- * records. Only insert/derive needs the user's literal `configuration`.
+ * A `configuration` is the selection a user made, and is what insert and derive
+ * send to Onshape. A `canonicalConfiguration` is the one text spelling every
+ * equivalent selection shares, and is the only form that addresses a render —
+ * thumbnails, R2 keys, stored records. It is always text; nothing holds a
+ * half-canonical map.
  */
 import {
     type ConfigurationParameter,
     ParameterType,
     type ParameterValues
 } from "./models";
-import { evaluateCondition } from "./utils";
+import { encodeConfiguration, evaluateCondition } from "./utils";
 import { evaluateBaseValue, formatBaseValue } from "./input-parser";
 
-/** The element default, which is what an empty canonical configuration encodes. */
+/** The element default, which is what a canonical configuration overriding nothing is. */
 export const DEFAULT_CANONICAL_CONFIGURATION = "";
 
 /** The key for an element's default configuration (what everything falls back to). */
@@ -41,13 +44,14 @@ function canonicalizeValue(
 
 /**
  * Reduces a configuration to the one spelling every equivalent selection shares,
- * so their thumbnails resolve to one cache entry. Drops defaults and hidden values.
+ * so their thumbnails resolve to one cache entry. Drops defaults and hidden
+ * values, and so names only what a selection actually overrides.
  */
 export function canonicalizeConfiguration(
     configuration: ParameterValues,
     parameters: ConfigurationParameter[]
-): ParameterValues {
-    const canonicalConfiguration: ParameterValues = {};
+): string {
+    const overrides: ParameterValues = {};
     for (const parameter of parameters) {
         const value = configuration[parameter.id];
         if (value === undefined) {
@@ -67,42 +71,27 @@ export function canonicalizeConfiguration(
         if (canonicalValue === canonicalDefault) {
             continue;
         }
-        canonicalConfiguration[parameter.id] = canonicalValue;
+        overrides[parameter.id] = canonicalValue;
     }
-    return canonicalConfiguration;
-}
-
-/** Encodes canonical values for a url, an R2 key, or Onshape's `configuration`. */
-export function encodeCanonicalConfiguration(
-    canonicalConfiguration: ParameterValues
-): string {
-    return Object.entries(canonicalConfiguration)
-        .map(([id, value]) => `${id}=${value}`)
-        .join(";");
+    // Built in parameter order, so equivalent selections spell it the same way.
+    return encodeConfiguration(overrides);
 }
 
 /**
- * A short, stable key for a url or R2 key, since a configuration is unbounded.
- * Only avoids collisions within one element, so a fast sync hash is plenty.
+ * A short, stable key for an R2 key, since a configuration is unbounded. It only
+ * has to avoid collisions within one element, so a truncated digest is plenty.
  */
-export function canonicalConfigurationKey(
+export async function toConfigurationKey(
     canonicalConfiguration: string
-): string {
+): Promise<string> {
     if (canonicalConfiguration === DEFAULT_CANONICAL_CONFIGURATION) {
         return DEFAULT_CONFIGURATION_KEY;
     }
-    // cyrb53
-    let h1 = 0xdeadbeef;
-    let h2 = 0x41c6ce57;
-    for (let i = 0; i < canonicalConfiguration.length; i++) {
-        const ch = canonicalConfiguration.charCodeAt(i);
-        h1 = Math.imul(h1 ^ ch, 2654435761);
-        h2 = Math.imul(h2 ^ ch, 1597334677);
-    }
-    h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507);
-    h1 ^= Math.imul(h2 ^ (h2 >>> 13), 3266489909);
-    h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507);
-    h2 ^= Math.imul(h1 ^ (h1 >>> 13), 3266489909);
-    const hash = 4294967296 * (2097151 & h2) + (h1 >>> 0);
-    return hash.toString(36);
+    const digest = await crypto.subtle.digest(
+        "SHA-256",
+        new TextEncoder().encode(canonicalConfiguration)
+    );
+    return [...new Uint8Array(digest, 0, 8)]
+        .map((byte) => byte.toString(16).padStart(2, "0"))
+        .join("");
 }
diff --git a/src/backend/features/configurations/models.ts b/src/backend/features/configurations/models.ts
index 9878a2f8..9ec4519c 100644
--- a/src/backend/features/configurations/models.ts
+++ b/src/backend/features/configurations/models.ts
@@ -69,7 +69,6 @@ interface AlwaysShownVisibilityCondition {
 }
 
 export interface ConfigurationResult {
-    // defaultConfiguration: string;
     parameters: ConfigurationParameter[];
     /** The insertable's search records, so the insert menu can show the part
      * number + name of the selected configuration. Empty when not indexed. */
@@ -86,10 +85,10 @@ export interface SearchRecord {
     /** The vendor's page for this part, when one can be resolved. */
     url?: string;
     /**
-     * The (enumerated) parameter values that produce it, canonical so it keys
-     * the same render the insert menu asks for; empty for the default.
+     * The (enumerated) values that produce it, canonical so it names the same
+     * render the insert menu asks for; empty for the element's default.
      */
-    canonicalConfiguration: ParameterValues;
+    canonicalConfiguration: string;
 }
 
 export type ConfigurationParameter =
@@ -174,8 +173,8 @@ export interface ProbedRecord extends PartMetadata {
 
 /** A probe as it is stored. Kept only for an indexed insertable. */
 export interface ConfigurationRecord extends PartMetadata {
-    /** The parameter values that produce it, in their canonical spelling. */
-    canonicalConfiguration: ParameterValues;
+    /** The selection that produces it, in its canonical spelling. */
+    canonicalConfiguration: string;
 }
 
 /**
diff --git a/src/backend/features/configurations/routes.test.ts b/src/backend/features/configurations/routes.test.ts
index 0ea130be..0f8c1ecd 100644
--- a/src/backend/features/configurations/routes.test.ts
+++ b/src/backend/features/configurations/routes.test.ts
@@ -69,7 +69,7 @@ describe("configuration routes", () => {
                     partNumber: "WCP-0405",
                     name: "2x1 Tube",
                     url: "https://wcproducts.com/products/wcp-0405",
-                    canonicalConfiguration: {}
+                    canonicalConfiguration: ""
                 }
             ]
         });
diff --git a/src/backend/features/configurations/utils.test.ts b/src/backend/features/configurations/utils.test.ts
index bb1e22ae..c4266d8f 100644
--- a/src/backend/features/configurations/utils.test.ts
+++ b/src/backend/features/configurations/utils.test.ts
@@ -1,52 +1,71 @@
 import { describe, expect, it } from "vitest";
-import { findRecordForConfiguration, getPartUrl } from "./utils";
+import {
+    decodeConfiguration,
+    encodeConfiguration,
+    findRecordForConfiguration,
+    getPartUrl
+} from "./utils";
 import { PartMetadata, SearchRecord } from "./models";
 import { Vendor } from "../library/vendors";
 
-function rec(
-    canonicalConfiguration: Record<string, string>,
-    partNumber = "PN"
-): SearchRecord {
+function rec(canonicalConfiguration: string, partNumber = "PN"): SearchRecord {
     return { partNumber, canonicalConfiguration };
 }
 
 describe("findRecordForConfiguration", () => {
     it("returns the record whose enumerated values match the selection", () => {
-        const records = [
-            rec({ size: "s" }, "PN-S"),
-            rec({ size: "l" }, "PN-L")
-        ];
+        const records = [rec("size=s", "PN-S"), rec("size=l", "PN-L")];
         // The selection also carries a non-enumerated (quantity) param, ignored.
         expect(
-            findRecordForConfiguration({ size: "l", qty: "3" }, records)
-                ?.partNumber
+            findRecordForConfiguration("size=l;qty=3", records)?.partNumber
         ).toBe("PN-L");
     });
 
     it("prefers the most specific match when several apply", () => {
-        const records = [rec({}, "default"), rec({ size: "l" }, "PN-L")];
-        expect(
-            findRecordForConfiguration({ size: "l" }, records)?.partNumber
-        ).toBe("PN-L");
+        const records = [rec("", "default"), rec("size=l", "PN-L")];
+        expect(findRecordForConfiguration("size=l", records)?.partNumber).toBe(
+            "PN-L"
+        );
     });
 
-    it("falls back to a shorter key-set when a parameter is hidden", () => {
+    it("falls back to a less specific record when a parameter is hidden", () => {
         const records = [
-            rec({ mode: "a", detail: "x" }, "A-X"),
+            rec("mode=a;detail=x", "A-X"),
             // `detail` is hidden when mode=b, so this record omits it.
-            rec({ mode: "b" }, "B")
+            rec("mode=b", "B")
         ];
         expect(
-            findRecordForConfiguration({ mode: "b", detail: "x" }, records)
-                ?.partNumber
+            findRecordForConfiguration("mode=b;detail=x", records)?.partNumber
         ).toBe("B");
     });
 
     it("returns undefined when nothing matches", () => {
-        const records = [rec({ size: "s" }, "PN-S")];
-        expect(
-            findRecordForConfiguration({ size: "l" }, records)
-        ).toBeUndefined();
+        const records = [rec("size=s", "PN-S")];
+        expect(findRecordForConfiguration("size=l", records)).toBeUndefined();
+    });
+});
+
+describe("configuration text", () => {
+    it("encodes the empty configuration as the empty string", () => {
+        expect(encodeConfiguration({})).toBe("");
+        expect(encodeConfiguration(undefined)).toBe("");
+    });
+
+    it("joins values in the order they were set", () => {
+        expect(encodeConfiguration({ size: "l", flag: "true" })).toBe(
+            "size=l;flag=true"
+        );
+    });
+
+    it("round-trips the values it names", () => {
+        const configuration = { size: "l", length: "0.0508 m" };
+        expect(decodeConfiguration(encodeConfiguration(configuration))).toEqual(
+            configuration
+        );
+    });
+
+    it("decodes the empty string as no values at all", () => {
+        expect(decodeConfiguration("")).toEqual({});
     });
 });
 
diff --git a/src/backend/features/configurations/utils.ts b/src/backend/features/configurations/utils.ts
index 0578197f..8612d177 100644
--- a/src/backend/features/configurations/utils.ts
+++ b/src/backend/features/configurations/utils.ts
@@ -23,23 +23,23 @@ import { LogicalOp, QuantityType, Unit } from "./enums";
 import { type EvaluateOptions, valueWithUnits } from "./input-parser";
 
 /**
- * The record a selection produces. Records key only on enumerated parameters, so
- * several can match; the most specific (most keys) wins.
+ * The record a selection produces. Records name only enumerated parameters, so
+ * several can match; the most specific (the most named) wins. Both sides are
+ * canonical and built in parameter order, so this compares whole assignments.
  */
 export function findRecordForConfiguration(
-    configuration: ParameterValues,
+    canonicalConfiguration: string,
     records: SearchRecord[]
 ): SearchRecord | undefined {
+    const selected = new Set(splitConfiguration(canonicalConfiguration));
     let best: SearchRecord | undefined;
-    let bestKeys = -1;
+    let bestNamed = -1;
     for (const record of records) {
-        const keys = Object.keys(record.canonicalConfiguration);
-        const matches = keys.every(
-            (key) => configuration[key] === record.canonicalConfiguration[key]
-        );
-        if (matches && keys.length > bestKeys) {
+        const named = splitConfiguration(record.canonicalConfiguration);
+        const matches = named.every((assignment) => selected.has(assignment));
+        if (matches && named.length > bestNamed) {
             best = record;
-            bestKeys = keys.length;
+            bestNamed = named.length;
         }
     }
     return best;
@@ -111,9 +111,11 @@ export function getPartUrl(
     return getVendorPartUrl(vendor, record.partNumber);
 }
 
-export function encodeConfigurationForQuery(
-    configuration?: ParameterValues
-): string {
+/**
+ * The text form of a configuration, which is Onshape's own: `id=value;id=value`.
+ * Values never carry a `;` or an `=`, which is what lets this round-trip.
+ */
+export function encodeConfiguration(configuration?: ParameterValues): string {
     if (!configuration) {
         return "";
     }
@@ -122,6 +124,28 @@ export function encodeConfigurationForQuery(
         .join(";");
 }
 
+/** The assignments a configuration text names, each still `id=value`. */
+export function splitConfiguration(configuration: string): string[] {
+    return configuration.split(";").filter((assignment) => assignment !== "");
+}
+
+/**
+ * The values a configuration text names. A canonical one names only what it
+ * overrides, so what it omits is the parameter's own default.
+ */
+export function decodeConfiguration(configuration: string): ParameterValues {
+    const values: ParameterValues = {};
+    for (const assignment of splitConfiguration(configuration)) {
+        const separator = assignment.indexOf("=");
+        if (separator > 0) {
+            values[assignment.slice(0, separator)] = assignment.slice(
+                separator + 1
+            );
+        }
+    }
+    return values;
+}
+
 export function getOption(
     options: EnumOption[],
     optionId: string
@@ -229,5 +253,5 @@ export function toRecords(
     records: ConfigurationRecord[]
 ): ConfigurationRecord[] {
     if (!partMetadata) return records;
-    return [{ ...partMetadata, canonicalConfiguration: {} }, ...records];
+    return [{ ...partMetadata, canonicalConfiguration: "" }, ...records];
 }
diff --git a/src/backend/features/favorites/contract.ts b/src/backend/features/favorites/contract.ts
index 8bf3e53f..a0ff143c 100644
--- a/src/backend/features/favorites/contract.ts
+++ b/src/backend/features/favorites/contract.ts
@@ -1,11 +1,11 @@
-import { ParameterValues } from "../configurations/models";
 import { LibraryId } from "../library/library-id";
 
 export interface Favorite {
     id: string;
     insertableId: string;
     libraryId: LibraryId;
-    defaultConfiguration?: ParameterValues;
+    /** The selection it opens with, canonical; absent for the element default. */
+    canonicalConfiguration?: string;
 }
 
 export interface FavoritesData {
diff --git a/src/backend/features/favorites/routes.test.ts b/src/backend/features/favorites/routes.test.ts
index 0e9e97e0..8497457a 100644
--- a/src/backend/features/favorites/routes.test.ts
+++ b/src/backend/features/favorites/routes.test.ts
@@ -198,16 +198,16 @@ describe("favorites routes", () => {
         });
     });
 
-    describe("POST /default-configuration/favorite/:favoriteId", () => {
-        it("persists the default configuration", async () => {
+    describe("POST /canonical-configuration/favorite/:favoriteId", () => {
+        it("persists the selection the favorite opens with", async () => {
             await seedPartStudio(db);
             const favoriteId = await seedFavorite(db, TEST_PART_STUDIO_ID);
             const app = createTestApp();
 
-            const defaultConfiguration = { "param-id": "value" };
+            const canonicalConfiguration = "param-id=value";
             const res = await app.request(
-                `/api/default-configuration/favorite/${favoriteId}`,
-                jsonRequest("POST", { defaultConfiguration }),
+                `/api/canonical-configuration/favorite/${favoriteId}`,
+                jsonRequest("POST", { canonicalConfiguration }),
                 env
             );
             expect(res.status).toBe(200);
@@ -217,7 +217,7 @@ describe("favorites routes", () => {
                 .from(favorites)
                 .where(eq(favorites.id, favoriteId))
                 .get();
-            expect(row?.defaultConfiguration).toEqual(defaultConfiguration);
+            expect(row?.canonicalConfiguration).toBe(canonicalConfiguration);
         });
     });
 });
diff --git a/src/backend/features/favorites/routes.ts b/src/backend/features/favorites/routes.ts
index c8ef676a..03e824df 100644
--- a/src/backend/features/favorites/routes.ts
+++ b/src/backend/features/favorites/routes.ts
@@ -24,13 +24,13 @@ const addFavoriteQuery = z.object({
 
 /** The configuration the favorite opens with, when it was made from one. */
 const addFavoriteBody = z.object({
-    defaultConfiguration: z.record(z.string(), z.string()).optional()
+    canonicalConfiguration: z.string().optional()
 });
 
 const favoriteOrderBody = z.object({ favoriteOrder: z.array(z.string()) });
 
-const defaultConfigurationBody = z.object({
-    defaultConfiguration: z.record(z.string(), z.string())
+const canonicalConfigurationBody = z.object({
+    canonicalConfiguration: z.string()
 });
 
 async function getFavorites(
@@ -57,7 +57,7 @@ async function getFavorites(
             id: row.id,
             insertableId: row.insertableId,
             libraryId,
-            defaultConfiguration: row.defaultConfiguration ?? undefined
+            canonicalConfiguration: row.canonicalConfiguration ?? undefined
         };
         favoritesOut[row.id] = fav;
         favoriteOrder.push(row.id);
@@ -88,7 +88,7 @@ favoriteRoutes.post(
         const libraryId = getLibraryParam(c);
         const userId = await c.var.getUserId();
         const { insertableId, id: favoriteId } = c.req.valid("query");
-        const { defaultConfiguration } = c.req.valid("json");
+        const { canonicalConfiguration } = c.req.valid("json");
 
         const db = getDb(c.env.DB);
 
@@ -112,7 +112,7 @@ favoriteRoutes.post(
                 userId,
                 libraryId,
                 insertableId,
-                defaultConfiguration,
+                canonicalConfiguration,
                 sortOrder: existingCount.length
             })
             .onConflictDoNothing();
@@ -162,20 +162,20 @@ favoriteRoutes.post(
     }
 );
 
-/** POST /api/default-configuration/favorite/:favoriteId */
+/** POST /api/canonical-configuration/favorite/:favoriteId */
 favoriteRoutes.post(
-    "/default-configuration" + favoriteRoute(),
+    "/canonical-configuration" + favoriteRoute(),
     requireSignInMiddleware,
-    validate("json", defaultConfigurationBody),
+    validate("json", canonicalConfigurationBody),
     async (c) => {
         const favoriteId = getFavoriteParam(c);
-        const { defaultConfiguration } = c.req.valid("json");
+        const { canonicalConfiguration } = c.req.valid("json");
         const userId = await c.var.getUserId();
 
         const db = getDb(c.env.DB);
         await db
             .update(favorites)
-            .set({ defaultConfiguration })
+            .set({ canonicalConfiguration })
             .where(
                 and(eq(favorites.id, favoriteId), eq(favorites.userId, userId))
             );
diff --git a/src/backend/features/load/load-insertable.test.ts b/src/backend/features/load/load-insertable.test.ts
index e9a25a45..39d27c8c 100644
--- a/src/backend/features/load/load-insertable.test.ts
+++ b/src/backend/features/load/load-insertable.test.ts
@@ -3,7 +3,7 @@ import { eq } from "drizzle-orm";
 import { beforeEach, describe, expect, it } from "vitest";
 import { getDb } from "../../db/client";
 import { configurations, insertables } from "../../db/schema";
-import type { ParameterValues, PartMetadata } from "../configurations/models";
+import type { PartMetadata } from "../configurations/models";
 import { configurationRecord } from "../../../__test_utils__/configuration-fixtures";
 import {
     TEST_PARAMETERS,
@@ -30,10 +30,8 @@ function readInsertable() {
 const partMetadata = (partNumber?: string): PartMetadata =>
     configurationRecord({ partNumber });
 
-const record = (
-    partNumber?: string,
-    canonicalConfiguration: ParameterValues = {}
-) => configurationRecord({ partNumber, canonicalConfiguration });
+const record = (partNumber?: string, canonicalConfiguration = "") =>
+    configurationRecord({ partNumber, canonicalConfiguration });
 
 describe("saveInsertable", () => {
     beforeEach(async () => {
@@ -101,10 +99,7 @@ describe("saveInsertable", () => {
     });
 
     it("writes the computed configuration records", async () => {
-        const records = [
-            record("PN-1", { p: "v1" }),
-            record("PN-2", { p: "v2" })
-        ];
+        const records = [record("PN-1", "p=v1"), record("PN-2", "p=v2")];
         await saveInsertable(
             db,
             insertableTarget(),
diff --git a/src/backend/features/load/parse-configuration-records.ts b/src/backend/features/load/parse-configuration-records.ts
index 38eb5ba4..61d25753 100644
--- a/src/backend/features/load/parse-configuration-records.ts
+++ b/src/backend/features/load/parse-configuration-records.ts
@@ -23,7 +23,10 @@ import {
     IndexingBand,
     isIndexingEnabled
 } from "../configurations/combinations";
-import { canonicalizeConfiguration } from "../configurations/canonical";
+import {
+    DEFAULT_CANONICAL_CONFIGURATION,
+    canonicalizeConfiguration
+} from "../configurations/canonical";
 import { getParts } from "../../lib/onshape/endpoints/parts";
 import { getElementMetadata } from "../../lib/onshape/endpoints/metadata";
 import type {
@@ -311,8 +314,8 @@ function planBatches(
     // so drop every all-defaults combination, not just the empty one.
     const toFetch = configurations.filter(
         (configuration) =>
-            Object.keys(canonicalizeConfiguration(configuration, parameters))
-                .length > 0
+            canonicalizeConfiguration(configuration, parameters) !==
+            DEFAULT_CANONICAL_CONFIGURATION
     );
 
     const batches: ParameterValues[][] = [];
diff --git a/src/backend/features/search/search-index.test.ts b/src/backend/features/search/search-index.test.ts
index 71a94904..9e199632 100644
--- a/src/backend/features/search/search-index.test.ts
+++ b/src/backend/features/search/search-index.test.ts
@@ -343,7 +343,7 @@ describe("buildSearchDb", () => {
                 record({
                     partNumber: "N/A",
                     name: "Spacer",
-                    canonicalConfiguration: {}
+                    canonicalConfiguration: ""
                 })
             ]
         });
@@ -361,7 +361,7 @@ describe("buildSearchDb", () => {
                     partNumber: "WCP-1025",
                     name: "Spacer",
                     vendor: "WestCoast Products",
-                    canonicalConfiguration: {}
+                    canonicalConfiguration: ""
                 })
             ]
         });
diff --git a/src/backend/features/thumbnails/routes.test.ts b/src/backend/features/thumbnails/routes.test.ts
index 485deac1..3c79624c 100644
--- a/src/backend/features/thumbnails/routes.test.ts
+++ b/src/backend/features/thumbnails/routes.test.ts
@@ -5,7 +5,7 @@ import { ThumbnailSize } from "./types";
 import { THUMBNAIL_FALLBACK_HEADER, thumbnailKey, thumbnailUrl } from "./keys";
 import {
     DEFAULT_CANONICAL_CONFIGURATION,
-    canonicalConfigurationKey
+    toConfigurationKey
 } from "../configurations/canonical";
 import { uploadConfigurationThumbnails } from "./store";
 import type { OnshapeApi } from "../../lib/onshape/client";
@@ -90,7 +90,7 @@ describe("thumbnail serving", () => {
                 elementId,
                 MICROVERSION,
                 SIZE,
-                canonicalConfigurationKey(CANONICAL_CONFIGURATION)
+                await toConfigurationKey(CANONICAL_CONFIGURATION)
             ),
             "config-bytes"
         );
@@ -154,7 +154,7 @@ describe("thumbnail serving", () => {
                 elementId,
                 MICROVERSION,
                 SIZE,
-                canonicalConfigurationKey(CANONICAL_CONFIGURATION)
+                await toConfigurationKey(CANONICAL_CONFIGURATION)
             ),
             "configured-bytes"
         );
@@ -365,12 +365,15 @@ describe("uploadConfigurationThumbnails", () => {
             CANONICAL_CONFIGURATION
         );
 
+        const configurationKey = await toConfigurationKey(
+            CANONICAL_CONFIGURATION
+        );
         const key = (size: ThumbnailSize) =>
             thumbnailKey(
                 elementPath.elementId,
                 MICROVERSION,
                 size,
-                canonicalConfigurationKey(CANONICAL_CONFIGURATION)
+                configurationKey
             );
         expect(await env.BLOB.head(key(ThumbnailSize.SMALL))).not.toBeNull();
         expect(await env.BLOB.head(key(ThumbnailSize.LARGE))).not.toBeNull();
@@ -386,7 +389,7 @@ describe("uploadConfigurationThumbnails", () => {
                     storedPath.elementId,
                     MICROVERSION,
                     size,
-                    canonicalConfigurationKey(CANONICAL_CONFIGURATION)
+                    await toConfigurationKey(CANONICAL_CONFIGURATION)
                 ),
                 "bytes"
             );
@@ -412,7 +415,7 @@ describe("uploadConfigurationThumbnails", () => {
                 partialPath.elementId,
                 MICROVERSION,
                 ThumbnailSize.SMALL,
-                canonicalConfigurationKey(CANONICAL_CONFIGURATION)
+                await toConfigurationKey(CANONICAL_CONFIGURATION)
             ),
             "bytes"
         );
diff --git a/src/backend/features/thumbnails/routes.ts b/src/backend/features/thumbnails/routes.ts
index af207822..8b38ef39 100644
--- a/src/backend/features/thumbnails/routes.ts
+++ b/src/backend/features/thumbnails/routes.ts
@@ -8,8 +8,7 @@ import { ThumbnailSize } from "./types";
 import { THUMBNAIL_FALLBACK_HEADER, thumbnailKey } from "./keys";
 import {
     DEFAULT_CANONICAL_CONFIGURATION,
-    DEFAULT_CONFIGURATION_KEY,
-    canonicalConfigurationKey
+    toConfigurationKey
 } from "../configurations/canonical";
 
 import type { AppContext } from "../../lib/context";
@@ -57,7 +56,7 @@ thumbnailRoutes.get(
             renderThumbnail,
             insertableId
         } = c.req.valid("query");
-        const configurationKey = canonicalConfigurationKey(
+        const configurationKey = await toConfigurationKey(
             canonicalConfiguration
         );
 
@@ -73,7 +72,7 @@ thumbnailRoutes.get(
             );
         }
 
-        if (configurationKey === DEFAULT_CONFIGURATION_KEY) {
+        if (canonicalConfiguration === DEFAULT_CANONICAL_CONFIGURATION) {
             return notRenderedYet();
         }
 
diff --git a/src/backend/features/thumbnails/store.ts b/src/backend/features/thumbnails/store.ts
index 3afc53a6..bdffcd37 100644
--- a/src/backend/features/thumbnails/store.ts
+++ b/src/backend/features/thumbnails/store.ts
@@ -20,7 +20,7 @@ import { ThumbnailSize, ThumbnailUrls } from "./types";
 import { thumbnailKey, thumbnailUrl } from "./keys";
 import {
     DEFAULT_CANONICAL_CONFIGURATION,
-    canonicalConfigurationKey
+    toConfigurationKey
 } from "../configurations/canonical";
 import { OnshapeApi } from "../../lib/onshape/client";
 
@@ -120,7 +120,7 @@ export async function uploadConfigurationThumbnails(
     microversionId: string,
     canonicalConfiguration: string
 ): Promise<void> {
-    const configurationKey = canonicalConfigurationKey(canonicalConfiguration);
+    const configurationKey = await toConfigurationKey(canonicalConfiguration);
     const { elementId } = elementPath;
     const targets = [ThumbnailSize.SMALL, ThumbnailSize.LARGE].map((size) => ({
         size,
diff --git a/src/backend/lib/onshape/endpoints/metadata.ts b/src/backend/lib/onshape/endpoints/metadata.ts
index ac798708..64995cfb 100644
--- a/src/backend/lib/onshape/endpoints/metadata.ts
+++ b/src/backend/lib/onshape/endpoints/metadata.ts
@@ -1,7 +1,7 @@
 import { OnshapeApi } from "../client";
 import { ElementPath, toElementApiPath } from "../path";
 import { apiPath } from "../api-path";
-import { encodeConfigurationForQuery } from "../../../features/configurations/utils";
+import { encodeConfiguration } from "../../../features/configurations/utils";
 import { ParameterValues } from "../../../features/configurations/models";
 import type { OnshapeMetadataObject } from "../types";
 
@@ -11,7 +11,7 @@ export function getElementMetadata(
     elementPath: ElementPath,
     configuration: ParameterValues
 ): Promise<OnshapeMetadataObject> {
-    const encoded = encodeConfigurationForQuery(configuration);
+    const encoded = encodeConfiguration(configuration);
     // Computed properties are expensive and unused, and indexing probes this
     // once per configuration.
     const query: Record<string, string> = {
diff --git a/src/backend/lib/onshape/endpoints/parts.ts b/src/backend/lib/onshape/endpoints/parts.ts
index ac6dda7c..27ef6629 100644
--- a/src/backend/lib/onshape/endpoints/parts.ts
+++ b/src/backend/lib/onshape/endpoints/parts.ts
@@ -1,7 +1,7 @@
 import { OnshapeApi } from "../client";
 import { ElementPath, toElementApiPath } from "../path";
 import { apiPath } from "../api-path";
-import { encodeConfigurationForQuery } from "../../../features/configurations/utils";
+import { encodeConfiguration } from "../../../features/configurations/utils";
 import { ParameterValues } from "../../../features/configurations/models";
 import type { OnshapeAssemblyDefinition, OnshapePart } from "../types";
 
@@ -12,7 +12,7 @@ import type { OnshapeAssemblyDefinition, OnshapePart } from "../types";
 function configurationQuery(
     configuration: ParameterValues
 ): Record<string, string> {
-    const encoded = encodeConfigurationForQuery(configuration);
+    const encoded = encodeConfiguration(configuration);
     return encoded ? { configuration: encoded } : {};
 }
 
diff --git a/src/frontend/features/favorites/components/favorite-button.tsx b/src/frontend/features/favorites/components/favorite-button.tsx
index 013c9c40..b650fdc6 100644
--- a/src/frontend/features/favorites/components/favorite-button.tsx
+++ b/src/frontend/features/favorites/components/favorite-button.tsx
@@ -9,7 +9,6 @@ import type {
     FavoritesData
 } from "@backend/features/favorites/contract";
 import type { InsertableOut } from "@backend/features/library/contract";
-import type { ParameterValues } from "@backend/features/configurations/models";
 import { LibraryId } from "@backend/features/library/library-id";
 import { queryClient } from "../../../lib/query-client";
 import { appError, handleAppError } from "../../../lib/errors";
@@ -32,8 +31,8 @@ interface UpdateFavoritesArgs {
     operation: Operation;
     insertable: InsertableOut;
     favoriteId: string;
-    /** Canonical, as the favorite menu stores it; absent means the default. */
-    defaultConfiguration?: ParameterValues;
+    /** The selection to store, canonical; absent means the element default. */
+    canonicalConfiguration?: string;
 }
 
 function updateFavorites(
@@ -41,14 +40,14 @@ function updateFavorites(
     args: UpdateFavoritesArgs,
     libraryId: LibraryId
 ): FavoritesData | undefined {
-    const { favoriteId, defaultConfiguration } = args;
+    const { favoriteId, canonicalConfiguration } = args;
     const insertableId = args.insertable.id;
     if (args.operation === Operation.ADD) {
         const fav: Favorite = {
             id: favoriteId,
             insertableId,
             libraryId,
-            defaultConfiguration
+            canonicalConfiguration
         };
         data.favorites[favoriteId] = fav;
         data.favoriteOrder.push(favoriteId);
@@ -81,7 +80,7 @@ function useUpdateFavoritesMutation() {
                         id: args.favoriteId
                     },
                     body: {
-                        defaultConfiguration: args.defaultConfiguration
+                        canonicalConfiguration: args.canonicalConfiguration
                     }
                 });
             } else {
@@ -115,10 +114,10 @@ interface FavoriteButtonProps {
     favorite: Favorite | undefined;
     insertable: InsertableOut;
     /**
-     * The configuration the new favorite opens with: what the caller is
-     * showing, rather than the element's own default.
+     * The selection the new favorite opens with — what the caller is showing,
+     * rather than the element's own default — canonical, as it is stored.
      */
-    defaultConfiguration?: ParameterValues;
+    canonicalConfiguration?: string;
     /**
      * Sizes the button to sit beside a full-height button rather than in a card row.
      * @default false
@@ -127,7 +126,7 @@ interface FavoriteButtonProps {
 }
 
 export function FavoriteButton(props: FavoriteButtonProps): ReactNode {
-    const { favorite, insertable, defaultConfiguration, large } = props;
+    const { favorite, insertable, canonicalConfiguration, large } = props;
     const isFavorite = favorite !== undefined;
 
     const [isHovered, setIsHovered] = useState(false);
@@ -159,7 +158,7 @@ export function FavoriteButton(props: FavoriteButtonProps): ReactNode {
                     operation,
                     insertable,
                     favoriteId,
-                    defaultConfiguration
+                    canonicalConfiguration
                 });
             }}
             title={operation === Operation.ADD ? "Favorite" : "Unfavorite"}
@@ -174,15 +173,15 @@ export function FavoriteButton(props: FavoriteButtonProps): ReactNode {
 interface FavoriteInsertableItemProps {
     favorite: Favorite | undefined;
     insertable: InsertableOut;
-    /** The configuration the new favorite opens with. */
-    defaultConfiguration?: ParameterValues;
+    /** The selection the new favorite opens with, canonical. */
+    canonicalConfiguration?: string;
 }
 
 /**
  * A menu item which can be used to favorite or unfavorite an insertable.
  */
 export function FavoriteInsertableItem(props: FavoriteInsertableItemProps) {
-    const { favorite, insertable, defaultConfiguration } = props;
+    const { favorite, insertable, canonicalConfiguration } = props;
     const isFavorite = favorite !== undefined;
     const operation = isFavorite ? Operation.REMOVE : Operation.ADD;
     const mutation = useUpdateFavoritesMutation();
@@ -203,7 +202,7 @@ export function FavoriteInsertableItem(props: FavoriteInsertableItemProps) {
                     operation,
                     insertable,
                     favoriteId,
-                    defaultConfiguration
+                    canonicalConfiguration
                 });
             }}
         >
diff --git a/src/frontend/features/favorites/components/favorite-card.tsx b/src/frontend/features/favorites/components/favorite-card.tsx
index a622410d..68386fba 100644
--- a/src/frontend/features/favorites/components/favorite-card.tsx
+++ b/src/frontend/features/favorites/components/favorite-card.tsx
@@ -1,4 +1,5 @@
-import { encodeCanonicalConfiguration } from "@backend/features/configurations/canonical";
+import { DEFAULT_CANONICAL_CONFIGURATION } from "@backend/features/configurations/canonical";
+import { decodeConfiguration } from "@backend/features/configurations/utils";
 import { ReactNode } from "react";
 import { Favorite } from "@backend/features/favorites/contract";
 import { InsertableOut } from "@backend/features/library/contract";
@@ -58,6 +59,12 @@ export function FavoriteCard(props: FavoriteCardProps): ReactNode {
         return null;
     }
 
+    // What the favorite inserts and prefills the menu with; the canonical form
+    // itself is what names its thumbnail.
+    const favoriteConfiguration = favorite.canonicalConfiguration
+        ? decodeConfiguration(favorite.canonicalConfiguration)
+        : undefined;
+
     return (
         <ItemRow
             onClick={() => {
@@ -67,7 +74,7 @@ export function FavoriteCard(props: FavoriteCardProps): ReactNode {
                 }
                 openInsertMenu({
                     insertable,
-                    defaultConfiguration: favorite.defaultConfiguration
+                    defaultConfiguration: favoriteConfiguration
                 });
             }}
             left={
@@ -82,9 +89,8 @@ export function FavoriteCard(props: FavoriteCardProps): ReactNode {
                                 elementId: insertable.elementId,
                                 microversionId: insertable.microversionId,
                                 canonicalConfiguration:
-                                    encodeCanonicalConfiguration(
-                                        favorite.defaultConfiguration ?? {}
-                                    ),
+                                    favorite.canonicalConfiguration ??
+                                    DEFAULT_CANONICAL_CONFIGURATION,
                                 renderThumbnail: true,
                                 insertableId: insertable.id
                             }}
@@ -113,6 +119,11 @@ interface FavoriteMenuItemsProps {
 
 function FavoriteMenuItems(props: FavoriteMenuItemsProps): ReactNode {
     const { insertable, favorite } = props;
+    // What the favorite inserts and prefills the menu with; the canonical form
+    // itself is what names its thumbnail.
+    const favoriteConfiguration = favorite.canonicalConfiguration
+        ? decodeConfiguration(favorite.canonicalConfiguration)
+        : undefined;
 
     const uiState = useGetUiState();
     const isConnected = useIsConnectedToOnshape();
@@ -126,7 +137,7 @@ function FavoriteMenuItems(props: FavoriteMenuItemsProps): ReactNode {
                 <>
                     <QuickInsertItems
                         insertable={insertable}
-                        configuration={favorite.defaultConfiguration}
+                        configuration={favoriteConfiguration}
                         isFavorite
                     />
                     <Menu.Divider />
@@ -142,7 +153,7 @@ function FavoriteMenuItems(props: FavoriteMenuItemsProps): ReactNode {
                     openFavoriteMenu({
                         favoriteId: favorite.id,
                         insertableName: insertable.name,
-                        defaultConfiguration: favorite.defaultConfiguration
+                        canonicalConfiguration: favorite.canonicalConfiguration
                     });
                 }}
             >
diff --git a/src/frontend/features/favorites/components/favorite-menu.tsx b/src/frontend/features/favorites/components/favorite-menu.tsx
index da68476e..d6c22f65 100644
--- a/src/frontend/features/favorites/components/favorite-menu.tsx
+++ b/src/frontend/features/favorites/components/favorite-menu.tsx
@@ -17,7 +17,7 @@ import {
     ParameterValues,
     SearchRecord
 } from "@backend/features/configurations/models";
-import { encodeCanonicalConfiguration } from "@backend/features/configurations/canonical";
+import { decodeConfiguration } from "@backend/features/configurations/utils";
 import { useFavoritesQuery } from "../queries";
 import { useLibraryQuery } from "../../library/queries";
 import { favoritesQueryKey } from "../../../lib/query-keys";
@@ -30,13 +30,14 @@ interface FavoriteMenuContentProps {
     favoriteId: string;
     /** The modal this renders in, so the header can track the selection. */
     modalId: string;
-    defaultConfiguration?: ParameterValues;
+    /** What the favorite opens with today, canonical as it is stored. */
+    canonicalConfiguration?: string;
 }
 
 export function FavoriteMenuContent(
     props: FavoriteMenuContentProps
 ): ReactNode {
-    const { favoriteId, modalId, defaultConfiguration } = props;
+    const { favoriteId, modalId, canonicalConfiguration } = props;
 
     const libraryId = useLibraryId();
     const insertables = useLibraryQuery().data?.insertables;
@@ -45,12 +46,14 @@ export function FavoriteMenuContent(
 
     const [configuration, setConfiguration] = useState<
         ParameterValues | undefined
-    >(defaultConfiguration);
-    // Reported by ConfigurationWrapper; addresses this selection's thumbnail.
+    >(() =>
+        canonicalConfiguration === undefined
+            ? undefined
+            : decodeConfiguration(canonicalConfiguration)
+    );
+    // Reported by ConfigurationWrapper; names this selection's thumbnail.
     // Undefined until it reports, which is what gates saving.
-    const [canonicalConfiguration, setCanonicalConfiguration] = useState<
-        ParameterValues | undefined
-    >(undefined);
+    const [selected, setSelected] = useState<string | undefined>(undefined);
     const [record, setRecord] = useState<SearchRecord | undefined>(undefined);
 
     const favorite = favoritesData?.favorites[favoriteId];
@@ -76,16 +79,14 @@ export function FavoriteMenuContent(
         });
     }, [modalId, insertableName, record]);
 
-    const setDefaultConfigurationMutation = useMutation({
-        mutationKey: ["set-default-configuration"],
+    const setCanonicalConfigurationMutation = useMutation({
+        mutationKey: ["set-canonical-configuration"],
         mutationFn: async () => {
-            // Canonical, so it addresses the thumbnail the favorites row asks
-            // for; Onshape applies defaults for what it omits.
+            // Canonical, so it names the thumbnail the favorites row asks for;
+            // Onshape applies defaults for what it omits.
             return apiPost(
-                "/default-configuration" + toFavoritePath(favoriteId),
-                {
-                    body: { defaultConfiguration: canonicalConfiguration }
-                }
+                "/canonical-configuration" + toFavoritePath(favoriteId),
+                { body: { canonicalConfiguration: selected } }
             );
         },
 
@@ -96,7 +97,7 @@ export function FavoriteMenuContent(
                 queryKey,
                 getQueryUpdater((data: FavoritesData) => {
                     const fav = data.favorites[favoriteId];
-                    if (fav) fav.defaultConfiguration = canonicalConfiguration;
+                    if (fav) fav.canonicalConfiguration = selected;
                     return data;
                 })
             );
@@ -134,12 +135,10 @@ export function FavoriteMenuContent(
                     insertableId={insertable.id}
                     microversionId={insertable.microversionId}
                     largeThumbnailUrl={insertable.largeThumbnailUrl}
-                    canonicalConfiguration={encodeCanonicalConfiguration(
-                        canonicalConfiguration ?? {}
-                    )}
+                    canonicalConfiguration={selected ?? ""}
                 />
                 <ConfigurationWrapper
-                    onCanonicalConfiguration={setCanonicalConfiguration}
+                    onCanonicalConfiguration={setSelected}
                     onRecord={setRecord}
                     configuration={configuration}
                     setConfiguration={setConfiguration}
@@ -151,11 +150,11 @@ export function FavoriteMenuContent(
                 <Button
                     ml="auto"
                     leftSection={<FloppyDiskIcon size={IconSize.SMALL} />}
-                    // Saving before the wrapper reports would store {}, wiping
-                    // the favorite's configuration.
-                    disabled={!canonicalConfiguration}
+                    // Saving before the wrapper reports would store nothing,
+                    // wiping the favorite's selection.
+                    disabled={selected === undefined}
                     onClick={() => {
-                        setDefaultConfigurationMutation.mutate();
+                        setCanonicalConfigurationMutation.mutate();
                         modals.closeAll();
                     }}
                 >
diff --git a/src/frontend/features/favorites/open-favorite-menu.tsx b/src/frontend/features/favorites/open-favorite-menu.tsx
index a0e86889..5480aae2 100644
--- a/src/frontend/features/favorites/open-favorite-menu.tsx
+++ b/src/frontend/features/favorites/open-favorite-menu.tsx
@@ -1,5 +1,4 @@
 import { openAppModal } from "../../components/open-app-modal";
-import { type ParameterValues } from "@backend/features/configurations/models";
 import { FavoriteMenuContent } from "./components/favorite-menu";
 import { MenuTitle } from "../../components/app-title";
 import { FavoriteIcon } from "./components/favorite-button";
@@ -8,11 +7,12 @@ import { IconSize } from "../../lib/style-constants";
 interface OpenFavoriteMenuProps {
     favoriteId: string;
     insertableName: string;
-    defaultConfiguration?: ParameterValues;
+    /** What the favorite opens with today, canonical as it is stored. */
+    canonicalConfiguration?: string;
 }
 
 export function openFavoriteMenu(props: OpenFavoriteMenuProps) {
-    const { favoriteId, insertableName, defaultConfiguration } = props;
+    const { favoriteId, insertableName, canonicalConfiguration } = props;
     // Minted here so the content can update the header as the selection changes.
     const modalId = crypto.randomUUID();
     openAppModal({
@@ -28,7 +28,7 @@ export function openFavoriteMenu(props: OpenFavoriteMenuProps) {
             <FavoriteMenuContent
                 favoriteId={favoriteId}
                 modalId={modalId}
-                defaultConfiguration={defaultConfiguration}
+                canonicalConfiguration={canonicalConfiguration}
             />
         )
     });
diff --git a/src/frontend/features/insert/components/configurations.tsx b/src/frontend/features/insert/components/configurations.tsx
index 97addde9..bff893e1 100644
--- a/src/frontend/features/insert/components/configurations.tsx
+++ b/src/frontend/features/insert/components/configurations.tsx
@@ -60,9 +60,7 @@ interface ConfigurationWrapperProps {
      * Reported here because only this component has the parameters and units
      * canonicalizing needs.
      */
-    onCanonicalConfiguration?: (
-        canonicalConfiguration: ParameterValues
-    ) => void;
+    onCanonicalConfiguration?: (canonicalConfiguration: string) => void;
     /** Reports the record the selection produces, for the menu's header. */
     onRecord?: (record: SearchRecord | undefined) => void;
 }
@@ -109,22 +107,28 @@ export function ConfigurationWrapper(props: ConfigurationWrapperProps) {
     }, [query.data, configuration, setConfiguration]);
 
     const parameters = query.data?.parameters;
+    const records = query.data?.records;
     useEffect(() => {
         if (!parameters || !configuration) {
             return;
         }
-        onCanonicalConfiguration?.(
-            canonicalizeConfiguration(configuration, parameters)
+        const canonicalConfiguration = canonicalizeConfiguration(
+            configuration,
+            parameters
         );
-    }, [parameters, configuration, onCanonicalConfiguration]);
-
-    const records = query.data?.records;
-    useEffect(() => {
-        if (!records || !configuration) {
-            return;
+        onCanonicalConfiguration?.(canonicalConfiguration);
+        if (records) {
+            onRecord?.(
+                findRecordForConfiguration(canonicalConfiguration, records)
+            );
         }
-        onRecord?.(findRecordForConfiguration(configuration, records));
-    }, [records, configuration, onRecord]);
+    }, [
+        parameters,
+        records,
+        configuration,
+        onCanonicalConfiguration,
+        onRecord
+    ]);
 
     // isLoading, not isPending: the units query sits disabled (and so forever
     // pending) when there is no document to ask.
diff --git a/src/frontend/features/insert/components/insert-menu.tsx b/src/frontend/features/insert/components/insert-menu.tsx
index 5dde47e8..3b1874ac 100644
--- a/src/frontend/features/insert/components/insert-menu.tsx
+++ b/src/frontend/features/insert/components/insert-menu.tsx
@@ -22,7 +22,7 @@ import {
     ParameterValues,
     SearchRecord
 } from "@backend/features/configurations/models";
-import { encodeCanonicalConfiguration } from "@backend/features/configurations/canonical";
+import { DEFAULT_CANONICAL_CONFIGURATION } from "@backend/features/configurations/canonical";
 import { useFavoritesQuery } from "../../favorites/queries";
 import { useGetUiState, useSetUiState } from "../../../lib/ui-state";
 import { notifications } from "@mantine/notifications";
@@ -50,20 +50,17 @@ export function InsertMenuContent(props: InsertMenuContentProps): ReactNode {
     >(props.defaultConfiguration);
     // Reported by ConfigurationWrapper, which has the parameters and units the
     // canonical form needs. Empty means the element's default configuration.
-    const [canonicalConfiguration, setCanonicalConfiguration] =
-        useState<ParameterValues>({});
+    const [canonicalConfiguration, setCanonicalConfiguration] = useState(
+        DEFAULT_CANONICAL_CONFIGURATION
+    );
     // The first report is what the menu opened with, and so what a right-click
     // on the card would have inserted. Absent until the parameters load.
-    const [openedWithConfiguration, setOpenedWithConfiguration] =
-        useState<ParameterValues>();
+    const [openedWith, setOpenedWith] = useState<string>();
 
-    const handleCanonicalConfiguration = useCallback(
-        (canonical: ParameterValues) => {
-            setCanonicalConfiguration(canonical);
-            setOpenedWithConfiguration((opened) => opened ?? canonical);
-        },
-        []
-    );
+    const handleCanonicalConfiguration = useCallback((canonical: string) => {
+        setCanonicalConfiguration(canonical);
+        setOpenedWith((opened) => opened ?? canonical);
+    }, []);
     const [record, setRecord] = useState<SearchRecord | undefined>(undefined);
     // A part with no parameters has one record — the element's own part data —
     // which no ConfigurationWrapper is mounted to report, but the title wants.
@@ -123,9 +120,7 @@ export function InsertMenuContent(props: InsertMenuContentProps): ReactNode {
                     insertableId={insertable.id}
                     microversionId={insertable.microversionId}
                     largeThumbnailUrl={insertable.largeThumbnailUrl}
-                    canonicalConfiguration={encodeCanonicalConfiguration(
-                        canonicalConfiguration
-                    )}
+                    canonicalConfiguration={canonicalConfiguration}
                 />
                 {parameters}
             </AppModalBody>
@@ -135,7 +130,7 @@ export function InsertMenuContent(props: InsertMenuContentProps): ReactNode {
                         <FavoriteButton
                             favorite={favorite}
                             insertable={insertable}
-                            defaultConfiguration={canonicalConfiguration}
+                            canonicalConfiguration={canonicalConfiguration}
                             large
                         />
                     </RequireSignIn>
@@ -153,10 +148,8 @@ export function InsertMenuContent(props: InsertMenuContentProps): ReactNode {
                     insertable={insertable}
                     configuration={configuration}
                     isUnchanged={
-                        encodeCanonicalConfiguration(canonicalConfiguration) ===
-                        encodeCanonicalConfiguration(
-                            openedWithConfiguration ?? {}
-                        )
+                        canonicalConfiguration ===
+                        (openedWith ?? DEFAULT_CANONICAL_CONFIGURATION)
                     }
                     isFavorite={favorite !== undefined}
                     openedAt={openedAt}
diff --git a/src/frontend/features/library/components/insertable-card.tsx b/src/frontend/features/library/components/insertable-card.tsx
index 1fd22d25..09a4a66a 100644
--- a/src/frontend/features/library/components/insertable-card.tsx
+++ b/src/frontend/features/library/components/insertable-card.tsx
@@ -1,4 +1,5 @@
-import { encodeCanonicalConfiguration } from "@backend/features/configurations/canonical";
+import { DEFAULT_CANONICAL_CONFIGURATION } from "@backend/features/configurations/canonical";
+import { decodeConfiguration } from "@backend/features/configurations/utils";
 import { Menu } from "@mantine/core";
 import { PropsWithChildren, ReactNode } from "react";
 import {
@@ -53,6 +54,11 @@ export function InsertableCard(props: InsertableCardProps): ReactNode {
     }
 
     const favorite = getFavoriteForInsertable(favorites, insertable.id);
+    // What the hit names, for inserting and for prefilling the menu; the
+    // canonical form itself is what names its thumbnail.
+    const hitConfiguration = searchHit?.canonicalConfiguration
+        ? decodeConfiguration(searchHit.canonicalConfiguration)
+        : undefined;
 
     return (
         <ItemRow
@@ -68,7 +74,7 @@ export function InsertableCard(props: InsertableCardProps): ReactNode {
 
                 openInsertMenu({
                     insertable,
-                    defaultConfiguration: searchHit?.canonicalConfiguration
+                    defaultConfiguration: hitConfiguration
                 });
             }}
             left={
@@ -84,9 +90,8 @@ export function InsertableCard(props: InsertableCardProps): ReactNode {
                                 elementId: insertable.elementId,
                                 microversionId: insertable.microversionId,
                                 canonicalConfiguration:
-                                    encodeCanonicalConfiguration(
-                                        searchHit?.canonicalConfiguration ?? {}
-                                    ),
+                                    searchHit?.canonicalConfiguration ??
+                                    DEFAULT_CANONICAL_CONFIGURATION,
                                 // A cold search would otherwise start a render
                                 // per row.
                                 renderThumbnail: false
@@ -107,7 +112,9 @@ export function InsertableCard(props: InsertableCardProps): ReactNode {
                     <FavoriteButton
                         favorite={favorite}
                         insertable={insertable}
-                        defaultConfiguration={searchHit?.canonicalConfiguration}
+                        canonicalConfiguration={
+                            searchHit?.canonicalConfiguration
+                        }
                     />
                 </RequireSignIn>
             }
@@ -115,7 +122,7 @@ export function InsertableCard(props: InsertableCardProps): ReactNode {
                 <InsertableMenuItems
                     favorite={favorite}
                     insertable={insertable}
-                    configuration={searchHit?.canonicalConfiguration}
+                    configuration={hitConfiguration}
                 />
             }
         />
@@ -129,11 +136,8 @@ interface InsertableMenuItemsProps {
     /** What quick insert inserts and "Open document" opens: a search hit's
      * configuration on a card, the selected one inside the insert menu. */
     configuration?: ParameterValues;
-    /**
-     * What favoriting stores, where the caller knows the canonical spelling of
-     * the selection. Defaults to `configuration`, which a card's already is.
-     */
-    canonicalConfiguration?: ParameterValues;
+    /** What favoriting stores: the same selection, in its canonical spelling. */
+    canonicalConfiguration?: string;
 }
 
 export function InsertableMenuItems(
@@ -164,9 +168,7 @@ export function InsertableMenuItems(
                 <FavoriteInsertableItem
                     favorite={favorite}
                     insertable={insertable}
-                    defaultConfiguration={
-                        canonicalConfiguration ?? configuration
-                    }
+                    canonicalConfiguration={canonicalConfiguration}
                 />
                 <Menu.Divider />
             </RequireSignIn>
diff --git a/src/frontend/features/search/search.test.ts b/src/frontend/features/search/search.test.ts
index 8826e4c7..721e2b1d 100644
--- a/src/frontend/features/search/search.test.ts
+++ b/src/frontend/features/search/search.test.ts
@@ -7,15 +7,12 @@ import {
 import { doSearch, type Position } from "./search";
 import { LibraryOut } from "@backend/features/library/contract";
 import { ElementType } from "@backend/lib/onshape/element-type";
-import {
-    ConfigurationRecord,
-    ParameterValues
-} from "@backend/features/configurations/models";
+import { ConfigurationRecord } from "@backend/features/configurations/models";
 import { configurationRecord } from "../../../__test_utils__/configuration-fixtures";
 
 const record = (
     partNumber: string | undefined,
-    canonicalConfiguration: ParameterValues,
+    canonicalConfiguration: string,
     name?: string
 ) => configurationRecord({ partNumber, canonicalConfiguration, name });
 
@@ -64,8 +61,8 @@ function library(name = "Bracket"): LibraryOut {
 describe("doSearch part-number matching", () => {
     const recordsMap: Record<string, ConfigurationRecord[]> = {
         i1: [
-            record("217-2600", { length: "short" }),
-            record("217-2601", { length: "long" })
+            record("217-2600", "length=short"),
+            record("217-2601", "length=long")
         ]
     };
 
@@ -74,7 +71,7 @@ describe("doSearch part-number matching", () => {
         const { hits } = search(searchDb, "217-2601");
         expect(hits).toHaveLength(1);
         expect(hits[0].id).toBe("i1");
-        expect(hits[0].canonicalConfiguration).toEqual({ length: "long" });
+        expect(hits[0].canonicalConfiguration).toBe("length=long");
     });
 
     // "Bracket 217" matches the part-number field on "217", but no single record
@@ -91,7 +88,7 @@ describe("doSearch part-number matching", () => {
         const { hits } = search(searchDb, "Bracket");
         expect(hits).toHaveLength(1);
         // The insertable's own name matched, so the row shows its default config.
-        expect(hits[0].canonicalConfiguration).toEqual({ length: "short" });
+        expect(hits[0].canonicalConfiguration).toBe("length=short");
         expect(hits[0].partNumber).toBe("217-2600");
     });
 
@@ -100,13 +97,13 @@ describe("doSearch part-number matching", () => {
     it("resolves a shared part number to the latest (first-listed) configuration", () => {
         const searchDb = buildSearchDb(library(), {
             i1: [
-                record("217-2600", { version: "latest" }),
-                record("217-2600", { version: "older" })
+                record("217-2600", "version=latest"),
+                record("217-2600", "version=older")
             ]
         });
         const { hits } = search(searchDb, "217-2600");
         expect(hits).toHaveLength(1);
-        expect(hits[0].canonicalConfiguration).toEqual({ version: "latest" });
+        expect(hits[0].canonicalConfiguration).toBe("version=latest");
     });
 });
 
@@ -115,31 +112,31 @@ describe("doSearch part-number matching", () => {
 describe("doSearch configuration matching", () => {
     const searchDb = buildSearchDb(library("MAXSpline Gear"), {
         i1: [
-            record("WCP-1234", {}, "12T MAXSpline Gear"),
-            record("WCP-1235", { teeth: "24" }, "24T MAXSpline Gear"),
-            record("WCP-1236", { teeth: "36" }, "36T MAXSpline Gear")
+            record("WCP-1234", "", "12T MAXSpline Gear"),
+            record("WCP-1235", "teeth=24", "24T MAXSpline Gear"),
+            record("WCP-1236", "teeth=36", "36T MAXSpline Gear")
         ]
     });
 
     it("picks the configuration a term of the query names", () => {
         const { hits } = search(searchDb, "maxspline 24t");
-        expect(hits[0].canonicalConfiguration).toEqual({ teeth: "24" });
+        expect(hits[0].canonicalConfiguration).toBe("teeth=24");
         expect(hits[0].partNumber).toBe("WCP-1235");
     });
 
     it("picks it from the distinguishing term alone", () => {
         const { hits } = search(searchDb, "36t");
-        expect(hits[0].canonicalConfiguration).toEqual({ teeth: "36" });
+        expect(hits[0].canonicalConfiguration).toBe("teeth=36");
     });
 
     it("keeps the default when no term distinguishes a configuration", () => {
         const { hits } = search(searchDb, "maxspline gear");
-        expect(hits[0].canonicalConfiguration).toEqual({});
+        expect(hits[0].canonicalConfiguration).toBe("");
     });
 
     it("lets a part number typed in full outrank a looser name match", () => {
         const { hits } = search(searchDb, "WCP-1236");
-        expect(hits[0].canonicalConfiguration).toEqual({ teeth: "36" });
+        expect(hits[0].canonicalConfiguration).toBe("teeth=36");
     });
 });
 
@@ -195,9 +192,9 @@ describe("doSearch inch sizes", () => {
 describe("doSearch size matching", () => {
     const searchDb = buildSearchDb(library("Hex Standoff"), {
         i1: [
-            record("TTB-0016-025", { length: "0.25 in" }, '0.25" Hex Standoff'),
-            record("TTB-0016-050", { length: "0.5 in" }, '0.5" Hex Standoff'),
-            record("TTB-0016-100", { length: "1 in" }, '1" Hex Standoff')
+            record("TTB-0016-025", "length=0.25 in", '0.25" Hex Standoff'),
+            record("TTB-0016-050", "length=0.5 in", '0.5" Hex Standoff'),
+            record("TTB-0016-100", "length=1 in", '1" Hex Standoff')
         ]
     });
 
@@ -206,7 +203,7 @@ describe("doSearch size matching", () => {
         (query) => {
             const { hits } = search(searchDb, query);
             expect(hits[0].partName).toBe('1" Hex Standoff');
-            expect(hits[0].canonicalConfiguration).toEqual({ length: "1 in" });
+            expect(hits[0].canonicalConfiguration).toBe("length=1 in");
         }
     );
 
@@ -226,7 +223,7 @@ describe("doSearch size matching", () => {
 // part is stored as both spellings and either one finds it.
 describe("doSearch measurements", () => {
     const searchDb = buildSearchDb(library("MotionX Hub"), {
-        i1: [record("WCP-1", {}, ".196 ID x SplineXL OD")]
+        i1: [record("WCP-1", "", ".196 ID x SplineXL OD")]
     });
 
     it.each([".196", ".19", ".2", "0.19"])("finds the part by %s", (query) => {
@@ -237,7 +234,7 @@ describe("doSearch measurements", () => {
 // Results arrive as the caller types, and the first keystroke is one letter.
 describe("doSearch single letters", () => {
     const searchDb = buildSearchDb(library("Hex Standoff"), {
-        i1: [record("TTB-0016", {}, "Standoff")]
+        i1: [record("TTB-0016", "", "Standoff")]
     });
 
     it.each(["h", "s", "t"])("answers a typed %s", (query) => {
@@ -250,8 +247,8 @@ describe("doSearch single letters", () => {
 describe("doSearch part numbers", () => {
     const searchDb = buildSearchDb(library("Hex Standoff"), {
         i1: [
-            record("WCP-1025", {}, "Standoff"),
-            record("TTB-0016-5/32", { size: "small" }, "Small Standoff")
+            record("WCP-1025", "", "Standoff"),
+            record("TTB-0016-5/32", "size=small", "Small Standoff")
         ]
     });
 
@@ -282,7 +279,7 @@ describe("doSearch part numbers", () => {
     // than every part an admin left it on.
     it("returns nothing for the placeholder", () => {
         const withPlaceholders = buildSearchDb(library("Spacer"), {
-            i1: [record("N/A", {}, "Spacer")]
+            i1: [record("N/A", "", "Spacer")]
         });
         expect(search(withPlaceholders, "n/a").hits).toEqual([]);
     });
@@ -335,7 +332,7 @@ describe("doSearch highlighting", () => {
     // the title, so the query has to be underlined there too.
     describe("of the matched record", () => {
         const recordsMap: Record<string, ConfigurationRecord[]> = {
-            i1: [record("217-2600", { length: "short" }, "Long Bearing")]
+            i1: [record("217-2600", "length=short", "Long Bearing")]
         };
 
         function hitFor(query: string) {
@@ -359,7 +356,7 @@ describe("doSearch highlighting", () => {
         it("underlines a leading-zero segment of the part number", () => {
             const { hits } = search(
                 buildSearchDb(library(), {
-                    i1: [record("TTB-0016-5/32", { size: "small" })]
+                    i1: [record("TTB-0016-5/32", "size=small")]
                 }),
                 "TTB-0016"
             );
@@ -394,8 +391,8 @@ describe("doSearch highlighting", () => {
 describe("doSearch name matching", () => {
     const recordsMap: Record<string, ConfigurationRecord[]> = {
         i1: [
-            record("217-2600", { length: "short" }, "1/2 Bearing"),
-            record("217-2601", { length: "long" }, "3/4 Bearing")
+            record("217-2600", "length=short", "1/2 Bearing"),
+            record("217-2601", "length=long", "3/4 Bearing")
         ]
     };
 
@@ -405,7 +402,7 @@ describe("doSearch name matching", () => {
         expect(hits).toHaveLength(1);
         expect(hits[0].partName).toBe("3/4 Bearing");
         expect(hits[0].partNumber).toBe("217-2601");
-        expect(hits[0].canonicalConfiguration).toEqual({ length: "long" });
+        expect(hits[0].canonicalConfiguration).toBe("length=long");
     });
 
     it("finds a fractional name by its decimal forms (.5, 0.5, 1/2)", () => {
diff --git a/src/frontend/features/search/search.ts b/src/frontend/features/search/search.ts
index 1fff51bb..16048dad 100644
--- a/src/frontend/features/search/search.ts
+++ b/src/frontend/features/search/search.ts
@@ -6,10 +6,7 @@ import {
     tokenizeName,
     tokenizePartNumber
 } from "@backend/features/search/search-index";
-import {
-    ParameterValues,
-    SearchRecord
-} from "@backend/features/configurations/models";
+import { SearchRecord } from "@backend/features/configurations/models";
 
 /**
  * A user facing name to use for elements currently being filtered/searched on.
@@ -37,9 +34,9 @@ export interface SearchHit {
     positions: Position[];
     /**
      * The best-matching record for this hit, used to pre-fill the insert menu —
-     * its part number, name, and the canonical values that produce it.
+     * its part number, name, and the canonical selection that produces it.
      */
-    canonicalConfiguration?: ParameterValues;
+    canonicalConfiguration?: string;
     partNumber?: string;
     partName?: string;
     /** The vendor's page for the part number, when one can be derived. */
diff --git a/src/frontend/lib/url.tsx b/src/frontend/lib/url.tsx
index 94706a02..d4a18fbc 100644
--- a/src/frontend/lib/url.tsx
+++ b/src/frontend/lib/url.tsx
@@ -8,7 +8,7 @@ import {
     ConfigurablePath,
     isConfigurablePath
 } from "@backend/lib/onshape/path";
-import { encodeConfigurationForQuery } from "@backend/features/configurations/utils";
+import { encodeConfiguration } from "@backend/features/configurations/utils";
 import { notifications } from "@mantine/notifications";
 import { LinkIcon } from "@phosphor-icons/react";
 import { IconSize } from "./style-constants";
@@ -30,7 +30,7 @@ export function makeUrl(path: DocumentPath): string {
         // what Onshape's api takes; a url needs its own escaping.
         url +=
             "?configuration=" +
-            encodeURIComponent(encodeConfigurationForQuery(path.configuration));
+            encodeURIComponent(encodeConfiguration(path.configuration));
     }
     return url;
 }

From 4af323d422ece3342080829d5c1bf2c73de94419 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 1 Sep 2026 13:00:34 +0000
Subject: [PATCH 34/40] Keep a favorite's selection as made, and derive its
 canonical form
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Storing only the canonical form lost data: canonicalizing drops every value
that equals a parameter's default and every hidden one, so a favorite could
not carry a string parameter the user typed. The row keeps the selection as
made again, and 0008 is dropped rather than reversed — it never ran anywhere.

The canonical form the thumbnail needs is computed in getFavorites instead,
against the insertable's current parameters. Storing it alongside would go
stale the moment a reload changed what a parameter defaults to, and computing
it per card would be a parameters query per row.

Also unnests the card's part name and number, which rendered a div of p's
inside the p the title is, and so tripped a hydration warning. It is a line
under the title, so it belongs beside it in the stack.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018tgfuCHjVFvejjMe7WmEFL
---
 drizzle/0008_canonical_configuration.sql      |  20 -
 drizzle/meta/0008_snapshot.json               | 510 ------------------
 drizzle/meta/_journal.json                    |   7 -
 src/backend/db/schema.ts                      |  10 +-
 src/backend/features/favorites/contract.ts    |   9 +-
 src/backend/features/favorites/routes.test.ts |  70 ++-
 src/backend/features/favorites/routes.ts      |  61 ++-
 .../favorites/components/favorite-button.tsx  |  38 +-
 .../favorites/components/favorite-card.tsx    |  18 +-
 .../favorites/components/favorite-menu.tsx    |  40 +-
 .../features/favorites/open-favorite-menu.tsx |   9 +-
 .../insert/components/insert-menu.tsx         |   1 +
 .../library/components/card-components.tsx    |   4 +-
 .../library/components/insertable-card.tsx    |   4 +-
 14 files changed, 191 insertions(+), 610 deletions(-)
 delete mode 100644 drizzle/0008_canonical_configuration.sql
 delete mode 100644 drizzle/meta/0008_snapshot.json

diff --git a/drizzle/0008_canonical_configuration.sql b/drizzle/0008_canonical_configuration.sql
deleted file mode 100644
index 3f689384..00000000
--- a/drizzle/0008_canonical_configuration.sql
+++ /dev/null
@@ -1,20 +0,0 @@
-/*
- A favorite stored the selection to insert as a map of parameter values, which
- had to be canonical for its thumbnail to key the same render as everyone
- else's. It now stores the canonical form itself — the text every equivalent
- selection shares — and the insert menu reads the values back out of it.
-
- json_each walks the stored map in document order, which is the parameter order
- it was written in, so a converted row spells its selection the way
- canonicalizeConfiguration would.
-*/
-ALTER TABLE `favorites` ADD `canonical_configuration` text;
---> statement-breakpoint
-UPDATE `favorites`
-SET `canonical_configuration` = (
-    SELECT group_concat(entry.key || '=' || entry.value, ';')
-    FROM json_each(`favorites`.`default_configuration`) AS entry
-)
-WHERE `default_configuration` IS NOT NULL;
---> statement-breakpoint
-ALTER TABLE `favorites` DROP COLUMN `default_configuration`;
diff --git a/drizzle/meta/0008_snapshot.json b/drizzle/meta/0008_snapshot.json
deleted file mode 100644
index 7860c76a..00000000
--- a/drizzle/meta/0008_snapshot.json
+++ /dev/null
@@ -1,510 +0,0 @@
-{
-    "version": "6",
-    "dialect": "sqlite",
-    "id": "709941d2-0da5-4b40-816f-13880cddee28",
-    "prevId": "7f0e79d4-3077-4a1f-aeab-4d98a104be46",
-    "tables": {
-        "configurations": {
-            "name": "configurations",
-            "columns": {
-                "id": {
-                    "name": "id",
-                    "type": "text",
-                    "primaryKey": true,
-                    "notNull": true,
-                    "autoincrement": false
-                },
-                "parameters": {
-                    "name": "parameters",
-                    "type": "text",
-                    "primaryKey": false,
-                    "notNull": true,
-                    "autoincrement": false,
-                    "default": "'[]'"
-                },
-                "records": {
-                    "name": "records",
-                    "type": "text",
-                    "primaryKey": false,
-                    "notNull": true,
-                    "autoincrement": false,
-                    "default": "'[]'"
-                },
-                "build_issues": {
-                    "name": "build_issues",
-                    "type": "text",
-                    "primaryKey": false,
-                    "notNull": true,
-                    "autoincrement": false,
-                    "default": "'[]'"
-                }
-            },
-            "indexes": {},
-            "foreignKeys": {
-                "configurations_id_insertables_id_fk": {
-                    "name": "configurations_id_insertables_id_fk",
-                    "tableFrom": "configurations",
-                    "tableTo": "insertables",
-                    "columnsFrom": ["id"],
-                    "columnsTo": ["id"],
-                    "onDelete": "cascade",
-                    "onUpdate": "no action"
-                }
-            },
-            "compositePrimaryKeys": {},
-            "uniqueConstraints": {},
-            "checkConstraints": {}
-        },
-        "favorites": {
-            "name": "favorites",
-            "columns": {
-                "id": {
-                    "name": "id",
-                    "type": "text",
-                    "primaryKey": true,
-                    "notNull": true,
-                    "autoincrement": false
-                },
-                "user_id": {
-                    "name": "user_id",
-                    "type": "text",
-                    "primaryKey": false,
-                    "notNull": true,
-                    "autoincrement": false
-                },
-                "library_id": {
-                    "name": "library_id",
-                    "type": "text",
-                    "primaryKey": false,
-                    "notNull": true,
-                    "autoincrement": false
-                },
-                "insertable_id": {
-                    "name": "insertable_id",
-                    "type": "text",
-                    "primaryKey": false,
-                    "notNull": true,
-                    "autoincrement": false
-                },
-                "sort_order": {
-                    "name": "sort_order",
-                    "type": "integer",
-                    "primaryKey": false,
-                    "notNull": true,
-                    "autoincrement": false,
-                    "default": 0
-                },
-                "canonical_configuration": {
-                    "name": "canonical_configuration",
-                    "type": "text",
-                    "primaryKey": false,
-                    "notNull": false,
-                    "autoincrement": false
-                }
-            },
-            "indexes": {
-                "favorites_user_id_library_id_insertable_id_unique": {
-                    "name": "favorites_user_id_library_id_insertable_id_unique",
-                    "columns": ["user_id", "library_id", "insertable_id"],
-                    "isUnique": true
-                }
-            },
-            "foreignKeys": {
-                "favorites_user_id_users_id_fk": {
-                    "name": "favorites_user_id_users_id_fk",
-                    "tableFrom": "favorites",
-                    "tableTo": "users",
-                    "columnsFrom": ["user_id"],
-                    "columnsTo": ["id"],
-                    "onDelete": "no action",
-                    "onUpdate": "no action"
-                },
-                "favorites_library_id_libraries_id_fk": {
-                    "name": "favorites_library_id_libraries_id_fk",
-                    "tableFrom": "favorites",
-                    "tableTo": "libraries",
-                    "columnsFrom": ["library_id"],
-                    "columnsTo": ["id"],
-                    "onDelete": "no action",
-                    "onUpdate": "no action"
-                },
-                "favorites_insertable_id_insertables_id_fk": {
-                    "name": "favorites_insertable_id_insertables_id_fk",
-                    "tableFrom": "favorites",
-                    "tableTo": "insertables",
-                    "columnsFrom": ["insertable_id"],
-                    "columnsTo": ["id"],
-                    "onDelete": "cascade",
-                    "onUpdate": "no action"
-                }
-            },
-            "compositePrimaryKeys": {},
-            "uniqueConstraints": {},
-            "checkConstraints": {}
-        },
-        "groups": {
-            "name": "groups",
-            "columns": {
-                "id": {
-                    "name": "id",
-                    "type": "text",
-                    "primaryKey": true,
-                    "notNull": true,
-                    "autoincrement": false
-                },
-                "library_id": {
-                    "name": "library_id",
-                    "type": "text",
-                    "primaryKey": false,
-                    "notNull": true,
-                    "autoincrement": false
-                },
-                "name": {
-                    "name": "name",
-                    "type": "text",
-                    "primaryKey": false,
-                    "notNull": true,
-                    "autoincrement": false
-                },
-                "document_id": {
-                    "name": "document_id",
-                    "type": "text",
-                    "primaryKey": false,
-                    "notNull": true,
-                    "autoincrement": false
-                },
-                "version_id": {
-                    "name": "version_id",
-                    "type": "text",
-                    "primaryKey": false,
-                    "notNull": true,
-                    "autoincrement": false
-                },
-                "sort_alphabetically": {
-                    "name": "sort_alphabetically",
-                    "type": "integer",
-                    "primaryKey": false,
-                    "notNull": true,
-                    "autoincrement": false,
-                    "default": false
-                },
-                "sort_order": {
-                    "name": "sort_order",
-                    "type": "integer",
-                    "primaryKey": false,
-                    "notNull": true,
-                    "autoincrement": false,
-                    "default": 0
-                },
-                "small_thumbnail_url": {
-                    "name": "small_thumbnail_url",
-                    "type": "text",
-                    "primaryKey": false,
-                    "notNull": false,
-                    "autoincrement": false
-                },
-                "large_thumbnail_url": {
-                    "name": "large_thumbnail_url",
-                    "type": "text",
-                    "primaryKey": false,
-                    "notNull": false,
-                    "autoincrement": false
-                },
-                "build_issues": {
-                    "name": "build_issues",
-                    "type": "text",
-                    "primaryKey": false,
-                    "notNull": true,
-                    "autoincrement": false,
-                    "default": "'[]'"
-                },
-                "last_loaded_at": {
-                    "name": "last_loaded_at",
-                    "type": "integer",
-                    "primaryKey": false,
-                    "notNull": false,
-                    "autoincrement": false
-                }
-            },
-            "indexes": {
-                "groups_document_id_library_id_unique": {
-                    "name": "groups_document_id_library_id_unique",
-                    "columns": ["document_id", "library_id"],
-                    "isUnique": true
-                }
-            },
-            "foreignKeys": {
-                "groups_library_id_libraries_id_fk": {
-                    "name": "groups_library_id_libraries_id_fk",
-                    "tableFrom": "groups",
-                    "tableTo": "libraries",
-                    "columnsFrom": ["library_id"],
-                    "columnsTo": ["id"],
-                    "onDelete": "no action",
-                    "onUpdate": "no action"
-                }
-            },
-            "compositePrimaryKeys": {},
-            "uniqueConstraints": {},
-            "checkConstraints": {}
-        },
-        "insertables": {
-            "name": "insertables",
-            "columns": {
-                "id": {
-                    "name": "id",
-                    "type": "text",
-                    "primaryKey": true,
-                    "notNull": true,
-                    "autoincrement": false
-                },
-                "element_id": {
-                    "name": "element_id",
-                    "type": "text",
-                    "primaryKey": false,
-                    "notNull": true,
-                    "autoincrement": false
-                },
-                "group_id": {
-                    "name": "group_id",
-                    "type": "text",
-                    "primaryKey": false,
-                    "notNull": true,
-                    "autoincrement": false
-                },
-                "document_id": {
-                    "name": "document_id",
-                    "type": "text",
-                    "primaryKey": false,
-                    "notNull": true,
-                    "autoincrement": false
-                },
-                "library_id": {
-                    "name": "library_id",
-                    "type": "text",
-                    "primaryKey": false,
-                    "notNull": true,
-                    "autoincrement": false
-                },
-                "name": {
-                    "name": "name",
-                    "type": "text",
-                    "primaryKey": false,
-                    "notNull": true,
-                    "autoincrement": false
-                },
-                "element_type": {
-                    "name": "element_type",
-                    "type": "text",
-                    "primaryKey": false,
-                    "notNull": true,
-                    "autoincrement": false
-                },
-                "microversion_id": {
-                    "name": "microversion_id",
-                    "type": "text",
-                    "primaryKey": false,
-                    "notNull": true,
-                    "autoincrement": false
-                },
-                "is_visible": {
-                    "name": "is_visible",
-                    "type": "integer",
-                    "primaryKey": false,
-                    "notNull": true,
-                    "autoincrement": false,
-                    "default": false
-                },
-                "is_open_composite": {
-                    "name": "is_open_composite",
-                    "type": "integer",
-                    "primaryKey": false,
-                    "notNull": true,
-                    "autoincrement": false,
-                    "default": false
-                },
-                "supports_fasten": {
-                    "name": "supports_fasten",
-                    "type": "integer",
-                    "primaryKey": false,
-                    "notNull": true,
-                    "autoincrement": false,
-                    "default": false
-                },
-                "index_configurations": {
-                    "name": "index_configurations",
-                    "type": "integer",
-                    "primaryKey": false,
-                    "notNull": true,
-                    "autoincrement": false,
-                    "default": false
-                },
-                "version_id": {
-                    "name": "version_id",
-                    "type": "text",
-                    "primaryKey": false,
-                    "notNull": true,
-                    "autoincrement": false
-                },
-                "sort_order": {
-                    "name": "sort_order",
-                    "type": "integer",
-                    "primaryKey": false,
-                    "notNull": true,
-                    "autoincrement": false,
-                    "default": 0
-                },
-                "vendors": {
-                    "name": "vendors",
-                    "type": "text",
-                    "primaryKey": false,
-                    "notNull": true,
-                    "autoincrement": false,
-                    "default": "'[]'"
-                },
-                "small_thumbnail_url": {
-                    "name": "small_thumbnail_url",
-                    "type": "text",
-                    "primaryKey": false,
-                    "notNull": false,
-                    "autoincrement": false
-                },
-                "large_thumbnail_url": {
-                    "name": "large_thumbnail_url",
-                    "type": "text",
-                    "primaryKey": false,
-                    "notNull": false,
-                    "autoincrement": false
-                },
-                "fasten_info": {
-                    "name": "fasten_info",
-                    "type": "text",
-                    "primaryKey": false,
-                    "notNull": false,
-                    "autoincrement": false
-                },
-                "part_data": {
-                    "name": "part_data",
-                    "type": "text",
-                    "primaryKey": false,
-                    "notNull": false,
-                    "autoincrement": false
-                },
-                "build_issues": {
-                    "name": "build_issues",
-                    "type": "text",
-                    "primaryKey": false,
-                    "notNull": true,
-                    "autoincrement": false,
-                    "default": "'[]'"
-                },
-                "last_loaded_at": {
-                    "name": "last_loaded_at",
-                    "type": "integer",
-                    "primaryKey": false,
-                    "notNull": false,
-                    "autoincrement": false
-                }
-            },
-            "indexes": {},
-            "foreignKeys": {
-                "insertables_group_id_groups_id_fk": {
-                    "name": "insertables_group_id_groups_id_fk",
-                    "tableFrom": "insertables",
-                    "tableTo": "groups",
-                    "columnsFrom": ["group_id"],
-                    "columnsTo": ["id"],
-                    "onDelete": "cascade",
-                    "onUpdate": "no action"
-                },
-                "insertables_library_id_libraries_id_fk": {
-                    "name": "insertables_library_id_libraries_id_fk",
-                    "tableFrom": "insertables",
-                    "tableTo": "libraries",
-                    "columnsFrom": ["library_id"],
-                    "columnsTo": ["id"],
-                    "onDelete": "no action",
-                    "onUpdate": "no action"
-                }
-            },
-            "compositePrimaryKeys": {},
-            "uniqueConstraints": {},
-            "checkConstraints": {}
-        },
-        "libraries": {
-            "name": "libraries",
-            "columns": {
-                "id": {
-                    "name": "id",
-                    "type": "text",
-                    "primaryKey": true,
-                    "notNull": true,
-                    "autoincrement": false
-                },
-                "cache_version": {
-                    "name": "cache_version",
-                    "type": "integer",
-                    "primaryKey": false,
-                    "notNull": true,
-                    "autoincrement": false,
-                    "default": 0
-                }
-            },
-            "indexes": {},
-            "foreignKeys": {},
-            "compositePrimaryKeys": {},
-            "uniqueConstraints": {},
-            "checkConstraints": {}
-        },
-        "users": {
-            "name": "users",
-            "columns": {
-                "id": {
-                    "name": "id",
-                    "type": "text",
-                    "primaryKey": true,
-                    "notNull": true,
-                    "autoincrement": false
-                },
-                "theme": {
-                    "name": "theme",
-                    "type": "text",
-                    "primaryKey": false,
-                    "notNull": true,
-                    "autoincrement": false,
-                    "default": "'system'"
-                },
-                "library_id": {
-                    "name": "library_id",
-                    "type": "text",
-                    "primaryKey": false,
-                    "notNull": true,
-                    "autoincrement": false,
-                    "default": "'frc-design-lib'"
-                },
-                "group_id": {
-                    "name": "group_id",
-                    "type": "text",
-                    "primaryKey": false,
-                    "notNull": false,
-                    "autoincrement": false
-                }
-            },
-            "indexes": {},
-            "foreignKeys": {},
-            "compositePrimaryKeys": {},
-            "uniqueConstraints": {},
-            "checkConstraints": {}
-        }
-    },
-    "views": {},
-    "enums": {},
-    "_meta": {
-        "schemas": {},
-        "tables": {},
-        "columns": {}
-    },
-    "internal": {
-        "indexes": {}
-    }
-}
diff --git a/drizzle/meta/_journal.json b/drizzle/meta/_journal.json
index 87138ffe..6164e539 100644
--- a/drizzle/meta/_journal.json
+++ b/drizzle/meta/_journal.json
@@ -57,13 +57,6 @@
             "when": 1787265951429,
             "tag": "0007_resume_group",
             "breakpoints": true
-        },
-        {
-            "idx": 8,
-            "version": "6",
-            "when": 1787265951430,
-            "tag": "0008_canonical_configuration",
-            "breakpoints": true
         }
     ]
 }
diff --git a/src/backend/db/schema.ts b/src/backend/db/schema.ts
index 85720fec..12e0c120 100644
--- a/src/backend/db/schema.ts
+++ b/src/backend/db/schema.ts
@@ -7,6 +7,7 @@ import { Vendor } from "../features/library/vendors";
 import {
     ConfigurationParameter,
     ConfigurationRecord,
+    ParameterValues,
     PartMetadata
 } from "../features/configurations/models";
 import { BuildIssue } from "../features/build-checker/issues";
@@ -166,9 +167,12 @@ export const favorites = sqliteTable(
         insertableId: text("insertable_id")
             .notNull()
             .references(() => insertables.id, { onDelete: "cascade" }),
-        // The selection the favorite opens with, canonical so its thumbnail
-        // names the same render everyone else's does. Null for the default.
-        canonicalConfiguration: text("canonical_configuration"),
+        // The selection the favorite opens with, as the user made it: a
+        // canonical one would drop a default-valued or hidden parameter,
+        // including a string they typed. Null for the element's own default.
+        defaultConfiguration: text("default_configuration", {
+            mode: "json"
+        }).$type<ParameterValues | null>(),
         sortOrder: integer("sort_order").notNull().default(0)
     },
     (t) => [unique().on(t.userId, t.libraryId, t.insertableId)]
diff --git a/src/backend/features/favorites/contract.ts b/src/backend/features/favorites/contract.ts
index a0ff143c..36d381bb 100644
--- a/src/backend/features/favorites/contract.ts
+++ b/src/backend/features/favorites/contract.ts
@@ -1,10 +1,17 @@
+import { ParameterValues } from "../configurations/models";
 import { LibraryId } from "../library/library-id";
 
 export interface Favorite {
     id: string;
     insertableId: string;
     libraryId: LibraryId;
-    /** The selection it opens with, canonical; absent for the element default. */
+    /** The selection it opens with, as stored; absent for the element default. */
+    defaultConfiguration?: ParameterValues;
+    /**
+     * That selection canonicalized against the insertable's parameters, which
+     * is what names its thumbnail. Derived per response rather than stored, so
+     * a reload that changes a parameter's default can't leave it stale.
+     */
     canonicalConfiguration?: string;
 }
 
diff --git a/src/backend/features/favorites/routes.test.ts b/src/backend/features/favorites/routes.test.ts
index 8497457a..7fd8e8b1 100644
--- a/src/backend/features/favorites/routes.test.ts
+++ b/src/backend/features/favorites/routes.test.ts
@@ -10,6 +10,7 @@ import {
     jsonRequest,
     resetDb,
     seedAssembly,
+    seedConfiguration,
     seedFavorite,
     seedPartStudio,
     seedTestData
@@ -20,10 +21,22 @@ const db = getDb(env.DB);
 const favoritesUrl = `/api/favorites/library/${TEST_LIBRARY_ID}`;
 
 interface FavoritesBody {
-    favorites: Record<string, { insertableId: string }>;
+    favorites: Record<
+        string,
+        {
+            insertableId: string;
+            defaultConfiguration?: Record<string, string>;
+            canonicalConfiguration?: string;
+        }
+    >;
     favoriteOrder: string[];
 }
 
+/** The one favorite a body holds, for the derived-canonical tests. */
+function soleFavorite(body: FavoritesBody) {
+    return body.favorites[body.favoriteOrder[0]];
+}
+
 describe("favorites routes", () => {
     beforeEach(async () => {
         await resetDb(db);
@@ -53,6 +66,51 @@ describe("favorites routes", () => {
             expect(res.headers.get("Cache-Control")).toBe("private, no-store");
         });
 
+        // Derived per response rather than stored, so it cannot go stale when a
+        // reload changes what the parameters default to.
+        it("derives each favorite's canonical form from what it stores", async () => {
+            await seedPartStudio(db);
+            await seedConfiguration(db);
+            const favoriteId = await seedFavorite(db, TEST_PART_STUDIO_ID);
+            await db
+                .update(favorites)
+                .set({ defaultConfiguration: { boolean: "false" } })
+                .where(eq(favorites.id, favoriteId));
+
+            const res = await createTestApp().request(
+                favoritesUrl,
+                jsonRequest("GET"),
+                env
+            );
+            expect(soleFavorite(await res.json()).canonicalConfiguration).toBe(
+                "boolean=false"
+            );
+        });
+
+        // The whole reason the selection is stored as it was made: canonicalizing
+        // drops a value that is the parameter's default, which for a string
+        // parameter is text the user typed.
+        it("keeps a stored value that canonicalizing drops", async () => {
+            await seedPartStudio(db);
+            await seedConfiguration(db);
+            const favoriteId = await seedFavorite(db, TEST_PART_STUDIO_ID);
+            const defaultConfiguration = { boolean: "true" };
+            await db
+                .update(favorites)
+                .set({ defaultConfiguration })
+                .where(eq(favorites.id, favoriteId));
+
+            const res = await createTestApp().request(
+                favoritesUrl,
+                jsonRequest("GET"),
+                env
+            );
+            const favorite = soleFavorite(await res.json());
+            expect(favorite.defaultConfiguration).toEqual(defaultConfiguration);
+            // "true" is the parameter default, so it names no override at all.
+            expect(favorite.canonicalConfiguration).toBe("");
+        });
+
         it("only returns the current user's favorites", async () => {
             await seedTestData(db);
             await seedFavorite(db, TEST_PART_STUDIO_ID, "other-user");
@@ -198,16 +256,16 @@ describe("favorites routes", () => {
         });
     });
 
-    describe("POST /canonical-configuration/favorite/:favoriteId", () => {
+    describe("POST /default-configuration/favorite/:favoriteId", () => {
         it("persists the selection the favorite opens with", async () => {
             await seedPartStudio(db);
             const favoriteId = await seedFavorite(db, TEST_PART_STUDIO_ID);
             const app = createTestApp();
 
-            const canonicalConfiguration = "param-id=value";
+            const defaultConfiguration = { "param-id": "value" };
             const res = await app.request(
-                `/api/canonical-configuration/favorite/${favoriteId}`,
-                jsonRequest("POST", { canonicalConfiguration }),
+                `/api/default-configuration/favorite/${favoriteId}`,
+                jsonRequest("POST", { defaultConfiguration }),
                 env
             );
             expect(res.status).toBe(200);
@@ -217,7 +275,7 @@ describe("favorites routes", () => {
                 .from(favorites)
                 .where(eq(favorites.id, favoriteId))
                 .get();
-            expect(row?.canonicalConfiguration).toBe(canonicalConfiguration);
+            expect(row?.defaultConfiguration).toEqual(defaultConfiguration);
         });
     });
 });
diff --git a/src/backend/features/favorites/routes.ts b/src/backend/features/favorites/routes.ts
index 03e824df..66a8f4d5 100644
--- a/src/backend/features/favorites/routes.ts
+++ b/src/backend/features/favorites/routes.ts
@@ -1,4 +1,4 @@
-import { and, asc, eq } from "drizzle-orm";
+import { and, asc, eq, inArray } from "drizzle-orm";
 import { cacheMiddleware } from "../../lib/cache";
 import { getApp } from "../../lib/context";
 import {
@@ -8,8 +8,10 @@ import {
     libraryRoute
 } from "../../lib/route-params";
 import { type Db, getDb } from "../../db/client";
-import { users, favorites } from "../../db/schema";
+import { users, favorites, configurations } from "../../db/schema";
+import { canonicalizeConfiguration } from "../configurations/canonical";
 import type { Favorite, FavoritesData } from "./contract";
+import type { ConfigurationParameter } from "../configurations/models";
 import type { LibraryId } from "../library/library-id";
 import { z } from "zod";
 import { validate } from "../../lib/validate";
@@ -24,13 +26,13 @@ const addFavoriteQuery = z.object({
 
 /** The configuration the favorite opens with, when it was made from one. */
 const addFavoriteBody = z.object({
-    canonicalConfiguration: z.string().optional()
+    defaultConfiguration: z.record(z.string(), z.string()).optional()
 });
 
 const favoriteOrderBody = z.object({ favoriteOrder: z.array(z.string()) });
 
-const canonicalConfigurationBody = z.object({
-    canonicalConfiguration: z.string()
+const defaultConfigurationBody = z.object({
+    defaultConfiguration: z.record(z.string(), z.string())
 });
 
 async function getFavorites(
@@ -50,14 +52,28 @@ async function getFavorites(
         .orderBy(asc(favorites.sortOrder))
         .all();
 
+    // Canonicalized here rather than stored: the parameters a selection is
+    // canonical against move with the library, and only the row is ours to keep.
+    const parameters = await getParameters(
+        db,
+        rows.map((row) => row.insertableId)
+    );
+
     const favoritesOut: Record<string, Favorite> = {};
     const favoriteOrder: string[] = [];
     for (const row of rows) {
+        const defaultConfiguration = row.defaultConfiguration ?? undefined;
         const fav: Favorite = {
             id: row.id,
             insertableId: row.insertableId,
             libraryId,
-            canonicalConfiguration: row.canonicalConfiguration ?? undefined
+            defaultConfiguration,
+            canonicalConfiguration: defaultConfiguration
+                ? canonicalizeConfiguration(
+                      defaultConfiguration,
+                      parameters.get(row.insertableId) ?? []
+                  )
+                : undefined
         };
         favoritesOut[row.id] = fav;
         favoriteOrder.push(row.id);
@@ -65,6 +81,25 @@ async function getFavorites(
     return { favorites: favoritesOut, favoriteOrder };
 }
 
+/** The parameters of each insertable named, for canonicalizing against. */
+async function getParameters(
+    db: Db,
+    insertableIds: string[]
+): Promise<Map<string, ConfigurationParameter[]>> {
+    if (insertableIds.length === 0) {
+        return new Map();
+    }
+    const rows = await db
+        .select({
+            id: configurations.id,
+            parameters: configurations.parameters
+        })
+        .from(configurations)
+        .where(inArray(configurations.id, insertableIds))
+        .all();
+    return new Map(rows.map((row) => [row.id, row.parameters]));
+}
+
 /** GET /api/favorites/library/:libraryId */
 favoriteRoutes.get(
     "/favorites" + libraryRoute(),
@@ -88,7 +123,7 @@ favoriteRoutes.post(
         const libraryId = getLibraryParam(c);
         const userId = await c.var.getUserId();
         const { insertableId, id: favoriteId } = c.req.valid("query");
-        const { canonicalConfiguration } = c.req.valid("json");
+        const { defaultConfiguration } = c.req.valid("json");
 
         const db = getDb(c.env.DB);
 
@@ -112,7 +147,7 @@ favoriteRoutes.post(
                 userId,
                 libraryId,
                 insertableId,
-                canonicalConfiguration,
+                defaultConfiguration,
                 sortOrder: existingCount.length
             })
             .onConflictDoNothing();
@@ -162,20 +197,20 @@ favoriteRoutes.post(
     }
 );
 
-/** POST /api/canonical-configuration/favorite/:favoriteId */
+/** POST /api/default-configuration/favorite/:favoriteId */
 favoriteRoutes.post(
-    "/canonical-configuration" + favoriteRoute(),
+    "/default-configuration" + favoriteRoute(),
     requireSignInMiddleware,
-    validate("json", canonicalConfigurationBody),
+    validate("json", defaultConfigurationBody),
     async (c) => {
         const favoriteId = getFavoriteParam(c);
-        const { canonicalConfiguration } = c.req.valid("json");
+        const { defaultConfiguration } = c.req.valid("json");
         const userId = await c.var.getUserId();
 
         const db = getDb(c.env.DB);
         await db
             .update(favorites)
-            .set({ canonicalConfiguration })
+            .set({ defaultConfiguration })
             .where(
                 and(eq(favorites.id, favoriteId), eq(favorites.userId, userId))
             );
diff --git a/src/frontend/features/favorites/components/favorite-button.tsx b/src/frontend/features/favorites/components/favorite-button.tsx
index b650fdc6..d4f115f4 100644
--- a/src/frontend/features/favorites/components/favorite-button.tsx
+++ b/src/frontend/features/favorites/components/favorite-button.tsx
@@ -3,6 +3,7 @@ import { HeartIcon, HeartBreakIcon } from "@phosphor-icons/react";
 import { IconSize, StatusColor } from "../../../lib/style-constants";
 import { useMutation } from "@tanstack/react-query";
 import { ReactNode, useState } from "react";
+import type { ParameterValues } from "@backend/features/configurations/models";
 import { apiDelete, apiPost } from "../../../lib/api-client";
 import type {
     Favorite,
@@ -31,7 +32,10 @@ interface UpdateFavoritesArgs {
     operation: Operation;
     insertable: InsertableOut;
     favoriteId: string;
-    /** The selection to store, canonical; absent means the element default. */
+    /** The selection to store; absent means the element's own default. */
+    defaultConfiguration?: ParameterValues;
+    /** That selection's canonical form, so the new row's thumbnail is right
+     * before the refetch answers. */
     canonicalConfiguration?: string;
 }
 
@@ -40,13 +44,14 @@ function updateFavorites(
     args: UpdateFavoritesArgs,
     libraryId: LibraryId
 ): FavoritesData | undefined {
-    const { favoriteId, canonicalConfiguration } = args;
+    const { favoriteId, defaultConfiguration, canonicalConfiguration } = args;
     const insertableId = args.insertable.id;
     if (args.operation === Operation.ADD) {
         const fav: Favorite = {
             id: favoriteId,
             insertableId,
             libraryId,
+            defaultConfiguration,
             canonicalConfiguration
         };
         data.favorites[favoriteId] = fav;
@@ -80,7 +85,7 @@ function useUpdateFavoritesMutation() {
                         id: args.favoriteId
                     },
                     body: {
-                        canonicalConfiguration: args.canonicalConfiguration
+                        defaultConfiguration: args.defaultConfiguration
                     }
                 });
             } else {
@@ -114,9 +119,11 @@ interface FavoriteButtonProps {
     favorite: Favorite | undefined;
     insertable: InsertableOut;
     /**
-     * The selection the new favorite opens with — what the caller is showing,
-     * rather than the element's own default — canonical, as it is stored.
+     * The selection the new favorite opens with: what the caller is showing,
+     * rather than the element's own default.
      */
+    defaultConfiguration?: ParameterValues;
+    /** The same selection canonicalized, when the caller knows it. */
     canonicalConfiguration?: string;
     /**
      * Sizes the button to sit beside a full-height button rather than in a card row.
@@ -126,7 +133,13 @@ interface FavoriteButtonProps {
 }
 
 export function FavoriteButton(props: FavoriteButtonProps): ReactNode {
-    const { favorite, insertable, canonicalConfiguration, large } = props;
+    const {
+        favorite,
+        insertable,
+        defaultConfiguration,
+        canonicalConfiguration,
+        large
+    } = props;
     const isFavorite = favorite !== undefined;
 
     const [isHovered, setIsHovered] = useState(false);
@@ -158,6 +171,7 @@ export function FavoriteButton(props: FavoriteButtonProps): ReactNode {
                     operation,
                     insertable,
                     favoriteId,
+                    defaultConfiguration,
                     canonicalConfiguration
                 });
             }}
@@ -173,7 +187,9 @@ export function FavoriteButton(props: FavoriteButtonProps): ReactNode {
 interface FavoriteInsertableItemProps {
     favorite: Favorite | undefined;
     insertable: InsertableOut;
-    /** The selection the new favorite opens with, canonical. */
+    /** The selection the new favorite opens with. */
+    defaultConfiguration?: ParameterValues;
+    /** The same selection canonicalized, when the caller knows it. */
     canonicalConfiguration?: string;
 }
 
@@ -181,7 +197,12 @@ interface FavoriteInsertableItemProps {
  * A menu item which can be used to favorite or unfavorite an insertable.
  */
 export function FavoriteInsertableItem(props: FavoriteInsertableItemProps) {
-    const { favorite, insertable, canonicalConfiguration } = props;
+    const {
+        favorite,
+        insertable,
+        defaultConfiguration,
+        canonicalConfiguration
+    } = props;
     const isFavorite = favorite !== undefined;
     const operation = isFavorite ? Operation.REMOVE : Operation.ADD;
     const mutation = useUpdateFavoritesMutation();
@@ -202,6 +223,7 @@ export function FavoriteInsertableItem(props: FavoriteInsertableItemProps) {
                     operation,
                     insertable,
                     favoriteId,
+                    defaultConfiguration,
                     canonicalConfiguration
                 });
             }}
diff --git a/src/frontend/features/favorites/components/favorite-card.tsx b/src/frontend/features/favorites/components/favorite-card.tsx
index 68386fba..dfe92adf 100644
--- a/src/frontend/features/favorites/components/favorite-card.tsx
+++ b/src/frontend/features/favorites/components/favorite-card.tsx
@@ -1,5 +1,4 @@
 import { DEFAULT_CANONICAL_CONFIGURATION } from "@backend/features/configurations/canonical";
-import { decodeConfiguration } from "@backend/features/configurations/utils";
 import { ReactNode } from "react";
 import { Favorite } from "@backend/features/favorites/contract";
 import { InsertableOut } from "@backend/features/library/contract";
@@ -59,12 +58,6 @@ export function FavoriteCard(props: FavoriteCardProps): ReactNode {
         return null;
     }
 
-    // What the favorite inserts and prefills the menu with; the canonical form
-    // itself is what names its thumbnail.
-    const favoriteConfiguration = favorite.canonicalConfiguration
-        ? decodeConfiguration(favorite.canonicalConfiguration)
-        : undefined;
-
     return (
         <ItemRow
             onClick={() => {
@@ -74,7 +67,7 @@ export function FavoriteCard(props: FavoriteCardProps): ReactNode {
                 }
                 openInsertMenu({
                     insertable,
-                    defaultConfiguration: favoriteConfiguration
+                    defaultConfiguration: favorite.defaultConfiguration
                 });
             }}
             left={
@@ -119,11 +112,6 @@ interface FavoriteMenuItemsProps {
 
 function FavoriteMenuItems(props: FavoriteMenuItemsProps): ReactNode {
     const { insertable, favorite } = props;
-    // What the favorite inserts and prefills the menu with; the canonical form
-    // itself is what names its thumbnail.
-    const favoriteConfiguration = favorite.canonicalConfiguration
-        ? decodeConfiguration(favorite.canonicalConfiguration)
-        : undefined;
 
     const uiState = useGetUiState();
     const isConnected = useIsConnectedToOnshape();
@@ -137,7 +125,7 @@ function FavoriteMenuItems(props: FavoriteMenuItemsProps): ReactNode {
                 <>
                     <QuickInsertItems
                         insertable={insertable}
-                        configuration={favoriteConfiguration}
+                        configuration={favorite.defaultConfiguration}
                         isFavorite
                     />
                     <Menu.Divider />
@@ -153,7 +141,7 @@ function FavoriteMenuItems(props: FavoriteMenuItemsProps): ReactNode {
                     openFavoriteMenu({
                         favoriteId: favorite.id,
                         insertableName: insertable.name,
-                        canonicalConfiguration: favorite.canonicalConfiguration
+                        defaultConfiguration: favorite.defaultConfiguration
                     });
                 }}
             >
diff --git a/src/frontend/features/favorites/components/favorite-menu.tsx b/src/frontend/features/favorites/components/favorite-menu.tsx
index d6c22f65..0f27eafe 100644
--- a/src/frontend/features/favorites/components/favorite-menu.tsx
+++ b/src/frontend/features/favorites/components/favorite-menu.tsx
@@ -17,7 +17,6 @@ import {
     ParameterValues,
     SearchRecord
 } from "@backend/features/configurations/models";
-import { decodeConfiguration } from "@backend/features/configurations/utils";
 import { useFavoritesQuery } from "../queries";
 import { useLibraryQuery } from "../../library/queries";
 import { favoritesQueryKey } from "../../../lib/query-keys";
@@ -30,14 +29,14 @@ interface FavoriteMenuContentProps {
     favoriteId: string;
     /** The modal this renders in, so the header can track the selection. */
     modalId: string;
-    /** What the favorite opens with today, canonical as it is stored. */
-    canonicalConfiguration?: string;
+    /** What the favorite opens with today. */
+    defaultConfiguration?: ParameterValues;
 }
 
 export function FavoriteMenuContent(
     props: FavoriteMenuContentProps
 ): ReactNode {
-    const { favoriteId, modalId, canonicalConfiguration } = props;
+    const { favoriteId, modalId, defaultConfiguration } = props;
 
     const libraryId = useLibraryId();
     const insertables = useLibraryQuery().data?.insertables;
@@ -46,14 +45,10 @@ export function FavoriteMenuContent(
 
     const [configuration, setConfiguration] = useState<
         ParameterValues | undefined
-    >(() =>
-        canonicalConfiguration === undefined
-            ? undefined
-            : decodeConfiguration(canonicalConfiguration)
-    );
+    >(defaultConfiguration);
     // Reported by ConfigurationWrapper; names this selection's thumbnail.
     // Undefined until it reports, which is what gates saving.
-    const [selected, setSelected] = useState<string | undefined>(undefined);
+    const [canonical, setCanonical] = useState<string | undefined>(undefined);
     const [record, setRecord] = useState<SearchRecord | undefined>(undefined);
 
     const favorite = favoritesData?.favorites[favoriteId];
@@ -79,14 +74,14 @@ export function FavoriteMenuContent(
         });
     }, [modalId, insertableName, record]);
 
-    const setCanonicalConfigurationMutation = useMutation({
-        mutationKey: ["set-canonical-configuration"],
+    const setDefaultConfigurationMutation = useMutation({
+        mutationKey: ["set-default-configuration"],
         mutationFn: async () => {
-            // Canonical, so it names the thumbnail the favorites row asks for;
-            // Onshape applies defaults for what it omits.
+            // The selection as made, not its canonical form, which would drop
+            // a value that is the parameter's default or a hidden one.
             return apiPost(
-                "/canonical-configuration" + toFavoritePath(favoriteId),
-                { body: { canonicalConfiguration: selected } }
+                "/default-configuration" + toFavoritePath(favoriteId),
+                { body: { defaultConfiguration: configuration } }
             );
         },
 
@@ -97,7 +92,10 @@ export function FavoriteMenuContent(
                 queryKey,
                 getQueryUpdater((data: FavoritesData) => {
                     const fav = data.favorites[favoriteId];
-                    if (fav) fav.canonicalConfiguration = selected;
+                    if (fav) {
+                        fav.defaultConfiguration = configuration;
+                        fav.canonicalConfiguration = canonical;
+                    }
                     return data;
                 })
             );
@@ -135,10 +133,10 @@ export function FavoriteMenuContent(
                     insertableId={insertable.id}
                     microversionId={insertable.microversionId}
                     largeThumbnailUrl={insertable.largeThumbnailUrl}
-                    canonicalConfiguration={selected ?? ""}
+                    canonicalConfiguration={canonical ?? ""}
                 />
                 <ConfigurationWrapper
-                    onCanonicalConfiguration={setSelected}
+                    onCanonicalConfiguration={setCanonical}
                     onRecord={setRecord}
                     configuration={configuration}
                     setConfiguration={setConfiguration}
@@ -152,9 +150,9 @@ export function FavoriteMenuContent(
                     leftSection={<FloppyDiskIcon size={IconSize.SMALL} />}
                     // Saving before the wrapper reports would store nothing,
                     // wiping the favorite's selection.
-                    disabled={selected === undefined}
+                    disabled={canonical === undefined}
                     onClick={() => {
-                        setCanonicalConfigurationMutation.mutate();
+                        setDefaultConfigurationMutation.mutate();
                         modals.closeAll();
                     }}
                 >
diff --git a/src/frontend/features/favorites/open-favorite-menu.tsx b/src/frontend/features/favorites/open-favorite-menu.tsx
index 5480aae2..59d549c7 100644
--- a/src/frontend/features/favorites/open-favorite-menu.tsx
+++ b/src/frontend/features/favorites/open-favorite-menu.tsx
@@ -1,4 +1,5 @@
 import { openAppModal } from "../../components/open-app-modal";
+import { type ParameterValues } from "@backend/features/configurations/models";
 import { FavoriteMenuContent } from "./components/favorite-menu";
 import { MenuTitle } from "../../components/app-title";
 import { FavoriteIcon } from "./components/favorite-button";
@@ -7,12 +8,12 @@ import { IconSize } from "../../lib/style-constants";
 interface OpenFavoriteMenuProps {
     favoriteId: string;
     insertableName: string;
-    /** What the favorite opens with today, canonical as it is stored. */
-    canonicalConfiguration?: string;
+    /** What the favorite opens with today. */
+    defaultConfiguration?: ParameterValues;
 }
 
 export function openFavoriteMenu(props: OpenFavoriteMenuProps) {
-    const { favoriteId, insertableName, canonicalConfiguration } = props;
+    const { favoriteId, insertableName, defaultConfiguration } = props;
     // Minted here so the content can update the header as the selection changes.
     const modalId = crypto.randomUUID();
     openAppModal({
@@ -28,7 +29,7 @@ export function openFavoriteMenu(props: OpenFavoriteMenuProps) {
             <FavoriteMenuContent
                 favoriteId={favoriteId}
                 modalId={modalId}
-                canonicalConfiguration={canonicalConfiguration}
+                defaultConfiguration={defaultConfiguration}
             />
         )
     });
diff --git a/src/frontend/features/insert/components/insert-menu.tsx b/src/frontend/features/insert/components/insert-menu.tsx
index 3b1874ac..a7274ee5 100644
--- a/src/frontend/features/insert/components/insert-menu.tsx
+++ b/src/frontend/features/insert/components/insert-menu.tsx
@@ -130,6 +130,7 @@ export function InsertMenuContent(props: InsertMenuContentProps): ReactNode {
                         <FavoriteButton
                             favorite={favorite}
                             insertable={insertable}
+                            defaultConfiguration={configuration}
                             canonicalConfiguration={canonicalConfiguration}
                             large
                         />
diff --git a/src/frontend/features/library/components/card-components.tsx b/src/frontend/features/library/components/card-components.tsx
index bbcee7ee..c30b1a66 100644
--- a/src/frontend/features/library/components/card-components.tsx
+++ b/src/frontend/features/library/components/card-components.tsx
@@ -164,8 +164,10 @@ export function CardTitle(props: CardTitleProps) {
         <Stack gap={0} miw={0}>
             <Text size="sm" truncate c={disabled ? "dimmed" : undefined}>
                 {cardTitle}
-                <PartNameAndNumber title={title} searchHit={searchHit} />
             </Text>
+            {/* The line under the title, so it sits beside it in the stack
+                rather than inside the paragraph the title renders as. */}
+            <PartNameAndNumber title={title} searchHit={searchHit} />
         </Stack>
     );
 
diff --git a/src/frontend/features/library/components/insertable-card.tsx b/src/frontend/features/library/components/insertable-card.tsx
index 09a4a66a..ece64741 100644
--- a/src/frontend/features/library/components/insertable-card.tsx
+++ b/src/frontend/features/library/components/insertable-card.tsx
@@ -112,6 +112,7 @@ export function InsertableCard(props: InsertableCardProps): ReactNode {
                     <FavoriteButton
                         favorite={favorite}
                         insertable={insertable}
+                        defaultConfiguration={hitConfiguration}
                         canonicalConfiguration={
                             searchHit?.canonicalConfiguration
                         }
@@ -136,7 +137,7 @@ interface InsertableMenuItemsProps {
     /** What quick insert inserts and "Open document" opens: a search hit's
      * configuration on a card, the selected one inside the insert menu. */
     configuration?: ParameterValues;
-    /** What favoriting stores: the same selection, in its canonical spelling. */
+    /** The same selection canonicalized, so favoriting can key its thumbnail. */
     canonicalConfiguration?: string;
 }
 
@@ -168,6 +169,7 @@ export function InsertableMenuItems(
                 <FavoriteInsertableItem
                     favorite={favorite}
                     insertable={insertable}
+                    defaultConfiguration={configuration}
                     canonicalConfiguration={canonicalConfiguration}
                 />
                 <Menu.Divider />

From c161bb1dc598c7bcfe2e7062dbd97acccd577937 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 1 Sep 2026 13:18:58 +0000
Subject: [PATCH 35/40] Address a render by its configuration, not a hash of it
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A configuration only ever had to name one path segment, and url-encoding it
does that — the way Onshape spells one — so the hash bought nothing but a
digest to explain. Encoding keeps `/` and `;` out of the path, and a key stays
readable, which a truncated digest never was.

Drops toConfigurationKey and DEFAULT_CONFIGURATION_KEY, and with them the only
reason thumbnailKey's callers were async. Also notes on canonicalizing that it
is lossy, which is why a stored selection is never only its canonical form.

Thumbnails stored under the old hashed keys are orphaned: nothing reads them,
and the configurations that want them re-render on demand.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018tgfuCHjVFvejjMe7WmEFL
---
 .../features/configurations/canonical.test.ts | 55 +++++--------------
 .../features/configurations/canonical.ts      | 25 +--------
 src/backend/features/thumbnails/keys.ts       | 18 +++---
 .../features/thumbnails/routes.test.ts        | 42 ++++++++++----
 src/backend/features/thumbnails/routes.ts     | 16 +++---
 src/backend/features/thumbnails/store.ts      | 13 +++--
 6 files changed, 71 insertions(+), 98 deletions(-)

diff --git a/src/backend/features/configurations/canonical.test.ts b/src/backend/features/configurations/canonical.test.ts
index bf432936..9ade2a12 100644
--- a/src/backend/features/configurations/canonical.test.ts
+++ b/src/backend/features/configurations/canonical.test.ts
@@ -1,9 +1,7 @@
 import { describe, expect, it } from "vitest";
 import {
     DEFAULT_CANONICAL_CONFIGURATION,
-    DEFAULT_CONFIGURATION_KEY,
-    canonicalizeConfiguration,
-    toConfigurationKey
+    canonicalizeConfiguration
 } from "./canonical";
 import { ParameterValues, VisibilityType } from "./models";
 import { QuantityType, Unit } from "./enums";
@@ -13,11 +11,6 @@ import {
     quantityParam
 } from "../../../__test_utils__/configuration-fixtures";
 
-/** The key a canonical selection resolves to, which is what callers compare. */
-function keyOf(canonicalConfiguration: string): Promise<string> {
-    return toConfigurationKey(canonicalConfiguration);
-}
-
 describe("canonicalizeConfiguration", () => {
     const size = enumParam("size", ["s", "l"]);
     const flag = boolParam("flag");
@@ -47,15 +40,13 @@ describe("canonicalizeConfiguration", () => {
         expect(canon({ size: "l", flag: "true" })).toBe(a);
     });
 
-    it("collapses equivalent quantity spellings", async () => {
-        const keys = await Promise.all(
-            ["2in", "2 in", "(1 + 1) in"].map((value) =>
-                keyOf(canon({ length: value }))
-            )
+    it("collapses equivalent quantity spellings", () => {
+        const spellings = ["2in", "2 in", "(1 + 1) in"].map((value) =>
+            canon({ length: value })
         );
-        expect(new Set(keys).size).toBe(1);
-        // ...and it is not the default key, since 2 in != the 1 in default.
-        expect(keys[0]).not.toBe(await keyOf(DEFAULT_CANONICAL_CONFIGURATION));
+        expect(new Set(spellings).size).toBe(1);
+        // ...and it is not the default, since 2 in != the 1 in default.
+        expect(spellings[0]).not.toBe(DEFAULT_CANONICAL_CONFIGURATION);
     });
 
     it("drops a parameter hidden by its visibility condition", () => {
@@ -79,7 +70,7 @@ describe("canonicalizeConfiguration", () => {
 
 // An indexed record holds enumerated values only; the insert menu holds the whole
 // selection. Canonicalizing both is what makes the two agree on a thumbnail.
-describe("canonical keys agree across surfaces", () => {
+describe("canonical forms agree across surfaces", () => {
     const size = enumParam("size", ["s", "l"]);
     const flag = boolParam("flag");
     const finish = enumParam("finish", ["matte", "gloss"], {
@@ -88,7 +79,7 @@ describe("canonical keys agree across surfaces", () => {
     const length = quantityParam("length");
     const parameters = [size, flag, finish, length];
 
-    it("keys an enumerated record and the equivalent selection alike", async () => {
+    it("spells an enumerated record and the equivalent selection alike", () => {
         // What indexing stores: enumerated values, no cosmetic/quantity params.
         const record = canonicalizeConfiguration(
             { size: "l", flag: "false" },
@@ -99,10 +90,10 @@ describe("canonical keys agree across surfaces", () => {
             { size: "l", flag: "false", finish: "matte", length: "1 in" },
             parameters
         );
-        expect(await keyOf(record)).toBe(await keyOf(selection));
+        expect(record).toBe(selection);
     });
 
-    it("keys a non-default cosmetic or quantity value differently", async () => {
+    it("spells a non-default cosmetic or quantity value differently", () => {
         // Enumeration never varies these, but they do change what renders, so
         // the selection must not collide with the enumerated record.
         const record = canonicalizeConfiguration({ size: "l" }, parameters);
@@ -111,9 +102,9 @@ describe("canonical keys agree across surfaces", () => {
             { size: "l", length: "2 in" }
         ];
         for (const selection of selections) {
-            expect(
-                await keyOf(canonicalizeConfiguration(selection, parameters))
-            ).not.toBe(await keyOf(record));
+            expect(canonicalizeConfiguration(selection, parameters)).not.toBe(
+                record
+            );
         }
     });
 });
@@ -176,21 +167,3 @@ describe("quantity canonicalization", () => {
         );
     });
 });
-
-describe("toConfigurationKey", () => {
-    it("maps the element default to the default key", async () => {
-        expect(await keyOf(DEFAULT_CANONICAL_CONFIGURATION)).toBe(
-            DEFAULT_CONFIGURATION_KEY
-        );
-    });
-
-    it("gives different configurations different keys", async () => {
-        expect(await keyOf("a=1")).not.toBe(await keyOf("a=2"));
-    });
-
-    it("gives one configuration one key, every time", async () => {
-        expect(await keyOf("size=l;flag=true")).toBe(
-            await keyOf("size=l;flag=true")
-        );
-    });
-});
diff --git a/src/backend/features/configurations/canonical.ts b/src/backend/features/configurations/canonical.ts
index a56d7013..b6ff9a02 100644
--- a/src/backend/features/configurations/canonical.ts
+++ b/src/backend/features/configurations/canonical.ts
@@ -4,6 +4,9 @@
  * equivalent selection shares, and is the only form that addresses a render —
  * thumbnails, R2 keys, stored records. It is always text; nothing holds a
  * half-canonical map.
+ *
+ * Canonicalizing is lossy — "2 + 3 in" evaluates away — so anything that hands
+ * a selection back to the user stores the configuration and derives this.
  */
 import {
     type ConfigurationParameter,
@@ -16,9 +19,6 @@ import { evaluateBaseValue, formatBaseValue } from "./input-parser";
 /** The element default, which is what a canonical configuration overriding nothing is. */
 export const DEFAULT_CANONICAL_CONFIGURATION = "";
 
-/** The key for an element's default configuration (what everything falls back to). */
-export const DEFAULT_CONFIGURATION_KEY = "default";
-
 /** Normalizes one parameter's raw value to its canonical spelling. */
 function canonicalizeValue(
     parameter: ConfigurationParameter,
@@ -76,22 +76,3 @@ export function canonicalizeConfiguration(
     // Built in parameter order, so equivalent selections spell it the same way.
     return encodeConfiguration(overrides);
 }
-
-/**
- * A short, stable key for an R2 key, since a configuration is unbounded. It only
- * has to avoid collisions within one element, so a truncated digest is plenty.
- */
-export async function toConfigurationKey(
-    canonicalConfiguration: string
-): Promise<string> {
-    if (canonicalConfiguration === DEFAULT_CANONICAL_CONFIGURATION) {
-        return DEFAULT_CONFIGURATION_KEY;
-    }
-    const digest = await crypto.subtle.digest(
-        "SHA-256",
-        new TextEncoder().encode(canonicalConfiguration)
-    );
-    return [...new Uint8Array(digest, 0, 8)]
-        .map((byte) => byte.toString(16).padStart(2, "0"))
-        .join("");
-}
diff --git a/src/backend/features/thumbnails/keys.ts b/src/backend/features/thumbnails/keys.ts
index 71970b5b..2ecb494d 100644
--- a/src/backend/features/thumbnails/keys.ts
+++ b/src/backend/features/thumbnails/keys.ts
@@ -1,24 +1,26 @@
 /** Thumbnail addressing, shared so the client builds the urls the worker serves. */
-import {
-    DEFAULT_CANONICAL_CONFIGURATION,
-    DEFAULT_CONFIGURATION_KEY
-} from "../configurations/canonical";
+import { DEFAULT_CANONICAL_CONFIGURATION } from "../configurations/canonical";
 import { ThumbnailSize } from "./types";
 
 /** Marks a response as the element default standing in for an unrendered configuration. */
 export const THUMBNAIL_FALLBACK_HEADER = "X-Thumbnail-Fallback";
 
-/** Defaults get their own prefix: everything falls back to them, so they never expire. */
+/**
+ * Defaults get their own prefix: everything falls back to them, so they never
+ * expire. A configuration is url-encoded into its segment, the way Onshape
+ * spells one, which keeps `/` and `;` out of the path.
+ */
 export function thumbnailKey(
     elementId: string,
     microversionId: string,
     size: ThumbnailSize,
-    configurationKey: string = DEFAULT_CONFIGURATION_KEY
+    canonicalConfiguration: string = DEFAULT_CANONICAL_CONFIGURATION
 ): string {
-    if (configurationKey === DEFAULT_CONFIGURATION_KEY) {
+    if (canonicalConfiguration === DEFAULT_CANONICAL_CONFIGURATION) {
         return `thumbnails/default/${elementId}/${microversionId}/${size}`;
     }
-    return `thumbnails/config/${elementId}/${microversionId}/${configurationKey}/${size}`;
+    const segment = encodeURIComponent(canonicalConfiguration);
+    return `thumbnails/config/${elementId}/${microversionId}/${segment}/${size}`;
 }
 
 export interface ThumbnailUrlOptions {
diff --git a/src/backend/features/thumbnails/routes.test.ts b/src/backend/features/thumbnails/routes.test.ts
index 3c79624c..2314a5a0 100644
--- a/src/backend/features/thumbnails/routes.test.ts
+++ b/src/backend/features/thumbnails/routes.test.ts
@@ -3,10 +3,7 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import { createTestApp, jsonRequest } from "../../../__test_utils__";
 import { ThumbnailSize } from "./types";
 import { THUMBNAIL_FALLBACK_HEADER, thumbnailKey, thumbnailUrl } from "./keys";
-import {
-    DEFAULT_CANONICAL_CONFIGURATION,
-    toConfigurationKey
-} from "../configurations/canonical";
+import { DEFAULT_CANONICAL_CONFIGURATION } from "../configurations/canonical";
 import { uploadConfigurationThumbnails } from "./store";
 import type { OnshapeApi } from "../../lib/onshape/client";
 
@@ -29,6 +26,30 @@ function get(url: string, sessionId?: string) {
     return createTestApp().request(url, init, env);
 }
 
+describe("thumbnailKey", () => {
+    it("gives the element default its own prefix", () => {
+        expect(thumbnailKey("e1", MICROVERSION, SIZE)).toBe(
+            `thumbnails/default/e1/${MICROVERSION}/${SIZE}`
+        );
+    });
+
+    // A configuration's separators would otherwise open path segments of their
+    // own, so two different selections could name one key.
+    it("encodes a configuration into a single segment", () => {
+        const key = thumbnailKey("e1", MICROVERSION, SIZE, "a=1;b=2/3");
+        expect(key).toBe(
+            `thumbnails/config/e1/${MICROVERSION}/a%3D1%3Bb%3D2%2F3/${SIZE}`
+        );
+        expect(key.split("/")).toHaveLength(6);
+    });
+
+    it("gives different configurations different keys", () => {
+        expect(thumbnailKey("e1", MICROVERSION, SIZE, "a=1")).not.toBe(
+            thumbnailKey("e1", MICROVERSION, SIZE, "a=2")
+        );
+    });
+});
+
 describe("thumbnail serving", () => {
     afterEach(() => vi.restoreAllMocks());
 
@@ -90,7 +111,7 @@ describe("thumbnail serving", () => {
                 elementId,
                 MICROVERSION,
                 SIZE,
-                await toConfigurationKey(CANONICAL_CONFIGURATION)
+                CANONICAL_CONFIGURATION
             ),
             "config-bytes"
         );
@@ -154,7 +175,7 @@ describe("thumbnail serving", () => {
                 elementId,
                 MICROVERSION,
                 SIZE,
-                await toConfigurationKey(CANONICAL_CONFIGURATION)
+                CANONICAL_CONFIGURATION
             ),
             "configured-bytes"
         );
@@ -365,15 +386,12 @@ describe("uploadConfigurationThumbnails", () => {
             CANONICAL_CONFIGURATION
         );
 
-        const configurationKey = await toConfigurationKey(
-            CANONICAL_CONFIGURATION
-        );
         const key = (size: ThumbnailSize) =>
             thumbnailKey(
                 elementPath.elementId,
                 MICROVERSION,
                 size,
-                configurationKey
+                CANONICAL_CONFIGURATION
             );
         expect(await env.BLOB.head(key(ThumbnailSize.SMALL))).not.toBeNull();
         expect(await env.BLOB.head(key(ThumbnailSize.LARGE))).not.toBeNull();
@@ -389,7 +407,7 @@ describe("uploadConfigurationThumbnails", () => {
                     storedPath.elementId,
                     MICROVERSION,
                     size,
-                    await toConfigurationKey(CANONICAL_CONFIGURATION)
+                    CANONICAL_CONFIGURATION
                 ),
                 "bytes"
             );
@@ -415,7 +433,7 @@ describe("uploadConfigurationThumbnails", () => {
                 partialPath.elementId,
                 MICROVERSION,
                 ThumbnailSize.SMALL,
-                await toConfigurationKey(CANONICAL_CONFIGURATION)
+                CANONICAL_CONFIGURATION
             ),
             "bytes"
         );
diff --git a/src/backend/features/thumbnails/routes.ts b/src/backend/features/thumbnails/routes.ts
index 8b38ef39..876d0623 100644
--- a/src/backend/features/thumbnails/routes.ts
+++ b/src/backend/features/thumbnails/routes.ts
@@ -6,10 +6,7 @@ import { getApp } from "../../lib/context";
 
 import { ThumbnailSize } from "./types";
 import { THUMBNAIL_FALLBACK_HEADER, thumbnailKey } from "./keys";
-import {
-    DEFAULT_CANONICAL_CONFIGURATION,
-    toConfigurationKey
-} from "../configurations/canonical";
+import { DEFAULT_CANONICAL_CONFIGURATION } from "../configurations/canonical";
 
 import type { AppContext } from "../../lib/context";
 import type { ThumbnailWorkflowParams } from "./workflow";
@@ -56,12 +53,13 @@ thumbnailRoutes.get(
             renderThumbnail,
             insertableId
         } = c.req.valid("query");
-        const configurationKey = await toConfigurationKey(
-            canonicalConfiguration
-        );
-
         const object = await c.env.BLOB.get(
-            thumbnailKey(elementId, microversionId, size, configurationKey)
+            thumbnailKey(
+                elementId,
+                microversionId,
+                size,
+                canonicalConfiguration
+            )
         );
         if (object) {
             // The microversion and the configuration are both in the url, so
diff --git a/src/backend/features/thumbnails/store.ts b/src/backend/features/thumbnails/store.ts
index bdffcd37..6bcd67ef 100644
--- a/src/backend/features/thumbnails/store.ts
+++ b/src/backend/features/thumbnails/store.ts
@@ -18,10 +18,7 @@ import { type ElementPath, type InstancePath } from "../../lib/onshape/path";
 
 import { ThumbnailSize, ThumbnailUrls } from "./types";
 import { thumbnailKey, thumbnailUrl } from "./keys";
-import {
-    DEFAULT_CANONICAL_CONFIGURATION,
-    toConfigurationKey
-} from "../configurations/canonical";
+import { DEFAULT_CANONICAL_CONFIGURATION } from "../configurations/canonical";
 import { OnshapeApi } from "../../lib/onshape/client";
 
 /**
@@ -120,11 +117,15 @@ export async function uploadConfigurationThumbnails(
     microversionId: string,
     canonicalConfiguration: string
 ): Promise<void> {
-    const configurationKey = await toConfigurationKey(canonicalConfiguration);
     const { elementId } = elementPath;
     const targets = [ThumbnailSize.SMALL, ThumbnailSize.LARGE].map((size) => ({
         size,
-        key: thumbnailKey(elementId, microversionId, size, configurationKey)
+        key: thumbnailKey(
+            elementId,
+            microversionId,
+            size,
+            canonicalConfiguration
+        )
     }));
     const keys = targets.map((target) => target.key);
 

From 070a2171a0d37380734ad2287835fb57bdb55606 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 3 Sep 2026 13:11:22 +0000
Subject: [PATCH 36/40] Hold the frontend's comments to the style guide

Every comment over two lines is cut to two without losing its reason, the
padded JSDoc blocks collapse to one line, and the comments that narrated the
line under them or restated a component's own name are gone.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018tgfuCHjVFvejjMe7WmEFL
---
 src/frontend/components/app-icon.tsx          |  5 +--
 src/frontend/components/app-title.tsx         |  5 +--
 src/frontend/components/app-zero-state.tsx    | 40 ++++---------------
 src/frontend/components/change-order.tsx      |  7 +---
 src/frontend/features/auth/access-level.tsx   |  5 +--
 .../favorites/components/favorite-button.tsx  |  3 --
 src/frontend/features/favorites/queries.ts    |  5 +--
 .../features/insert/quick-insert-tip.ts       |  6 +--
 .../library/components/card-components.tsx    |  6 ---
 .../library/components/group-card.tsx         |  3 --
 .../search/components/search-errors.tsx       |  3 --
 .../search/components/search-results.tsx      |  4 --
 src/frontend/features/search/filter.ts        |  7 +---
 src/frontend/features/search/search.ts        |  7 +---
 .../settings/components/settings-menu.tsx     |  8 +---
 src/frontend/features/settings/settings.ts    |  5 +--
 .../thumbnails/components/thumbnail.tsx       |  5 +--
 src/frontend/lib/errors.ts                    |  5 +--
 src/frontend/lib/onshape-params.ts            |  6 +--
 src/frontend/lib/ui-state.ts                  | 12 +++---
 src/frontend/routes/app/route.tsx             |  5 +--
 src/frontend/routes/index.tsx                 |  5 +--
 22 files changed, 40 insertions(+), 117 deletions(-)

diff --git a/src/frontend/components/app-icon.tsx b/src/frontend/components/app-icon.tsx
index 1b7e2253..1e8e7905 100644
--- a/src/frontend/components/app-icon.tsx
+++ b/src/frontend/components/app-icon.tsx
@@ -18,9 +18,8 @@ export interface AppIconProps
 }
 
 /**
- * A Phosphor icon in a theme color. Box is what resolves the color name, and
- * sizing goes through `fz` because Box writes its own `style`, which is what
- * would drop the icon's own.
+ * A Phosphor icon in a theme color. Box resolves the name, and sizes through
+ * `fz` because its own `style` would drop the icon's.
  */
 export function AppIcon({
     icon,
diff --git a/src/frontend/components/app-title.tsx b/src/frontend/components/app-title.tsx
index 18ee2369..2f68d0e7 100644
--- a/src/frontend/components/app-title.tsx
+++ b/src/frontend/components/app-title.tsx
@@ -45,9 +45,8 @@ export function AppTitle(props: AppTitleProps): ReactNode {
                     {rightSection}
                 </Group>
                 {subtitle && (
-                    // lh, because the title's own is 1: inheriting that
-                    // leaves no leading under the last line, and the block
-                    // reads low against a header padded evenly.
+                    // lh, because inheriting the title's 1 leaves no leading
+                    // under the last line, reading low in an evenly padded header.
                     <Group
                         gap={4}
                         wrap="nowrap"
diff --git a/src/frontend/components/app-zero-state.tsx b/src/frontend/components/app-zero-state.tsx
index 35169946..24c5da80 100644
--- a/src/frontend/components/app-zero-state.tsx
+++ b/src/frontend/components/app-zero-state.tsx
@@ -16,10 +16,7 @@ interface ZeroStateProps {
     className?: string;
 }
 
-/**
- * A centered icon/title/description/action block used to indicate empty,
- * loading, or error states.
- */
+/** The centered block every empty, loading and error state is built from. */
 function ZeroState(props: ZeroStateProps): ReactNode {
     const { icon, title, description, action, className } = props;
 
@@ -39,34 +36,21 @@ function ZeroState(props: ZeroStateProps): ReactNode {
 }
 
 interface SectionLoadingProps {
-    /**
-     * This should take the form "Loading {thing}...".
-     */
+    /** Takes the form "Loading {thing}...". */
     title: string;
 }
 
-/**
- * Used to indicate a section of the UI is loading.
- */
 export function SectionLoading(props: SectionLoadingProps): ReactNode {
     return <ZeroState title={props.title} icon={<Loader />} />;
 }
 
 interface ErrorProps {
-    /**
-     * The title should always end with a period when there's a description.
-     */
+    /** Ends with a period whenever there is a description. */
     title: string;
-    /**
-     * If omitted, will default to "If the problem persists, contact the FRCDesignApp developers."
-     *
-     * Pass in null to override the default.
-     */
+    /** Null for none at all; omitted falls back to the contact-us line. */
     description?: string | null | JSX.Element;
     className?: string;
-    /**
-     * Defaults to a danger-colored cross icon.
-     */
+    /** @default a danger-colored cross */
     icon?: ReactNode;
     action?: JSX.Element;
 }
@@ -78,9 +62,6 @@ function resolveDescription(description: ErrorProps["description"]): ReactNode {
     return description;
 }
 
-/**
- * Indicates an error with a section of the UI.
- */
 export function SectionError(props: ErrorProps): ReactNode {
     const { title, action, className } = props;
     return (
@@ -95,7 +76,7 @@ export function SectionError(props: ErrorProps): ReactNode {
 }
 
 interface PageMessageProps extends ZeroStateProps {
-    /** Pass true to keep the message closer to the top of the page. */
+    /** Keeps the message nearer the top of the page. @default false */
     justifyUp?: boolean;
 }
 
@@ -107,17 +88,10 @@ export function PageMessage(props: PageMessageProps): ReactNode {
 }
 
 interface PageErrorProps extends ErrorProps {
-    /**
-     * Pass in true to keep the error closer to the top of the page.
-     *
-     * @default false
-     */
+    /** Keeps the error nearer the top of the page. @default false */
     justifyUp?: boolean;
 }
 
-/**
- * Indicates an error with a page in the UI.
- */
 export function PageError(props: PageErrorProps): ReactNode {
     const { title, action, className } = props;
     const justifyUp = props.justifyUp ?? false;
diff --git a/src/frontend/components/change-order.tsx b/src/frontend/components/change-order.tsx
index ecda85cc..0163789d 100644
--- a/src/frontend/components/change-order.tsx
+++ b/src/frontend/components/change-order.tsx
@@ -14,11 +14,7 @@ interface ChangeOrderMenuProps {
     onOrderChange: (newOrder: string[]) => void;
 }
 
-/**
- * MenuItems that allow users to move a given item in a list up or down.
- *
- * Includes a trailing divider (when any options are actually shown).
- */
+/** Move-up/move-down items, with a trailing divider when either is shown. */
 export function ChangeOrderItems(props: ChangeOrderMenuProps): ReactNode {
     const { id, order, onOrderChange } = props;
 
@@ -110,7 +106,6 @@ function applyMoveOperation(
     const index = order.indexOf(target);
     if (index === -1) return order; // target not found, return unchanged
 
-    // Make a shallow copy so we don't mutate input
     const result = [...order];
 
     switch (operation) {
diff --git a/src/frontend/features/auth/access-level.tsx b/src/frontend/features/auth/access-level.tsx
index 7818c073..7bbf1d66 100644
--- a/src/frontend/features/auth/access-level.tsx
+++ b/src/frontend/features/auth/access-level.tsx
@@ -15,9 +15,8 @@ const DEFAULT_ACCESS_LEVEL =
     AccessLevel.USER;
 
 /**
- * What the app assumes until the server answers. The default level is granted
- * as well as viewed, or the clamp below would drop the dev override back to
- * user for as long as the query is pending.
+ * What the app assumes until the server answers. Granted as well as viewed, or
+ * the clamp below would drop a dev override while the query is pending.
  */
 const DEFAULT_ACCESS_DATA: AccessData = {
     maxAccessLevel: DEFAULT_ACCESS_LEVEL,
diff --git a/src/frontend/features/favorites/components/favorite-button.tsx b/src/frontend/features/favorites/components/favorite-button.tsx
index d4f115f4..bc1fe8b4 100644
--- a/src/frontend/features/favorites/components/favorite-button.tsx
+++ b/src/frontend/features/favorites/components/favorite-button.tsx
@@ -193,9 +193,6 @@ interface FavoriteInsertableItemProps {
     canonicalConfiguration?: string;
 }
 
-/**
- * A menu item which can be used to favorite or unfavorite an insertable.
- */
 export function FavoriteInsertableItem(props: FavoriteInsertableItemProps) {
     const {
         favorite,
diff --git a/src/frontend/features/favorites/queries.ts b/src/frontend/features/favorites/queries.ts
index 2fcc560a..866381e0 100644
--- a/src/frontend/features/favorites/queries.ts
+++ b/src/frontend/features/favorites/queries.ts
@@ -10,9 +10,8 @@ import { favoritesQueryKey } from "../../lib/query-keys";
 const EMPTY_FAVORITES: FavoritesData = { favorites: {}, favoriteOrder: [] };
 
 /**
- * Resolved in the query rather than gating it with `enabled`: a disabled query
- * reports pending forever, and the access-data placeholder says signed out, so
- * a signed-in caller would be shown no favorites until both land.
+ * Resolved here rather than gated by `enabled`: a disabled query is pending
+ * forever, so a signed-in caller would see no favorites until access lands.
  */
 export function getFavoritesQuery(libraryId: LibraryId) {
     return queryOptions<FavoritesData>({
diff --git a/src/frontend/features/insert/quick-insert-tip.ts b/src/frontend/features/insert/quick-insert-tip.ts
index 10b6588f..3f140a70 100644
--- a/src/frontend/features/insert/quick-insert-tip.ts
+++ b/src/frontend/features/insert/quick-insert-tip.ts
@@ -4,10 +4,8 @@ import { showInfoToast } from "../../lib/notifications";
 const QUICK_INSERT_WINDOW_MS = 1500;
 
 /**
- * After an insert that changed nothing in the menu, points out that a
- * right-click would have done it. Only when the menu was dismissed as fast as
- * a right-click: a slower one was spent looking at the part, which the tip
- * has no better answer for.
+ * Points out that a right-click would have done it — only when the menu was
+ * dismissed that fast, a slower one having been spent looking at the part.
  */
 export function showQuickInsertTip(openedAt: number): void {
     if (Date.now() - openedAt >= QUICK_INSERT_WINDOW_MS) {
diff --git a/src/frontend/features/library/components/card-components.tsx b/src/frontend/features/library/components/card-components.tsx
index c30b1a66..7ea34d39 100644
--- a/src/frontend/features/library/components/card-components.tsx
+++ b/src/frontend/features/library/components/card-components.tsx
@@ -38,9 +38,6 @@ interface OpenDocumentItemsProps {
     /** Any Onshape path; a shell group's stops at the document. */
     path: DocumentPath | InstancePath | ConfigurablePath;
 }
-/**
- * Menu items which can be used to open or copy a link to a document.
- */
 export function OpenDocumentItems(props: OpenDocumentItemsProps) {
     const url = makeUrl(props.path);
     return (
@@ -69,9 +66,6 @@ interface QuickInsertItemProps {
     isFavorite: boolean;
 }
 
-/**
- * Menu items which can be used to quick insert a document.
- */
 export function QuickInsertItems(props: QuickInsertItemProps) {
     const { insertable, configuration, isFavorite } = props;
     const search = useSearch({ from: "/app" });
diff --git a/src/frontend/features/library/components/group-card.tsx b/src/frontend/features/library/components/group-card.tsx
index aaf1802b..8c4530a4 100644
--- a/src/frontend/features/library/components/group-card.tsx
+++ b/src/frontend/features/library/components/group-card.tsx
@@ -35,9 +35,6 @@ interface GroupCardProps extends PropsWithChildren {
     group: GroupOut;
 }
 
-/**
- * A card representing a single group.
- */
 export function GroupCard(props: GroupCardProps): ReactNode {
     const { group } = props;
     const navigate = useNavigate();
diff --git a/src/frontend/features/search/components/search-errors.tsx b/src/frontend/features/search/components/search-errors.tsx
index 0fa884e7..5becf802 100644
--- a/src/frontend/features/search/components/search-errors.tsx
+++ b/src/frontend/features/search/components/search-errors.tsx
@@ -107,7 +107,6 @@ export function NoSearchResultError(
         );
 
     if (filtered.byGroup > 0) {
-        // User is in a subgroup
         return (
             <SectionError
                 icon={icon}
@@ -117,7 +116,6 @@ export function NoSearchResultError(
             />
         );
     } else if (filtered.byVendor > 0) {
-        // User has vendor filters selected
         return (
             <SectionError
                 icon={icon}
@@ -127,7 +125,6 @@ export function NoSearchResultError(
             />
         );
     }
-    // User has a bad search query
     return (
         <SectionError
             icon={icon}
diff --git a/src/frontend/features/search/components/search-results.tsx b/src/frontend/features/search/components/search-results.tsx
index e2074801..bf750c28 100644
--- a/src/frontend/features/search/components/search-results.tsx
+++ b/src/frontend/features/search/components/search-results.tsx
@@ -109,19 +109,15 @@ function applyRanges(str: string, ranges: Position[]) {
         const { start, length } = range;
         const end = start + length;
 
-        // Add non-highlighted part before this range
         if (currentIndex < start) {
             result.push(str.slice(currentIndex, start));
         }
 
-        // Add highlighted part
-        // Array elements must have a key to avoid a warning
         result.push(<u key={currentIndex}>{str.slice(start, end)}</u>);
 
         currentIndex = end;
     }
 
-    // Add the remaining non-highlighted part
     if (currentIndex < str.length) {
         result.push(str.slice(currentIndex));
     }
diff --git a/src/frontend/features/search/filter.ts b/src/frontend/features/search/filter.ts
index 19d58344..44af00d1 100644
--- a/src/frontend/features/search/filter.ts
+++ b/src/frontend/features/search/filter.ts
@@ -16,9 +16,8 @@ export interface FilterArgs {
 }
 
 /**
- * A list of insertables narrowed down for display, plus what the narrowing
- * cost. Searching and plain filtering both produce one, so a list renders the
- * same either way.
+ * Insertables narrowed for display, plus what the narrowing cost. Searching and
+ * plain filtering both produce one, so a list renders the same either way.
  */
 export interface FilteredInsertables {
     insertables: InsertableOut[];
@@ -35,12 +34,10 @@ export function filterInsertables(
 ): FilteredInsertables {
     let filtered = [...insertables];
 
-    // Filter by visibility
     if (args.isVisible) {
         filtered = filtered.filter((ins) => ins.isVisible);
     }
 
-    // Filter by vendors and track how many were removed
     let filteredByVendor = 0;
     if (args.vendors && args.vendors.length > 0) {
         const vendorSet = new Set(args.vendors);
diff --git a/src/frontend/features/search/search.ts b/src/frontend/features/search/search.ts
index 16048dad..fa72578b 100644
--- a/src/frontend/features/search/search.ts
+++ b/src/frontend/features/search/search.ts
@@ -118,10 +118,8 @@ export function doSearch(
         }
     });
 
-    // Add highlighting
     const hits: SearchHit[] = miniSearchResults
         .map((miniSearchResult) => {
-            // Stored fields should be the same as SearchDocument
             const document = searchDb.getStoredFields(
                 miniSearchResult.id
             ) as unknown as SearchDocument;
@@ -211,9 +209,8 @@ const DESCRIPTIVE: FieldReader = {
 };
 
 /**
- * How well one term is answered: a term matched whole beats one matched as a
- * prefix, which every longer number satisfies too — `1` names the size `1"`,
- * but only starts `16`.
+ * A term matched whole beats one matched as a prefix, which every longer number
+ * satisfies too: `1` names the size `1"`, but only starts `16`.
  */
 function termScore(valueTerms: string[], queryTerm: string): number {
     // A unit is not part of the number's spelling, so `1` still names `1"`.
diff --git a/src/frontend/features/settings/components/settings-menu.tsx b/src/frontend/features/settings/components/settings-menu.tsx
index 4efd6d7a..3459e291 100644
--- a/src/frontend/features/settings/components/settings-menu.tsx
+++ b/src/frontend/features/settings/components/settings-menu.tsx
@@ -29,9 +29,6 @@ import { ReloadGroupsButton } from "../../library/components/reload-groups-butto
 /** The FRCDesign feedback form, which the setting below opens. */
 const FEEDBACK_FORM_URL = "https://forms.gle/WVXUwnrrpLGKdiBx9";
 
-/**
- * A labeled row holding a single setting control.
- */
 function SettingRow(props: { label: string; children: ReactNode }): ReactNode {
     return (
         <Group justify="space-between" wrap="nowrap" my="sm">
@@ -141,9 +138,8 @@ function UserSettings(): ReactNode {
 }
 
 /**
- * The app's own url for the current library, free of the params Onshape
- * launches it with — carrying those over is what would keep it embedded. The
- * settings come along on their own, being the same browser's.
+ * The app's own url for the library, free of Onshape's launch params, which are
+ * what would keep it embedded. Settings follow on their own, being this browser's.
  */
 function standaloneUrl(libraryId: LibraryId): string {
     return new URL(`/app/library/${libraryId}`, window.location.origin).href;
diff --git a/src/frontend/features/settings/settings.ts b/src/frontend/features/settings/settings.ts
index 656fa777..e7532ad9 100644
--- a/src/frontend/features/settings/settings.ts
+++ b/src/frontend/features/settings/settings.ts
@@ -7,9 +7,8 @@ import { queryClient } from "../../lib/query-client";
 import { updateUiState } from "../../lib/ui-state";
 
 /**
- * Applies a setting locally, where the app reads it from, and saves it to the
- * caller's row when they have one — which is what a browser running the app for
- * the first time, and the Onshape launch, start from.
+ * Applies a setting where the app reads it, and saves it to the caller's row,
+ * which a first-run browser and the Onshape launch start from.
  */
 async function saveSettings(newSettings: SettingsUpdate): Promise<void> {
     updateUiState(newSettings);
diff --git a/src/frontend/features/thumbnails/components/thumbnail.tsx b/src/frontend/features/thumbnails/components/thumbnail.tsx
index 0b3b1758..13aa4629 100644
--- a/src/frontend/features/thumbnails/components/thumbnail.tsx
+++ b/src/frontend/features/thumbnails/components/thumbnail.tsx
@@ -213,9 +213,8 @@ export function PreviewImage(props: PreviewImageProps): ReactNode {
     );
     const targetElementType = useTargetElementType();
 
-    // Each poll gets a url of its own. The browser caches images by url for
-    // the life of the page, so reusing one leaves the stand-in on screen
-    // however many times the query refetches past it.
+    // A url per poll: the browser caches images by url for the life of the
+    // page, so reusing one leaves the stand-in up however often we refetch.
     const pollUrl = (attempt: number) =>
         thumbnailUrl({
             elementId: path.elementId,
diff --git a/src/frontend/lib/errors.ts b/src/frontend/lib/errors.ts
index 3d501dc1..24ba8253 100644
--- a/src/frontend/lib/errors.ts
+++ b/src/frontend/lib/errors.ts
@@ -42,9 +42,8 @@ export function getAppErrorHandler(defaultMessage: string, toastId?: string) {
 }
 
 /**
- * Only an error carrying wording meant for the user shows its own message;
- * anything else gets `defaultMessage`, written for the caller's context. A
- * failure the caller can act on says so, and offers them the action.
+ * Only an error worded for the user shows its own message; anything else gets
+ * `defaultMessage`. One the caller can act on offers them that action.
  */
 export function handleAppError(
     error: Error,
diff --git a/src/frontend/lib/onshape-params.ts b/src/frontend/lib/onshape-params.ts
index a3b0297a..0d538225 100644
--- a/src/frontend/lib/onshape-params.ts
+++ b/src/frontend/lib/onshape-params.ts
@@ -16,11 +16,7 @@ export interface OnshapeParams extends ElementPath {
     server: string;
 }
 
-/**
- * An actual color theme, as provided by Onshape.
- *
- * See also Theme, which is a superset of ColorTheme that also includes "system".
- */
+/** A resolved theme, as Onshape provides it; Theme adds "system" on top. */
 export type ColorTheme = "light" | "dark";
 
 /**
diff --git a/src/frontend/lib/ui-state.ts b/src/frontend/lib/ui-state.ts
index 16bffb24..fdfb4a88 100644
--- a/src/frontend/lib/ui-state.ts
+++ b/src/frontend/lib/ui-state.ts
@@ -28,9 +28,8 @@ const UiStateSchema = z.object({
     accessLevel: AccessLevelType.optional(),
     /** Set on leaving for Onshape, so the app can confirm the sign-in on return. */
     justSignedIn: z.boolean().default(false),
-    // The caller's settings, which this is the source of truth for. A signed-in
-    // caller also has them server-side, which is what a browser that has never
-    // run the app starts from.
+    // The caller's settings, and the source of truth for them; a signed-in
+    // caller's row is what a browser that has never run the app starts from.
     theme: ThemeType.default(DEFAULT_SETTINGS.theme),
     libraryId: LibraryIdType.default(DEFAULT_SETTINGS.libraryId),
     /** The group last opened in that library; null for the library itself. */
@@ -66,9 +65,8 @@ function writeStorage(value: string): void {
 }
 
 /**
- * What was stored, or the defaults when it cannot be used: written by an older
- * version, hand-edited, or naming something the app has since dropped. Losing a
- * preference beats failing to start.
+ * What was stored, or the defaults when it cannot be used — older, hand-edited,
+ * or naming something dropped. Losing a preference beats failing to start.
  */
 function readStoredState(): UiState {
     const raw = readStorage();
@@ -124,7 +122,7 @@ export function useGetUiState(): UiState {
 
 /** Merges into the state; every reader of it re-renders. */
 // The setter half of the pair above: a component reaches for one or the other,
-// so both read as hooks even though setting needs no state of its own.
+// so both read as hooks though setting needs no state of its own.
 // eslint-disable-next-line react-x/no-unnecessary-use-prefix
 export function useSetUiState(): SetUiState {
     return updateUiState;
diff --git a/src/frontend/routes/app/route.tsx b/src/frontend/routes/app/route.tsx
index da339db8..59a35265 100644
--- a/src/frontend/routes/app/route.tsx
+++ b/src/frontend/routes/app/route.tsx
@@ -37,9 +37,8 @@ export const Route = createFileRoute("/app")({
         ]
     },
     beforeLoad: ({ search, location }) => {
-        // The entry redirect seeds the theme the account last saved; ui-state
-        // is what the app reads from here on, so take it and drop the
-        // parameter rather than leave a second answer in the url.
+        // The entry redirect seeds the account's saved theme; ui-state is what
+        // the app reads, so take it rather than leave a second answer in the url.
         if (search.theme) {
             updateUiState({ theme: search.theme });
             throw redirect({
diff --git a/src/frontend/routes/index.tsx b/src/frontend/routes/index.tsx
index 7a3d09f6..c3891c21 100644
--- a/src/frontend/routes/index.tsx
+++ b/src/frontend/routes/index.tsx
@@ -3,9 +3,8 @@ import { getUiState, updateUiState } from "../lib/ui-state";
 import { showSuccessToast } from "../lib/notifications";
 import { RootAppError } from "../components/root-error";
 
-// Direct entry for a user opening the app outside Onshape, and where signing in
-// returns to. Onshape's own launch is handled server-side, so it never reaches
-// this route.
+// Direct entry from outside Onshape, and where signing in returns to; Onshape's
+// own launch is served before this route.
 export const Route = createFileRoute("/")({
     beforeLoad: ({ search }) => {
         const { libraryId, groupId, justSignedIn } = getUiState();

From 21ebaba2f96fb752645718826ea2806e50505caf Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 3 Sep 2026 13:20:36 +0000
Subject: [PATCH 37/40] Say the frontend's layout in Mantine's own props

Inline style was re-stating what Mantine already exposes: flex, miw, maw and
display are style props on every component, Center is a grid that places its
one child, and Box takes miw where a bare div needed style to.

What is left is genuinely custom, so it is named once rather than written out
at each use: NO_SHRINK for holding an icon beside text that can outgrow its
row, and maskedImage for painting an asset in the current text color.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018tgfuCHjVFvejjMe7WmEFL
---
 src/frontend/components/app-navbar.tsx        | 23 ++++++-----------
 .../build-status/components/build-status.tsx  | 19 ++++++++------
 .../insert/components/configurations.tsx      | 15 +++++------
 .../library/components/card-components.tsx    | 25 ++++++-------------
 src/frontend/lib/notifications.tsx            | 10 +++++---
 src/frontend/lib/style-constants.ts           | 17 +++++++++++++
 6 files changed, 54 insertions(+), 55 deletions(-)

diff --git a/src/frontend/components/app-navbar.tsx b/src/frontend/components/app-navbar.tsx
index bfbd7ae5..d2635a33 100644
--- a/src/frontend/components/app-navbar.tsx
+++ b/src/frontend/components/app-navbar.tsx
@@ -2,6 +2,7 @@ import {
     ActionIcon,
     Box,
     Button,
+    Center,
     Group,
     Input,
     Loader,
@@ -15,6 +16,7 @@ import {
     BORDER,
     FRAME_BACKGROUND,
     IconSize,
+    maskedImage,
     PrimaryColor,
     RADIUS,
     StatusColor
@@ -120,7 +122,7 @@ function RunningJobLoader(): ReactNode {
 
 function FrcDesignBookIcon(): ReactNode {
     return (
-        <Box
+        <Center
             component="a"
             href="https://frcdesign.org"
             target="_blank"
@@ -130,27 +132,16 @@ function FrcDesignBookIcon(): ReactNode {
             my="auto"
             bg={PrimaryColor.FILLED}
             c={PrimaryColor.CONTRAST}
-            style={{
-                borderRadius: RADIUS,
-                display: "grid",
-                placeItems: "center"
-            }}
+            style={{ borderRadius: RADIUS }}
         >
             {/* Masked, not drawn, so the book takes the tile's contrast color
-                rather than the gray in the file. The url needs quoting: Vite
-                inlines the asset as a data uri containing apostrophes. */}
+                rather than the gray in the file. */}
             <Box
                 w={IconSize.SMALL}
                 h={IconSize.SMALL}
-                style={{
-                    backgroundColor: "currentColor",
-                    maskImage: `url("${frcDesignBook}")`,
-                    maskSize: "contain",
-                    maskRepeat: "no-repeat",
-                    maskPosition: "center"
-                }}
+                style={maskedImage(frcDesignBook)}
             />
-        </Box>
+        </Center>
     );
 }
 
diff --git a/src/frontend/features/build-status/components/build-status.tsx b/src/frontend/features/build-status/components/build-status.tsx
index 631671e4..084354b9 100644
--- a/src/frontend/features/build-status/components/build-status.tsx
+++ b/src/frontend/features/build-status/components/build-status.tsx
@@ -1,5 +1,6 @@
 import {
     Badge,
+    Box,
     Divider,
     Group,
     HoverCard,
@@ -60,6 +61,7 @@ import {
 import {
     FontWeight,
     IconSize,
+    NO_SHRINK,
     RADIUS,
     StatusColor,
     statusBackground
@@ -292,7 +294,8 @@ function CardHeader({
                     fw={FontWeight.SEMI_BOLD}
                     size="sm"
                     lineClamp={2}
-                    style={{ flex: 1, minWidth: 0 }}
+                    flex={1}
+                    miw={0}
                 >
                     {name}
                 </Text>
@@ -315,7 +318,7 @@ function LastModified({
     if (jobRunning) {
         return (
             <Tooltip label="The library is being loaded from Onshape in the background">
-                <Loader size="xs" style={{ flexShrink: 0 }} />
+                <Loader size="xs" style={NO_SHRINK} />
             </Tooltip>
         );
     }
@@ -328,7 +331,7 @@ function LastModified({
                 gap={4}
                 wrap="nowrap"
                 c={StatusColor.DIMMED}
-                style={{ whiteSpace: "nowrap", flexShrink: 0 }}
+                style={{ whiteSpace: "nowrap", ...NO_SHRINK }}
             >
                 <ClockIcon size={IconSize.TINY} />
                 <Text size="xs">
@@ -462,7 +465,7 @@ function IssueCallout({ issue }: { issue: BuildIssue }): ReactNode {
             {/* Nudge the icon down so it aligns with the first line of text. */}
             <IssueIcon
                 severity={severity}
-                style={{ flexShrink: 0, marginTop: 2 }}
+                style={{ ...NO_SHRINK, marginTop: 2 }}
             />
             <Text size="sm">{getIssueDescription(issue)}</Text>
         </Group>
@@ -568,12 +571,12 @@ function ControlRow(props: {
 }): ReactNode {
     return (
         <Group justify="space-between" wrap="nowrap" gap="md" align="center">
-            <div style={{ minWidth: 0 }}>
+            <Box miw={0}>
                 <Text size="sm">{props.label}</Text>
                 <Text size="xs" c={StatusColor.DIMMED}>
                     {props.description}
                 </Text>
-            </div>
+            </Box>
             {props.control}
         </Group>
     );
@@ -737,7 +740,7 @@ function IndexingIcon({
 }): ReactNode {
     return (
         <Tooltip label={tooltip} withArrow multiline w={260}>
-            <IssueIcon severity={severity} style={{ flexShrink: 0 }} />
+            <IssueIcon severity={severity} style={NO_SHRINK} />
         </Tooltip>
     );
 }
@@ -883,7 +886,7 @@ function ExcludedFromPropertiesIcon({
                 icon={FileXIcon}
                 size={IconSize.SMALL}
                 color={StatusColor.DIMMED}
-                style={{ flexShrink: 0 }}
+                style={NO_SHRINK}
             />
         </Tooltip>
     );
diff --git a/src/frontend/features/insert/components/configurations.tsx b/src/frontend/features/insert/components/configurations.tsx
index bff893e1..77d6a975 100644
--- a/src/frontend/features/insert/components/configurations.tsx
+++ b/src/frontend/features/insert/components/configurations.tsx
@@ -270,12 +270,9 @@ function InputLabel(props: InputLabelProps) {
     const text = (
         <Text
             size="sm"
-            style={{
-                display: "flex",
-                alignItems: "center",
-                height: INPUT_HEIGHT,
-                cursor: "pointer"
-            }}
+            display="flex"
+            h={INPUT_HEIGHT}
+            style={{ alignItems: "center", cursor: "pointer" }}
             component="label"
             htmlFor={htmlFor}
         >
@@ -369,7 +366,7 @@ function EnumInput(props: ParameterProps<EnumParameter>): ReactNode {
                     label: option.name
                 }))}
                 value={currentOption.id}
-                style={{ flex: 1 }}
+                flex={1}
                 allowDeselect={false}
                 checkIconPosition="right"
                 maxDropdownHeight={250}
@@ -411,7 +408,7 @@ function StringInput(props: ParameterProps<StringParameter>): ReactNode {
             <TextInput
                 id={parameter.id}
                 value={value ?? parameter.default}
-                style={{ flex: 1 }}
+                flex={1}
                 onChange={(event) => onValueChange(event.currentTarget.value)}
             />
         </InputLabel>
@@ -476,7 +473,7 @@ function QuantityInput(props: ParameterProps<QuantityParameter>): ReactNode {
                 ref={ref}
                 value={focused ? expression : display}
                 error={errorMessage}
-                style={{ flex: 1 }}
+                flex={1}
                 onFocus={(event) => {
                     setFocused(true);
                     event.currentTarget.select();
diff --git a/src/frontend/features/library/components/card-components.tsx b/src/frontend/features/library/components/card-components.tsx
index 7ea34d39..c63e79d4 100644
--- a/src/frontend/features/library/components/card-components.tsx
+++ b/src/frontend/features/library/components/card-components.tsx
@@ -6,7 +6,7 @@ import {
     LinkIcon,
     PlusIcon
 } from "@phosphor-icons/react";
-import { IconSize, StatusColor } from "../../../lib/style-constants";
+import { IconSize, NO_SHRINK, StatusColor } from "../../../lib/style-constants";
 import { meaningfulPartNumber } from "@backend/features/configurations/part-number";
 import { copyUrlToClipboard, makeUrl, openUrlInNewTab } from "../../../lib/url";
 import { PropsWithChildren, ReactNode, useCallback } from "react";
@@ -244,12 +244,7 @@ function CardPartNumber(props: {
     const text = <HighlightedText text={partNumber} positions={positions} />;
     if (!url) {
         return (
-            <Text
-                inherit
-                truncate
-                miw={0}
-                style={{ flexShrink: 0, maxWidth: "100%" }}
-            >
+            <Text inherit truncate miw={0} maw="100%" style={NO_SHRINK}>
                 {text}
             </Text>
         );
@@ -261,14 +256,10 @@ function CardPartNumber(props: {
             inherit
             // The row inserts on click, which is not what the link is for.
             onClick={(event) => event.stopPropagation()}
-            style={{
-                display: "inline-flex",
-                alignItems: "center",
-                gap: 2,
-                minWidth: 0,
-                flexShrink: 0,
-                maxWidth: "100%"
-            }}
+            display="inline-flex"
+            miw={0}
+            maw="100%"
+            style={{ alignItems: "center", gap: 2, ...NO_SHRINK }}
         >
             <Text component="span" inherit truncate miw={0}>
                 {text}
@@ -288,9 +279,7 @@ export function ItemTable(props: PropsWithChildren): ReactNode {
             highlightOnHover
             verticalSpacing="xs"
             layout="fixed"
-            style={{
-                cursor: "pointer"
-            }}
+            style={{ cursor: "pointer" }}
         >
             <Table.Tbody>{props.children}</Table.Tbody>
         </Table>
diff --git a/src/frontend/lib/notifications.tsx b/src/frontend/lib/notifications.tsx
index a0b76865..70c55acb 100644
--- a/src/frontend/lib/notifications.tsx
+++ b/src/frontend/lib/notifications.tsx
@@ -1,8 +1,8 @@
 import { notifications } from "@mantine/notifications";
 import type { ReactNode } from "react";
 import { CheckCircleIcon, InfoIcon, XCircleIcon } from "@phosphor-icons/react";
-import { IconSize } from "./style-constants";
-import { Group, Button } from "@mantine/core";
+import { IconSize, NO_SHRINK } from "./style-constants";
+import { Box, Group, Button } from "@mantine/core";
 
 export interface NotificationAction {
     text: string;
@@ -23,12 +23,14 @@ export function renderNotification(
         <Group justify="space-between" wrap="nowrap" gap="sm">
             {/* Only reachable on a window too narrow for the row: the message
                 is what gives, and the button keeps its label intact. */}
-            <span style={{ minWidth: 0 }}>{message}</span>
+            <Box component="span" miw={0}>
+                {message}
+            </Box>
             <Button
                 size="compact-sm"
                 variant="subtle"
                 onClick={action.onClick}
-                style={{ flexShrink: 0 }}
+                style={NO_SHRINK}
             >
                 {action.text}
             </Button>
diff --git a/src/frontend/lib/style-constants.ts b/src/frontend/lib/style-constants.ts
index 6a4df66a..65d2f257 100644
--- a/src/frontend/lib/style-constants.ts
+++ b/src/frontend/lib/style-constants.ts
@@ -59,6 +59,23 @@ export const FRAME_BACKGROUND =
  */
 export const TITLE_ICON_NUDGE = { transform: "translateY(-1px)" };
 
+/** Holds an icon or badge at its own size beside text that can outgrow the row. */
+export const NO_SHRINK = { flexShrink: 0 };
+
+/**
+ * Paints an image in the current text color rather than its own. The url needs
+ * quoting: Vite inlines an asset as a data uri, which can contain apostrophes.
+ */
+export function maskedImage(url: string) {
+    return {
+        backgroundColor: "currentColor",
+        maskImage: `url("${url}")`,
+        maskSize: "contain",
+        maskRepeat: "no-repeat",
+        maskPosition: "center"
+    };
+}
+
 /**
  * One height for a section header, set rather than left to the content: an
  * accordion is sized by its label, a group header by its menu button.

From 1f020f9814ca7297cca9a07cb519a9e95dfa37d6 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 3 Sep 2026 13:24:43 +0000
Subject: [PATCH 38/40] Give every component a props interface and one place
 for defaults
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A component's props were declared three ways — an interface, an object literal
at the signature, a destructure at the signature — so a reader had to find out
which before reading the props. They are all interfaces now.

Defaults were split the same way: destructure the rest of the props, then a
`props.x ?? fallback` line below for the optional ones, which reads as though
it were doing something more than defaulting. They land in the destructure.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018tgfuCHjVFvejjMe7WmEFL
---
 src/frontend/components/app-modal.tsx             |  5 +++--
 src/frontend/components/app-zero-state.tsx        | 15 ++++++++++-----
 src/frontend/features/auth/access-level.tsx       | 12 ++++++++----
 .../library/components/card-components.tsx        |  7 +++++--
 .../features/library/components/group-card.tsx    |  7 ++++++-
 .../library/components/reload-groups-button.tsx   |  2 +-
 .../features/search/components/search-errors.tsx  |  9 +++++++--
 .../settings/components/settings-menu.tsx         | 13 +++++++++----
 .../settings/components/vendor-filters.tsx        | 11 +++--------
 .../app/library/$libraryId/groups/$groupId.tsx    |  7 ++++++-
 .../routes/app/library/$libraryId/index.tsx       |  7 ++++++-
 11 files changed, 64 insertions(+), 31 deletions(-)

diff --git a/src/frontend/components/app-modal.tsx b/src/frontend/components/app-modal.tsx
index 223bcc2e..22bb5696 100644
--- a/src/frontend/components/app-modal.tsx
+++ b/src/frontend/components/app-modal.tsx
@@ -9,9 +9,10 @@ interface AppModalBodyProps extends PropsWithChildren {
 
 /** A modal's content, padded away from the header and footer framing it. */
 export function AppModalBody(props: AppModalBodyProps): ReactNode {
+    const { gap = "sm", children } = props;
     return (
-        <Stack p="sm" gap={props.gap ?? "sm"}>
-            {props.children}
+        <Stack p="sm" gap={gap}>
+            {children}
         </Stack>
     );
 }
diff --git a/src/frontend/components/app-zero-state.tsx b/src/frontend/components/app-zero-state.tsx
index 24c5da80..42289a4a 100644
--- a/src/frontend/components/app-zero-state.tsx
+++ b/src/frontend/components/app-zero-state.tsx
@@ -63,12 +63,12 @@ function resolveDescription(description: ErrorProps["description"]): ReactNode {
 }
 
 export function SectionError(props: ErrorProps): ReactNode {
-    const { title, action, className } = props;
+    const { title, action, className, icon = DEFAULT_ERROR_ICON } = props;
     return (
         <ZeroState
             className={className}
             title={title}
-            icon={props.icon ?? DEFAULT_ERROR_ICON}
+            icon={icon}
             description={resolveDescription(props.description)}
             action={action}
         />
@@ -93,14 +93,19 @@ interface PageErrorProps extends ErrorProps {
 }
 
 export function PageError(props: PageErrorProps): ReactNode {
-    const { title, action, className } = props;
-    const justifyUp = props.justifyUp ?? false;
+    const {
+        title,
+        action,
+        className,
+        icon = DEFAULT_ERROR_ICON,
+        justifyUp = false
+    } = props;
 
     const error = (
         <ZeroState
             className={className}
             title={title}
-            icon={props.icon ?? DEFAULT_ERROR_ICON}
+            icon={icon}
             description={resolveDescription(props.description)}
             action={action}
         />
diff --git a/src/frontend/features/auth/access-level.tsx b/src/frontend/features/auth/access-level.tsx
index 7bbf1d66..7914d2e6 100644
--- a/src/frontend/features/auth/access-level.tsx
+++ b/src/frontend/features/auth/access-level.tsx
@@ -78,15 +78,19 @@ interface RequireAccessLevelProps extends PropsWithChildren {
 }
 
 export function RequireAccessLevel(props: RequireAccessLevelProps) {
+    const {
+        accessLevel = AccessLevel.EDITOR,
+        useMaxAccessLevel = false,
+        children
+    } = props;
     const accessData = useAccessData();
-    const requiredAccessLevel = props.accessLevel ?? AccessLevel.EDITOR;
-    const currentAccessLevel = props.useMaxAccessLevel
+    const currentAccessLevel = useMaxAccessLevel
         ? accessData.maxAccessLevel
         : accessData.currentAccessLevel;
 
     // Reads backwards: the level held is the ceiling the requirement fits under.
-    return isWithinAccessLevel(requiredAccessLevel, currentAccessLevel)
-        ? props.children
+    return isWithinAccessLevel(accessLevel, currentAccessLevel)
+        ? children
         : null;
 }
 
diff --git a/src/frontend/features/library/components/card-components.tsx b/src/frontend/features/library/components/card-components.tsx
index c63e79d4..ccb8d3a4 100644
--- a/src/frontend/features/library/components/card-components.tsx
+++ b/src/frontend/features/library/components/card-components.tsx
@@ -235,11 +235,14 @@ function PartNameAndNumber(props: PartNameAndNumberProps): ReactNode {
 }
 
 /** The part number, linked to the vendor's page for it when there is one. */
-function CardPartNumber(props: {
+interface CardPartNumberProps {
     partNumber: string;
+    /** Where the query matched inside it, for underlining. */
     positions?: Position[];
     url?: string;
-}): ReactNode {
+}
+
+function CardPartNumber(props: CardPartNumberProps): ReactNode {
     const { partNumber, positions, url } = props;
     const text = <HighlightedText text={partNumber} positions={positions} />;
     if (!url) {
diff --git a/src/frontend/features/library/components/group-card.tsx b/src/frontend/features/library/components/group-card.tsx
index 8c4530a4..bafd5673 100644
--- a/src/frontend/features/library/components/group-card.tsx
+++ b/src/frontend/features/library/components/group-card.tsx
@@ -164,7 +164,12 @@ function HideAllElementsMenuItem({
     );
 }
 
-function DeleteGroupMenuItem({ groupId }: { groupId: string }): ReactNode {
+interface DeleteGroupMenuItemProps {
+    groupId: string;
+}
+
+function DeleteGroupMenuItem(props: DeleteGroupMenuItemProps): ReactNode {
+    const { groupId } = props;
     const libraryId = useLibraryId();
     const refreshLibrary = useRefreshLibrary();
 
diff --git a/src/frontend/features/library/components/reload-groups-button.tsx b/src/frontend/features/library/components/reload-groups-button.tsx
index 9af74367..b134b47f 100644
--- a/src/frontend/features/library/components/reload-groups-button.tsx
+++ b/src/frontend/features/library/components/reload-groups-button.tsx
@@ -17,7 +17,7 @@ interface ReloadGroupsButtonProps {
 }
 
 export function ReloadGroupsButton(props: ReloadGroupsButtonProps): ReactNode {
-    const reloadAll = props.reloadAll ?? false;
+    const { reloadAll = false } = props;
 
     const libraryId = useLibraryId();
 
diff --git a/src/frontend/features/search/components/search-errors.tsx b/src/frontend/features/search/components/search-errors.tsx
index 5becf802..08f0ee44 100644
--- a/src/frontend/features/search/components/search-errors.tsx
+++ b/src/frontend/features/search/components/search-errors.tsx
@@ -40,7 +40,12 @@ interface FilterCalloutProps {
  * Blue rather than the library accent: the strip reports on the results, so it
  * should read as a note beside them rather than as part of the library.
  */
-function Callout(props: { text: string; action: ReactNode }): ReactNode {
+interface CalloutProps {
+    text: string;
+    action: ReactNode;
+}
+
+function Callout(props: CalloutProps): ReactNode {
     return (
         <Alert
             color={StatusColor.INFO}
@@ -142,9 +147,9 @@ interface SearchAllButtonProps {
 }
 
 function SearchAllButton(props: SearchAllButtonProps): ReactNode {
+    const { small = false } = props;
     const navigate = useNavigate();
     const libraryId = useLibraryId();
-    const small = props.small ?? false;
     return (
         <Button
             leftSection={<MagnifyingGlassIcon size={IconSize.SMALL} />}
diff --git a/src/frontend/features/settings/components/settings-menu.tsx b/src/frontend/features/settings/components/settings-menu.tsx
index 3459e291..46c0bb5e 100644
--- a/src/frontend/features/settings/components/settings-menu.tsx
+++ b/src/frontend/features/settings/components/settings-menu.tsx
@@ -6,7 +6,7 @@ import {
     IconSize,
     StatusColor
 } from "../../../lib/style-constants";
-import { ReactNode } from "react";
+import { PropsWithChildren, ReactNode } from "react";
 import {
     AccessLevel,
     hasEditorAccess,
@@ -29,13 +29,18 @@ import { ReloadGroupsButton } from "../../library/components/reload-groups-butto
 /** The FRCDesign feedback form, which the setting below opens. */
 const FEEDBACK_FORM_URL = "https://forms.gle/WVXUwnrrpLGKdiBx9";
 
-function SettingRow(props: { label: string; children: ReactNode }): ReactNode {
+interface SettingRowProps extends PropsWithChildren {
+    label: string;
+}
+
+function SettingRow(props: SettingRowProps): ReactNode {
+    const { label, children } = props;
     return (
         <Group justify="space-between" wrap="nowrap" my="sm">
             <Text size="sm" fw={FontWeight.SEMI_BOLD}>
-                {props.label}
+                {label}
             </Text>
-            {props.children}
+            {children}
         </Group>
     );
 }
diff --git a/src/frontend/features/settings/components/vendor-filters.tsx b/src/frontend/features/settings/components/vendor-filters.tsx
index 80dddca6..d6761b7b 100644
--- a/src/frontend/features/settings/components/vendor-filters.tsx
+++ b/src/frontend/features/settings/components/vendor-filters.tsx
@@ -8,21 +8,16 @@ import { useGetUiState, useSetUiState } from "../../../lib/ui-state";
 import { AppContextMenu } from "../../../components/app-menu";
 
 interface ClearFiltersButtonProps {
-    /**
-     * @default "Clear filters"
-     */
+    /** @default "Clear filters" */
     text?: string;
-    /**
-     * @default false
-     */
+    /** @default false */
     small?: boolean;
 }
 
 export function ClearFiltersButton(props: ClearFiltersButtonProps): ReactNode {
+    const { text = "Clear filters", small = false } = props;
     const uiState = useGetUiState();
     const setUiState = useSetUiState();
-    const text = props.text ?? "Clear filters";
-    const small = props.small ?? false;
 
     const vendorFilters = uiState.vendorFilters;
     const areAllTagsActive = vendorFilters === undefined;
diff --git a/src/frontend/routes/app/library/$libraryId/groups/$groupId.tsx b/src/frontend/routes/app/library/$libraryId/groups/$groupId.tsx
index c6f1a008..fc1df2a7 100644
--- a/src/frontend/routes/app/library/$libraryId/groups/$groupId.tsx
+++ b/src/frontend/routes/app/library/$libraryId/groups/$groupId.tsx
@@ -117,7 +117,12 @@ function GroupList(): ReactNode {
     );
 }
 
-function GroupHeaderRow({ group }: { group: GroupOut }): ReactNode {
+interface GroupHeaderRowProps {
+    group: GroupOut;
+}
+
+function GroupHeaderRow(props: GroupHeaderRowProps): ReactNode {
+    const { group } = props;
     const navigate = useNavigate();
     const libraryId = useLibraryId();
     const menuItems = <GroupMenuItems group={group} />;
diff --git a/src/frontend/routes/app/library/$libraryId/index.tsx b/src/frontend/routes/app/library/$libraryId/index.tsx
index 17227884..953b4a13 100644
--- a/src/frontend/routes/app/library/$libraryId/index.tsx
+++ b/src/frontend/routes/app/library/$libraryId/index.tsx
@@ -151,7 +151,12 @@ function HomeList(): ReactNode {
 }
 
 /** The library's name, and a badge when it is not simply supported. */
-function LibraryTitle({ libraryId }: { libraryId: string }): ReactNode {
+interface LibraryTitleProps {
+    libraryId: string;
+}
+
+function LibraryTitle(props: LibraryTitleProps): ReactNode {
+    const { libraryId } = props;
     const status = getLibraryStatus(libraryId);
     return (
         <AppTitle

From dd0d533cba6cbed9737ae00b186d77b93534cb42 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 3 Sep 2026 13:43:39 +0000
Subject: [PATCH 39/40] Split build status into the parts of the card it draws
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

One file held 34 declarations and every layer of the build card at once, while
every other feature here is already several files. It becomes five, each one
thing the card is made of: the badges and hover card that open it, the issue
severities it summarizes, the admin toggles, the parsed metadata, and the two
row primitives all of them share.

The seams are one-way — sections is a leaf, issues and parsed sit above it,
admin above those, and the card composes them — so the imports say which layer
a component belongs to.

Every component here took its props as a literal type at the signature; they
are interfaces now, like the rest of the frontend.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018tgfuCHjVFvejjMe7WmEFL
---
 .../build-status/components/admin-section.tsx | 210 +++++
 .../build-status/components/build-status.tsx  | 806 ++----------------
 .../build-status/components/issues.tsx        | 254 ++++++
 .../components/parsed-section.tsx             | 287 +++++++
 .../build-status/components/sections.tsx      |  41 +
 5 files changed, 841 insertions(+), 757 deletions(-)
 create mode 100644 src/frontend/features/build-status/components/admin-section.tsx
 create mode 100644 src/frontend/features/build-status/components/issues.tsx
 create mode 100644 src/frontend/features/build-status/components/parsed-section.tsx
 create mode 100644 src/frontend/features/build-status/components/sections.tsx

diff --git a/src/frontend/features/build-status/components/admin-section.tsx b/src/frontend/features/build-status/components/admin-section.tsx
new file mode 100644
index 00000000..5adca02c
--- /dev/null
+++ b/src/frontend/features/build-status/components/admin-section.tsx
@@ -0,0 +1,210 @@
+import { Stack, Switch, Tooltip } from "@mantine/core";
+import { ReactNode } from "react";
+import { BuildIssueSeverity } from "@backend/features/build-checker/issues";
+import {
+    GroupBuildStatus,
+    InsertableBuildStatus
+} from "@backend/features/build-checker/contract";
+import { ElementType } from "@backend/lib/onshape/element-type";
+import {
+    AUTO_INDEX_THRESHOLD,
+    type ConfigurationCount,
+    IndexingBand,
+    MAX_PART_NUMBER_CONFIGURATIONS
+} from "@backend/features/configurations/combinations";
+import { NO_SHRINK } from "../../../lib/style-constants";
+import {
+    useSetVisibilityMutation,
+    useToggleInsertAndFastenMutation,
+    useIndexConfigurationsMutation,
+    useToggleSortOrderMutation
+} from "../../library/card-hooks";
+import { ControlRow, SectionHeader } from "./sections";
+import { IssueIcon } from "./issues";
+
+interface SwitchRowProps {
+    label: string;
+    description?: string;
+    checked: boolean;
+    onToggle: () => void;
+}
+
+/** A label (+ description) and on/off Switch row for an editable admin flag. */
+function SwitchRow(props: SwitchRowProps): ReactNode {
+    return (
+        <ControlRow
+            label={props.label}
+            description={props.description}
+            control={
+                <Switch
+                    size="sm"
+                    checked={props.checked}
+                    onChange={props.onToggle}
+                    withThumbIndicator={false}
+                />
+            }
+        />
+    );
+}
+
+interface InsertableAdminSectionProps {
+    insertableId: string;
+    status: InsertableBuildStatus;
+    configurationCount: ConfigurationCount;
+}
+
+/** The editable admin toggles for an insertable. */
+export function InsertableAdminSection(
+    props: InsertableAdminSectionProps
+): ReactNode {
+    const { insertableId, status, configurationCount } = props;
+    return (
+        <Stack gap="sm">
+            <SectionHeader>Admin</SectionHeader>
+            <VisibilitySwitch
+                insertableId={insertableId}
+                isVisible={status.isVisible}
+            />
+            <FastenSwitch
+                insertableId={insertableId}
+                supportsFasten={status.supportsFasten}
+            />
+            <IndexingRow
+                insertableId={insertableId}
+                status={status}
+                band={configurationCount.band}
+            />
+        </Stack>
+    );
+}
+
+interface VisibilitySwitchProps {
+    insertableId: string;
+    isVisible: boolean;
+}
+
+function VisibilitySwitch(props: VisibilitySwitchProps): ReactNode {
+    const { insertableId, isVisible } = props;
+    const mutation = useSetVisibilityMutation([insertableId], !isVisible);
+    return (
+        <SwitchRow
+            label="Visible to users"
+            checked={isVisible}
+            onToggle={() => mutation.mutate()}
+        />
+    );
+}
+
+interface FastenSwitchProps {
+    insertableId: string;
+    supportsFasten: boolean;
+}
+
+function FastenSwitch(props: FastenSwitchProps): ReactNode {
+    const { insertableId, supportsFasten } = props;
+    const mutation = useToggleInsertAndFastenMutation(insertableId);
+    return (
+        <SwitchRow
+            label="Insert and fasten"
+            description="Allows mate-on-insert"
+            checked={supportsFasten}
+            onToggle={() => mutation.mutate(!supportsFasten)}
+        />
+    );
+}
+
+interface IndexingRowProps {
+    insertableId: string;
+    status: InsertableBuildStatus;
+    band: IndexingBand;
+}
+
+/**
+ * A switch only where enabling indexing is the admin's call, an icon saying why
+ * not otherwise — past the cap it can't run, under the threshold it already has.
+ */
+function IndexingRow(props: IndexingRowProps): ReactNode {
+    const { insertableId, status, band } = props;
+    const mutation = useIndexConfigurationsMutation(insertableId);
+
+    let control: ReactNode;
+    if (status.elementType === ElementType.ASSEMBLY) {
+        control = (
+            <IndexingIcon
+                severity={null}
+                tooltip="This part is an assembly, so metadata is pulled directly from the assembly tab."
+            />
+        );
+    } else if (band === IndexingBand.EXCEEDED) {
+        control = (
+            <IndexingIcon
+                severity={BuildIssueSeverity.ERROR}
+                tooltip={`Parts with more than ${MAX_PART_NUMBER_CONFIGURATIONS} configurations are not eligible for indexing. To resolve, exclude configurations from affecting part properties in Onshape.`}
+            />
+        );
+    } else if (band === IndexingBand.AUTOMATIC) {
+        control = (
+            <IndexingIcon
+                severity={null}
+                tooltip={`Indexed automatically: an insertable under ${AUTO_INDEX_THRESHOLD} configurations indexes on every load.`}
+            />
+        );
+    } else {
+        control = (
+            <Switch
+                size="sm"
+                checked={status.indexConfigurations}
+                onChange={() => mutation.mutate(!status.indexConfigurations)}
+                withThumbIndicator={false}
+            />
+        );
+    }
+
+    return (
+        <ControlRow
+            label="Enable indexing"
+            description="Index metadata for search"
+            control={control}
+        />
+    );
+}
+
+interface IndexingIconProps {
+    severity: BuildIssueSeverity | null;
+    tooltip: string;
+}
+
+/**
+ * Stands in for the switch where there is nothing to toggle, reusing the
+ * build-check icons so the state reads the same as the callouts above it.
+ */
+function IndexingIcon(props: IndexingIconProps): ReactNode {
+    const { severity, tooltip } = props;
+    return (
+        <Tooltip label={tooltip} withArrow multiline w={260}>
+            <IssueIcon severity={severity} style={NO_SHRINK} />
+        </Tooltip>
+    );
+}
+
+interface GroupAdminSectionProps {
+    groupId: string;
+    status: GroupBuildStatus;
+}
+
+/** The editable admin toggles for a group. */
+export function GroupAdminSection(props: GroupAdminSectionProps): ReactNode {
+    const { groupId, status } = props;
+    const mutation = useToggleSortOrderMutation(groupId);
+    return (
+        <Stack gap="sm">
+            <SectionHeader>Admin</SectionHeader>
+            <SwitchRow
+                label="Sort alphabetically"
+                description="Order elements A-Z instead of by tab"
+                checked={status.sortAlphabetically}
+                onToggle={() => mutation.mutate(!status.sortAlphabetically)}
+            />
+        </Stack>
+    );
+}
diff --git a/src/frontend/features/build-status/components/build-status.tsx b/src/frontend/features/build-status/components/build-status.tsx
index 084354b9..56871b74 100644
--- a/src/frontend/features/build-status/components/build-status.tsx
+++ b/src/frontend/features/build-status/components/build-status.tsx
@@ -1,163 +1,42 @@
 import {
-    Badge,
-    Box,
     Divider,
     Group,
     HoverCard,
     Loader,
-    ScrollArea,
     Stack,
-    Switch,
     Text,
     Tooltip
 } from "@mantine/core";
-import {
-    CheckIcon,
-    ClockIcon,
-    FileXIcon,
-    InfoIcon,
-    WarningIcon,
-    WarningOctagonIcon,
-    XIcon
-} from "@phosphor-icons/react";
-import {
-    ReactNode,
-    createContext,
-    use,
-    useCallback,
-    useMemo,
-    useState
-} from "react";
+import { ClockIcon } from "@phosphor-icons/react";
+import { ReactNode, createContext, use, useCallback, useState } from "react";
 import { formatRelativeTime } from "../../../lib/format-time";
 import {
-    addBuildIssue,
     BuildIssue,
-    BuildIssueSeverity,
-    BuildIssueType,
-    getIssueDescription,
-    getIssueSeverity,
-    getMaxSeverity,
-    hasBuildIssue
+    getMaxSeverity
 } from "@backend/features/build-checker/issues";
-import {
-    GroupBuildStatus,
-    InsertableBuildStatus
-} from "@backend/features/build-checker/contract";
-import { getVendorName, Vendor } from "@backend/features/library/vendors";
-import { ElementType } from "@backend/lib/onshape/element-type";
-import {
-    ConfigurationParameter,
-    ParameterType
-} from "@backend/features/configurations/models";
-import {
-    AUTO_INDEX_THRESHOLD,
-    type ConfigurationCount,
-    countCombinations,
-    countConfigurations,
-    IndexingBand,
-    MAX_COUNTED_CONFIGURATIONS,
-    MAX_PART_NUMBER_CONFIGURATIONS
-} from "@backend/features/configurations/combinations";
+import { InsertableBuildStatus } from "@backend/features/build-checker/contract";
 import {
     FontWeight,
     IconSize,
     NO_SHRINK,
-    RADIUS,
-    StatusColor,
-    statusBackground
+    StatusColor
 } from "../../../lib/style-constants";
 import { RequireAccessLevel } from "../../auth/access-level";
 import { useBuildStatusQuery } from "../queries";
 import { useIsJobRunning } from "../../library/queries";
-import { AppIcon, type AppIconProps } from "../../../components/app-icon";
 import {
-    useSetVisibilityMutation,
-    useToggleInsertAndFastenMutation,
-    useIndexConfigurationsMutation,
-    useToggleSortOrderMutation
-} from "../../library/card-hooks";
-
-/** Discriminated so `StateValue` renders each kind its own way. */
-export type StateRowValue =
-    | { kind: "bool"; value: boolean }
-    | { kind: "text"; text: string; dimmed?: boolean }
-    | { kind: "vendors"; vendors: Vendor[] };
-
-/**
- * Returns the build issues for an insertable, merging insertable-level and
- * configuration-level issues.
- */
-function getInsertableBuildIssues(
-    insertable: InsertableBuildStatus
-): BuildIssue[] {
-    const configIssues = insertable.configuration?.buildIssues ?? [];
-    return [...insertable.buildIssues, ...configIssues];
-}
-
-/**
- * Stored issues plus the live "no unhidden insertables" check, which needs the
- * per-insertable visibility in the same response.
- */
-function useGroupBuildIssues(
-    groupStatus: GroupBuildStatus | undefined,
-    insertableStatuses: Record<string, InsertableBuildStatus> | undefined
-): BuildIssue[] {
-    return useMemo(() => {
-        if (!groupStatus) return [];
-        const hasUnhidden = groupStatus.insertableOrder.some(
-            (id) => insertableStatuses?.[id]?.isVisible
-        );
-        // A group that never loaded has no insertables to unhide, so the failure
-        // is the whole story.
-        if (
-            hasUnhidden ||
-            hasBuildIssue(groupStatus.buildIssues, BuildIssueType.LOAD_FAILED)
-        ) {
-            return groupStatus.buildIssues;
-        }
-        return addBuildIssue(groupStatus.buildIssues, {
-            type: BuildIssueType.NO_UNHIDDEN_INSERTABLES
-        });
-    }, [groupStatus, insertableStatuses]);
-}
-
-interface IssueIconProps extends Omit<AppIconProps, "icon" | "color"> {
-    /** The severity to render, or null if all checks pass. */
-    severity: BuildIssueSeverity | null;
-}
-
-/** The icon each severity is drawn as; `ok` is a build with nothing to say. */
-const SEVERITY_ICONS = {
-    [BuildIssueSeverity.ERROR]: WarningOctagonIcon,
-    [BuildIssueSeverity.WARNING]: WarningIcon,
-    [BuildIssueSeverity.INFO]: InfoIcon,
-    ok: CheckIcon
-};
-
-/** The color a severity is spoken in; null is a build with nothing to say. */
-function severityColor(severity: BuildIssueSeverity | null): StatusColor {
-    switch (severity) {
-        case BuildIssueSeverity.ERROR:
-            return StatusColor.ERROR;
-        case BuildIssueSeverity.WARNING:
-            return StatusColor.WARNING;
-        case BuildIssueSeverity.INFO:
-            return StatusColor.INFO;
-        case null:
-            return StatusColor.SUCCESS;
-    }
-}
-
-/** Renders the icon for a build-issue severity in its severity color. */
-export function IssueIcon({ severity, ...others }: IssueIconProps): ReactNode {
-    return (
-        <AppIcon
-            icon={SEVERITY_ICONS[severity ?? "ok"]}
-            color={severityColor(severity)}
-            {...others}
-        />
-    );
-}
+    BuildChecksSection,
+    IssueIcon,
+    SeverityBadges,
+    getInsertableBuildIssues,
+    useGroupBuildIssues
+} from "./issues";
+import {
+    ConfigurationSection,
+    InsertableParsedSection,
+    useConfigurationCount
+} from "./parsed-section";
+import { GroupAdminSection, InsertableAdminSection } from "./admin-section";
 
 interface BuildStatusCardProps {
     /** The group/insertable name shown in the header. */
@@ -219,7 +98,7 @@ export function useCloseBuildCard(): () => void {
  * A severity icon whose hover card shows the build-status card wrapping the
  * given admin menu. Only rendered for editors and admins.
  */
-export function BuildStatusBadge(props: BuildStatusBadgeProps): ReactNode {
+function BuildStatusBadge(props: BuildStatusBadgeProps): ReactNode {
     // Gate first so the card and its admin controls only exist for editors.
     return (
         <RequireAccessLevel>
@@ -272,16 +151,15 @@ function BuildStatusHoverCard({
     );
 }
 
-/** The card header: name + severity summary on the left, last-loaded on the right. */
-function CardHeader({
-    name,
-    issues,
-    lastLoadedAt
-}: {
+interface CardHeaderProps {
     name: string;
     issues: BuildIssue[];
     lastLoadedAt: number | null;
-}): ReactNode {
+}
+
+/** The card header: name + severity summary on the left, last-loaded on the right. */
+function CardHeader(props: CardHeaderProps): ReactNode {
+    const { name, issues, lastLoadedAt } = props;
     return (
         <Stack gap={6}>
             <Group
@@ -306,14 +184,15 @@ function CardHeader({
     );
 }
 
+interface LastModifiedProps {
+    lastLoadedAt: number | null;
+}
+
 /**
  * The last-modified time, or a spinner (with a tooltip) while a job is running.
  */
-function LastModified({
-    lastLoadedAt
-}: {
-    lastLoadedAt: number | null;
-}): ReactNode {
+function LastModified(props: LastModifiedProps): ReactNode {
+    const { lastLoadedAt } = props;
     const jobRunning = useIsJobRunning();
     if (jobRunning) {
         return (
@@ -344,147 +223,16 @@ function LastModified({
     );
 }
 
-/** Pill badges summarizing the issue counts, or an "all clear" badge. */
-function SeverityBadges({ issues }: { issues: BuildIssue[] }): ReactNode {
-    if (issues.length === 0) {
-        return (
-            <Badge
-                size="sm"
-                variant="light"
-                color={StatusColor.SUCCESS}
-                leftSection={<CheckIcon size={IconSize.TINY} />}
-            >
-                All checks pass
-            </Badge>
-        );
-    }
-
-    const counts = countSeverities(issues);
-    return (
-        <Group gap={6} wrap="wrap">
-            {counts.error > 0 && (
-                <CountBadge
-                    severity={BuildIssueSeverity.ERROR}
-                    count={counts.error}
-                />
-            )}
-            {counts.warning > 0 && (
-                <CountBadge
-                    severity={BuildIssueSeverity.WARNING}
-                    count={counts.warning}
-                />
-            )}
-            {counts.info > 0 && (
-                <CountBadge
-                    severity={BuildIssueSeverity.INFO}
-                    count={counts.info}
-                />
-            )}
-        </Group>
-    );
-}
-
-/** The badge color and singular noun for each severity. */
-const SEVERITY_BADGE: Record<
-    BuildIssueSeverity,
-    { color: string; noun: string }
-> = {
-    [BuildIssueSeverity.ERROR]: { color: "red", noun: "error" },
-    [BuildIssueSeverity.WARNING]: { color: "yellow", noun: "warning" },
-    [BuildIssueSeverity.INFO]: { color: "blue", noun: "info" }
-};
-
-function CountBadge({
-    severity,
-    count
-}: {
-    severity: BuildIssueSeverity;
-    count: number;
-}): ReactNode {
-    const { color, noun } = SEVERITY_BADGE[severity];
-    // Don't pluralize info, e.g. "2 infos" reads wrong.
-    const plural = severity !== BuildIssueSeverity.INFO && count > 1 ? "s" : "";
-    return (
-        <Badge size="sm" variant="light" color={color}>
-            {`${count} ${noun}${plural}`}
-        </Badge>
-    );
-}
-
-/** How many issues of each severity a build carries. */
-interface SeverityCounts {
-    error: number;
-    warning: number;
-    info: number;
-}
-
-function countSeverities(issues: BuildIssue[]): SeverityCounts {
-    const counts = { error: 0, warning: 0, info: 0 };
-    for (const issue of issues) {
-        switch (getIssueSeverity(issue)) {
-            case BuildIssueSeverity.ERROR:
-                counts.error += 1;
-                break;
-            case BuildIssueSeverity.WARNING:
-                counts.warning += 1;
-                break;
-            case BuildIssueSeverity.INFO:
-                counts.info += 1;
-                break;
-        }
-    }
-    return counts;
-}
-
-/** The build checks: one tinted callout per issue. Rendered only when non-empty. */
-function BuildChecksSection({ issues }: { issues: BuildIssue[] }): ReactNode {
-    return (
-        <Stack gap={6}>
-            <SectionHeader>Build checks</SectionHeader>
-            {issues.map((issue) => (
-                <IssueCallout key={issue.type} issue={issue} />
-            ))}
-        </Stack>
-    );
-}
-
-/** A single build issue rendered as a tinted callout box in its severity color. */
-function IssueCallout({ issue }: { issue: BuildIssue }): ReactNode {
-    const severity = getIssueSeverity(issue);
-    return (
-        <Group
-            gap="xs"
-            wrap="nowrap"
-            align="flex-start"
-            p="xs"
-            style={{
-                backgroundColor: severityBackground(severity),
-                borderRadius: RADIUS
-            }}
-        >
-            {/* Nudge the icon down so it aligns with the first line of text. */}
-            <IssueIcon
-                severity={severity}
-                style={{ ...NO_SHRINK, marginTop: 2 }}
-            />
-            <Text size="sm">{getIssueDescription(issue)}</Text>
-        </Group>
-    );
-}
-
-/** The light background tint for a build-issue callout. */
-function severityBackground(severity: BuildIssueSeverity): string {
-    return statusBackground(severityColor(severity));
+interface InsertableStatusBadgeProps {
+    insertableId: string;
+    name: string;
 }
 
 /** Build-status badge pre-wired for an insertable. */
-export function InsertableStatusBadge({
-    insertableId,
-    name
-}: {
-    insertableId: string;
-    name: string;
-}): ReactNode {
+export function InsertableStatusBadge(
+    props: InsertableStatusBadgeProps
+): ReactNode {
+    const { insertableId, name } = props;
     const { data } = useBuildStatusQuery();
     const insertable = data?.insertables[insertableId];
     if (!insertable) return null;
@@ -503,14 +251,14 @@ export function InsertableStatusBadge({
     );
 }
 
-/** Enumerates configurations once, for every row of the card that needs it. */
-function InsertableHoverMenu({
-    insertableId,
-    status
-}: {
+interface InsertableHoverMenuProps {
     insertableId: string;
     status: InsertableBuildStatus;
-}): ReactNode {
+}
+
+/** Enumerates configurations once, for every row of the card that needs it. */
+function InsertableHoverMenu(props: InsertableHoverMenuProps): ReactNode {
+    const { insertableId, status } = props;
     const configurationCount = useConfigurationCount(status);
     return (
         <>
@@ -527,14 +275,14 @@ function InsertableHoverMenu({
     );
 }
 
-/** Build-status badge pre-wired for a group (includes live visibility check). */
-export function GroupStatusBadge({
-    groupId,
-    groupName
-}: {
+interface GroupStatusBadgeProps {
     groupId: string;
     groupName: string;
-}): ReactNode {
+}
+
+/** Build-status badge pre-wired for a group (includes live visibility check). */
+export function GroupStatusBadge(props: GroupStatusBadgeProps): ReactNode {
+    const { groupId, groupName } = props;
     const { data } = useBuildStatusQuery();
     const groupStatus = data?.groups[groupId];
     const issues = useGroupBuildIssues(groupStatus, data?.insertables);
@@ -550,459 +298,3 @@ export function GroupStatusBadge({
         />
     );
 }
-
-/** A dimmed section header, e.g. "Admin" or "Parsed". */
-function SectionHeader({ children }: { children: ReactNode }): ReactNode {
-    return (
-        <Text size="xs" fw={FontWeight.SEMI_BOLD} c={StatusColor.DIMMED}>
-            {children}
-        </Text>
-    );
-}
-
-/**
- * A label (+ description) and a right-aligned control. Usually a Switch, but a
- * setting that isn't the admin's to make shows an icon saying why instead.
- */
-function ControlRow(props: {
-    label: string;
-    description?: string;
-    control: ReactNode;
-}): ReactNode {
-    return (
-        <Group justify="space-between" wrap="nowrap" gap="md" align="center">
-            <Box miw={0}>
-                <Text size="sm">{props.label}</Text>
-                <Text size="xs" c={StatusColor.DIMMED}>
-                    {props.description}
-                </Text>
-            </Box>
-            {props.control}
-        </Group>
-    );
-}
-
-/** A label (+ description) and on/off Switch row for an editable admin flag. */
-function SwitchRow(props: {
-    label: string;
-    description?: string;
-    checked: boolean;
-    onToggle: () => void;
-}): ReactNode {
-    return (
-        <ControlRow
-            label={props.label}
-            description={props.description}
-            control={
-                <Switch
-                    size="sm"
-                    checked={props.checked}
-                    onChange={props.onToggle}
-                    withThumbIndicator={false}
-                />
-            }
-        />
-    );
-}
-
-/** The editable admin toggles for an insertable. */
-function InsertableAdminSection({
-    insertableId,
-    status,
-    configurationCount
-}: {
-    insertableId: string;
-    status: InsertableBuildStatus;
-    configurationCount: ConfigurationCount;
-}): ReactNode {
-    return (
-        <Stack gap="sm">
-            <SectionHeader>Admin</SectionHeader>
-            <VisibilitySwitch
-                insertableId={insertableId}
-                isVisible={status.isVisible}
-            />
-            <FastenSwitch
-                insertableId={insertableId}
-                supportsFasten={status.supportsFasten}
-            />
-            <IndexingRow
-                insertableId={insertableId}
-                status={status}
-                band={configurationCount.band}
-            />
-        </Stack>
-    );
-}
-
-function VisibilitySwitch({
-    insertableId,
-    isVisible
-}: {
-    insertableId: string;
-    isVisible: boolean;
-}): ReactNode {
-    const mutation = useSetVisibilityMutation([insertableId], !isVisible);
-    return (
-        <SwitchRow
-            label="Visible to users"
-            checked={isVisible}
-            onToggle={() => mutation.mutate()}
-        />
-    );
-}
-
-function FastenSwitch({
-    insertableId,
-    supportsFasten
-}: {
-    insertableId: string;
-    supportsFasten: boolean;
-}): ReactNode {
-    const mutation = useToggleInsertAndFastenMutation(insertableId);
-    return (
-        <SwitchRow
-            label="Insert and fasten"
-            description="Allows mate-on-insert"
-            checked={supportsFasten}
-            onToggle={() => mutation.mutate(!supportsFasten)}
-        />
-    );
-}
-
-/**
- * A switch only where enabling indexing is the admin's call, an icon saying why
- * not otherwise — past the cap it can't run, under the threshold it already has.
- */
-function IndexingRow({
-    insertableId,
-    status,
-    band
-}: {
-    insertableId: string;
-    status: InsertableBuildStatus;
-    band: IndexingBand;
-}): ReactNode {
-    const mutation = useIndexConfigurationsMutation(insertableId);
-
-    let control: ReactNode;
-    if (status.elementType === ElementType.ASSEMBLY) {
-        control = (
-            <IndexingIcon
-                severity={null}
-                tooltip="This part is an assembly, so metadata is pulled directly from the assembly tab."
-            />
-        );
-    } else if (band === IndexingBand.EXCEEDED) {
-        control = (
-            <IndexingIcon
-                severity={BuildIssueSeverity.ERROR}
-                tooltip={`Parts with more than ${MAX_PART_NUMBER_CONFIGURATIONS} configurations are not eligible for indexing. To resolve, exclude configurations from affecting part properties in Onshape.`}
-            />
-        );
-    } else if (band === IndexingBand.AUTOMATIC) {
-        control = (
-            <IndexingIcon
-                severity={null}
-                tooltip={`Indexed automatically: an insertable under ${AUTO_INDEX_THRESHOLD} configurations indexes on every load.`}
-            />
-        );
-    } else {
-        control = (
-            <Switch
-                size="sm"
-                checked={status.indexConfigurations}
-                onChange={() => mutation.mutate(!status.indexConfigurations)}
-                withThumbIndicator={false}
-            />
-        );
-    }
-
-    return (
-        <ControlRow
-            label="Enable indexing"
-            description="Index metadata for search"
-            control={control}
-        />
-    );
-}
-
-/**
- * Stands in for the switch where there is nothing to toggle, reusing the
- * build-check icons so the state reads the same as the callouts above it.
- */
-function IndexingIcon({
-    severity,
-    tooltip
-}: {
-    severity: BuildIssueSeverity | null;
-    tooltip: string;
-}): ReactNode {
-    return (
-        <Tooltip label={tooltip} withArrow multiline w={260}>
-            <IssueIcon severity={severity} style={NO_SHRINK} />
-        </Tooltip>
-    );
-}
-
-/** The editable admin toggles for a group. */
-function GroupAdminSection({
-    groupId,
-    status
-}: {
-    groupId: string;
-    status: GroupBuildStatus;
-}): ReactNode {
-    const mutation = useToggleSortOrderMutation(groupId);
-    return (
-        <Stack gap="sm">
-            <SectionHeader>Admin</SectionHeader>
-            <SwitchRow
-                label="Sort alphabetically"
-                description="Order elements A-Z instead of by tab"
-                checked={status.sortAlphabetically}
-                onToggle={() => mutation.mutate(!status.sortAlphabetically)}
-            />
-        </Stack>
-    );
-}
-
-/**
- * Enumerated rather than stored: the same shared routine the load path uses,
- * and it only runs when a hover card opens.
- */
-function useConfigurationCount(
-    status: InsertableBuildStatus
-): ConfigurationCount {
-    const parameters = status.configuration?.parameters;
-    return useMemo(() => countConfigurations(parameters ?? []), [parameters]);
-}
-
-/** The true total, which runs past the index cap the band is decided by. */
-function useDisplayedConfigurationCount(
-    status: InsertableBuildStatus
-): number | null {
-    const parameters = status.configuration?.parameters;
-    return useMemo(() => countCombinations(parameters ?? []), [parameters]);
-}
-
-/** Open-ended only past the counting cap, which nothing real reaches. */
-function configurationCountValue(count: number | null): StateRowValue {
-    if (count === null) {
-        return {
-            kind: "text",
-            text: `Over ${MAX_COUNTED_CONFIGURATIONS.toLocaleString()}`
-        };
-    }
-    if (count === 0) {
-        return { kind: "text", text: "None", dimmed: true };
-    }
-    return { kind: "text", text: count.toLocaleString() };
-}
-
-/** The read-only auto-detected facts for an insertable. */
-function InsertableParsedSection({
-    status
-}: {
-    status: InsertableBuildStatus;
-}): ReactNode {
-    const count = useDisplayedConfigurationCount(status);
-    return (
-        <>
-            <Divider />
-            <Stack gap={6}>
-                <SectionHeader>Parsed</SectionHeader>
-                <ParsedRow
-                    label="Vendors"
-                    value={{ kind: "vendors", vendors: status.vendors }}
-                />
-                <ParsedRow
-                    label="Configurations"
-                    value={configurationCountValue(count)}
-                />
-            </Stack>
-        </>
-    );
-}
-
-/** Each parameter's name, the type it takes, and whether indexing varies it. */
-function ConfigurationSection({
-    parameters
-}: {
-    parameters?: ConfigurationParameter[];
-}): ReactNode {
-    if (!parameters || parameters.length === 0) return null;
-    return (
-        <>
-            <Divider />
-            <Stack gap={6}>
-                <SectionHeader>Configurations</SectionHeader>
-                <ScrollArea.Autosize mah={220} type="auto">
-                    <Stack gap={4}>
-                        {parameters.map((parameter) => (
-                            <Group
-                                key={parameter.id}
-                                gap="xl"
-                                wrap="nowrap"
-                                justify="space-between"
-                            >
-                                <Text size="sm">{parameter.name}</Text>
-                                <Group gap={4} wrap="nowrap">
-                                    <ExcludedFromPropertiesIcon
-                                        parameter={parameter}
-                                    />
-                                    <ParameterTypeBadge parameter={parameter} />
-                                </Group>
-                            </Group>
-                        ))}
-                    </Stack>
-                </ScrollArea.Autosize>
-            </Stack>
-        </>
-    );
-}
-
-/**
- * Onshape's "exclude from affecting configured properties", the lever on the
- * count. Part studios only, which Onshape itself enforces.
- */
-function ExcludedFromPropertiesIcon({
-    parameter
-}: {
-    parameter: ConfigurationParameter;
-}): ReactNode {
-    if (!parameter.isCosmetic) {
-        return null;
-    }
-    return (
-        <Tooltip
-            label="Excluded from affecting part properties in Onshape"
-            multiline
-            maw={260}
-            withArrow
-            events={{ hover: true, focus: true, touch: true }}
-        >
-            <AppIcon
-                icon={FileXIcon}
-                size={IconSize.SMALL}
-                color={StatusColor.DIMMED}
-                style={NO_SHRINK}
-            />
-        </Tooltip>
-    );
-}
-
-/**
- * The parameter's type. An enum also carries its option count, and lists the
- * options on hover — the values that drive its share of the configuration count.
- */
-function ParameterTypeBadge({
-    parameter
-}: {
-    parameter: ConfigurationParameter;
-}): ReactNode {
-    const isEnum = parameter.type === ParameterType.ENUM;
-    const label = isEnum
-        ? `${getParameterTypeLabel(parameter.type)} (${parameter.options.length})`
-        : getParameterTypeLabel(parameter.type);
-
-    const badge = (
-        <Badge size="xs" variant="light" color={StatusColor.NEUTRAL}>
-            {label}
-        </Badge>
-    );
-    if (!isEnum || parameter.options.length === 0) {
-        return badge;
-    }
-    return (
-        <Tooltip
-            label={parameter.options.map((option) => option.name).join(", ")}
-            multiline
-            maw={260}
-            withArrow
-            events={{ hover: true, focus: true, touch: true }}
-        >
-            {badge}
-        </Tooltip>
-    );
-}
-
-/** The short label for a parameter's type, shown as a badge. */
-function getParameterTypeLabel(type: ParameterType): string {
-    switch (type) {
-        case ParameterType.ENUM:
-            return "Enum";
-        case ParameterType.BOOLEAN:
-            return "Boolean";
-        case ParameterType.QUANTITY:
-            return "Quantity";
-        case ParameterType.STRING:
-            return "Text";
-    }
-}
-
-/** A read-only label/value row in the "Parsed" section. */
-function ParsedRow({
-    label,
-    value
-}: {
-    label: string;
-    value: StateRowValue;
-}): ReactNode {
-    return (
-        <Group gap="xl" wrap="nowrap" justify="space-between">
-            <Text size="sm">{label}</Text>
-            <StateValue value={value} />
-        </Group>
-    );
-}
-
-/** Renders a parsed value: a check/cross for booleans, badges for vendors. */
-function StateValue({ value }: { value: StateRowValue }): ReactNode {
-    if (value.kind === "bool") {
-        return value.value ? (
-            <AppIcon
-                icon={CheckIcon}
-                size={IconSize.SMALL}
-                color={StatusColor.SUCCESS}
-            />
-        ) : (
-            <AppIcon
-                icon={XIcon}
-                size={IconSize.SMALL}
-                color={StatusColor.ERROR}
-            />
-        );
-    }
-
-    if (value.kind === "text") {
-        return (
-            <Text size="sm" c={value.dimmed ? "dimmed" : undefined}>
-                {value.text}
-            </Text>
-        );
-    }
-
-    if (value.vendors.length === 0) {
-        return (
-            <Text size="sm" c={StatusColor.DIMMED}>
-                None
-            </Text>
-        );
-    }
-    return (
-        <Group gap={4} wrap="wrap" justify="flex-end">
-            {value.vendors.map((vendor) => (
-                <Badge
-                    key={vendor}
-                    size="sm"
-                    variant="light"
-                    color={StatusColor.INFO}
-                    title={getVendorName(vendor)}
-                >
-                    {vendor}
-                </Badge>
-            ))}
-        </Group>
-    );
-}
diff --git a/src/frontend/features/build-status/components/issues.tsx b/src/frontend/features/build-status/components/issues.tsx
new file mode 100644
index 00000000..a195f19a
--- /dev/null
+++ b/src/frontend/features/build-status/components/issues.tsx
@@ -0,0 +1,254 @@
+import { Badge, Group, Stack, Text } from "@mantine/core";
+import {
+    CheckIcon,
+    InfoIcon,
+    WarningIcon,
+    WarningOctagonIcon
+} from "@phosphor-icons/react";
+import { ReactNode, useMemo } from "react";
+import {
+    addBuildIssue,
+    BuildIssue,
+    BuildIssueSeverity,
+    BuildIssueType,
+    getIssueDescription,
+    getIssueSeverity,
+    hasBuildIssue
+} from "@backend/features/build-checker/issues";
+import {
+    GroupBuildStatus,
+    InsertableBuildStatus
+} from "@backend/features/build-checker/contract";
+import {
+    IconSize,
+    NO_SHRINK,
+    RADIUS,
+    StatusColor,
+    statusBackground
+} from "../../../lib/style-constants";
+import { AppIcon, type AppIconProps } from "../../../components/app-icon";
+import { SectionHeader } from "./sections";
+
+/**
+ * Returns the build issues for an insertable, merging insertable-level and
+ * configuration-level issues.
+ */
+export function getInsertableBuildIssues(
+    insertable: InsertableBuildStatus
+): BuildIssue[] {
+    const configIssues = insertable.configuration?.buildIssues ?? [];
+    return [...insertable.buildIssues, ...configIssues];
+}
+
+/**
+ * Stored issues plus the live "no unhidden insertables" check, which needs the
+ * per-insertable visibility in the same response.
+ */
+export function useGroupBuildIssues(
+    groupStatus: GroupBuildStatus | undefined,
+    insertableStatuses: Record<string, InsertableBuildStatus> | undefined
+): BuildIssue[] {
+    return useMemo(() => {
+        if (!groupStatus) return [];
+        const hasUnhidden = groupStatus.insertableOrder.some(
+            (id) => insertableStatuses?.[id]?.isVisible
+        );
+        // A group that never loaded has no insertables to unhide, so the failure
+        // is the whole story.
+        if (
+            hasUnhidden ||
+            hasBuildIssue(groupStatus.buildIssues, BuildIssueType.LOAD_FAILED)
+        ) {
+            return groupStatus.buildIssues;
+        }
+        return addBuildIssue(groupStatus.buildIssues, {
+            type: BuildIssueType.NO_UNHIDDEN_INSERTABLES
+        });
+    }, [groupStatus, insertableStatuses]);
+}
+
+interface IssueIconProps extends Omit<AppIconProps, "icon" | "color"> {
+    /** The severity to render, or null if all checks pass. */
+    severity: BuildIssueSeverity | null;
+}
+
+/** The icon each severity is drawn as; `ok` is a build with nothing to say. */
+const SEVERITY_ICONS = {
+    [BuildIssueSeverity.ERROR]: WarningOctagonIcon,
+    [BuildIssueSeverity.WARNING]: WarningIcon,
+    [BuildIssueSeverity.INFO]: InfoIcon,
+    ok: CheckIcon
+};
+
+/** The color a severity is spoken in; null is a build with nothing to say. */
+function severityColor(severity: BuildIssueSeverity | null): StatusColor {
+    switch (severity) {
+        case BuildIssueSeverity.ERROR:
+            return StatusColor.ERROR;
+        case BuildIssueSeverity.WARNING:
+            return StatusColor.WARNING;
+        case BuildIssueSeverity.INFO:
+            return StatusColor.INFO;
+        case null:
+            return StatusColor.SUCCESS;
+    }
+}
+
+/** Renders the icon for a build-issue severity in its severity color. */
+export function IssueIcon({ severity, ...others }: IssueIconProps): ReactNode {
+    return (
+        <AppIcon
+            icon={SEVERITY_ICONS[severity ?? "ok"]}
+            color={severityColor(severity)}
+            {...others}
+        />
+    );
+}
+
+interface SeverityBadgesProps {
+    issues: BuildIssue[];
+}
+
+/** Pill badges summarizing the issue counts, or an "all clear" badge. */
+export function SeverityBadges(props: SeverityBadgesProps): ReactNode {
+    const { issues } = props;
+    if (issues.length === 0) {
+        return (
+            <Badge
+                size="sm"
+                variant="light"
+                color={StatusColor.SUCCESS}
+                leftSection={<CheckIcon size={IconSize.TINY} />}
+            >
+                All checks pass
+            </Badge>
+        );
+    }
+
+    const counts = countSeverities(issues);
+    return (
+        <Group gap={6} wrap="wrap">
+            {counts.error > 0 && (
+                <CountBadge
+                    severity={BuildIssueSeverity.ERROR}
+                    count={counts.error}
+                />
+            )}
+            {counts.warning > 0 && (
+                <CountBadge
+                    severity={BuildIssueSeverity.WARNING}
+                    count={counts.warning}
+                />
+            )}
+            {counts.info > 0 && (
+                <CountBadge
+                    severity={BuildIssueSeverity.INFO}
+                    count={counts.info}
+                />
+            )}
+        </Group>
+    );
+}
+
+/** The badge color and singular noun for each severity. */
+const SEVERITY_BADGE: Record<
+    BuildIssueSeverity,
+    { color: string; noun: string }
+> = {
+    [BuildIssueSeverity.ERROR]: { color: "red", noun: "error" },
+    [BuildIssueSeverity.WARNING]: { color: "yellow", noun: "warning" },
+    [BuildIssueSeverity.INFO]: { color: "blue", noun: "info" }
+};
+
+interface CountBadgeProps {
+    severity: BuildIssueSeverity;
+    count: number;
+}
+
+function CountBadge(props: CountBadgeProps): ReactNode {
+    const { severity, count } = props;
+    const { color, noun } = SEVERITY_BADGE[severity];
+    // Don't pluralize info, e.g. "2 infos" reads wrong.
+    const plural = severity !== BuildIssueSeverity.INFO && count > 1 ? "s" : "";
+    return (
+        <Badge size="sm" variant="light" color={color}>
+            {`${count} ${noun}${plural}`}
+        </Badge>
+    );
+}
+
+/** How many issues of each severity a build carries. */
+interface SeverityCounts {
+    error: number;
+    warning: number;
+    info: number;
+}
+
+function countSeverities(issues: BuildIssue[]): SeverityCounts {
+    const counts = { error: 0, warning: 0, info: 0 };
+    for (const issue of issues) {
+        switch (getIssueSeverity(issue)) {
+            case BuildIssueSeverity.ERROR:
+                counts.error += 1;
+                break;
+            case BuildIssueSeverity.WARNING:
+                counts.warning += 1;
+                break;
+            case BuildIssueSeverity.INFO:
+                counts.info += 1;
+                break;
+        }
+    }
+    return counts;
+}
+
+interface BuildChecksSectionProps {
+    issues: BuildIssue[];
+}
+
+/** The build checks: one tinted callout per issue. Rendered only when non-empty. */
+export function BuildChecksSection(props: BuildChecksSectionProps): ReactNode {
+    const { issues } = props;
+    return (
+        <Stack gap={6}>
+            <SectionHeader>Build checks</SectionHeader>
+            {issues.map((issue) => (
+                <IssueCallout key={issue.type} issue={issue} />
+            ))}
+        </Stack>
+    );
+}
+
+interface IssueCalloutProps {
+    issue: BuildIssue;
+}
+
+/** A single build issue rendered as a tinted callout box in its severity color. */
+function IssueCallout(props: IssueCalloutProps): ReactNode {
+    const { issue } = props;
+    const severity = getIssueSeverity(issue);
+    return (
+        <Group
+            gap="xs"
+            wrap="nowrap"
+            align="flex-start"
+            p="xs"
+            style={{
+                backgroundColor: severityBackground(severity),
+                borderRadius: RADIUS
+            }}
+        >
+            {/* Nudge the icon down so it aligns with the first line of text. */}
+            <IssueIcon
+                severity={severity}
+                style={{ ...NO_SHRINK, marginTop: 2 }}
+            />
+            <Text size="sm">{getIssueDescription(issue)}</Text>
+        </Group>
+    );
+}
+
+/** The light background tint for a build-issue callout. */
+function severityBackground(severity: BuildIssueSeverity): string {
+    return statusBackground(severityColor(severity));
+}
diff --git a/src/frontend/features/build-status/components/parsed-section.tsx b/src/frontend/features/build-status/components/parsed-section.tsx
new file mode 100644
index 00000000..79872360
--- /dev/null
+++ b/src/frontend/features/build-status/components/parsed-section.tsx
@@ -0,0 +1,287 @@
+import {
+    Badge,
+    Divider,
+    Group,
+    ScrollArea,
+    Stack,
+    Text,
+    Tooltip
+} from "@mantine/core";
+import { CheckIcon, FileXIcon, XIcon } from "@phosphor-icons/react";
+import { ReactNode, useMemo } from "react";
+import { InsertableBuildStatus } from "@backend/features/build-checker/contract";
+import { getVendorName, Vendor } from "@backend/features/library/vendors";
+import {
+    ConfigurationParameter,
+    ParameterType
+} from "@backend/features/configurations/models";
+import {
+    type ConfigurationCount,
+    countCombinations,
+    countConfigurations,
+    MAX_COUNTED_CONFIGURATIONS
+} from "@backend/features/configurations/combinations";
+import { IconSize, NO_SHRINK, StatusColor } from "../../../lib/style-constants";
+import { AppIcon } from "../../../components/app-icon";
+import { SectionHeader } from "./sections";
+
+/** Discriminated so `StateValue` renders each kind its own way. */
+type StateRowValue =
+    | { kind: "bool"; value: boolean }
+    | { kind: "text"; text: string; dimmed?: boolean }
+    | { kind: "vendors"; vendors: Vendor[] };
+
+/**
+ * Enumerated rather than stored: the same shared routine the load path uses,
+ * and it only runs when a hover card opens.
+ */
+export function useConfigurationCount(
+    status: InsertableBuildStatus
+): ConfigurationCount {
+    const parameters = status.configuration?.parameters;
+    return useMemo(() => countConfigurations(parameters ?? []), [parameters]);
+}
+
+/** The true total, which runs past the index cap the band is decided by. */
+function useDisplayedConfigurationCount(
+    status: InsertableBuildStatus
+): number | null {
+    const parameters = status.configuration?.parameters;
+    return useMemo(() => countCombinations(parameters ?? []), [parameters]);
+}
+
+/** Open-ended only past the counting cap, which nothing real reaches. */
+function configurationCountValue(count: number | null): StateRowValue {
+    if (count === null) {
+        return {
+            kind: "text",
+            text: `Over ${MAX_COUNTED_CONFIGURATIONS.toLocaleString()}`
+        };
+    }
+    if (count === 0) {
+        return { kind: "text", text: "None", dimmed: true };
+    }
+    return { kind: "text", text: count.toLocaleString() };
+}
+
+interface InsertableParsedSectionProps {
+    status: InsertableBuildStatus;
+}
+
+/** The read-only auto-detected facts for an insertable. */
+export function InsertableParsedSection(
+    props: InsertableParsedSectionProps
+): ReactNode {
+    const { status } = props;
+    const count = useDisplayedConfigurationCount(status);
+    return (
+        <>
+            <Divider />
+            <Stack gap={6}>
+                <SectionHeader>Parsed</SectionHeader>
+                <ParsedRow
+                    label="Vendors"
+                    value={{ kind: "vendors", vendors: status.vendors }}
+                />
+                <ParsedRow
+                    label="Configurations"
+                    value={configurationCountValue(count)}
+                />
+            </Stack>
+        </>
+    );
+}
+
+interface ConfigurationSectionProps {
+    parameters?: ConfigurationParameter[];
+}
+
+/** Each parameter's name, the type it takes, and whether indexing varies it. */
+export function ConfigurationSection(
+    props: ConfigurationSectionProps
+): ReactNode {
+    const { parameters } = props;
+    if (!parameters || parameters.length === 0) return null;
+    return (
+        <>
+            <Divider />
+            <Stack gap={6}>
+                <SectionHeader>Configurations</SectionHeader>
+                <ScrollArea.Autosize mah={220} type="auto">
+                    <Stack gap={4}>
+                        {parameters.map((parameter) => (
+                            <Group
+                                key={parameter.id}
+                                gap="xl"
+                                wrap="nowrap"
+                                justify="space-between"
+                            >
+                                <Text size="sm">{parameter.name}</Text>
+                                <Group gap={4} wrap="nowrap">
+                                    <ExcludedFromPropertiesIcon
+                                        parameter={parameter}
+                                    />
+                                    <ParameterTypeBadge parameter={parameter} />
+                                </Group>
+                            </Group>
+                        ))}
+                    </Stack>
+                </ScrollArea.Autosize>
+            </Stack>
+        </>
+    );
+}
+
+interface ExcludedFromPropertiesIconProps {
+    parameter: ConfigurationParameter;
+}
+
+/**
+ * Onshape's "exclude from affecting configured properties", the lever on the
+ * count. Part studios only, which Onshape itself enforces.
+ */
+function ExcludedFromPropertiesIcon(
+    props: ExcludedFromPropertiesIconProps
+): ReactNode {
+    const { parameter } = props;
+    if (!parameter.isCosmetic) {
+        return null;
+    }
+    return (
+        <Tooltip
+            label="Excluded from affecting part properties in Onshape"
+            multiline
+            maw={260}
+            withArrow
+            events={{ hover: true, focus: true, touch: true }}
+        >
+            <AppIcon
+                icon={FileXIcon}
+                size={IconSize.SMALL}
+                color={StatusColor.DIMMED}
+                style={NO_SHRINK}
+            />
+        </Tooltip>
+    );
+}
+
+interface ParameterTypeBadgeProps {
+    parameter: ConfigurationParameter;
+}
+
+/**
+ * The parameter's type. An enum also carries its option count, and lists the
+ * options on hover — the values that drive its share of the configuration count.
+ */
+function ParameterTypeBadge(props: ParameterTypeBadgeProps): ReactNode {
+    const { parameter } = props;
+    const isEnum = parameter.type === ParameterType.ENUM;
+    const label = isEnum
+        ? `${getParameterTypeLabel(parameter.type)} (${parameter.options.length})`
+        : getParameterTypeLabel(parameter.type);
+
+    const badge = (
+        <Badge size="xs" variant="light" color={StatusColor.NEUTRAL}>
+            {label}
+        </Badge>
+    );
+    if (!isEnum || parameter.options.length === 0) {
+        return badge;
+    }
+    return (
+        <Tooltip
+            label={parameter.options.map((option) => option.name).join(", ")}
+            multiline
+            maw={260}
+            withArrow
+            events={{ hover: true, focus: true, touch: true }}
+        >
+            {badge}
+        </Tooltip>
+    );
+}
+
+/** The short label for a parameter's type, shown as a badge. */
+function getParameterTypeLabel(type: ParameterType): string {
+    switch (type) {
+        case ParameterType.ENUM:
+            return "Enum";
+        case ParameterType.BOOLEAN:
+            return "Boolean";
+        case ParameterType.QUANTITY:
+            return "Quantity";
+        case ParameterType.STRING:
+            return "Text";
+    }
+}
+
+interface ParsedRowProps {
+    label: string;
+    value: StateRowValue;
+}
+
+/** A read-only label/value row in the "Parsed" section. */
+function ParsedRow(props: ParsedRowProps): ReactNode {
+    const { label, value } = props;
+    return (
+        <Group gap="xl" wrap="nowrap" justify="space-between">
+            <Text size="sm">{label}</Text>
+            <StateValue value={value} />
+        </Group>
+    );
+}
+
+interface StateValueProps {
+    value: StateRowValue;
+}
+
+/** Renders a parsed value: a check/cross for booleans, badges for vendors. */
+function StateValue(props: StateValueProps): ReactNode {
+    const { value } = props;
+    if (value.kind === "bool") {
+        return value.value ? (
+            <AppIcon
+                icon={CheckIcon}
+                size={IconSize.SMALL}
+                color={StatusColor.SUCCESS}
+            />
+        ) : (
+            <AppIcon
+                icon={XIcon}
+                size={IconSize.SMALL}
+                color={StatusColor.ERROR}
+            />
+        );
+    }
+
+    if (value.kind === "text") {
+        return (
+            <Text size="sm" c={value.dimmed ? "dimmed" : undefined}>
+                {value.text}
+            </Text>
+        );
+    }
+
+    if (value.vendors.length === 0) {
+        return (
+            <Text size="sm" c={StatusColor.DIMMED}>
+                None
+            </Text>
+        );
+    }
+    return (
+        <Group gap={4} wrap="wrap" justify="flex-end">
+            {value.vendors.map((vendor) => (
+                <Badge
+                    key={vendor}
+                    size="sm"
+                    variant="light"
+                    color={StatusColor.INFO}
+                    title={getVendorName(vendor)}
+                >
+                    {vendor}
+                </Badge>
+            ))}
+        </Group>
+    );
+}
diff --git a/src/frontend/features/build-status/components/sections.tsx b/src/frontend/features/build-status/components/sections.tsx
new file mode 100644
index 00000000..0f6eb8df
--- /dev/null
+++ b/src/frontend/features/build-status/components/sections.tsx
@@ -0,0 +1,41 @@
+import { Box, Group, Text } from "@mantine/core";
+import { ReactNode } from "react";
+import { FontWeight, StatusColor } from "../../../lib/style-constants";
+
+interface SectionHeaderProps {
+    children: ReactNode;
+}
+
+/** A dimmed section header, e.g. "Admin" or "Parsed". */
+export function SectionHeader(props: SectionHeaderProps): ReactNode {
+    const { children } = props;
+    return (
+        <Text size="xs" fw={FontWeight.SEMI_BOLD} c={StatusColor.DIMMED}>
+            {children}
+        </Text>
+    );
+}
+
+interface ControlRowProps {
+    label: string;
+    description?: string;
+    control: ReactNode;
+}
+
+/**
+ * A label (+ description) and a right-aligned control. Usually a Switch, but a
+ * setting that isn't the admin's to make shows an icon saying why instead.
+ */
+export function ControlRow(props: ControlRowProps): ReactNode {
+    return (
+        <Group justify="space-between" wrap="nowrap" gap="md" align="center">
+            <Box miw={0}>
+                <Text size="sm">{props.label}</Text>
+                <Text size="xs" c={StatusColor.DIMMED}>
+                    {props.description}
+                </Text>
+            </Box>
+            {props.control}
+        </Group>
+    );
+}

From 9a4502f11874cf980a41b0a71d8da03800d54d54 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 3 Sep 2026 15:49:50 +0000
Subject: [PATCH 40/40] Cut the frontend's longest components down to what they
 render
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The big components were doing three jobs at once: holding state, wiring
mutations, and drawing. What was state or wiring is now a named hook —
useInsertSelection, useSetDefaultConfigurationMutation, useHomeSections,
useDefaultConfiguration, useReportSelection — and what was a self-contained
block of markup is a component: InsertMenuFooter, SectionAccordion.

useMenuTitle replaces the same updateModal effect written out in two menus. It
takes an undefined name to mean not yet known, which is what the effects it
replaces guarded for: the opener has already set a real title, so writing an
empty one over it would blank the header until the query lands.

The last components taking an object type literal have props interfaces too.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018tgfuCHjVFvejjMe7WmEFL
---
 src/frontend/components/app-title.tsx         |  35 +++-
 .../favorites/components/favorite-menu.tsx    |  96 +++++-----
 .../insert/components/configurations.tsx      |  84 +++++----
 .../insert/components/insert-menu.tsx         | 165 +++++++++++-------
 .../library/components/group-card.tsx         |  18 +-
 .../library/components/insertable-card.tsx    |  58 +++---
 .../search/components/search-results.tsx      |  13 +-
 .../thumbnails/components/thumbnail.tsx       | 120 ++++++++-----
 .../routes/app/library/$libraryId/index.tsx   | 165 ++++++++++--------
 9 files changed, 439 insertions(+), 315 deletions(-)

diff --git a/src/frontend/components/app-title.tsx b/src/frontend/components/app-title.tsx
index 2f68d0e7..5f653604 100644
--- a/src/frontend/components/app-title.tsx
+++ b/src/frontend/components/app-title.tsx
@@ -9,7 +9,8 @@ import {
     Tooltip
 } from "@mantine/core";
 import { ArrowSquareOutIcon, CheckIcon, CopyIcon } from "@phosphor-icons/react";
-import type { ReactNode } from "react";
+import { type ReactNode, useEffect } from "react";
+import { modals } from "@mantine/modals";
 import type { SearchRecord } from "@backend/features/configurations/models";
 import {
     FontWeight,
@@ -90,17 +91,39 @@ export function MenuTitle(props: MenuTitleProps): ReactNode {
     );
 }
 
+interface UseMenuTitleProps extends Omit<MenuTitleProps, "name"> {
+    /** Undefined until known, which leaves the title the opener set. */
+    name: string | undefined;
+}
+
+/**
+ * Keeps a modal's header on the selection in view. The header is updated rather
+ * than rendered, being the modal's rather than the content's.
+ */
+export function useMenuTitle(modalId: string, props: UseMenuTitleProps): void {
+    const { name, record, icon } = props;
+    useEffect(() => {
+        if (name === undefined) {
+            return;
+        }
+        modals.updateModal({
+            modalId,
+            title: <MenuTitle name={name} record={record} icon={icon} />
+        });
+    }, [modalId, name, record, icon]);
+}
+
 /** The xs line box the subtitle row is otherwise sized by, floored. */
 const COPY_BUTTON_SIZE = 16;
 
 /** The part number, linked to the vendor's page for it when there is one. */
-function PartNumber({
-    partNumber,
-    url
-}: {
+interface PartNumberProps {
     partNumber: string;
     url?: string;
-}): ReactNode {
+}
+
+function PartNumber(props: PartNumberProps): ReactNode {
+    const { partNumber, url } = props;
     // Nowhere to send them, so offer the number itself to search with.
     if (!url) {
         return (
diff --git a/src/frontend/features/favorites/components/favorite-menu.tsx b/src/frontend/features/favorites/components/favorite-menu.tsx
index 0f27eafe..aba0d013 100644
--- a/src/frontend/features/favorites/components/favorite-menu.tsx
+++ b/src/frontend/features/favorites/components/favorite-menu.tsx
@@ -1,10 +1,10 @@
 import { modals } from "@mantine/modals";
 import { AppModalBody, AppModalFooter } from "../../../components/app-modal";
-import { MenuTitle } from "../../../components/app-title";
+import { useMenuTitle } from "../../../components/app-title";
 import { Button } from "@mantine/core";
 import { FloppyDiskIcon } from "@phosphor-icons/react";
 import { IconSize } from "../../../lib/style-constants";
-import { ReactNode, useEffect, useState } from "react";
+import { ReactNode, useState } from "react";
 import { useMutation } from "@tanstack/react-query";
 import { apiPost } from "../../../lib/api-client";
 import { showErrorToast, showSuccessToast } from "../../../lib/notifications";
@@ -33,58 +33,27 @@ interface FavoriteMenuContentProps {
     defaultConfiguration?: ParameterValues;
 }
 
-export function FavoriteMenuContent(
-    props: FavoriteMenuContentProps
-): ReactNode {
-    const { favoriteId, modalId, defaultConfiguration } = props;
-
+/**
+ * Saves what the favorite opens with. Takes the canonical form too, so the
+ * cached row names the right thumbnail before the refetch answers.
+ */
+function useSetDefaultConfigurationMutation(
+    favoriteId: string,
+    defaultConfiguration: ParameterValues | undefined,
+    canonicalConfiguration: string | undefined
+) {
     const libraryId = useLibraryId();
-    const insertables = useLibraryQuery().data?.insertables;
-    const favoritesData = useFavoritesQuery().data;
     const refreshFavorites = useRefreshFavorites();
-
-    const [configuration, setConfiguration] = useState<
-        ParameterValues | undefined
-    >(defaultConfiguration);
-    // Reported by ConfigurationWrapper; names this selection's thumbnail.
-    // Undefined until it reports, which is what gates saving.
-    const [canonical, setCanonical] = useState<string | undefined>(undefined);
-    const [record, setRecord] = useState<SearchRecord | undefined>(undefined);
-
-    const favorite = favoritesData?.favorites[favoriteId];
-    const insertable =
-        favorite && insertables
-            ? insertables[favorite.insertableId]
-            : undefined;
-
-    const insertableName = insertable?.name;
-    useEffect(() => {
-        if (insertableName === undefined) {
-            return;
-        }
-        modals.updateModal({
-            modalId,
-            title: (
-                <MenuTitle
-                    name={insertableName}
-                    record={record}
-                    icon={<FavoriteIcon size={IconSize.MEDIUM} />}
-                />
-            )
-        });
-    }, [modalId, insertableName, record]);
-
-    const setDefaultConfigurationMutation = useMutation({
+    return useMutation({
         mutationKey: ["set-default-configuration"],
         mutationFn: async () => {
             // The selection as made, not its canonical form, which would drop
             // a value that is the parameter's default or a hidden one.
             return apiPost(
                 "/default-configuration" + toFavoritePath(favoriteId),
-                { body: { defaultConfiguration: configuration } }
+                { body: { defaultConfiguration } }
             );
         },
-
         onMutate: async () => {
             const queryKey = favoritesQueryKey(libraryId);
             await queryClient.cancelQueries({ queryKey });
@@ -93,8 +62,8 @@ export function FavoriteMenuContent(
                 getQueryUpdater((data: FavoritesData) => {
                     const fav = data.favorites[favoriteId];
                     if (fav) {
-                        fav.defaultConfiguration = configuration;
-                        fav.canonicalConfiguration = canonical;
+                        fav.defaultConfiguration = defaultConfiguration;
+                        fav.canonicalConfiguration = canonicalConfiguration;
                     }
                     return data;
                 })
@@ -112,6 +81,41 @@ export function FavoriteMenuContent(
         },
         onSettled: refreshFavorites
     });
+}
+
+export function FavoriteMenuContent(
+    props: FavoriteMenuContentProps
+): ReactNode {
+    const { favoriteId, modalId, defaultConfiguration } = props;
+
+    const insertables = useLibraryQuery().data?.insertables;
+    const favoritesData = useFavoritesQuery().data;
+
+    const [configuration, setConfiguration] = useState<
+        ParameterValues | undefined
+    >(defaultConfiguration);
+    // Reported by ConfigurationWrapper; names this selection's thumbnail.
+    // Undefined until it reports, which is what gates saving.
+    const [canonical, setCanonical] = useState<string | undefined>(undefined);
+    const [record, setRecord] = useState<SearchRecord | undefined>(undefined);
+
+    const favorite = favoritesData?.favorites[favoriteId];
+    const insertable =
+        favorite && insertables
+            ? insertables[favorite.insertableId]
+            : undefined;
+
+    useMenuTitle(modalId, {
+        name: insertable?.name,
+        record,
+        icon: <FavoriteIcon size={IconSize.MEDIUM} />
+    });
+
+    const setDefaultConfigurationMutation = useSetDefaultConfigurationMutation(
+        favoriteId,
+        configuration,
+        canonical
+    );
 
     if (!insertable) {
         return null;
diff --git a/src/frontend/features/insert/components/configurations.tsx b/src/frontend/features/insert/components/configurations.tsx
index 77d6a975..04689b86 100644
--- a/src/frontend/features/insert/components/configurations.tsx
+++ b/src/frontend/features/insert/components/configurations.tsx
@@ -71,43 +71,33 @@ function handleBooleanChange(handler: Dispatch<boolean>) {
         handler((event.target as HTMLInputElement).checked);
 }
 
-export function ConfigurationWrapper(props: ConfigurationWrapperProps) {
-    const {
-        insertableId,
-        microversionId,
-        configuration,
-        setConfiguration,
-        onCanonicalConfiguration,
-        onRecord
-    } = props;
-
-    const query = useConfigurationQuery(insertableId, microversionId);
-
-    const search = useSearch({ from: "/app" });
-    // Units come from the current document; empty when not connected to one, in
-    // which case each quantity renders in its own unit (see getEvaluateOptions).
-    const isConnected = useIsConnectedToOnshape();
-    const unitInfoQuery = useUnitInfoQuery(search, isConnected);
-    const unitInfo = unitInfoQuery.data ?? EMPTY_UNIT_INFO;
-
+/** Seeds an unset configuration with every parameter's own default. */
+function useDefaultConfiguration(
+    parameters: ConfigurationParameter[] | undefined,
+    configuration: ParameterValues | undefined,
+    setConfiguration: Dispatch<ParameterValues>
+) {
     useEffect(() => {
-        // Doing this in a useEffect rather than a .then inside useQuery to prevent some buggy behavior
-        // Only fill in the configuration if it isn't already set
-        if (!query.data || configuration) {
+        // In an effect rather than a .then inside useQuery, which misbehaved.
+        if (!parameters || configuration) {
             return;
         }
-        const defaultConfiguration = query.data.parameters.reduce(
-            (configuration, parameter) => {
-                configuration[parameter.id] = parameter.default;
-                return configuration;
-            },
-            {} as ParameterValues
+        setConfiguration(
+            Object.fromEntries(
+                parameters.map((parameter) => [parameter.id, parameter.default])
+            )
         );
-        setConfiguration(defaultConfiguration);
-    }, [query.data, configuration, setConfiguration]);
+    }, [parameters, configuration, setConfiguration]);
+}
 
-    const parameters = query.data?.parameters;
-    const records = query.data?.records;
+/** Reports the selection's canonical form, and the record it resolves to. */
+function useReportSelection(
+    parameters: ConfigurationParameter[] | undefined,
+    records: SearchRecord[] | undefined,
+    configuration: ParameterValues | undefined,
+    onCanonicalConfiguration?: (canonicalConfiguration: string) => void,
+    onRecord?: (record: SearchRecord | undefined) => void
+) {
     useEffect(() => {
         if (!parameters || !configuration) {
             return;
@@ -129,6 +119,36 @@ export function ConfigurationWrapper(props: ConfigurationWrapperProps) {
         onCanonicalConfiguration,
         onRecord
     ]);
+}
+
+export function ConfigurationWrapper(props: ConfigurationWrapperProps) {
+    const {
+        insertableId,
+        microversionId,
+        configuration,
+        setConfiguration,
+        onCanonicalConfiguration,
+        onRecord
+    } = props;
+
+    const query = useConfigurationQuery(insertableId, microversionId);
+
+    const search = useSearch({ from: "/app" });
+    // Units come from the current document; empty when not connected to one, in
+    // which case each quantity renders in its own unit (see getEvaluateOptions).
+    const isConnected = useIsConnectedToOnshape();
+    const unitInfoQuery = useUnitInfoQuery(search, isConnected);
+    const unitInfo = unitInfoQuery.data ?? EMPTY_UNIT_INFO;
+
+    const parameters = query.data?.parameters;
+    useDefaultConfiguration(parameters, configuration, setConfiguration);
+    useReportSelection(
+        parameters,
+        query.data?.records,
+        configuration,
+        onCanonicalConfiguration,
+        onRecord
+    );
 
     // isLoading, not isPending: the units query sits disabled (and so forever
     // pending) when there is no document to ask.
diff --git a/src/frontend/features/insert/components/insert-menu.tsx b/src/frontend/features/insert/components/insert-menu.tsx
index a7274ee5..abef545b 100644
--- a/src/frontend/features/insert/components/insert-menu.tsx
+++ b/src/frontend/features/insert/components/insert-menu.tsx
@@ -1,14 +1,16 @@
 import { useSearch } from "@tanstack/react-router";
 import { ReactNode, useCallback, useEffect, useState } from "react";
-import { getFavoriteForInsertable } from "@backend/features/favorites/contract";
+import {
+    type Favorite,
+    getFavoriteForInsertable
+} from "@backend/features/favorites/contract";
 import { InsertableOut } from "@backend/features/library/contract";
 import { ElementType } from "@backend/lib/onshape/element-type";
 import { Button, Checkbox, Group } from "@mantine/core";
 import { InfoIcon, PlusIcon } from "@phosphor-icons/react";
 import { IconSize } from "../../../lib/style-constants";
 import { AppModalBody, AppModalFooter } from "../../../components/app-modal";
-import { MenuTitle } from "../../../components/app-title";
-import { modals } from "@mantine/modals";
+import { useMenuTitle } from "../../../components/app-title";
 import { showQuickInsertTip } from "../quick-insert-tip";
 import { PreviewImageCard } from "../../thumbnails/components/thumbnail";
 import { FavoriteButton } from "../../favorites/components/favorite-button";
@@ -40,14 +42,12 @@ interface InsertMenuContentProps {
     onInsert: () => void;
 }
 
-export function InsertMenuContent(props: InsertMenuContentProps): ReactNode {
-    const { insertable, modalId, openedAt, onInsert } = props;
-    const favorites = useFavoritesQuery().data?.favorites;
-    const isSignedIn = useIsSignedIn();
-
-    const [configuration, setConfiguration] = useState<
-        ParameterValues | undefined
-    >(props.defaultConfiguration);
+/**
+ * The selection the menu holds, in both the form insert sends and the canonical
+ * one that names a thumbnail, plus whether it still stands where it opened.
+ */
+function useInsertSelection(defaultConfiguration?: ParameterValues) {
+    const [configuration, setConfiguration] = useState(defaultConfiguration);
     // Reported by ConfigurationWrapper, which has the parameters and units the
     // canonical form needs. Empty means the element's default configuration.
     const [canonicalConfiguration, setCanonicalConfiguration] = useState(
@@ -57,10 +57,34 @@ export function InsertMenuContent(props: InsertMenuContentProps): ReactNode {
     // on the card would have inserted. Absent until the parameters load.
     const [openedWith, setOpenedWith] = useState<string>();
 
-    const handleCanonicalConfiguration = useCallback((canonical: string) => {
+    const onCanonicalConfiguration = useCallback((canonical: string) => {
         setCanonicalConfiguration(canonical);
         setOpenedWith((opened) => opened ?? canonical);
     }, []);
+
+    return {
+        configuration,
+        setConfiguration,
+        canonicalConfiguration,
+        onCanonicalConfiguration,
+        isUnchanged:
+            canonicalConfiguration ===
+            (openedWith ?? DEFAULT_CANONICAL_CONFIGURATION)
+    };
+}
+
+export function InsertMenuContent(props: InsertMenuContentProps): ReactNode {
+    const { insertable, modalId, openedAt, onInsert } = props;
+    const favorites = useFavoritesQuery().data?.favorites;
+    const isSignedIn = useIsSignedIn();
+
+    const {
+        configuration,
+        setConfiguration,
+        canonicalConfiguration,
+        onCanonicalConfiguration,
+        isUnchanged
+    } = useInsertSelection(props.defaultConfiguration);
     const [record, setRecord] = useState<SearchRecord | undefined>(undefined);
     // A part with no parameters has one record — the element's own part data —
     // which no ConfigurationWrapper is mounted to report, but the title wants.
@@ -70,19 +94,10 @@ export function InsertMenuContent(props: InsertMenuContentProps): ReactNode {
         !insertable.isConfigurable
     ).data?.records[0];
 
-    // The title lives in the modal's header, so it's updated rather than
-    // rendered: the header follows the configuration as the user changes it.
-    useEffect(() => {
-        modals.updateModal({
-            modalId,
-            title: (
-                <MenuTitle
-                    name={insertable.name}
-                    record={record ?? soleRecord}
-                />
-            )
-        });
-    }, [modalId, insertable.name, record, soleRecord]);
+    useMenuTitle(modalId, {
+        name: insertable.name,
+        record: record ?? soleRecord
+    });
 
     useEffect(() => {
         // Only once known: pending reads as signed out, which would prompt a
@@ -106,7 +121,7 @@ export function InsertMenuContent(props: InsertMenuContentProps): ReactNode {
                 microversionId={insertable.microversionId}
                 configuration={configuration}
                 setConfiguration={setConfiguration}
-                onCanonicalConfiguration={handleCanonicalConfiguration}
+                onCanonicalConfiguration={onCanonicalConfiguration}
                 onRecord={setRecord}
             />
         );
@@ -124,43 +139,75 @@ export function InsertMenuContent(props: InsertMenuContentProps): ReactNode {
                 />
                 {parameters}
             </AppModalBody>
-            <AppModalFooter>
-                <Group gap={4}>
-                    <RequireSignIn>
-                        <FavoriteButton
-                            favorite={favorite}
-                            insertable={insertable}
-                            defaultConfiguration={configuration}
-                            canonicalConfiguration={canonicalConfiguration}
-                            large
-                        />
-                    </RequireSignIn>
-                    <MenuButton large>
-                        <InsertableMenuItems
-                            favorite={favorite}
-                            insertable={insertable}
-                            inInsertMenu
-                            configuration={configuration}
-                            canonicalConfiguration={canonicalConfiguration}
-                        />
-                    </MenuButton>
-                </Group>
-                <InsertButtons
-                    insertable={insertable}
-                    configuration={configuration}
-                    isUnchanged={
-                        canonicalConfiguration ===
-                        (openedWith ?? DEFAULT_CANONICAL_CONFIGURATION)
-                    }
-                    isFavorite={favorite !== undefined}
-                    openedAt={openedAt}
-                    onInsert={onInsert}
-                />
-            </AppModalFooter>
+            <InsertMenuFooter
+                insertable={insertable}
+                favorite={favorite}
+                configuration={configuration}
+                canonicalConfiguration={canonicalConfiguration}
+                isUnchanged={isUnchanged}
+                openedAt={openedAt}
+                onInsert={onInsert}
+            />
         </>
     );
 }
 
+interface InsertMenuFooterProps {
+    insertable: InsertableOut;
+    favorite: Favorite | undefined;
+    configuration?: ParameterValues;
+    canonicalConfiguration: string;
+    /** Whether the selection still stands where the menu opened. */
+    isUnchanged: boolean;
+    openedAt: number;
+    onInsert: () => void;
+}
+
+/** Favoriting and the row's own menu, then the buttons that do the inserting. */
+function InsertMenuFooter(props: InsertMenuFooterProps): ReactNode {
+    const {
+        insertable,
+        favorite,
+        configuration,
+        canonicalConfiguration,
+        isUnchanged,
+        openedAt,
+        onInsert
+    } = props;
+    return (
+        <AppModalFooter>
+            <Group gap={4}>
+                <RequireSignIn>
+                    <FavoriteButton
+                        favorite={favorite}
+                        insertable={insertable}
+                        defaultConfiguration={configuration}
+                        canonicalConfiguration={canonicalConfiguration}
+                        large
+                    />
+                </RequireSignIn>
+                <MenuButton large>
+                    <InsertableMenuItems
+                        favorite={favorite}
+                        insertable={insertable}
+                        inInsertMenu
+                        configuration={configuration}
+                        canonicalConfiguration={canonicalConfiguration}
+                    />
+                </MenuButton>
+            </Group>
+            <InsertButtons
+                insertable={insertable}
+                configuration={configuration}
+                isUnchanged={isUnchanged}
+                isFavorite={favorite !== undefined}
+                openedAt={openedAt}
+                onInsert={onInsert}
+            />
+        </AppModalFooter>
+    );
+}
+
 interface InsertButtonsProps {
     /**
      * Whether the configuration is still the one the menu opened with, which a
diff --git a/src/frontend/features/library/components/group-card.tsx b/src/frontend/features/library/components/group-card.tsx
index bafd5673..996f26e6 100644
--- a/src/frontend/features/library/components/group-card.tsx
+++ b/src/frontend/features/library/components/group-card.tsx
@@ -130,12 +130,12 @@ export function GroupAdminContextMenu({
     );
 }
 
-function ShowAllElementsMenuItem({
-    insertableOrder
-}: {
+interface AllElementsVisibilityProps {
     insertableOrder: string[];
-}): ReactNode {
-    const mutation = useSetVisibilityMutation(insertableOrder, true);
+}
+
+function ShowAllElementsMenuItem(props: AllElementsVisibilityProps): ReactNode {
+    const mutation = useSetVisibilityMutation(props.insertableOrder, true);
     return (
         <Menu.Item
             color={StatusColor.INFO}
@@ -147,12 +147,8 @@ function ShowAllElementsMenuItem({
     );
 }
 
-function HideAllElementsMenuItem({
-    insertableOrder
-}: {
-    insertableOrder: string[];
-}): ReactNode {
-    const mutation = useSetVisibilityMutation(insertableOrder, false);
+function HideAllElementsMenuItem(props: AllElementsVisibilityProps): ReactNode {
+    const mutation = useSetVisibilityMutation(props.insertableOrder, false);
     return (
         <Menu.Item
             color={StatusColor.ERROR}
diff --git a/src/frontend/features/library/components/insertable-card.tsx b/src/frontend/features/library/components/insertable-card.tsx
index ece64741..3905868f 100644
--- a/src/frontend/features/library/components/insertable-card.tsx
+++ b/src/frontend/features/library/components/insertable-card.tsx
@@ -60,44 +60,40 @@ export function InsertableCard(props: InsertableCardProps): ReactNode {
         ? decodeConfiguration(searchHit.canonicalConfiguration)
         : undefined;
 
-    return (
-        <ItemRow
-            onClick={() => {
-                if (props.onClick) {
-                    props.onClick();
-                }
-
-                if (isAssemblyInPartStudio) {
-                    openCannotDeriveAssemblyAlert();
-                    return;
-                }
+    const openMenu = () => {
+        props.onClick?.();
+        if (isAssemblyInPartStudio) {
+            openCannotDeriveAssemblyAlert();
+            return;
+        }
+        openInsertMenu({ insertable, defaultConfiguration: hitConfiguration });
+    };
 
-                openInsertMenu({
-                    insertable,
-                    defaultConfiguration: hitConfiguration
-                });
+    const thumbnail = (
+        <CardThumbnail
+            smallThumbnailUrl={insertable.smallThumbnailUrl}
+            largeThumbnailUrl={insertable.largeThumbnailUrl}
+            target={{
+                elementId: insertable.elementId,
+                microversionId: insertable.microversionId,
+                canonicalConfiguration:
+                    searchHit?.canonicalConfiguration ??
+                    DEFAULT_CANONICAL_CONFIGURATION,
+                // A cold search would otherwise start a render per row.
+                renderThumbnail: false
             }}
+        />
+    );
+
+    return (
+        <ItemRow
+            onClick={openMenu}
             left={
                 <CardTitle
                     disabled={isAssemblyInPartStudio}
                     searchHit={searchHit}
                     title={insertable.name}
-                    thumbnail={
-                        <CardThumbnail
-                            smallThumbnailUrl={insertable.smallThumbnailUrl}
-                            largeThumbnailUrl={insertable.largeThumbnailUrl}
-                            target={{
-                                elementId: insertable.elementId,
-                                microversionId: insertable.microversionId,
-                                canonicalConfiguration:
-                                    searchHit?.canonicalConfiguration ??
-                                    DEFAULT_CANONICAL_CONFIGURATION,
-                                // A cold search would otherwise start a render
-                                // per row.
-                                renderThumbnail: false
-                            }}
-                        />
-                    }
+                    thumbnail={thumbnail}
                     showHiddenTag={!insertable.isVisible}
                     buildStatusBadge={
                         <InsertableStatusBadge
diff --git a/src/frontend/features/search/components/search-results.tsx b/src/frontend/features/search/components/search-results.tsx
index bf750c28..a83e710c 100644
--- a/src/frontend/features/search/components/search-results.tsx
+++ b/src/frontend/features/search/components/search-results.tsx
@@ -87,14 +87,15 @@ export function SearchHitTitle(props: SearchHitTitleProps): ReactNode {
 }
 
 /** Underlines wherever the query matched inside `text`. */
-export function HighlightedText({
-    text,
-    positions
-}: {
+interface HighlightedTextProps {
     text: string;
+    /** Where the query matched; nothing highlights when absent. */
     positions?: Position[];
-}): ReactNode {
-    return <>{applyRanges(text, positions ?? [])}</>;
+}
+
+export function HighlightedText(props: HighlightedTextProps): ReactNode {
+    const { text, positions = [] } = props;
+    return <>{applyRanges(text, positions)}</>;
 }
 
 function applyRanges(str: string, ranges: Position[]) {
diff --git a/src/frontend/features/thumbnails/components/thumbnail.tsx b/src/frontend/features/thumbnails/components/thumbnail.tsx
index 13aa4629..b3a99fc1 100644
--- a/src/frontend/features/thumbnails/components/thumbnail.tsx
+++ b/src/frontend/features/thumbnails/components/thumbnail.tsx
@@ -10,7 +10,12 @@ import { ElementPath } from "@backend/lib/onshape/path";
 import { Box, Card, Center, HoverCard, Loader } from "@mantine/core";
 import { QuestionIcon } from "@phosphor-icons/react";
 
-import { ComponentPropsWithRef, ReactNode, useState } from "react";
+import {
+    ComponentPropsWithRef,
+    PropsWithChildren,
+    ReactNode,
+    useState
+} from "react";
 import { DEFAULT_CANONICAL_CONFIGURATION } from "@backend/features/configurations/canonical";
 import { thumbnailUrl } from "@backend/features/thumbnails/keys";
 import { SectionError } from "../../../components/app-zero-state";
@@ -174,6 +179,12 @@ interface PreviewImageProps {
     largeThumbnailUrl?: string;
 }
 
+/** A stored size, so the bytes a preview fetch returns are worth caching. */
+const PREVIEW_SIZE = ThumbnailSize.LARGE;
+
+/** Sized to the preview's footprint rather than to a row's. */
+const PREVIEW_SPINNER_SIZE = 36;
+
 /** How often to re-check while the worker is still standing in the default. */
 const PREVIEW_POLL_MS = 4000;
 
@@ -195,41 +206,29 @@ function useLastRenderedUrl(image?: LoadedImage): string | undefined {
     return lastRendered;
 }
 
-export function PreviewImage(props: PreviewImageProps): ReactNode {
-    const {
-        path,
-        insertableId,
-        microversionId,
-        canonicalConfiguration,
-        largeThumbnailUrl
-    } = props;
-    // A stored size, so the bytes this fetch returns are worth caching.
-    const size = ThumbnailSize.LARGE;
-    const isSignedIn = useIsSignedIn();
-    const isConnected = useIsConnectedToOnshape();
-    const isFetchingConfiguration = useIsFetchingConfiguration(
-        insertableId,
-        microversionId
-    );
-    const targetElementType = useTargetElementType();
-
+/**
+ * Polls for the configuration's render, which the worker produces in a
+ * workflow: the first request starts one, and the element default stands in
+ * until it lands.
+ */
+function usePreviewThumbnail(props: PreviewImageProps, enabled: boolean) {
+    const { path, insertableId, microversionId, canonicalConfiguration } =
+        props;
     // A url per poll: the browser caches images by url for the life of the
     // page, so reusing one leaves the stand-in up however often we refetch.
     const pollUrl = (attempt: number) =>
         thumbnailUrl({
             elementId: path.elementId,
             microversionId,
-            size,
+            size: PREVIEW_SIZE,
             canonicalConfiguration,
             renderThumbnail: attempt % RENDER_EVERY_POLLS === 0,
             insertableId,
             attempt
         });
 
-    // The worker renders configurations in a workflow, so the first request
-    // starts one and stands in the element default until it lands.
     const queryKey = ["thumbnail", pollUrl(0)];
-    const thumbnailQuery = useQuery({
+    const query = useQuery({
         queryKey,
         queryFn: ({ signal, client }) =>
             loadImageResult(
@@ -241,20 +240,50 @@ export function PreviewImage(props: PreviewImageProps): ReactNode {
         refetchInterval: (query) =>
             query.state.data?.isFallback ? PREVIEW_POLL_MS : false,
         retry: 2,
-        enabled: !isFetchingConfiguration && isSignedIn === true
+        enabled
     });
-    const lastRenderedUrl = useLastRenderedUrl(thumbnailQuery.data);
+    return { query, lastRenderedUrl: useLastRenderedUrl(query.data) };
+}
+
+interface PreviewBoxProps extends PropsWithChildren {
+    heightAndWidth: HeightAndWidth;
+}
+
+/** Holds the preview's own footprint, whatever is being shown in it. */
+function PreviewBox(props: PreviewBoxProps): ReactNode {
+    const { heightAndWidth, children } = props;
+    return (
+        <Center w={heightAndWidth.width} h={heightAndWidth.height}>
+            {children}
+        </Center>
+    );
+}
 
-    const heightAndWidth = getHeightAndWidth(size, 0.7);
+export function PreviewImage(props: PreviewImageProps): ReactNode {
+    const { insertableId, microversionId, largeThumbnailUrl } = props;
+    const isSignedIn = useIsSignedIn();
+    const isConnected = useIsConnectedToOnshape();
+    const isFetchingConfiguration = useIsFetchingConfiguration(
+        insertableId,
+        microversionId
+    );
+    const targetElementType = useTargetElementType();
+    const { query, lastRenderedUrl } = usePreviewThumbnail(
+        props,
+        !isFetchingConfiguration && isSignedIn === true
+    );
+
+    const heightAndWidth = getHeightAndWidth(PREVIEW_SIZE, 0.7);
+    const spinner = (
+        <PreviewBox heightAndWidth={heightAndWidth}>
+            <Loader size={PREVIEW_SPINNER_SIZE} />
+        </PreviewBox>
+    );
 
     // Not known yet: the stored thumbnail would be swapped for the live preview
     // a moment later.
     if (isSignedIn === undefined) {
-        return (
-            <Center w={heightAndWidth.width} h={heightAndWidth.height}>
-                <Loader size={36} />
-            </Center>
-        );
+        return spinner;
     }
 
     // Not signed in: no live Onshape preview, so show the stored thumbnail
@@ -264,21 +293,16 @@ export function PreviewImage(props: PreviewImageProps): ReactNode {
             <Thumbnail
                 url={largeThumbnailUrl}
                 heightAndWidth={heightAndWidth}
-                spinnerSize={36}
+                spinnerSize={PREVIEW_SPINNER_SIZE}
             />
         );
     }
 
-    // Placeholder data is the previous configuration's render, so the spinner
-    // has to cover it too: what is on screen is not what was asked for.
-    const isWaiting =
-        thumbnailQuery.isPlaceholderData || thumbnailQuery.data?.isFallback;
-
-    if (thumbnailQuery.isError) {
+    if (query.isError) {
         const action =
             targetElementType === ElementType.ASSEMBLY ? "insert" : "derive";
         return (
-            <Center w={heightAndWidth.width} h={heightAndWidth.height}>
+            <PreviewBox heightAndWidth={heightAndWidth}>
                 <SectionError
                     title="The thumbnail could not be loaded."
                     // Standalone has no insert button to fall back on, and
@@ -287,21 +311,21 @@ export function PreviewImage(props: PreviewImageProps): ReactNode {
                         isConnected ? `You can still ${action} the part.` : null
                     }
                 />
-            </Center>
-        );
-    } else if (!thumbnailQuery.data) {
-        return (
-            <Center w={heightAndWidth.width} h={heightAndWidth.height}>
-                <Loader size={36} />
-            </Center>
+            </PreviewBox>
         );
     }
+    if (!query.data) {
+        return spinner;
+    }
 
     // A stand-in must not displace a render the user already has.
     const previewUrl =
-        thumbnailQuery.data.isFallback && lastRenderedUrl
+        query.data.isFallback && lastRenderedUrl
             ? lastRenderedUrl
-            : thumbnailQuery.data.url;
+            : query.data.url;
+    // Placeholder data is the previous configuration's render, so the spinner
+    // has to cover it too: what is on screen is not what was asked for.
+    const isWaiting = query.isPlaceholderData || query.data.isFallback;
 
     return (
         <>
diff --git a/src/frontend/routes/app/library/$libraryId/index.tsx b/src/frontend/routes/app/library/$libraryId/index.tsx
index 953b4a13..b1b5b43b 100644
--- a/src/frontend/routes/app/library/$libraryId/index.tsx
+++ b/src/frontend/routes/app/library/$libraryId/index.tsx
@@ -49,7 +49,8 @@ interface Section {
     setOpened: (opened: boolean) => void;
 }
 
-function HomeList(): ReactNode {
+/** The sections the home list shows, in the order they are stacked. */
+function useHomeSections(): Section[] {
     const uiState = useGetUiState();
     const setUiState = useSetUiState();
     // Not persisted: search results open on every visit, unlike the library.
@@ -57,94 +58,106 @@ function HomeList(): ReactNode {
     const libraryId = useLibraryId();
     const isSignedIn = useIsSignedIn();
 
-    const sections: Section[] = [];
-
     // Favorites are per-user and hidden until signed in.
-    if (isSignedIn) {
-        sections.push({
-            value: "favorites",
-            icon: <FavoriteIcon size={IconSize.MEDIUM} />,
-            title: <AppTitle title="Favorites" />,
-            panel: <FavoritesList />,
-            opened: uiState.isFavoritesOpen,
-            setOpened: (opened) => setUiState({ isFavoritesOpen: opened })
-        });
-    }
+    const favorites: Section = {
+        value: "favorites",
+        icon: <FavoriteIcon size={IconSize.MEDIUM} />,
+        title: <AppTitle title="Favorites" />,
+        panel: <FavoritesList />,
+        opened: uiState.isFavoritesOpen,
+        setOpened: (opened) => setUiState({ isFavoritesOpen: opened })
+    };
+
+    const search: Section = {
+        value: "search",
+        icon: (
+            <MagnifyingGlassIcon
+                size={IconSize.MEDIUM}
+                color={PrimaryColor.FILLED}
+            />
+        ),
+        title: <AppTitle title="Search Results" />,
+        panel: (
+            <SearchResults
+                query={uiState.searchQuery ?? ""}
+                filters={{ vendors: uiState.vendorFilters }}
+            />
+        ),
+        opened: isSearchOpen,
+        setOpened: setIsSearchOpen
+    };
+
+    const library: Section = {
+        value: "library",
+        icon: <BooksIcon size={IconSize.MEDIUM} color={PrimaryColor.FILLED} />,
+        title: <LibraryTitle libraryId={libraryId} />,
+        panel: <LibraryList />,
+        opened: uiState.isLibraryOpen,
+        setOpened: (opened) => setUiState({ isLibraryOpen: opened })
+    };
 
     // One slot below favorites, showing search results while a query is active
     // and the library otherwise. The differing `value` remounts it on the swap.
-    if (uiState.searchQuery) {
-        sections.push({
-            value: "search",
-            icon: (
-                <MagnifyingGlassIcon
-                    size={IconSize.MEDIUM}
-                    color={PrimaryColor.FILLED}
-                />
-            ),
-            title: <AppTitle title="Search Results" />,
-            panel: (
-                <SearchResults
-                    query={uiState.searchQuery}
-                    filters={{ vendors: uiState.vendorFilters }}
-                />
-            ),
-            opened: isSearchOpen,
-            setOpened: setIsSearchOpen
-        });
-    } else {
-        sections.push({
-            value: "library",
-            icon: (
-                <BooksIcon size={IconSize.MEDIUM} color={PrimaryColor.FILLED} />
-            ),
-            title: <LibraryTitle libraryId={libraryId} />,
-            panel: <LibraryList />,
-            opened: uiState.isLibraryOpen,
-            setOpened: (opened) => setUiState({ isLibraryOpen: opened })
-        });
-    }
+    return [
+        ...(isSignedIn ? [favorites] : []),
+        uiState.searchQuery ? search : library
+    ];
+}
 
+interface SectionAccordionProps {
+    sections: Section[];
+}
+
+/** Stacks the sections, each opening and closing on its own. */
+function SectionAccordion(props: SectionAccordionProps): ReactNode {
+    const { sections } = props;
     const handleChange = (opened: string[]) => {
         for (const section of sections) {
             section.setOpened(opened.includes(section.value));
         }
     };
 
+    return (
+        <Accordion
+            multiple
+            variant="unstyled"
+            value={sections
+                .filter((section) => section.opened)
+                .map((section) => section.value)}
+            onChange={handleChange}
+            styles={{
+                // On the control, so a collapsed section still divides from
+                // the next one; content closes off an open one.
+                control: {
+                    borderBottom: BORDER,
+                    minHeight: SECTION_HEADER_HEIGHT
+                },
+                // Its own padding would outgrow that height.
+                label: { paddingBlock: 0 },
+                content: { padding: 0, borderBottom: BORDER },
+                icon: TITLE_ICON_NUDGE
+            }}
+        >
+            {sections.map((section) => (
+                <Accordion.Item key={section.value} value={section.value}>
+                    <Accordion.Control
+                        icon={section.icon}
+                        className="interactive"
+                    >
+                        {section.title}
+                    </Accordion.Control>
+                    <Accordion.Panel>{section.panel}</Accordion.Panel>
+                </Accordion.Item>
+            ))}
+        </Accordion>
+    );
+}
+
+function HomeList(): ReactNode {
+    const sections = useHomeSections();
     return (
         <>
-            <Accordion
-                multiple
-                variant="unstyled"
-                value={sections
-                    .filter((section) => section.opened)
-                    .map((section) => section.value)}
-                onChange={handleChange}
-                styles={{
-                    // On the control, so a collapsed section still divides from
-                    // the next one; content closes off an open one.
-                    control: {
-                        borderBottom: BORDER,
-                        minHeight: SECTION_HEADER_HEIGHT
-                    },
-                    // Its own padding would outgrow that height.
-                    label: { paddingBlock: 0 },
-                    content: { padding: 0, borderBottom: BORDER },
-                    icon: TITLE_ICON_NUDGE
-                }}
-            >
-                {sections.map((section) => (
-                    <Accordion.Item key={section.value} value={section.value}>
-                        <Accordion.Control
-                            icon={section.icon}
-                            className="interactive"
-                        >
-                            {section.title}
-                        </Accordion.Control>
-                        <Accordion.Panel>{section.panel}</Accordion.Panel>
-                    </Accordion.Item>
-                ))}
-            </Accordion>
+            <SectionAccordion sections={sections} />
             <Outlet />
         </>
     );