@jini-ai/agent-plugins 0.6.17 → 0.6.19

package/google-workspace/ui/destination-panel.handler.mjs

@@ -0,0 +1,106 @@
+/**
+ * @file Server-side handlers of the form-destination panel (`ui/destination-panel.html`), loaded by
+ * the host as this surface's `handlerModule` (never served to the frame).
+ *
+ * Exists so a person can say "submissions of this form go to this tab of this spreadsheet": the
+ * spreadsheet comes from the Picker flow (the same verified actions as the Picker panel), the tab is
+ * chosen by its numeric sheet id (renaming a tab never moves deliveries), and every save re-checks
+ * the spreadsheet and tab through Google before anything is stored, so a pasted id grants nothing.
+ * Saving asks the person to confirm that removing the destination later leaves the rows already
+ * written in the spreadsheet (local delete never purges external rows). A saved destination is the
+ * form's delivery binding itself, written through the host's `deliveryBindings` capability.
+ */
+import { metadataOf, readPickedSpreadsheets } from '../lib/picker-flow.mjs';
+import { verifySpreadsheetAccess } from '../lib/picker-selection.mjs';
+import { assertSpreadsheetId, getSpreadsheet } from '../lib/sheets-client.mjs';
+import { CONNECTION_ID, sheetsUnavailableReason, surfaceAccount, surfaceRefusal, surfaceSheetsClient, withSurfaceFailures } from '../lib/surface-actions.mjs';
+import { FORM_SLUG_PATTERN, MAX_FORM_DESTINATIONS, readFormDestinations, saveFormDestination } from '../lib/form-destination-settings.mjs';
+import { createPickerHandlers } from './picker.handler.mjs';
+
+const TAB_FIELDS = 'sheets.properties(sheetId,title,sheetType)';
+const MAX_TABS = 200;
+
+/** The verified spreadsheet and its grid tabs (`{ sheetId, title }`, at most 200). @complexity O(t): three requests. */
+async function spreadsheetTabs(capabilities, spreadsheetId) {
+  const fileId = assertSpreadsheetId({ id: spreadsheetId }, { code: 'invalid-selection' });
+  const client = surfaceSheetsClient({ capabilities });
+  const spreadsheet = await verifySpreadsheetAccess({ client, connectionRef: CONNECTION_ID, fileId });
+  const body = await getSpreadsheet({ client, connectionRef: CONNECTION_ID, spreadsheetId: fileId, fields: TAB_FIELDS });
+  const grids = (Array.isArray(body?.sheets) ? body.sheets : []).map((sheet) => sheet?.properties).filter((tab) => Number.isInteger(tab?.sheetId) && (tab.sheetType ?? 'GRID') === 'GRID');
+  return { spreadsheet, tabs: grids.slice(0, MAX_TABS).map((tab) => ({ sheetId: tab.sheetId, title: String(tab.title ?? '') })) };
+}
+
+/** The current account id when Sheets is usable, else null (the list still shows, unchecked). @complexity O(1). */
+async function currentAccountId(capabilities) {
+  return (await sheetsUnavailableReason({ capabilities })) === null ? (await surfaceAccount({ capabilities })).accountId : null;
+}
+
+/** The panel's list: saved destinations, picked spreadsheets and, when supported, site forms.
+ * Absence preserves older hosts' typed fallback; denied access must fail, never enable typing.
+ * @complexity O(d + p + f), with forms bounded by the host capability session. */
+async function listView({ capabilities }, _options = {}) {
+  const accountId = await currentAccountId(capabilities);
+  const saved = await readFormDestinations({ deliveryBindings: capabilities.deliveryBindings });
+  const destinations = Object.entries(saved).map(([formSlug, destination]) => ({
+    formSlug, ...metadataOf(destination), sheetId: destination.sheetId, tabTitle: destination.tabTitle,
+    ...(accountId === null ? {} : { sameAccount: destination.accountId === accountId }),
+  }));
+  return {
+    destinations, picked: (await readPickedSpreadsheets({ state: capabilities.state })).map(metadataOf),
+    ...(capabilities.forms === undefined ? {} : { forms: await capabilities.forms.list({}) }),
+  };
+}
+
+/** Refuses a save the person has not fully confirmed or that names no valid form. @complexity O(1). */
+function assertSaveInput(input, fail) {
+  if (!FORM_SLUG_PATTERN.test(input.formSlug)) throw surfaceRefusal({ fail, code: 'invalid-destination' });
+  if (input.confirmExternalRows !== true) throw surfaceRefusal({ fail, code: 'confirm-external-rows' });
+}
+
+/** Verifies and stores one form's destination as its binding. @complexity O(t + d): four requests, one binding write. */
+async function saveDestination({ capabilities, input, fail }) {
+  assertSaveInput(input, fail);
+  const account = await surfaceAccount({ capabilities });
+  const { spreadsheet, tabs } = await spreadsheetTabs(capabilities, input.spreadsheetId);
+  const tab = tabs.find((candidate) => candidate.sheetId === input.sheetId);
+  if (tab === undefined) throw surfaceRefusal({ fail, code: 'tab-not-found' });
+  const destinations = await readFormDestinations({ deliveryBindings: capabilities.deliveryBindings });
+  const existing = Object.hasOwn(destinations, input.formSlug) ? destinations[input.formSlug] : undefined;
+  if (existing === undefined && Object.keys(destinations).length >= MAX_FORM_DESTINATIONS) throw surfaceRefusal({ fail, code: 'too-many-destinations' });
+  const destination = { spreadsheetId: spreadsheet.spreadsheetId, title: spreadsheet.title, sheetId: tab.sheetId, tabTitle: tab.title, accountId: account.accountId };
+  await saveFormDestination({ deliveryBindings: capabilities.deliveryBindings, formSlug: input.formSlug, destination }, existing === undefined ? {} : { bindingId: existing.bindingId });
+  return listView({ capabilities });
+}
+
+/**
+ * Builds the panel's handler module: the Picker panel's bootstrap and selection actions, plus the
+ * destination actions.
+ * @param {object} [_required]
+ * @param {{ now?: () => number, randomId?: () => string }} [optional] Passed to the Picker flow (tests).
+ * @returns {{ bootstrap: Function, actions: Record<string, Function> }}
+ * @complexity O(1) to build.
+ */
+export function createDestinationPanelHandlers(_required = {}, optional = {}) {
+  const picker = createPickerHandlers({}, optional);
+  const act = (fail, run) => withSurfaceFailures({ fail, run });
+  return {
+    bootstrap: picker.bootstrap,
+    actions: {
+      ...picker.actions,
+      'list-destinations': ({ capabilities, fail }) => act(fail, () => listView({ capabilities })),
+      'list-tabs': ({ capabilities, input, fail }) => act(fail, async () => {
+        const { spreadsheet, tabs } = await spreadsheetTabs(capabilities, input.spreadsheetId);
+        return { spreadsheet: metadataOf(spreadsheet), tabs };
+      }),
+      'save-destination': (call) => act(call.fail, () => saveDestination(call)),
+      /** Removes one form's binding; rows already in the spreadsheet stay where they are. */
+      'remove-destination': ({ capabilities, input, fail }) => act(fail, async () => {
+        const destinations = await readFormDestinations({ deliveryBindings: capabilities.deliveryBindings });
+        if (Object.hasOwn(destinations, input.formSlug)) await capabilities.deliveryBindings.remove({ bindingId: destinations[input.formSlug].bindingId });
+        return listView({ capabilities });
+      }),
+    },
+  };
+}
+
+export default createDestinationPanelHandlers();

