fix(ai): make the lock reason readable on click, not just hover (#842)

The first pass moved the countdown out of the collapse toggle, which stopped
clicks from folding the pane — but the reason still could not be read by
clicking, because it was a native `title` attribute. Browsers DISMISS native
tooltips on pointer-down, so "click to read it" was never going to work with
that primitive, and `title` never appears on touch at all.

The countdown is now a real button that discloses the reason:
- hover / focus reveals it transiently
- click PINS it, so it survives the pointer leaving (Escape or a second click
  unpins)
- the text renders INLINE under the header, not as a floating popover: the
  pane root is overflow-hidden and would clip an absolutely-positioned panel,
  most visibly when the pane is collapsed to just this header

Radix Tooltip is a dependency but is deliberately not used here — it is
hover-only by design and also closes on click, so it would reproduce the same
complaint.

The ticking value keeps its own role="status" live region inside the button,
so the countdown is still announced while the button carries the control
semantics.

7 new tests: hidden by default, hover reveal/hide, pinned-through-mouseleave
(the actual bug), unpin, Escape, focus reveal, and a regression guard that the
badge is not nested inside the collapse toggle. The existing pane test asserted
`title` on the chip — the mechanism being removed — so it now asserts the
disclosure instead.

Author: Potolski

apps/web/src/app/[locale]/(marketing)/start/page.tsx

@@ -14,16 +14,12 @@ export const metadata: Metadata = {
 // the resolved routes fresh if the bundle changes without a per-request cost.
 export const revalidate = 300;
 
-export default async function StartPage(
-  props: {
-    params: Promise<{ locale: string }>;
-  }
-) {
+export default async function StartPage(props: {
+  params: Promise<{ locale: string }>;
+}) {
   const params = await props.params;
 
-  const {
-    locale
-  } = params;
+  const { locale } = params;
 
   const [routes, questData] = await Promise.all([
     resolveSegmentRoutes(locale),

apps/web/src/app/[locale]/(platform)/courses/[slug]/layout.tsx

@@ -1,11 +1,9 @@
 import type { Metadata } from "next";
 import { getCourseBySlug } from "@/lib/content/queries";
 
-export async function generateMetadata(
-  props: {
-    params: Promise<{ slug: string }>;
-  }
-): Promise<Metadata> {
+export async function generateMetadata(props: {
+  params: Promise<{ slug: string }>;
+}): Promise<Metadata> {
   const params = await props.params;
   const course = await getCourseBySlug(params.slug);
 

apps/web/src/app/[locale]/(platform)/profile/[username]/page.tsx

@@ -4,11 +4,9 @@ import { fetchPublicProfile } from "@/lib/profile/profile-data";
 import { ProfileBody } from "@/components/gamification/profile-body";
 import { ProfileBackButton } from "./profile-back-button";
 
-export default async function PublicProfilePage(
-  props: {
-    params: Promise<{ username: string }>;
-  }
-) {
+export default async function PublicProfilePage(props: {
+  params: Promise<{ username: string }>;
+}) {
   const params = await props.params;
   const username = decodeURIComponent(params.username);
   const supabase = await createClient();

apps/web/src/app/[locale]/(platform)/settings/_components/account-tab.tsx

@@ -84,9 +84,10 @@ export function AccountTab({
           | undefined;
 
         if (googleId) {
-          const updatePayload: Database["public"]["Tables"]["profiles"]["Update"] = {
-            google_id: googleId,
-          };
+          const updatePayload: Database["public"]["Tables"]["profiles"]["Update"] =
+            {
+              google_id: googleId,
+            };
           if (!avatarUrl && googleAvatar) {
             updatePayload.avatar_url = googleAvatar;
           }
@@ -147,9 +148,10 @@ export function AccountTab({
           | undefined;
 
         if (githubId) {
-          const updatePayload: Database["public"]["Tables"]["profiles"]["Update"] = {
-            github_id: githubId,
-          };
+          const updatePayload: Database["public"]["Tables"]["profiles"]["Update"] =
+            {
+              github_id: githubId,
+            };
           if (!avatarUrl && ghAvatar) {
             updatePayload.avatar_url = ghAvatar;
           }

apps/web/src/app/[locale]/admin/__tests__/admin-routing.test.tsx

@@ -54,7 +54,9 @@ describe("/admin default landing", () => {
     cookieGetMock.mockReturnValue(undefined);
 
     render(
-      (await AdminPage({ params: Promise.resolve({ locale: "en" }) })) as React.ReactElement
+      (await AdminPage({
+        params: Promise.resolve({ locale: "en" }),
+      })) as React.ReactElement
     );
 
     expect(screen.getByTestId("admin-login-form")).toBeInTheDocument();

apps/web/src/app/[locale]/admin/content/__tests__/paths-table.test.tsx

@@ -2,16 +2,18 @@
 import { describe, it, expect, vi } from "vitest";
 import { render, screen } from "@testing-library/react";
 import { createTranslator } from "next-intl";
-import { PathsTable } from "../paths-table";
 import type { AdminLearningPathWithRefs } from "@/lib/content/queries";
 import messages from "@/messages/en.json";
+import { PathsTable } from "../paths-table";
 
 // Real ICU-aware translator (supports the `danglingCount` plural rule),
 // rather than a raw key lookup — `next-intl/server`'s `getTranslations` needs
 // a request context this test environment doesn't have.
 vi.mock("next-intl/server", () => ({
   getTranslations: async (
-    namespace: Parameters<typeof createTranslator<typeof messages>>[0]["namespace"]
+    namespace: Parameters<
+      typeof createTranslator<typeof messages>
+    >[0]["namespace"]
   ) => createTranslator({ locale: "en", messages, namespace }),
 }));
 

apps/web/src/app/[locale]/admin/content/__tests__/quests-table.test.tsx

@@ -2,13 +2,15 @@
 import { describe, it, expect, vi } from "vitest";
 import { render, screen } from "@testing-library/react";
 import { createTranslator } from "next-intl";
-import { QuestsTable } from "../quests-table";
 import type { ContentQuest } from "@/lib/content/queries";
 import messages from "@/messages/en.json";
+import { QuestsTable } from "../quests-table";
 
 vi.mock("next-intl/server", () => ({
   getTranslations: async (
-    namespace: Parameters<typeof createTranslator<typeof messages>>[0]["namespace"]
+    namespace: Parameters<
+      typeof createTranslator<typeof messages>
+    >[0]["namespace"]
   ) => createTranslator({ locale: "en", messages, namespace }),
 }));
 

apps/web/src/app/[locale]/admin/deploy/page.tsx

@@ -5,16 +5,12 @@ import { redirect } from "next/navigation";
  * screen, not a screen of its own). Kept as a redirect so bookmarks, docs and
  * muscle memory land on the merged screen instead of a 404.
  */
-export default async function AdminDeployRedirect(
-  props: {
-    params: Promise<{ locale: string }>;
-  }
-) {
+export default async function AdminDeployRedirect(props: {
+  params: Promise<{ locale: string }>;
+}) {
   const params = await props.params;
 
-  const {
-    locale
-  } = params;
+  const { locale } = params;
 
   redirect(`/${locale}/admin/courses`);
 }

apps/web/src/app/[locale]/admin/page.tsx

@@ -1,7 +1,7 @@
 import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
-import { AdminLoginForm } from "./admin-login-form";
 import { isValidAdminSession } from "@/lib/admin/auth";
+import { AdminLoginForm } from "./admin-login-form";
 
 /**
  * `/admin` root. Unauthenticated → render `<AdminLoginForm/>` (the layout
@@ -12,16 +12,12 @@ import { isValidAdminSession } from "@/lib/admin/auth";
  * `/admin/*` sub-routes back to `/admin`, so an unconditional redirect would
  * loop (`/admin` → `/admin/courses` → middleware → `/admin` → …).
  */
-export default async function AdminPage(
-  props: {
-    params: Promise<{ locale: string }>;
-  }
-) {
+export default async function AdminPage(props: {
+  params: Promise<{ locale: string }>;
+}) {
   const params = await props.params;
 
-  const {
-    locale
-  } = params;
+  const { locale } = params;
 
   const cookieStore = await cookies();
   const session = cookieStore.get("admin_session");

apps/web/src/app/[locale]/admin/publish/page.tsx

@@ -5,16 +5,12 @@ import { redirect } from "next/navigation";
  * screen, not a screen of its own). Kept as a redirect so bookmarks, docs and
  * muscle memory land on the merged screen instead of a 404.
  */
-export default async function AdminPublishRedirect(
-  props: {
-    params: Promise<{ locale: string }>;
-  }
-) {
+export default async function AdminPublishRedirect(props: {
+  params: Promise<{ locale: string }>;
+}) {
   const params = await props.params;
 
-  const {
-    locale
-  } = params;
+  const { locale } = params;
 
   redirect(`/${locale}/admin/courses`);
 }