fix(usage): name the unreadable-key failure, unpin the collector default, align the tab

Review follow-ups on #1304.

SIGNING_KEY_UNREADABLE. USAGE_ENCRYPTION_KEY defaults to JWT_SECRET, so
rotating JWT_SECRET — the correct response to a suspected compromise —
makes the stored Ed25519 key undecryptable. That surfaced as a generic
DELIVERY_FAILED which retried forever, and it silently blocks the DELETE
packet too: an operator who withdraws has their local state cleared
while the collector keeps its copy. decrypt() now tags its own failure
and deliver() reports it under its own name, without flagging an
identity conflict — an unreadable key is not evidence of a clone. The
docs already warned that losing the key breaks deletion signing; they
now name the trigger and the error.

The collector default is no longer an inline string in the constructor.
It is a declared DEFAULT_COLLECTOR_URL, since it is a deployment choice:
self-hosters point USAGE_COLLECTOR_URL at their own collector and the UI
already derives every link from whatever is configured. schema.cjs is
deliberately untouched — it is vendored byte-identical with
picpeak-usage, and its $id is a schema identity, not a delivery address.

Links in the consent dialog. It named the collector inside prose but
never linked it, so an operator deciding whether to opt in could not
open the destination or the public schema without retyping a URL. Both
are links now, built from the configured collector.

UI standards. The tab hand-rolled its surfaces as
`<section className="rounded-xl border border-theme …">` and imported
Button from a deep path; every other settings tab uses `<Card
padding="md">` from the components/common barrel. Converted, with the
feedback <form> wrapped rather than replaced so its semantics survive,
and headings given the same colour tokens as ImageSecurityTab. The
barrel pulls ErrorBoundary -> i18n/config, so the tab's test needed the
initReactI18next shim the FaceRecognitionCard test already uses.

Not changed: the delete packet reusing the current sequence. The
collector handles delete before any sequence check — "possession proof
is sufficient for deletion, including when a restored backup has a
stale sequence" (picpeak-usage server/collector.js) — so deletion is
deliberately sequence-exempt and the client is correct as written.

Refs #1110

frontend/src/features/settings/__tests__/ProductUsageTab.test.tsx

@@ -14,7 +14,11 @@ import {
 } from '../../../services/productUsage.service';
 
 vi.mock('react-i18next', () => ({
-  useTranslation: () => ({ t: (key: string) => key })
+  useTranslation: () => ({ t: (key: string) => key }),
+  // The tab imports from the components/common barrel, which reaches
+  // ErrorBoundary -> i18n/config, and that calls .use(initReactI18next) at
+  // import time. Same shim as FaceRecognitionCard.sidecarHealth.test.tsx.
+  initReactI18next: { type: '3rdParty', init: () => {} }
 }));
 vi.mock('../../../components/common/ConfirmDialog', () => ({
   useConfirm: () => async () => true

frontend/src/features/settings/tabs/ProductUsageTab.tsx

@@ -6,7 +6,7 @@ import {
   type ProductFeedback
 } from '../../../services/productUsage.service';
 import { useConfirm } from '../../../components/common/ConfirmDialog';
-import { Button } from '../../../components/common/Button';
+import { Button, Card } from '../../../components/common';
 
 function ConsentDialog({
   close,
@@ -48,6 +48,24 @@ function ConsentDialog({
           <p key={key}>{t(`productUsage.${key}`, { collector })}</p>
         ))}
       </div>
+      <div className="mb-4 flex flex-wrap gap-x-6 gap-y-1 text-sm">
+        <a
+          className={'text-primary-600 dark:text-primary-400 hover:underline'}
+          href={collector}
+          target="_blank"
+          rel="noreferrer"
+        >
+          {t('productUsage.linkCollector')}
+        </a>
+        <a
+          className={'text-primary-600 dark:text-primary-400 hover:underline'}
+          href={`${collector}/transparency`}
+          target="_blank"
+          rel="noreferrer"
+        >
+          {t('productUsage.transparency')}
+        </a>
+      </div>
       <label className="flex items-start gap-2 mb-4">
         <input
           type="checkbox"
@@ -119,8 +137,8 @@ export default function ProductUsageTab() {
   return (
     <div className="space-y-6 text-theme">
       <p>{t('productUsage.purpose')}</p>
-      <section className="rounded-xl border border-theme bg-theme-surface p-5 space-y-4">
-        <h3 className="text-lg font-semibold">
+      <Card padding="md" className="space-y-4">
+        <h3 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
           {t(`productUsage.states.${data.status}`)}
         </h3>
         <p>{t(`productUsage.stateDetails.${data.status}`)}</p>
@@ -183,7 +201,7 @@ export default function ProductUsageTab() {
             </>
           )}
           <a
-            className="underline self-center"
+            className="text-sm text-primary-600 dark:text-primary-400 hover:underline self-center"
             href={`${data.collector_url}/transparency`}
             target="_blank"
             rel="noreferrer"
@@ -191,11 +209,11 @@ export default function ProductUsageTab() {
             {t('productUsage.transparency')}
           </a>
         </div>
-      </section>
+      </Card>
       {active && (
         <>
-          <section className="rounded-xl border border-theme bg-theme-surface p-5 space-y-4">
-            <h3 className="text-lg font-semibold">
+          <Card padding="md" className="space-y-4">
+            <h3 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
               {t('productUsage.inspect')}
             </h3>
             <div className="flex flex-wrap gap-3">
@@ -256,9 +274,10 @@ export default function ProductUsageTab() {
                 {JSON.stringify(preview, null, 2)}
               </pre>
             )}
-          </section>
+          </Card>
+          <Card padding="md">
           <form
-            className="rounded-xl border border-theme bg-theme-surface p-5 space-y-4"
+            className="space-y-4"
             onSubmit={(e) => {
               e.preventDefault();
               void run(async () => {
@@ -285,7 +304,7 @@ export default function ProductUsageTab() {
               });
             }}
           >
-            <h3 className="text-lg font-semibold">
+            <h3 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
               {t('productUsage.feedbackTitle')}
             </h3>
             <p>{t('productUsage.feedbackDisclosure')}</p>
@@ -407,6 +426,7 @@ export default function ProductUsageTab() {
               {t('productUsage.sendFeedback')}
             </Button>
           </form>
+          </Card>
         </>
       )}
       {message && <p role="status">{message}</p>}