package/google-workspace/ui/destination-panel.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Form destinations</title>
+<!-- Static and secret-free: served without credentials. Start data arrives in the host's init message. -->
+<link rel="stylesheet" href="panel.css">
+<script type="module" src="destination-panel.mjs"></script>
+</head>
+<body>
+<main>
+<h1 class="sr-only">Form destinations</h1>
+<div id="app" aria-live="polite"><p class="muted">Loading…</p></div>
+</main>
+</body>
+</html>

package/google-workspace/ui/destination-panel.mjs

@@ -0,0 +1,150 @@
+/**
+ * @file The form-destination panel in the browser: lists each form's saved spreadsheet and tab, and
+ * lets a person choose a spreadsheet (a picked one, or the Picker flow), a tab, and save. The server
+ * re-verifies the spreadsheet and tab on every save; this file only collects the choice.
+ *
+ * A saved destination is the form's delivery binding (the server writes it), so there is nothing to
+ * copy anywhere. Saving needs the "rows stay in the spreadsheet" confirmation, because removing a destination here
+ * (or deleting a form or submission on the site) never deletes rows Google already holds.
+ */
+import { connectToHost, failureText, h, notice, show, tip } from './dom.mjs';
+import { chooseSpreadsheet } from './picker-flow.mjs';
+import { CANCELLED_TEXT, EXTERNAL_ROWS_NOTE, pickerIntro } from './picker-view.mjs';
+
+let client;
+let app;
+let draft;
+let view;
+let status;
+/** 'error' after a failed step, else 'info' (the status line's colour). */
+let statusTone;
+/** Re-runs the failed step when the host said a retry can help ("Try again"), else undefined. */
+let statusRetry;
+let bootstrap;
+
+const call = (action, payload = {}) => client.call({ action, payload });
+
+/** Runs one server step; its failure becomes the status line. */
+async function step(work) {
+  statusTone = 'info';
+  statusRetry = undefined;
+  try {
+    await work();
+  } catch (error) {
+    status = failureText(error);
+    statusTone = 'error';
+    statusRetry = error?.retryable === true ? () => step(work) : undefined;
+  }
+  render();
+}
+
+/** A spreadsheet became the draft's: load its tabs (the server verifies access first). */
+async function useSpreadsheet(spreadsheetId) {
+  const { spreadsheet, tabs } = await call('list-tabs', { spreadsheetId });
+  Object.assign(draft, { spreadsheet, tabs, sheetId: tabs[0]?.sheetId ?? null });
+}
+
+function savedList() {
+  if (view.destinations.length === 0) return h('p', { class: 'muted empty' }, ['No form sends to Google Sheets yet.']);
+  return h('ul', { class: 'rows' }, view.destinations.map((entry) => h('li', { class: 'card destination' }, [
+    h('p', {}, [h('strong', {}, [entry.formSlug]), ` → ${entry.title} / ${entry.tabTitle}`]),
+    entry.sameAccount === false ? h('p', { class: 'notice warn' }, ['Chosen with a different Google account than the one connected now. Choose its spreadsheet again.']) : null,
+    h('div', { class: 'actions' }, [h('button', { type: 'button', class: 'small', onClick: () => step(async () => { view = await call('remove-destination', { formSlug: entry.formSlug }); status = `Removed ${entry.formSlug}. ${EXTERNAL_ROWS_NOTE}`; statusTone = 'ok'; }) }, ['Remove'])]),
+  ])));
+}
+
+function spreadsheetChooser() {
+  const options = view.picked.map((sheet) => h('option', { value: sheet.spreadsheetId, ...(draft.spreadsheet?.spreadsheetId === sheet.spreadsheetId ? { selected: true } : {}) }, [sheet.title]));
+  return h('div', { class: 'field-stack' }, [
+    view.picked.length > 0 ? h('label', {}, ['Spreadsheet', h('select', { onChange: (event) => step(() => useSpreadsheet(event.target.value)) }, [h('option', { value: '' }, ['Choose…']), ...options])]) : null,
+    // Same rule as the Picker panel: no start data (or an unavailable mode) means nothing to open.
+    bootstrap !== undefined && bootstrap.mode !== 'unavailable' ? h('button', { type: 'button', onClick: () => step(async () => {
+      const chosen = await chooseSpreadsheet({ client, bootstrap, onStatus: (text) => { status = text; render(); } });
+      if (chosen === null) { status = CANCELLED_TEXT; return; }
+      status = '';
+      await useSpreadsheet(chosen.spreadsheetId);
+      view = await call('list-destinations');
+    }) }, ['Choose another spreadsheet']) : null,
+  ]);
+}
+
+function tabChooser() {
+  if (draft.spreadsheet === null) return null;
+  return h('label', {}, ['Tab', h('select', { onChange: (event) => { draft.sheetId = Number(event.target.value); } },
+    draft.tabs.map((tab) => h('option', { value: String(tab.sheetId), ...(tab.sheetId === draft.sheetId ? { selected: true } : {}) }, [tab.title])))]);
+}
+
+/** Site choices use their stable slug as the value and their title as plain text. An empty list
+ * still means discovery is supported; typing is only for hosts that lack the capability.
+ * @complexity O(f) for the host's at most 200 choices. */
+function formChooser() {
+  if (view.forms === undefined) return h('label', {}, ['Form short name', h('input', { type: 'text', value: draft.formSlug, maxlength: '64', autocomplete: 'off', onInput: (event) => { draft.formSlug = event.target.value.trim(); } })]);
+  return h('label', {}, ['Form', h('select', { name: 'formSlug', ...(view.forms.length === 0 ? { disabled: true } : {}), onChange: (event) => { draft.formSlug = event.target.value; } }, [
+    h('option', { value: '' }, [view.forms.length === 0 ? 'No forms available' : 'Choose a form…']),
+    ...view.forms.map((form) => h('option', { value: form.slug, ...(draft.formSlug === form.slug ? { selected: true } : {}) }, [form.title])),
+  ])]);
+}
+
+/** What the person still has to fill in before a save can work, or null. @complexity O(f), at most 200 form choices. */
+function missingForSave() {
+  if (view.forms !== undefined && !view.forms.some((form) => form.slug === draft.formSlug)) return 'Choose a form.';
+  if (draft.formSlug === '') return "Enter the form's short name.";
+  if (draft.spreadsheet === null) return 'Choose a spreadsheet.';
+  if (!draft.confirmed) return 'Tick the box to confirm rows stay in the spreadsheet.';
+  return null;
+}
+
+function editor() {
+  const ready = bootstrap !== undefined && bootstrap.mode !== 'unavailable';
+  return h('section', { class: 'card', 'aria-labelledby': 'add-heading' }, [
+    h('div', { class: 'head' }, [
+      h('h2', { id: 'add-heading' }, ['Send a form to a spreadsheet']),
+      ready ? tip('About choosing a spreadsheet', pickerIntro({ bootstrap }), { bodyClass: 'intro' }) : null,
+    ]),
+    formChooser(),
+    spreadsheetChooser(),
+    tabChooser(),
+    h('label', { class: 'check confirm-rows' }, [h('input', { type: 'checkbox', ...(draft.confirmed ? { checked: true } : {}), onChange: (event) => { draft.confirmed = event.target.checked; } }), EXTERNAL_ROWS_NOTE]),
+    h('div', { class: 'actions' }, [h('button', { type: 'button', class: 'primary', onClick: () => step(async () => {
+      // Checked here first so the person reads what is missing, not the host's schema refusal.
+      const missing = missingForSave();
+      if (missing !== null) { status = missing; statusTone = 'error'; return; }
+      view = await call('save-destination', { formSlug: draft.formSlug, spreadsheetId: draft.spreadsheet?.spreadsheetId ?? '', sheetId: draft.sheetId ?? 0, confirmExternalRows: draft.confirmed });
+      // A save only succeeds with a chosen spreadsheet: the declared input refuses an empty
+      // spreadsheetId (minLength 1), and that id is non-empty only once `draft.spreadsheet` is set.
+      status = `Saved: ${draft.formSlug} sends to ${draft.spreadsheet.title}.`;
+      statusTone = 'ok';
+    }) }, ['Save destination'])]),
+  ]);
+}
+
+function render() {
+  // Not ready (no start data, Sheets off, not connected): the reason is the visible notice.
+  const ready = bootstrap !== undefined && bootstrap.mode !== 'unavailable';
+  show(app,
+    ready ? null : h('p', { class: 'notice warn intro' }, [pickerIntro({ bootstrap })]),
+    status ? notice({ text: status, tone: statusTone, retry: statusRetry }) : null,
+    ...(view === undefined ? [] : [
+      h('section', { class: 'card', 'aria-labelledby': 'saved-heading' }, [h('h2', { id: 'saved-heading' }, ['Saved destinations']), savedList()]),
+      editor(),
+    ]));
+}
+
+/**
+ * Starts the panel in a frame: connects to the host and loads the saved destinations once the host's
+ * init arrives. Exported so a test can start a fresh panel (fresh draft) in its own jsdom window; the
+ * last line starts the real one.
+ * @param {{ window: Window, document: Document }} required
+ */
+export function initDestinationPanel(required) {
+  client = connectToHost({ window: required.window });
+  app = required.document.getElementById('app');
+  draft = { formSlug: '', spreadsheet: null, tabs: [], sheetId: null, confirmed: false };
+  view = undefined;
+  status = '';
+  statusTone = 'info';
+  bootstrap = undefined;
+  client.ready.then(() => { bootstrap = client.bootstrap(); return step(async () => { view = await call('list-destinations'); }); });
+}
+
+initDestinationPanel({ window, document });

