fix(accounts): 🐛 polish the multi-account UI across items, switcher and sign-in

server/accounts/account-manager.ts

@@ -1,6 +1,10 @@
 import type { AccountLabel } from "../../src/lib/accounts/accounts.types.ts";
 import { AUTH_STATUS } from "../../src/lib/storage/storage.config.ts";
-import type { AccountState, AppSnapshot } from "../../src/lib/storage/storage.types.ts";
+import type {
+  AccountState,
+  AppSnapshot,
+  LoginResult,
+} from "../../src/lib/storage/storage.types.ts";
 import type { Database } from "../db/db.types.ts";
 import type { SavedSession } from "../steam/session-file.ts";
 import type { SessionStore } from "../steam/session-store.ts";
@@ -34,6 +38,7 @@ export function createAccountManager({
   const listeners = new Set<(snapshot: AppSnapshot) => void>();
   let revision = 0;
   let emitScheduled = false;
+  let lastLogin: LoginResult | null = null;
 
   const login = createQrLogin((session) => void adopt(session));
   login.subscribe(() => emit());
@@ -66,6 +71,11 @@ export function createAccountManager({
   /** A QR login finished: store the token, register the account and connect it (or reconnect with the new token). */
   async function adopt(session: SavedSession): Promise<void> {
     const existing = gateways.get(session.steamId);
+    lastLogin = {
+      sequence: (lastLogin?.sequence ?? 0) + 1,
+      steamId: session.steamId,
+      added: existing === undefined,
+    };
     existing?.disconnect();
     unsubscribers.get(session.steamId)?.();
     sessions.forAccount(session.steamId).save(session);
@@ -101,7 +111,7 @@ export function createAccountManager({
         snapshot,
       });
     }
-    return { accounts, login: login.getState(), revision };
+    return { accounts, login: login.getState(), lastLogin, revision };
   }
 
   return {

server/cases/case-stats.test.ts

@@ -56,10 +56,40 @@ test("measures the gold drought in both directions", () => {
   assert.equal(stats.casesToFirstGold, 3); // knife was the 3rd opening ever
 });
 
+test("tracks the exact tier of each case pull, including never-pulled tiers", () => {
+  const stats = buildCaseStats(events, "case");
+  assert.deepEqual(
+    stats.caseRarities.map((rarity) => [
+      rarity.key,
+      rarity.count,
+      rarity.sinceLast,
+      rarity.hasDrop,
+      rarity.uncertain,
+    ]),
+    [
+      ["gold", 1, 1, true, false],
+      ["covert", 1, 0, true, false],
+      ["classified", 1, 2, true, false],
+      ["restricted", 0, 4, false, false],
+      ["milSpec", 1, 3, true, false],
+    ],
+  );
+});
+
+test("marks streaks with unidentified drops as upper bounds", () => {
+  const unknown = opening(5, "Unknown skin", "b0c3d9", Date.UTC(2026, 3, 5));
+  const stats = buildCaseStats([unknown, ...events], "case");
+  assert.equal(stats.caseRarities.find((rarity) => rarity.key === "covert")?.sinceLast, 1);
+  assert.equal(stats.caseRarities.find((rarity) => rarity.key === "covert")?.uncertain, true);
+  assert.equal(stats.caseRarities.find((rarity) => rarity.key === "restricted")?.sinceLast, 5);
+  assert.equal(stats.caseRarities.find((rarity) => rarity.key === "restricted")?.uncertain, true);
+});
+
 test("handles an account with no openings", () => {
   const stats = buildCaseStats([], "case");
   assert.equal(stats.casesSinceGold, null);
   assert.equal(stats.casesToFirstGold, null);
+  assert.ok(stats.caseRarities.every((rarity) => rarity.sinceLast === 0 && !rarity.hasDrop));
   assert.deepEqual(stats.perMonth, []);
 });
 
@@ -102,6 +132,7 @@ test("breaks the same history down by kind", () => {
   assert.equal(capsules.kindCounts.capsule, 1);
   assert.equal(capsules.topCases[0]?.name, "Test Capsule");
   assert.equal(capsules.casesSinceGold, null);
+  assert.deepEqual(capsules.caseRarities, []);
   assert.equal(buildCaseStats(all, "case").total, 4);
 });
 

server/cases/case-stats.ts

@@ -2,6 +2,7 @@ import { IMAGE_SIZE_SUFFIX } from "../../src/lib/storage/storage.config.ts";
 import { OPENING_KINDS } from "../../src/lib/cases/cases.config.ts";
 import type {
   CaseOpening,
+  CaseRarityStat,
   CaseStats,
   OpeningKind,
   PulledItem,
@@ -124,6 +125,29 @@ export function buildCaseStats(events: readonly HistoryEvent[], kind: OpeningKin
     color: bucket.color,
     count: rarityCounts.get(bucket.key) ?? 0,
   })).filter((slice) => slice.count > 0);
+  const caseRarities: CaseRarityStat[] =
+    kind === "case"
+      ? RARITY_BUCKETS.filter((bucket) => bucket.key !== "other").map((bucket) => {
+          const latest = cases.findIndex((event) => {
+            const reward = event.gained[0];
+            return reward && bucketKey(reward) === bucket.key;
+          });
+          const sinceLast = latest < 0 ? openings.length : latest;
+          const uncertain = cases.slice(0, sinceLast).some((event) => {
+            const reward = event.gained[0];
+            return reward && bucketKey(reward) === "other";
+          });
+          return {
+            key: bucket.key,
+            label: bucket.label,
+            color: bucket.color,
+            count: rarityCounts.get(bucket.key) ?? 0,
+            sinceLast,
+            hasDrop: latest >= 0,
+            uncertain,
+          };
+        })
+      : [];
 
   const perMonth = new Map<string, number>();
   for (const opening of [...openings].reverse()) {
@@ -150,6 +174,7 @@ export function buildCaseStats(events: readonly HistoryEvent[], kind: OpeningKin
           : goldIndexNewestFirst,
     casesToFirstGold: goldIndexOldestFirst < 0 ? null : openings.length - goldIndexOldestFirst,
     rarity,
+    caseRarities,
     rarest: openings
       .map((opening, index) => ({ opening, index, rank: rarityRank(opening) }))
       .sort((a, b) => a.rank - b.rank || a.index - b.index) // ties keep newest first

server/index.ts

@@ -7,6 +7,7 @@ import {
   SSE_KEEP_ALIVE_MS,
   STORAGE_API,
   STORAGE_LIMITS,
+  TRADE_UP_FINDER,
 } from "../src/lib/storage/storage.config.ts";
 import type {
   ApiError,
@@ -541,8 +542,9 @@ const server = createServer(async (req, res) => {
         c.skin ? [{ view: c.view, skin: c.skin }] : [],
       );
       if (path === STORAGE_API.tradeUpFinder) {
-        const statTrak = url.searchParams.get("statTrak") ?? "all";
-        if (statTrak !== "all" && statTrak !== "normal" && statTrak !== "stattrak") {
+        const requested = url.searchParams.get("statTrak") ?? TRADE_UP_FINDER.defaultStatTrakFilter;
+        const statTrak = TRADE_UP_FINDER.statTrakFilters.find((filter) => filter === requested);
+        if (statTrak === undefined) {
           throw new UserFacingError("Invalid StatTrak filter", HTTP.badRequest);
         }
         return sendJson(

server/tradeup-finder.ts

@@ -3,7 +3,11 @@ import {
   type TradeUpFinderOptions,
   type TradeUpFinderResponse,
 } from "../src/lib/items/item.types.ts";
-import { TRADE_UP, TRADE_UP_FINDER } from "../src/lib/storage/storage.config.ts";
+import {
+  TRADE_UP,
+  TRADE_UP_FINDER,
+  TRADE_UP_STATTRAK_FILTER,
+} from "../src/lib/storage/storage.config.ts";
 import type { Catalog } from "./items/catalog.types.ts";
 import type { PriceBook } from "./prices/prices.ts";
 import { computeTradeUp, inputCountFor, isPriced, type TradeUpCandidate } from "./tradeup.ts";
@@ -23,8 +27,10 @@ export function findTradeUps(
     if (!isPriced(candidate)) return false;
     if (!options.includeStorage && candidate.view.locationId !== INVENTORY_LOCATION_ID)
       return false;
-    if (options.statTrak === "normal" && candidate.skin.isStatTrak) return false;
-    if (options.statTrak === "stattrak" && !candidate.skin.isStatTrak) return false;
+    if (options.statTrak === TRADE_UP_STATTRAK_FILTER.normal && candidate.skin.isStatTrak)
+      return false;
+    if (options.statTrak === TRADE_UP_STATTRAK_FILTER.statTrak && !candidate.skin.isStatTrak)
+      return false;
     if (options.rarityId === TRADE_UP.covertRarity) {
       return (
         candidate.skin.skinId !== null && catalog.specialsFor(candidate.skin.skinId).length > 0

site/plugins/app-source.config.ts

@@ -71,20 +71,7 @@ export const APP_PATCHES: readonly AppPatch[] = [
       },
     ],
   },
-  {
-    file: "components/tradeup-inputs/tradeup-inputs.component.tsx",
-    replacements: [
-      {
-        from: "title={`${item.name} · ${copy.remove}`}",
-        to: "title={`${item.name} · ${copy.remove}`}\n                  aria-label={`${item.name} · ${copy.remove}`}",
-      },
-    ],
-  },
   // Contrast and hover feedback on already-active controls.
-  {
-    file: "components/kind-pills/kind-pills.component.tsx",
-    replacements: [{ from: "tabular opacity-60", to: "tabular opacity-100" }],
-  },
   {
     file: "components/pill/pill.component.tsx",
     replacements: [

site/src/components/features/feature-demo.tsx

@@ -21,7 +21,10 @@ const DEMOS: Record<string, () => ReactNode> = {
 export default function FeatureDemo({ id }: { id: string }) {
   const Demo = DEMOS[id];
   const boxRef = useRef<HTMLDivElement>(null);
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const openRef = useRef<HTMLButtonElement>(null);
   const [scale, setScale] = useState(DEMO_MIN_SCALE);
+  const [expanded, setExpanded] = useState(false);
 
   useEffect(() => {
     const el = boxRef.current;
@@ -33,6 +36,10 @@ export default function FeatureDemo({ id }: { id: string }) {
     return () => ro.disconnect();
   }, []);
 
+  useEffect(() => {
+    if (expanded) dialogRef.current?.showModal();
+  }, [expanded]);
+
   if (!Demo) return null;
   return (
     <div className="fdemo" ref={boxRef} style={{ minHeight: DEMO_HEIGHT * scale }}>
@@ -42,6 +49,30 @@ export default function FeatureDemo({ id }: { id: string }) {
       >
         <Demo />
       </div>
+      <button ref={openRef} type="button" className="fdemo__open" onClick={() => setExpanded(true)}>
+        Explore full {id} demo
+      </button>
+      {expanded && (
+        <dialog
+          ref={dialogRef}
+          className="fdemo__dialog"
+          aria-label={`${id} demo`}
+          onClose={() => {
+            setExpanded(false);
+            openRef.current?.focus();
+          }}
+        >
+          <div className="fdemo__dialog-head">
+            <span>OpenInventory · {id} demo</span>
+            <button type="button" onClick={() => dialogRef.current?.close()}>
+              Close demo
+            </button>
+          </div>
+          <div className="fdemo__dialog-body" data-lenis-prevent>
+            <Demo />
+          </div>
+        </dialog>
+      )}
     </div>
   );
 }