package/google-workspace/ui/dom.mjs

@@ -0,0 +1,140 @@
+/**
+ * @file The few browser helpers the three panels share: connect to the host through the copied
+ * admin-surface client, build elements, and show status text.
+ *
+ * Exists so every panel builds its DOM the same safe way: text always goes through `textContent`
+ * (never `innerHTML`), because titles, labels and messages come from Google or the host and must
+ * never be parsed as markup inside the panel.
+ */
+import { createAdminSurfaceClient } from './surface-client.mjs';
+
+/**
+ * The client for this frame: listens to the parent's messages only (the client checks the source),
+ * and applies the admin's design tokens to this frame's root so `panel.css` matches the admin.
+ * @param {{ window: Window }} required - the frame's window (a test passes its own jsdom window).
+ */
+export function connectToHost(required) {
+  const { window: frame } = required;
+  closeTipsOnOutsideClick(frame.document);
+  return createAdminSurfaceClient({
+    parent: frame.parent,
+    listen: (handler) => { frame.addEventListener('message', handler); return () => frame.removeEventListener('message', handler); },
+  }, { themeRoot: frame.document.documentElement });
+}
+
+/**
+ * An element with attributes, event handlers (`on<Event>` functions) and children (strings become text).
+ * @param {string} tag
+ * @param {Record<string, string | boolean | Function | undefined>} [props]
+ * @param {Array<Node | string | null | undefined>} [children]
+ * @returns {HTMLElement}
+ */
+export function h(tag, props = {}, children = []) {
+  const element = document.createElement(tag);
+  for (const [name, value] of Object.entries(props)) {
+    if (typeof value === 'function') element.addEventListener(name.slice(2).toLowerCase(), value);
+    else if (value === true) element.setAttribute(name, '');
+    else if (typeof value === 'string') element.setAttribute(name, value);
+    else {
+      // False and absent props do not create attributes.
+    }
+  }
+  element.append(...children.filter((child) => child !== null && child !== undefined));
+  return element;
+}
+
+let nextTip = 0;
+
+/**
+ * An "i" toggletip: the explanation shows on hover, keyboard focus or tap, instead of a paragraph
+ * on screen. The trigger is a focusable span (not a `<button>`), so the panels' button lists stay
+ * their actions only; its text stays in the DOM and is the trigger's accessible description.
+ * @param {string} label - what the explanation is about ("About Products").
+ * @param {string} text
+ * @param {{ bodyClass?: string }} [optional] - an extra class on the explanation (e.g. `intro`).
+ */
+export function tip(label, text, optional = {}) {
+  nextTip += 1;
+  const id = `tip-${nextTip}`;
+  const toggle = (event) => {
+    if (event.type === 'keydown' && event.key !== 'Enter' && event.key !== ' ' && event.key !== 'Escape') return;
+    event.preventDefault();
+    const wrapper = event.currentTarget.parentElement;
+    const open = event.key === 'Escape' ? false : !wrapper.classList.contains('open');
+    wrapper.classList.toggle('open', open);
+    event.currentTarget.setAttribute('aria-expanded', String(open));
+  };
+  return h('span', { class: 'tip' }, [
+    h('span', { class: 'tip-icon', role: 'button', tabindex: '0', 'aria-label': label, 'aria-describedby': id, 'aria-expanded': 'false', onClick: toggle, onKeydown: toggle }, ['i']),
+    h('span', { class: optional.bodyClass ? `tip-body ${optional.bodyClass}` : 'tip-body', role: 'tooltip', id }, [text]),
+  ]);
+}
+
+/** Taps elsewhere close an open toggletip (once per document). */
+function closeTipsOnOutsideClick(doc) {
+  if (doc.tipsWired) return;
+  doc.tipsWired = true;
+  doc.addEventListener('click', (event) => {
+    for (const open of doc.querySelectorAll('.tip.open')) {
+      if (!open.contains(event.target)) { open.classList.remove('open'); open.firstChild.setAttribute('aria-expanded', 'false'); }
+    }
+  });
+}
+
+/**
+ * A compact status line. `tone`: 'error' (default, plain `notice`), 'ok', 'info' or 'warn'. With
+ * `retry`, a "Try again" button sits inside the same box (outside the `.notice` text).
+ * @param {{ text: string, tone?: string, retry?: () => void }} required
+ */
+export function notice(required) {
+  const { text, tone = 'error', retry } = required;
+  const line = h('p', { class: tone === 'error' ? 'notice' : `notice ${tone}`, role: 'status' }, [text]);
+  if (!retry) return line;
+  return h('div', { class: `notice-group ${tone}` }, [line, h('button', { type: 'button', class: 'small', onClick: retry }, ['Try again'])]);
+}
+
+const FOCUSABLE = 'button:not([disabled]), input:not([disabled]), select:not([disabled]), a[href], [tabindex="0"]';
+
+/** What identifies a focused control across a re-render: its id, else its tag and visible name. */
+function focusKey(element, root) {
+  if (!element || element === root || !root.contains(element)) return null;
+  return { id: element.id, tag: element.tagName, name: element.getAttribute('aria-label') ?? element.textContent.trim() };
+}
+
+function matchesFocusKey({ control, key }, _options = {}) {
+  if (key.id && control.id === key.id) return true;
+  return control.tagName === key.tag && (control.getAttribute('aria-label') ?? control.textContent.trim()) === key.name;
+}
+
+/**
+ * Replaces a region's content, keeping keyboard focus where the person was: on the same control
+ * when it is still there, else on the first control of the new content (never lost to `<body>`).
+ */
+export function show(root, ...nodes) {
+  const key = focusKey(root.ownerDocument.activeElement, root) ?? root.pendingFocus ?? null;
+  root.pendingFocus = null;
+  root.replaceChildren(...nodes.filter(Boolean));
+  if (key === null) return;
+  const controls = [...root.querySelectorAll(FOCUSABLE)];
+  const same = controls.find(control => matchesFocusKey({ control, key }));
+  (same ?? controls[0])?.focus();
+}
+
+/** The sentence to show for a failed call: the host's or plugin's fixed message. */
+export function failureText(error) {
+  // The host's schema check names JSON paths ("$.spreadsheetId has the wrong length"): developer text.
+  if (error?.code === 'invalid-payload') return 'Some details are missing or not valid. Check them and try again.';
+  return typeof error?.message === 'string' && error.message ? error.message : 'Something went wrong. Try again.';
+}
+
+/** Runs `work` with every button in `root` disabled, so one click sends one request. */
+export async function busy(root, work) {
+  // Disabling the focused button drops focus to <body>; `show` restores it from here.
+  root.pendingFocus = focusKey(root.ownerDocument.activeElement, root);
+  const buttons = [...root.querySelectorAll('button')];
+  for (const control of buttons) control.disabled = true;
+  try { return await work(); } finally { for (const control of buttons) control.disabled = false; }
+}
+
+/** Resolves after `ms` (the desktop Picker and sign-in polls). */
+export const wait = (ms) => new Promise((resolve) => { setTimeout(resolve, ms); });

package/google-workspace/ui/panel.css

@@ -0,0 +1,170 @@
+/* Shared styles of the Google Workspace admin panels. The CSP allows only this file ('self'), no inline style.
+   Colours, type, radius and spacing come from the admin: the host sends its design tokens and the surface
+   client sets them as `--jini-*` custom properties on <html> (plus `data-jini-scheme`), so these panels
+   match the admin and follow its light/dark switch. The `--fb-*` values are only for a host that sends none. */
+:root {
+  color-scheme: light dark;
+  --fb-bg: #ffffff; --fb-raised: #f5f6f8; --fb-text: #1f2430; --fb-muted: #626a78; --fb-line: #e4e7eb; --fb-line-strong: #cfd4db;
+  --fb-accent: #2f6fde; --fb-accent-ink: #ffffff; --fb-danger: #b42318; --fb-ok: #18763b; --fb-warn: #845800;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-jini-scheme="light"]) {
+    --fb-bg: #17191e; --fb-raised: #1f2228; --fb-text: #eceef2; --fb-muted: #9aa1ad; --fb-line: #30343c; --fb-line-strong: #434852;
+    --fb-accent: #7aa7f5; --fb-accent-ink: #111318; --fb-danger: #f2877d; --fb-ok: #79d69b; --fb-warn: #ebc36b;
+  }
+}
+:root {
+  --bg: var(--jini-bg, var(--fb-bg));
+  --raised: var(--jini-surface, var(--fb-raised));
+  --text: var(--jini-text, var(--fb-text));
+  --muted: var(--jini-text-muted, var(--fb-muted));
+  --line: var(--jini-border, var(--fb-line));
+  --line-strong: var(--jini-border-strong, var(--fb-line-strong));
+  --accent: var(--jini-primary, var(--fb-accent));
+  --accent-ink: var(--jini-primary-ink, var(--fb-accent-ink));
+  --danger: var(--jini-danger, var(--fb-danger));
+  --ok: var(--jini-success, var(--fb-ok));
+  --warn: var(--jini-warning, var(--fb-warn));
+  --danger-bg: var(--jini-danger-bg, color-mix(in oklab, var(--danger) 9%, var(--bg)));
+  --ok-bg: var(--jini-success-bg, color-mix(in oklab, var(--ok) 10%, var(--bg)));
+  --warn-bg: var(--jini-warning-bg, color-mix(in oklab, var(--warn) 11%, var(--bg)));
+  --info-bg: color-mix(in oklab, var(--accent) 8%, var(--bg));
+  --radius-sm: var(--jini-radius-sm, 7px);
+  --radius-md: var(--jini-radius-md, 11px);
+  --space-1: var(--jini-space-1, .25rem); --space-2: var(--jini-space-2, .5rem); --space-3: var(--jini-space-3, .75rem); --space-4: var(--jini-space-4, 1rem);
+  --fs-xs: var(--jini-font-size-xs, .75rem); --fs-sm: var(--jini-font-size-sm, .8125rem);
+  --fs-base: var(--jini-font-size-base, .875rem); --fs-md: var(--jini-font-size-md, .95rem);
+  --focus: 0 0 0 3px color-mix(in oklab, var(--accent) 24%, transparent);
+  --measure: 40rem;
+}
+* { box-sizing: border-box; }
+/* The type is set on body, not :root, so `rem` stays the browser's 16px like the admin's. */
+body {
+  margin: 0; padding: var(--space-1) var(--space-1) var(--space-4); color: var(--text); background: var(--bg);
+  font: var(--fs-base)/1.5 var(--jini-font-ui, system-ui, -apple-system, "Segoe UI", sans-serif); -webkit-font-smoothing: antialiased;
+}
+main { max-width: var(--measure); display: grid; gap: var(--space-3); }
+#app { display: grid; gap: var(--space-3); }
+.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+h2 { font-size: var(--fs-md); font-weight: 600; line-height: 1.3; margin: 0; }
+p { margin: 0; }
+.muted { color: var(--muted); font-size: var(--fs-sm); }
+
+/* A section: one bordered panel per job, header row first. */
+.card { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg); padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-3); }
+.head { display: flex; align-items: center; gap: var(--space-2); position: relative; min-width: 0; }
+.head h2 { overflow-wrap: anywhere; }
+
+/* Connection status dot beside the heading; the heading's words carry the meaning. */
+.dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
+.dot.ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
+.dot.warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }
+.dot.info { background: var(--accent); box-shadow: 0 0 0 3px var(--info-bg); }
+
+/* Buttons: the admin's sizes and weights. */
+.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
+button {
+  font: inherit; font-size: .85rem; font-weight: 600; line-height: 1.2; padding: .5rem .95rem; min-height: 2.125rem;
+  border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--bg); color: var(--text); cursor: pointer;
+}
+button:hover:not(:disabled) { background: var(--raised); }
+button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
+button.primary:hover:not(:disabled) { background: color-mix(in oklab, var(--accent) 88%, var(--text)); }
+button.danger { background: var(--danger); border-color: var(--danger); color: var(--bg); }
+button.danger:hover:not(:disabled) { background: color-mix(in oklab, var(--danger) 88%, var(--text)); }
+button.danger-quiet { margin-left: auto; border-color: transparent; background: transparent; color: var(--danger); }
+button.danger-quiet:hover:not(:disabled) { background: var(--danger-bg); }
+button.small { padding: .3rem .7rem; min-height: 1.75rem; font-size: var(--fs-sm); }
+button:disabled { opacity: .55; cursor: default; }
+button:focus-visible, select:focus-visible, input:focus-visible, .tip-icon:focus-visible {
+  outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none;
+}
+
+/* Product rows: name + state, then explanation, grant, switch, all on one line. */
+ul.rows { list-style: none; margin: 0; padding: 0; display: grid; }
+ul.rows > li { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; border-top: 1px solid var(--line); position: relative; }
+ul.rows > li:first-child { border-top: 0; padding-top: 0; }
+ul.rows > li:last-child { padding-bottom: 0; }
+.product-name { display: grid; min-width: 0; }
+.product-name strong { font-weight: 600; }
+.state { color: var(--muted); font-size: var(--fs-sm); }
+.state.warn { color: var(--warn); }
+.product-name { margin-right: auto; }
+.name-line { display: inline-flex; align-items: center; gap: var(--space-2); }
+
+/* The product switch: the admin's 38×22 pill. `aria-pressed` is the state. */
+button.switch { position: relative; flex: none; width: 38px; height: 22px; min-height: 0; padding: 0; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--line-strong); }
+button.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: transform .15s ease; }
+button.switch[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }
+button.switch[aria-pressed="true"]::after { transform: translateX(16px); }
+button.switch:hover:not(:disabled) { background: color-mix(in oklab, var(--line-strong) 80%, var(--text)); }
+button.switch[aria-pressed="true"]:hover:not(:disabled) { background: color-mix(in oklab, var(--accent) 88%, var(--text)); }
+
+/* "i" toggletip: hover, focus or tap shows the explanation under its row. */
+.tip { display: inline-flex; flex: none; }
+.tip-icon {
+  display: inline-grid; place-items: center; width: 1.05rem; height: 1.05rem; border-radius: 50%;
+  border: 1px solid var(--line-strong); color: var(--muted); font: 600 .7rem/1 Georgia, "Times New Roman", serif; font-style: italic;
+  cursor: help; user-select: none;
+}
+.tip-icon:hover, .tip.open .tip-icon { color: var(--text); border-color: var(--muted); }
+.tip-body {
+  display: none; position: absolute; z-index: 10; left: 0; top: calc(100% + 6px); width: max-content; max-width: min(24rem, calc(100vw - 2rem));
+  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: var(--fs-sm); line-height: 1.45; font-weight: 400;
+  background: var(--jini-overlay-tooltip-bg, var(--bg)); color: var(--jini-overlay-tooltip-text, var(--text));
+  border: 1px solid var(--jini-overlay-tooltip-border, var(--line)); box-shadow: 0 6px 20px rgb(0 0 0 / .14);
+}
+.tip:hover .tip-body, .tip-icon:focus-visible + .tip-body, .tip.open .tip-body { display: block; }
+
+/* Compact inline notices; tone by class. Plain `notice` is a failure. */
+.notice, .notice-group {
+  justify-self: start; max-width: 100%; font-size: var(--fs-sm); line-height: 1.45;
+  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
+  border: 1px solid color-mix(in oklab, var(--danger) 28%, var(--bg)); background: var(--danger-bg); color: var(--text);
+}
+.notice.ok, .notice-group.ok { border-color: color-mix(in oklab, var(--ok) 30%, var(--bg)); background: var(--ok-bg); }
+.notice.warn, .notice-group.warn { border-color: color-mix(in oklab, var(--warn) 30%, var(--bg)); background: var(--warn-bg); }
+.notice.info, .notice-group.info { border-color: color-mix(in oklab, var(--accent) 22%, var(--bg)); background: var(--info-bg); }
+.notice-group { display: flex; align-items: center; gap: var(--space-3); }
+.notice-group > .notice { padding: 0; border: 0; background: none; flex: 1; }
+.notice-group > button { flex: none; }
+
+/* Disconnect confirmation: inline, danger-tinted, inside the account card. */
+.confirm { border: 1px solid color-mix(in oklab, var(--danger) 28%, var(--bg)); background: var(--danger-bg); border-radius: var(--radius-sm); padding: var(--space-3); display: grid; gap: var(--space-2); font-size: var(--fs-sm); }
+.account-link { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); color: var(--muted); }
+
+/* Form controls: labels above, widths sized to content. */
+label { display: grid; gap: var(--space-1); font-size: var(--fs-sm); font-weight: 600; justify-self: start; }
+input, select {
+  font: inherit; font-size: var(--fs-base); font-weight: 400; padding: .45rem .6rem; min-height: 2.125rem;
+  border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--jini-control-bg, var(--bg)); color: var(--text);
+}
+/* min() rather than a fixed width + max-width: a fixed rem width is the field's min-content size, which
+   widened the whole grid past a 375px frame. */
+input[type="text"] { width: min(20rem, 100%); }
+select { width: min(28rem, 100%); }
+label { max-width: 100%; min-width: 0; }
+/* A field's label spans the row so the percentage above has a width to resolve against. */
+label:has(> input[type="text"], > select) { justify-self: stretch; }
+.field-stack { display: grid; gap: var(--space-2); justify-items: start; }
+.head > .actions.end { margin-left: auto; }
+.check { display: flex; gap: var(--space-2); align-items: flex-start; font-weight: 400; color: var(--muted); max-width: 32rem; }
+.check input { min-height: 0; margin: .2rem 0 0; accent-color: var(--accent); }
+fieldset.list { border: 0; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
+fieldset.list legend { padding: 0; margin-bottom: var(--space-1); font-size: var(--fs-sm); font-weight: 600; }
+.reassign .check { color: var(--text); }
+
+/* Chosen spreadsheets and saved destinations. */
+li.sheet { flex-wrap: wrap; column-gap: var(--space-3); }
+li.card.destination { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: var(--space-2) 0; display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); align-items: center; }
+li.card.destination:first-child { border-top: 0; padding-top: 0; }
+li.card.destination > .notice { grid-column: 1 / -1; grid-row: 2; }
+li.card.destination > .actions { grid-column: 2; grid-row: 1; }
+.empty { padding: var(--space-1) 0; }
+code, .url { font-family: var(--jini-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: var(--fs-xs); color: var(--muted); overflow-wrap: anywhere; user-select: all; }
+
+@media (max-width: 480px) {
+  .card { padding: var(--space-3); }
+  button.danger-quiet { margin-left: 0; }
+}
+@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }