# Alohire ATS — guide for computer-using agents (CUA)

> Alohire is an Applicant Tracking System: job postings, candidates ("people"),
> a per-job hiring pipeline (stages / kanban), AI resume review, AI candidate
> search and chat, and background checks. This file tells an agent how to find
> its way around the web app (SolidJS SPA) using stable DOM hooks instead of
> pixel positions or translated text.

## How to locate things

1. Which page am I on? Exactly one `main[data-page]` exists per route.
   `document.querySelector("main[data-page]").dataset.page` → e.g. `job-view`.
   The landmark id is `#page-<name>`; its heading is `#page-title`; page-level
   buttons sit in `#page-actions` (role=toolbar).
2. Prefer `#id` selectors. Ids are kebab-case and scoped by page/component
   (`job-list-search`, `job-form-title`). Ids for repeated entities end with the
   entity id (`job-row-17-edit`, `kanban-card-42`).
3. Repeated items: `[data-cua=<kind>]` with `data-id=<entity id>`, inside a
   `[data-cua=<kind>-list]` container. Example: `[data-cua=job-row][data-id="17"]`.
4. Form fields have `id`, `name` (= the API/model field) and a `<label for>`;
   fields without a visible label have an English `aria-label`.
5. Icon-only buttons have English `aria-label`s ("Close", "Delete job", ...).
   Visible button text is translated (English or Indonesian — switch with
   `#nav-language-button` → `#nav-language-en-US`), so match on ids, not text.
6. Modals: `[role=dialog][aria-modal=true]#<name>-modal`, title
   `#<name>-modal-title`, buttons `#<name>-modal-close|-cancel|-submit`.
   Generic yes/no confirms use `#confirm-modal-*` unless an id is listed below.
7. State: `aria-pressed` (toggles, segmented buttons), `aria-expanded`
   (menus, accordions, mobile menu), `aria-selected` (tabs, options),
   `aria-current="page"` (active nav link / pagination page), `aria-busy="true"`
   (loading — wait until it is gone).
8. Custom selects (SearchableSelect): click the trigger `button#<id>`
   (aria-haspopup=listbox), type in the search box, click
   `[role=option][data-value=<value>]`.
9. Pagination: `nav[data-cua=pagination]` (`data-current-page`,
   `data-total-pages`), links `a[data-cua=pagination-link][data-page-number=N]`
   or aria-labels "First page" / "Previous page" / "Page N" / "Next page" /
   "Last page". Most lists also keep `?page=` and `?limit=` in the URL, so
   navigating to the URL directly is fine.
10. Rich text editors (job description etc.) are HugeRTE iframes; the
    underlying `<textarea>` keeps the id but is hidden. The editable iframe is
    `iframe#<field id>-editor` (e.g. `#job-form-description-en-editor`) and its
    `title` names the field. Click inside it, then type.

## Safety notes for agents

- Native browser dialogs: deleting a member or role (`/member`) and adding a
  suggested candidate (`/job/:id/suggestions`) use `window.confirm()`. Accept
  or dismiss it via the browser dialog API; it blocks the page until handled.
- Destructive actions (delete job, delete member, disconnect calendar, sign
  out, reject candidate, start a paid background check) always open a confirm
  step. Do not submit these without the user's explicit instruction.
- `#alert-success` / `#alert-error` banners auto-close after ~3 s — read them
  right after the action.
- Responsive duplicates: below 1024 px the primary nav lives in the mobile
  menu (`#nav-mobile-menu-toggle`, ids suffixed `-mobile`). Some page buttons
  have a `-compact` twin. Use a desktop viewport (≥1280 px) for best results.
- Authentication: unauthenticated users are redirected to `/login` (or the
  external Algobash login). The initial `#app-loading` skeleton must disappear
  before the page is usable.
- Permissions: sections the user cannot access show a lock
  (`[aria-label="No access"]`) in the nav and render an access-denied state.

## Route map

| Route | data-page | What it is |
|---|---|---|
| `/` | `dashboard` | Workspace overview: stats, applicants by stage, top jobs |
| `/job` | `job-list` | Job postings list with filters, status toggles |
| `/job/create` | `job-create` | Create a job (multi-tab form) |
| `/job/:jobID` | `job-view` | Job detail: candidates table, kanban pipeline, stages, analytics |
| `/job/:jobID/edit` | `job-edit` | Edit a job (same form as create) |
| `/job/:jobID/suggestions` | `job-suggestions` | AI-suggested candidates for a job |
| `/people` | `people-list` | Candidate database search |
| `/people?mode=vector` | `people-deep-search` | Semantic (vector) candidate search |
| `/people?mode=rag` | `people-search` | AI-powered candidate search |
| `/people?mode=chat` | `people-chat` | AI chat assistant about candidates |
| `/people/:peopleId` | `people-view` | Candidate profile, CV review, assessments, background check |
| `/background-check` | `background-check-list` | Background check requests (feature-flagged) |
| `/background-check/:code` | `background-check-view` | One background-check report |
| `/workspace` | `workspace` | Workspace/company settings, job portal, knowledge, quotas |
| `/member` | `members` | Members and roles (permissions) |
| `/onboarding` | `onboarding` | First-run workspace setup |
| `/profile` | `profile` | Company profile (static form) |
| `/notifications` | `notifications` | Notification history |
| `/calendar` | `calendar` | Google Calendar agenda and interview events |
| `/login` | `login` | Sign in |
| `/form-prior/:jobUUID/:peopleUUID` | `prior-confirmation` | Public candidate-facing confirmation form (no auth) |
| anything else | `not-found` | 404 |

The rest of this file lists, per page, every stable hook and the common
workflows. `<id>` in an id means the entity id (job id, people id, stage id …).


# Global shell, dashboard, notifications, profile, login, calendar

## Global shell (Layout + Navbar / NavbarApp)
Layout renders: navbar, global alert, ChangeWorkspace modal, then `#app-content` wrapping the routed page.
`Navbar.tsx` is used by default; `NavbarApp.tsx` when `VITE_ALGOBASH_CONNECT=true` (Algobash-branded shell). Both expose the same ids unless noted.

- `#app-loading` (aria-busy) — full-page skeleton while the initial `/auth/` check runs. Wait for it to disappear.
- `#app-content` — wrapper of the routed page (the page's own `<main id="page-*">` is inside).
- `nav#main-nav[aria-label="Main navigation"]` — sticky top navbar.
- `#nav-brand` — logo link (Navbar: `/`; NavbarApp: Algobash team app home, external).
- Desktop primary links (visible at `lg` and up only; hidden below 1024px):
  - `#nav-dashboard` — `/` dashboard (Navbar only; aria-current="page" when active)
  - `#nav-jobs` — `/job`
  - `#nav-people` — `/people`
  - `#nav-background-check` — `/background-check` (only rendered when the workspace has background check enabled)
  - NavbarApp only, external links to the Algobash team app: `#nav-algobash-home`, `#nav-algobash-participants`, `#nav-algobash-assessments`, `#nav-algobash-modules`, `#nav-algobash-office` (office only for internal Algobash users). NavbarApp has no `#nav-dashboard`.
  - A link containing `[role=img][aria-label="No access"]` (yellow lock) means the user lacks permission for that section.
- Utility controls (desktop, `md` and up):
  - `#nav-dark-mode-toggle` — toggle dark mode (aria-pressed = dark mode on)
  - `#nav-notifications` — open `/notifications` (icon-only). `#nav-notifications-unread-dot` is visible (not `hidden`) when live notifications arrived this session.
  - `#nav-language-button` — opens language menu (aria-expanded). Menu `#nav-language-menu[role=menu]`; items `#nav-language-<code>` (`[data-lang=<code>]`, `aria-current="true"` on the active one; codes from `supportedLanguage`, e.g. `en-US`, `id-ID`).
  - `#user-menu-button` — avatar, opens user menu (aria-expanded). Menu `#user-menu[role=menu]`:
    - `#user-menu-profile` — Navbar: `/profile`; NavbarApp: Algobash profile (external)
    - `#user-menu-configuration` — NavbarApp only, Algobash configurations (external)
    - `#user-menu-workspace` — `/workspace` (manage workspace)
    - `#user-menu-change-workspace` — opens the Change Workspace modal (below)
    - `#user-menu-members` — `/member` (manage permission)
    - `#user-menu-calendar` — `/calendar` (Navbar only; NavbarApp has no calendar link — navigate to `/calendar` directly)
    - `#user-menu-algobash` — Algobash team app, new tab (Navbar only)
    - `#user-menu-item-2` — Sign out (opens sign-out confirm; legacy id kept)
- Mobile (below `lg`): `#nav-mobile-menu-toggle` (aria-expanded, controls `#mobile-menu`). Note: on md..lg the desktop utility controls are visible but primary links are not — use the mobile menu for them.
  - `#mobile-menu` items: `#nav-dashboard-mobile` (Navbar only), `#nav-jobs-mobile`, `#nav-people-mobile`, `#nav-background-check-mobile`, `#nav-notifications-mobile`, `#nav-dark-mode-toggle-mobile` (aria-pressed), `#nav-language-toggle-mobile` (aria-expanded; reveals `#nav-language-<code>-mobile`), `#nav-profile-mobile`, `#nav-configuration-mobile` (NavbarApp), `#nav-workspace-mobile`, `#nav-change-workspace-mobile`, `#nav-members-mobile`, `#nav-calendar-mobile` (Navbar), `#nav-algobash-mobile` (Navbar), `#nav-sign-out-mobile`.
  - NavbarApp mobile also has `#nav-algobash-{home,participants,assessments,modules,office}-mobile`.
- Sign-out confirm: `#sign-out-modal[role=dialog]`, title `#sign-out-modal-title`, `#sign-out-modal-cancel`, `#sign-out-modal-submit` (aria-busy while signing out), backdrop `#sign-out-modal-backdrop` (click = cancel). Successful sign-out redirects to `/login` (or the external Algobash login when `VITE_EXTERNAL_LOGIN`).
- Live toasts: container `#toast-container[data-cua=toast-list][aria-live=polite]`; each `[data-cua=toast]` (`data-id` = notification id, `role=status`, id `toast-<id>`), close button `#toast-<id>-close`. Only `jobCreated`/`jobDeleted` notifications render a toast; they auto-dismiss.

## Global alert (Alert.tsx)
- `#alert-success[role=status][data-cua=alert][data-type=success]` / `#alert-error[role=alert][data-cua=alert][data-type=error]` — fixed banner under the navbar; auto-closes after 3 s. Text is prefixed with translated "Success:"/"Error:".
- `#alert-success-close` / `#alert-error-close` — close (aria-label "Close").
- Gotcha: read the alert immediately after an action; it disappears after 3 seconds.

## Change Workspace modal (ChangeWorkspace.tsx, global)
Opened by `#user-menu-change-workspace` / `#nav-change-workspace-mobile`.
- `#change-workspace-modal[role=dialog]` (labelled by `#change-workspace-title`), `#change-workspace-modal-close`, backdrop `#change-workspace-modal-backdrop`; Escape also closes (not while switching).
- `#change-workspace-search` (name=search) — debounced 300 ms search.
- `#change-workspace-list[data-cua=workspace-option-list]` (aria-busy while loading).
- `[data-cua=workspace-option]` — `data-id` = organization id, `data-current="true"` on the active workspace, `data-availability` = available|blocked|expired|noAccess; element id `change-workspace-option-<id>`.
- `#change-workspace-option-<id>-switch` — Switch button (only for available, non-current workspaces). On success the whole app reloads at `/`.
- `#change-workspace-load-more` — load next page.

## Shared components
- `#page-help-tour` (HelpButton) — icon-only "Start page tour" (driver.js). Only rendered on pages that register a tour (e.g. job list).
- SortHeader: `button[data-cua=sort-header]`, `id="sort-header-<field>"`, `data-sort-key=<field>`, `data-sort-dir=asc|desc|none`. Clicking cycles default dir → opposite → none and resets to page 1. (aria-sort not set: the `<th>` lives in the page files.)
- MetricTile: root `[data-cua=metric]` with optional id, aria-busy while loading. DecisionTimeCard id: `#metric-decision-time` (dashboard) or `#metric-decision-time-<jobID>` (job view).
- StageFunnel: `[data-cua=stage-funnel]`; svg chart `role=img`. Steps: `[data-cua=funnel-step]` (desktop/tablet, `sm`+, in `[data-cua=funnel-step-list]`) and `[data-cua=funnel-step-compact]` (phones only, in `[data-cua=funnel-step-compact-list]`) — `data-id` = stage key (`final` = offering+hired+rejected merged), `data-count` = applicants that reached the step (cumulative). Steps are `role=button` only when clickable (job view: opens that stage; `final` and dashboard steps are not clickable).
- StagePieChart: `[data-cua=stage-pie-chart]`; legend `[data-cua=pie-slice-list]` > `[data-cua=pie-slice]` with `data-id` = ongoing|offered|rejected and `data-count`. Hover-only highlight; not clickable.
- JobAnalytics (job view analytics tab): `#job-analytics` (aria-busy), tiles `#job-analytics-time-to-fulfill`, `#job-analytics-avg-cv-score`, `#job-analytics-avg-assessment-score`, `#job-analytics-avg-candidates-per-month`, `#job-analytics-avg-time-per-stage`, `#job-analytics-acceptance-rate`, plus `#metric-decision-time-<jobID>`; contains a StageFunnel and StagePieChart. "n/a" means no data.
- Tooltip: `[role=tooltip]` is portaled to `<body>` and only exists while hovering the trigger (hint text also in `title` attrs of metric labels).

## Dashboard — route `/` — `main#page-dashboard`
- `#page-title` — workspace name (custom header). `#dashboard-company-website` — icon link to the company site (new tab; only if set).
- `#page-actions`: `#dashboard-create-job` — `/job/create`; `#dashboard-create-job-ai` — opens "Generate job with AI" modal (`#create-job-ai-modal`, see job inventory).
- `#dashboard-error[role=alert]` — load failure.
- `#dashboard-stats` (aria-busy): `#dashboard-stat-total-jobs` (link `/job`), `#dashboard-stat-total-applicants` (link `/people`), `#dashboard-stat-total-members` (link `/member`), `#metric-decision-time` (not a link). All `[data-cua=metric]`.
- `#dashboard-applicants-by-stage` (section) — StageFunnel (not clickable here).
- `#dashboard-applicant-status` (section) — StagePieChart.
- `#dashboard-top-jobs` (section) — `#dashboard-top-jobs-view-all` (`/job`); list `[data-cua=top-job-list]` > `[data-cua=top-job]` (`data-id` = job id); `#dashboard-top-job-<id>` opens `/job/<id>`; `#dashboard-top-job-<id>-public` opens the public posting (new tab).
- Quota card (QuotaCard, other agent's file) sits at the bottom right.

## Notifications — route `/notifications` — `main#page-notifications`
- `#page-title`.
- `#notifications-list[data-cua=notification-item-list]` (aria-busy while loading).
- `[data-cua=notification-item]` — link `#notification-<id>`, `data-id` = notification id, `data-type` = notifType (`jobCreated`, `jobDeleted`, …). Click navigates to the related page (href `#` when none).
- `#notifications-empty` — empty state.
- `#notifications-limit` (select, name=limit; 10/20/50) — page size, stored in `?limit=`.
- Pagination component at the bottom (`?page=`).

## Profile (company settings) — route `/profile` — `main#page-profile`
Static mock form; nothing is saved (no submit handler).
- `#profile-form`, `#profile-upload-logo` (button, no upload wired), `#profile-company-name`, `#profile-company-website`, `#profile-recruitment-email`, `#profile-recruitment-wa`, `#profile-save`.
- Gotcha: the buttons are inside a `<form>` without a handler, so clicking `#profile-upload-logo`/`#profile-save` triggers a native form submit (page reload) once required fields are filled.

## Login — route `/login` — `main#page-login`
- `#page-title` — welcome heading.
- `#login-form` (aria-busy while signing in): `#email` (name=email), `#password` (name=password), `#login-toggle-password` (aria-pressed; "Show password"/"Hide password"), `#login-submit` (disabled until both fields have text).
- `#login-forgot-password`, `#login-register` — external Algobash pages.
- Single-session gotcha: if the account is logged in elsewhere, `#login-force-modal` (ConfirmModal) appears — `#login-force-modal-submit` takes over the session (other device is logged out), `#login-force-modal-cancel` aborts.
- On success navigates to `/`. Errors show in `#alert-error`.

## Calendar — route `/calendar` — `main#page-calendar`
- `#calendar-loading` — spinner while status loads.
- Not connected: `#calendar-connect-panel` with `#calendar-connect` (redirects to Google OAuth — leaves the app). After returning, a success/error alert is shown.
- Connected — `#page-actions`: `#calendar-connected-as` (Google email text), `#calendar-disconnect` (opens `#calendar-disconnect-modal` → `#calendar-disconnect-modal-submit`/`-cancel`), `#calendar-new-event`.
- `#calendar-toolbar`: `#calendar-today`, `#calendar-prev`, `#calendar-next` (icon-only; step by week or month), `#calendar-range-label` (current range text), `#calendar-view-switch` with `#calendar-view-week` / `#calendar-view-month` (aria-pressed). State in URL: `?view=week|month&date=YYYY-MM-DD`.
- `#calendar-empty` (no events) with `#calendar-empty-new-event`.
- `#calendar-agenda[data-cua=calendar-day-list]` (aria-busy) > `section[data-cua=calendar-day]` (`data-id` = `YYYY-MM-DD`, id `calendar-day-<date>`) > `[data-cua=calendar-event-list]` > `[data-cua=calendar-event]` (`data-id` = Google event id, `data-can-edit` = true|false, id `calendar-event-<eventId>`).
  - Per event: `#calendar-event-<id>-meet` (Join Meet, if any), `#calendar-event-<id>-open-google`, `#calendar-event-<id>-edit`, `#calendar-event-<id>-delete` (edit/delete only when `data-can-edit="true"`, i.e. the user owns it). Delete opens `#calendar-delete-event-modal` → `#calendar-delete-event-modal-submit`/`-cancel`.
- Event create/edit modal: `#calendar-event-modal[role=dialog]` (a `<form>`, `data-mode=create|edit`), `#calendar-event-modal-title`, `#calendar-event-modal-close`, backdrop `#calendar-event-modal-backdrop` (click closes, unsaved changes lost).
  - Fields: `#cal-summary` (required), `#cal-all-day` (checkbox; switches start/end between date and datetime-local and rewrites their values), `#cal-start`, `#cal-end` (moving start past end shifts end keeping duration), `#cal-location`, `#cal-attendees-input` (email-chips input: type an email and press Enter to add a chip; chips are `[data-cua=email-chip][data-id=<email>]` in `#cal-attendees-input-chips`), `#cal-description`, `#cal-add-meet` (create only), `#cal-notify-attendees` (only when guests exist).
  - `#calendar-event-modal-cancel`, `#calendar-event-modal-submit` (aria-busy while saving). Field errors appear as red text under the fields.

## Not found — route `*` — `main#page-not-found`
- `#page-title` ("page not found" text; a separate big "404" h1 precedes it), `#not-found-home` — back to `/`.


# Jobs: list, create/edit, suggestions

## Job list — `/job`
Landmark: `main#page-job-list[data-page=job-list]`, `h1#page-title`, `#page-actions` (toolbar).

- `#tour-create-job` — "Create job" link → /job/create (visible at xs and xl+ widths)
- `#tour-create-job-compact` — icon-only "Create job" link (aria-label "Create job"), visible at sm–lg widths. Same href.
- `#job-list-create-ai` — icon-only "Generate job with AI" button → opens `#create-job-ai-modal`
- `#job-list-filter-toggle` — "Filter by" button, mobile only (<md); `aria-expanded`, toggles `#tour-job-filter`
- `#tour-job-filter` — filter bar container
- `#job-list-filter-status` (name=status) — select: "" all / `active` / `closed`
- `#job-list-filter-department` (name=department) — select of department names, "" = all
- `#job-list-filter-contract` (name=contract) — select of contract keys (`full_time`, …), "" = all
- `#job-list-search` (name=search) — search box, debounced 500 ms → `?search=`
- `#tour-job-list` — table wrapper; `#job-list-table` — the table
- `tbody[data-cua=job-row-list]` (`aria-busy` while loading)
- `[data-cua=job-row]` — one per job, `data-id` = job id; row id `#job-row-<id>`
  - `#job-row-<id>-title` — link to job detail `/job/<id>`
  - `#job-row-<id>-public-link` — icon link to public posting (opens new tab)
  - `#job-row-<id>-status` — status segmented control (role=group "Job status"); buttons
    `#job-row-<id>-status-active` / `-inactive` / `-hidden`, each with `aria-pressed` and `data-value`. Clicking saves immediately (PUT); group `aria-busy` while saving.
  - `#job-row-<id>-edit` — Edit link → /job/<id>/edit
  - `#job-row-<id>-delete` — Delete button → opens `#delete-job-modal`
- `#job-list-empty-create` — "Create job" link shown only when the list is empty
- `#job-list-page-size` (name=limit) — rows per page select: 10/20/50
- Pagination: shared Pagination component (see its own inventory).

URL params drive everything: `/job?status=active&department=X&contract=full_time&search=foo&page=2&limit=20&sort=…` — an agent can navigate directly instead of using the controls.

### Delete job modal (from row Delete)
- `#delete-job-modal` (role=dialog), title `#delete-job-modal-title`
- `#delete-confirm-input` (name=confirm) — must type `DELETE` (case-insensitive) or submit stays disabled
- `#delete-job-modal-cancel`, `#delete-job-modal-submit` — submit deletes immediately (no undo); row disappears, success toast.

### AI create-job modal (CreateJobModal; also on Dashboard)
- `#create-job-ai-modal` (form, role=dialog), title `#create-job-ai-modal-title`
- `#modal-title` (name=title, required), `#modal-contract-type` (name=contractType), `#modal-work-arr` (name=workPlacement)
- `#create-job-ai-modal-cancel`, `#create-job-ai-modal-submit` — submit calls AI (can take several seconds, button text becomes "please wait"), then navigates to `/job/create` with the form pre-filled (via IndexedDB). Nothing is saved yet — the job must still be posted on the create page.

## Job create / edit — `/job/create`, `/job/:jobID/edit` (CreateJob.tsx)
Landmark: `main#page-job-create[data-page=job-create]` or `main#page-job-edit[data-page=job-edit]`; `h1#page-title`. No `#page-actions`.

Tabs (`#job-form-tabs`, role=tablist): `#job-form-tab-data`, `#job-form-tab-weight`, `#job-form-tab-assessment`, `#job-form-tab-dynamicForm` (`aria-selected`). Panels: `#job-form-panel-data|weight|assessment|dynamicForm` (inactive ones have `hidden`).
Form: `#tour-create-job-form`.

Data tab (name = JobInput field):
- `#title` (name=title, required)
- `#job-form-generate-ai` — "Generate with AI": fills ALL fields (department, salary, description, requirements…) from the title. Disabled until title is non-empty.
- `#job-form-title-prompt` — icon button opening custom-prompt popover (`#job-form-title-prompt-panel`, `-input`, `-reset`, `-submit`)
- `#contractType` (name=contractType, required)
- `#department` — SearchableSelect trigger (aria-required). Opens `#department-listbox`; type in `#department-search` (server search, 500 ms debounce); pick `[role=option]` (`#department-option-<n>`, `data-value`); if no match, `#department-create` adds a new department. Trigger `data-value` = selected department.
- `#workArr` (name=workPlacement, required)
- Experience (exactly one, behaves like radio but are checkboxes; clicking the checked one unchecks it): `#terms-1` (0, fresh grad), `#terms-2` (3, 1-3 yrs), `#terms-3` (5, 4-5), `#terms-4` (10, 5-10), `#terms-5` (11, 10+); all name=experience, `data-value` = stored workExperience. Group `#tour-experience-group`.
- `#salaryType` (name=salaryType) — changing it auto-converts min/max amounts
- `#salaryCurr` (name=salaryCurrency)
- `#startSalary` (name=salaryStart), `#endSalary` (name=salaryEnd) — both required
- `#salaryHide` (name=salaryHide) checkbox
- Description: `#tour-desc-language` (EN/ID switch, menu items `#tour-desc-language-en` / `-id`), `#tour-desc-ai` (Write with AI for the shown language; requires title/contract/department/work arrangement/experience first), `#job-form-description-prompt` (custom prompt popover)
  - `#job-form-description-en` (name=descriptionEN) / `#job-form-description-id` (name=descriptionID) — hidden source textareas of hugerte rich-text editors. Only the editor for the selected language is visible.
- Requirements: same pattern — `#tour-req-language` (+`-en`/`-id`), `#tour-req-ai`, `#job-form-requirement-prompt`, `#job-form-requirement-en` (requirementEN), `#job-form-requirement-id` (requirementID)

Weight tab: `#job-form-weight-reset` (load workspace default), container `#job-form-weight[data-cua=resume-weight-list]`; per key `#job-form-weight-<key>` (number input, name=<key>, 0-100) + `#job-form-weight-<key>-slider`. Keys: relevant_experience, skills_match, education_fit, career_progression, achievements_impact, industry_domain_fit, resume_quality_completeness. MUST total exactly 100 to save.
Assessment tab: `#job-form-assessment-reset`, container `#job-form-assessment`; per key `#job-form-assessment-<key>` (range 0-10, name=<key>) and read-only `#job-form-assessment-<key>-percent`. Keys: overall_performance, role_competency, consistency_reliability. Not all zero.
Dynamic form tab: `#job-form-dynamic-form-reset`, then DynamicFormFieldsEditor with prefix `job-form-dynamic-form` (see below).

Footer: `#tour-submit-job` — Post job / Save job (validates all tabs; jumps to the failing tab) → navigates to `/job/<id>`. `#tour-preview-job` — opens preview in a popup window.

Gotchas:
- Rich-text editors are hugerte (TinyMCE fork) iframes. Typing: click into the iframe body (`iframe[title="Job description (English)"]` etc.) and type. Programmatic: `hugerte.get('job-form-description-en').setContent('<p>…</p>')` then fire `change` — the component listens to `change keyup`.
- Required: title, contract, department, work arrangement, one experience box, salary type/currency/min/max. The form is `noValidate`; on save, native validity bubble appears on the first invalid field.
- Edit mode loads the job asynchronously; wait for `#title` to have a value.

## Job suggestions — `/job/:jobID/suggestions`
Landmark: `main#page-job-suggestions[data-page=job-suggestions]`, `h1#page-title`.
- `#job-suggestions-count` — "N Candidate found" badge
- `#job-suggestions-list[data-cua=suggestion-card-list]` (`aria-busy` while loading)
- `[data-cua=suggestion-card]` — `data-id` = people id, `data-added` = true/false; id `#suggestion-card-<id>`
  - `#suggestion-card-<id>-name`, `#suggestion-card-<id>-view` — open `/people/<id>` in a new tab
  - `#suggestion-card-<id>-add` — Add/Remove toggle (`aria-pressed`). Gotcha: uses a native `window.confirm()` dialog, and only toggles local UI state — it does NOT call the API.

## RecommendedCandidates (inside job detail `/job/:id`, accordion section)
- `#recommended-candidates` container
- `#recommended-add-to-job` — "Add to job (n)" button, disabled until ≥1 selected → opens ConfirmModal `#recommended-add-modal` (`#recommended-add-modal-title`, stage select `#recommended-add-stage` name=stageID (defaults to CV Review), `#recommended-add-modal-cancel`, `#recommended-add-modal-submit`)
- `#recommended-table`; `#recommended-select-all` (name=selectAll)
- `tbody[data-cua=recommended-row-list]`; `[data-cua=recommended-row]` data-id = people id, id `#recommended-row-<id>`; `#recommended-row-<id>-select` checkbox (name=peopleIDs, value=id); `#recommended-row-<id>-name` link to person
- Relevance column: RelevanceStars (`role=img`, aria-label "Relevance N of 5 stars", `data-value`=N)

## Shared components
### SearchableSelect (when given `id=X`)
Trigger `#X` (button, aria-haspopup=listbox, aria-expanded, `data-value`=selected value, aria-required if required; optional aria-label/aria-labelledby props). Open panel: `#X-search` (search box), `#X-listbox` (role=listbox, aria-busy while searching), options `#X-option-<index>` (role=option, aria-selected, `data-value`), `#X-create` ("Add …" when onCreate and no exact match). Closes on outside mousedown / Escape. Arrow keys + Enter work from the search box.

### TextEditor (hugerte)
Props `id`, `name`, `ariaLabel` go on the hidden source textarea; `ariaLabel` also becomes the editor iframe title. `hugerte.get(<id>)` returns the editor when an id is passed.

### JobStatusToggle (when given `id=X`)
`#X` role=group; `#X-active`, `#X-inactive`, `#X-hidden` with aria-pressed. (Job detail page uses it without id — no ids there.)

### DynamicFormFieldsEditor (prefix P: `job-form-dynamic-form` on job form, `dynamic-form` in Workspace settings)
- `#P-fields[data-cua=dynamic-form-field-list]`; cards `[data-cua=dynamic-form-field]` `data-id`=field uuid, `data-index`=position; card id `#P-field-<uuid>`
- Per card (F = `P-field-<uuid>`): `#F-drag` (drag handle — drag-and-drop only), `#F-remove`, `#F-name` (name=name), `#F-type` (name=type: text/number/date/time/datetime/textarea/select-single/select-multiple/currency), `#F-placeholder`, options group `#F-options` with `#F-option-<i>` + `#F-option-<i>-remove` and `#F-add-option` (select types only), `#F-currency` (currency type only), checkboxes `#F-required`, `#F-auto-translate`, `#F-show-in-table`
- `#P-add-field` (appends a card — read its uuid from the last `[data-cua=dynamic-form-field]`), `#P-preview` (opens AddPeopleModal in preview mode)

### DynamicFormEditor (Workspace settings)
`#dynamic-form-editor` (aria-busy while loading), fields prefix `dynamic-form`, `#dynamic-form-save`.

### DynamicFieldPreview
Control id defaults to `#dynamic-field-<field uuid>` (name = field key or uuid, aria-label = field name). Time/datetime add `#dynamic-field-<uuid>-timezone` SearchableSelect. Multi-select: chips in `#dynamic-field-<uuid>-chips` (`[data-cua=dynamic-field-chip]` data-id = option), picker is SearchableSelect `#dynamic-field-<uuid>`. Currency input reformats with thousands separators; `data-currency` on input.

### StageDefaultsEditor (Workspace settings)
`#stage-defaults-editor`; `#stage-defaults-cc` (EmailChipsInput, name=ccEmail; chips in `#stage-defaults-cc-chips`); stage buttons `#stage-defaults-stage-<assessment|user_interview|offering|hired|rejected|custom>` (aria-pressed); `#stage-defaults-subject` (only for stages with subject); `#stage-defaults-additional-info`, `#stage-defaults-content` (rich-text editors, shown per stage); `#stage-defaults-save`. Switching stage keeps unsaved edits of the previous stage in memory; one Save writes all stages.

### AssessmentDefaultFields (prefix default `assessment-defaults`, overridable via `idPrefix`)
`#<p>-type` (select algobash/custom), `#<p>-assessment` (SearchableSelect, algobash only, server search), `#<p>-link` (url input, custom only).

### Weights (Workspace settings defaults)
ResumeWeightScore default prefix `resume-weight` → `#resume-weight-<key>`, `-slider`; AssessmentWeightScore default prefix `assessment-weight` → `#assessment-weight-<key>`, `-percent`.

### EmailChipsInput
Ids only when caller passes `id` (MessageModal/Calendar/StageConfigModal don't, except StageDefaultsEditor). Type email + Enter (or blur) to add. Chips `[data-cua=email-chip]` data-id = email, remove button aria-label "Remove <email>".

### RelevanceStars
`role=img`, aria-label "Relevance N of 5 stars", `data-value`=N.

### TemplateHelp
No changes (hover tooltip listing `{{candidate_name}}`, `{{candidate_email}}`, `{{job_title}}`, `{{user_name}}`).


# Job detail and hiring pipeline

Landmark: `main#page-job-view[data-page=job-view]` (`data-id` = job id).
While loading the same id is on the skeleton with `aria-busy="true"`; a missing job renders
`main#page-job-view[data-state=not-found]` with `h1#page-title` + `#job-view-back-home`.
Tab is chosen by query `?tab=info|stage`; `?tab=stage&kanban=<stage name>&candidateId=<people id>` deep-links to a column/card.

## Header
- `h1#page-title` — job title
- `#job-view-status` — job status segmented control (role=group); segments `#job-view-status-active`, `#job-view-status-inactive`, `#job-view-status-hidden` (`aria-pressed` = current)
- `#page-actions` (toolbar): `#job-view-edit` (link to /job/:id/edit), `#job-view-delete` (native `confirm()` dialog, then deletes and goes to /), `#job-view-posting` (public posting, new tab)

## Tabs (`[role=tablist]`)
- `#job-view-tab-info` — "Job information & candidates" → panel `#job-view-panel-info`
- `#job-view-tab-stage` — "Pipeline stages" (Kanban) → panel `#job-view-panel-stage`
- `aria-selected="true"` marks the active tab. Tabs are links (change `?tab=`).

## Tab-row actions (always visible)
- `#job-view-add-stage` — opens Add-custom-stage modal (`#custom-stage-modal`)
- `#kanban-toolbar` (toolbar; only filled while the stage tab is open):
  - `#kanban-add-people` — opens `#add-people-modal` (new applicant lands in cv_review)
  - `#kanban-move-selected` — only when ≥1 card checkbox ticked; opens `#stage-change-modal` for a bulk move

## Info tab
- `#job-view-info` (dl of job fields), `#job-view-read-more` (`aria-expanded`) → `#job-view-description`
- Accordions (each `#<id>`, toggle `#<id>-toggle` with `aria-expanded`, body `#<id>-panel`):
  `#job-view-analytics`, `#job-view-recommended`, `#job-view-candidates-section`
- Filters `#job-view-filters` (role=search; `#job-view-filter-toggle` shows them on mobile):
  - `#job-view-gender` (select, name=gender: "" | male | female)
  - `#job-view-stage` (select, name=stage: option value = stage name)
  - `#candidate-search` (search input, name=search, debounced 500 ms)
- `table#job-view-candidates` (`aria-busy` while loading); `tbody[data-cua=candidate-row-list]`
  - `tr[data-cua=candidate-row]#candidate-row-<id>` — `data-id` = people id
  - `#candidate-row-<id>-open` — link to /people/<id>
  - `#candidate-row-<id>-stage` (`data-stage-name`) — opens the Kanban tab scrolled to that stage, card highlighted
- `#job-view-limit` (select rows per page 10/20/50) + shared Pagination component

## Stage tab (Kanban)
- `#kanban-board[data-cua=kanban-column-list]`
- `[data-cua=kanban-column]#kanban-column-<stageId>` — `data-id` = job stage id, `data-stage-name` = stage name
  (built-ins: cv_review, assessment, user_interview, offering, hired, rejected; others are custom). `aria-busy` while loading.
  - `#kanban-column-<stageId>-title` (hidden accessible name)
  - `#kanban-column-<stageId>-edit` — custom stages only, opens `#custom-stage-modal` in edit mode
  - `#kanban-column-<stageId>-sort` → menu `#kanban-column-<stageId>-sort-menu`; items
    `#kanban-column-<stageId>-sort-<name|relevance|grading>` (cycles), `…-sort-<field>-asc`, `…-sort-<field>-desc`
  - `#kanban-column-<stageId>-config` — configurable stages; opens `#stage-config-modal` (or `#cv-review-config-modal` for cv_review)
  - `#kanban-column-<stageId>-search` (name=search) — per-column search
  - `[data-cua=kanban-card-list]` — card container
  - `#kanban-column-<stageId>-load-more`
- `[data-cua=kanban-card]#kanban-card-<peopleId>` — `data-id` = people id, `data-stage-id`, `data-stage-name`
  - `#kanban-card-<id>-select` — checkbox for bulk move
  - `#kanban-card-<id>-name` — link to /people/<id>
  - `#kanban-card-<id>-move` — "Move to stage" (opens `#stage-change-modal`) — **non-drag way to move**
  - `#kanban-card-<id>-send` — stages other than cv_review without an existing event: opens the stage's action modal for
    the *current* stage (interview/offering → `#interview-modal`, assessment → `#assessment-modal`, hired/rejected/auto-email custom → `#message-modal`)
  - `#kanban-card-<id>-schedule` — replaces `-send` when user_interview/offering already has an event; menu
    `#kanban-card-<id>-schedule-menu` with `#kanban-card-<id>-reschedule` (→ `#interview-modal` edit mode) and
    `#kanban-card-<id>-remove-schedule` (→ ConfirmModal `#kanban-remove-schedule-modal`)
  - `#kanban-card-<id>-background-check` — cv_review only; menu `#kanban-card-<id>-background-check-menu` with
    `#kanban-card-<id>-prior-job-check` (→ `#kanban-background-check-modal`) and `#kanban-card-<id>-ai-background-check` (disabled, coming soon)
  - Card has `aria-busy="true"` while a move is in flight.

## Modals
- `#stage-change-modal` (title `#stage-change-modal-title`, `#stage-change-modal-close|-cancel|-submit`)
  - `#stage-change-current-stage` (`data-stage-id`, `data-stage-name`) — single move only
  - `#stage-change-new-stage` (select, name=stage_id, option value = stage id, option `data-stage-name`; current stage disabled)
  - Auto-move of destination stage: prefix `stage-change-auto-move` (see Auto-move fields)
- `#interview-modal` (`data-stage-name`, `data-mode=create|edit`): `#interview-title`, `#interview-schedule` (datetime-local),
  `#interview-type` (gcalendar|custom; disabled in edit), `#interview-link` (custom only), `#interview-attendee-input`
  (type email + Enter to add) → `#interview-attendees` (`[data-cua=attendee][data-id=<email>]`, remove `#interview-attendee-<n>-remove`; first two locked),
  `#interview-additional-info` (rich-text editor; hidden source textarea), `#interview-modal-close|-cancel|-submit`
- `#assessment-modal`: type/assessment picker (AssessmentDefaultFields — no ids of its own yet), `#assessment-date`
  (disabled for algobash; filled from the assessment), `#assessment-additional-info` (rich text), `#assessment-modal-close|-cancel|-submit`
- `#message-modal` (`data-stage-name`): `#message-send-to-input` / `#message-cc-input` (email-chips inputs: type email + Enter; chips `[data-cua=email-chip]`),
  `#message-subject` (required), `#message-content` (rich text), `#message-modal-close|-cancel|-submit`.
  For stage `hired` also: `#hiring-contract-file` (file input, name=contract_file; upload directly), `#hiring-contract-dropzone`,
  `#hiring-contract-remove`, `#hiring-probation-reminder` (checkbox) → `#hiring-probation-days` (number 10–120)
- `#stage-config-modal` (`data-stage-name`): `#stage-config-auto-send-email` (custom), `#stage-config-assessment` (assessment defaults group),
  `#stage-config-cc-input` (email chips input), `#stage-config-subject`, `#stage-config-additional-info`, `#stage-config-content` (rich text),
  `#stage-webhook-url`, `#stage-webhook-headers` (JSON), `#stage-config-auto-background-check` (custom),
  auto-move prefix `stage-config-auto-move`, `#stage-config-modal-close|-cancel|-submit`
- Auto-move fields (`<p>` = prefix): `#<p>-enabled` (checkbox), rules `[data-cua=auto-move-rule]#<p>-rule-<n>` (`data-id` = index from 0):
  `#<p>-rule-<n>-prompt`, `#<p>-rule-<n>-confidence` (0–100), `#<p>-rule-<n>-stage` (select by stage name), `#<p>-rule-<n>-remove`; `#<p>-add-rule`.
  Section only renders if later stages exist.
- `#custom-stage-modal` (`data-mode=create|edit`, `data-id` = stage id in edit): `#custom-stage-name`, `#custom-stage-description`,
  `#custom-stage-location` (create only; "insert after" stage id), `#custom-stage-modal-delete` (edit; click twice — `data-confirming="true"` after first),
  `#custom-stage-modal-close|-cancel|-submit`
- ConfirmModals: `#kanban-background-check-modal` / `#kanban-remove-schedule-modal` (+ `-title`, `-cancel`, `-submit`)
- `#hiring-modal` (HiringModal; used on people-view, not here): `#hiring-onboarding-message`, `#hiring-modal-cancel|-submit`
- `#integration-config-modal` (integrations tab is disabled in UI; unreachable)

## Workflows
- **Move candidate to another stage (no drag):** `#job-view-tab-stage` → find `[data-cua=kanban-card][data-id=<peopleId>]`
  (use `#kanban-column-<stageId>-search` if not on page 1) → `#kanban-card-<id>-move` → select `#stage-change-new-stage`
  (option whose `data-stage-name` matches) → `#stage-change-modal-submit`. If the target is user_interview/offering,
  assessment, hired, rejected or an auto-email custom stage, a follow-up modal opens (below) and the move happens only after it is submitted.
  Bulk: tick `#kanban-card-<id>-select` on several cards → `#kanban-move-selected` → same modal.
  From the info tab: `#candidate-row-<id>-stage` jumps to the card.
- **Schedule interview/offering:** move to user_interview/offering (above) → `#interview-modal` → fill `#interview-title`,
  `#interview-schedule`, `#interview-type` (+ `#interview-link` if custom), attendees → `#interview-modal-submit`.
  For a card already in that stage: `#kanban-card-<id>-send` (no event yet) or `#kanban-card-<id>-schedule` → `#kanban-card-<id>-reschedule`.
- **Send message (hired/rejected/custom auto-email):** move to the stage, or `#kanban-card-<id>-send` on a card in it →
  `#message-modal` → `#message-subject`, `#message-content` → `#message-modal-submit`.
- **Hire:** move to `hired` → `#message-modal` (data-stage-name=hired) → optional `#hiring-contract-file` upload,
  `#hiring-probation-reminder` + `#hiring-probation-days` → `#message-modal-submit` (sends onboarding email, then moves).
- **Assessment:** move to `assessment` (or `#kanban-card-<id>-send` on an assessment card) → `#assessment-modal` →
  pick type/assessment → `#assessment-date` (custom) → `#assessment-modal-submit`.
- **Configure stage:** `#job-view-tab-stage` → `#kanban-column-<stageId>-config` → `#stage-config-modal` → edit fields → `#stage-config-modal-submit`.
- **Add custom stage:** `#job-view-add-stage` → `#custom-stage-name`, `#custom-stage-description`, `#custom-stage-location` → `#custom-stage-modal-submit`.
  Edit/delete: `#kanban-column-<stageId>-edit` → `#custom-stage-modal-submit` / `#custom-stage-modal-delete` ×2.
- **Background check (cv_review):** `#kanban-card-<id>-background-check` → `#kanban-card-<id>-prior-job-check` → `#kanban-background-check-modal-submit`.


# People and background checks

## Shared: People mode tabs (src/pages/People/tab.tsx, on every /people mode)
- `#search-type-tab` — role=tablist wrapper (kept tour id)
- `#people-tab-search` — tab link to /people (plain list). aria-selected
- `#people-tab-chat` — tab link to /people?mode=chat. aria-selected
- (`#people-tab-vector`, `#people-tab-rag` exist in code but are hidden: those modes are only reachable by URL)

## /people — people-list (PeopleList.tsx)
Landmark: `main#page-people-list[data-page=people-list]`, `#page-title`, `#page-actions`
- `#people-list-add` — "Add People" button, opens AddPeopleModal (disabled with no workspace)
- `#people-filters` — filter area (tour id); `#people-list-filter-toggle` — mobile-only filter toggle (aria-expanded, controls `#people-list-filter-fields`)
- `#people-list-gender` (name=gender), `#people-list-job` (name=job_id), `#people-list-job-status` (name=job_status), `#people-list-stage` (name=stage) — filter selects; all write to the URL query
- `#default-search` (name=search) — text search, debounced 500 ms into ?search= (id kept; same id exists on Members and PeopleRAG pages, never on the same page)
- `#people-table` — table wrapper (tour id); `tbody[data-cua=people-row-list]` (aria-busy while loading)
- `[data-cua=people-row]` — one row per candidate, `data-id` = people id. Name link inside goes to /people/<id> (`#people-detail-link` = first row's link, tour id)
- `#people-list-limit` (name=limit) — rows per page; pagination via the shared Pagination component
- Sort headers: SortHeader component (not mine)

## /people?mode=vector — people-deep-search (PeopleVector.tsx)
Landmark: `main#page-people-deep-search`
- `#people-deep-search-input` (name=search) — search box (was `#default-search`, renamed)
- `tbody[data-cua=people-row-list]`, `[data-cua=people-row]` data-id = people id
- `#people-deep-search-limit` (name=limit)

## /people?mode=rag — people-search (PeopleRAG.tsx)
Landmark: `main#page-people-search`
- `#default-search` (textarea, name=message, aria-label "Ask AI about people") — question box (id kept)
- `#people-search-submit` — Search button; `#people-search-stop` — Close/reconnect button shown while streaming
- `#gpt-response` — answer, role=log aria-live=polite, aria-busy while streaming
- `#people-search-related-toggle` — collapse "Related Applicants" (aria-expanded)
- `[data-cua=people-related]` (in `[data-cua=people-related-list]`) — link cards, data-id = people id
- `#people-search-toggle-table` + `[data-cua=people-row]` — dead code (Show when={false}), never rendered

## /people?mode=chat — people-chat (Chat.tsx)
Landmark: `main#page-people-chat`
Sidebar `#people-chat-sidebar` (hidden on mobile; `#people-chat-sidebar-toggle` opens it, aria-expanded):
- `#people-chat-new` — New chat
- `#people-chat-search` (name=search) — filter chats
- `[data-cua=chat-session]` (in `[data-cua=chat-session-list]`), data-id = chat uuid
  - `#chat-session-<uuid>` — open chat (aria-current="true" when active; sets ?chat=<uuid>)
  - `#chat-session-<uuid>-rename`, `#chat-session-<uuid>-delete` — icon buttons, only visible on hover (CSS group-hover)
Main area:
- `#people-chat-title` — active chat title
- `#people-chat-new-empty` — New chat button in the empty state (no ?chat)
- `#people-chat-messages` — role=log aria-live=polite, aria-busy while loading/sending
- `[data-cua=chat-message]` — data-role = user|assistant, data-id = message id; the in-progress reply is `[data-cua=chat-message][data-streaming=true]`
- `#people-chat-thinking` — role=status, shown while waiting for the first token
- `#people-chat-agent-results-toggle` (aria-expanded) → popup `#people-chat-agent-results` with `#people-chat-agent-results-close`, section toggles `#people-chat-agent-results-web|-video|-people`; `[data-cua=chat-people-result]` rows, data-id = people uuid/id
Composer (only when a chat is selected):
- `#people-chat-agents` — "Add agents" icon button (aria-expanded) → `#people-chat-agents-panel` (role=group)
  - `#people-chat-agent-serp`, `#people-chat-agent-youtube`, `#people-chat-agent-people` — toggles, aria-pressed
- `#people-chat-input` (textarea, name=message) — Enter sends, Shift+Enter newline, Esc stops
- `#people-chat-send` — send (icon, disabled when empty); `#people-chat-stop` — stop generating (while sending)
Modals:
- `#people-chat-delete-modal` (`-title`, `-cancel`, `-submit`)
- `#people-chat-rename-modal` (`-title`, `-cancel`, `-submit`), input `#people-chat-rename-input` (name=title; Enter saves, Esc cancels)

## AddPeopleModal (src/components/AddPeopleModal.tsx) — opened from #people-list-add (also used on job page Kanban)
- `#add-people-modal` (role=dialog), `#add-people-modal-title`, `#add-people-modal-close` (×), `#add-people-form`
- `#job-select` — SearchableSelect trigger (button, listbox) for the job; when the job is prefilled it's shown read-only as `#add-people-job-fixed` instead
- `#add-people-autofill` (checkbox, name=autofill) — parse the resume and prefill fields
- `#add-people-cv` (file input, hidden, name=cv, accept .pdf, required, aria-label "Resume (PDF)") — upload directly to it
- `#add-people-cv-status` — file name / "no file" text; `#add-people-autofill-status` (role=status, parsing), `#add-people-autofill-error` (role=alert)
- `#add-people-name`, `#add-people-email`, `#add-people-phone` (required), `#add-people-dob` (date), `#add-people-gender-male` / `#add-people-gender-female` (radios name=gender), `#add-people-linkedin`, `#add-people-address` — names = model fields
- `[data-cua=add-people-custom-field]` data-id = dynamic field key (inner control from DynamicFieldPreview, not mine)
- `#add-people-error` (role=alert) — submit errors
- `#add-people-modal-cancel`, `#add-people-modal-submit` (type=submit)

## /people/:peopleId — people-view (ViewPeople.tsx)
Landmark: `main#page-people-view[data-page=people-view]` (wraps skeleton/loaded/not-found; aria-busy while loading). `#page-title` = candidate name h1.
- `#people-view-not-found`, `#people-view-back-home` — not-found state
Header:
- `#people-view-bc-start` — "Background Check" button (only when workspace+role allow), opens start modal
- `#people-view-job` (name=job_id) — select which job application is active
- `#people-view-open-job` — eye icon link to /job/<id>
- `#people-view-stage` (name=stage) — change pipeline stage (may open Interview/Hiring/Reject/Assessment modals — those components are not mine)
Tabs (role=tablist):
- `#people-view-tab-profile` → panel `#people-view-panel-profile`
- `#people-view-tab-assessment` → panel `#people-view-panel-assessment`
- `#people-view-tab-background-check` → panel `#people-view-panel-background-check` (only when allowed)
Profile panel:
- `#people-view-basic-info`; values `#people-view-email`, `#people-view-phone`, `#people-view-dob`, `#people-view-location`, `#people-view-gender`
- `#people-view-show-tags` — opens phone reputation modal `#people-view-phone-modal` (`-title`, `-close`, `-quota`, `-result` aria-live, `-submit` = search/research)
- `#people-view-applied-jobs` / `[data-cua=people-job-application]` data-id = job id, data-stage = stage
- `[data-cua=people-custom-field]` data-id = dynamic field key
- `#people-view-skills` (+ `#people-view-skills-more`), `#people-view-languages`, `[data-cua=people-education]` (+ `#people-view-education-more`), `[data-cua=people-experience]` (+ `#people-view-experience-more`)
- `#people-view-profile-risk` + `[data-cua=risk-flag]` (data-severity) — latest finished background check's risks (links jump to the BC tab)
- `#people-view-resume-score`; `#people-view-eval-<key>` (key: relevant_experience, skills_match, education_fit, career_progression, achievements_impact, industry_domain_fit, resume_quality_completeness) → `#people-view-eval-modal` (`-title`, `-close`)
- `#people-view-reparse` — re-parse resume
- `#people-view-resume` — iframe with the resume PDF (read-only; no upload/download controls exist on this page)
Assessment panel:
- `[data-cua=people-assessment]` data-id = job id; `#people-view-assessment-<jobId>-open` (link to Algobash result), `#people-view-assessment-<jobId>-download` (icon, download report)
Background check panel (PeopleCheck.tsx):
- empty: `#people-view-bc-empty`, `#people-view-bc-start-empty`
- `#people-view-bc-current` `[data-cua=bc-current]` data-id = check code, data-status; `#people-view-bc-code`, `#people-view-bc-history` (select name=check, only with >1 check), `#people-view-bc-open-full` (link to /background-check/<code>)
- report: see "Check outcome" below
Not reachable: notes / history panels exist in code but have no tab button (no ids added).

## Start background check modal (PeopleCheck.tsx)
- `#bc-start-modal` (role=dialog, labelledby `#bc-start-title`), `#bc-start-no-phone` (role=alert, warning), `#bc-country` (SearchableSelect trigger, label for), `#bc-start-quota`, `#bc-start-modal-cancel`, `#bc-start-modal-submit`
- Quota refusal: `#bc-quota-modal` (role=alertdialog, `#bc-quota-title`), `#bc-quota-modal-cancel` (Close), `#bc-quota-modal-upgrade`

## /background-check — background-check-list (index.tsx)
Landmark: `main#page-background-check-list`
- `#background-check-list-public-page` — opens the public verification page (new tab)
- `#bc-quota-banner` (role=alert) + `#bc-quota-banner-upgrade` when the quota is used up
- `#background-check-list-status` (name=status), `#bc-search` (name=search, debounced)
- `tbody[data-cua=background-check-row-list]` (aria-busy)
- `[data-cua=background-check-row]` data-id = check code, data-status = queued|processing|done|failed|on_hold
  - `#background-check-row-<code>-open` (name link → detail), `#background-check-row-<code>-people` (candidate badge link, if linked), `#background-check-row-<code>-rerun` (icon, disabled while pending), `#background-check-row-<code>-delete` (icon)
  - badges: `[data-cua=bc-status]` data-status, `[data-cua=bc-risk]` data-risk = none|low|medium|high
- `#background-check-list-limit` (name=limit)
- Confirm modal (rerun/delete): `#background-check-action-modal`, `-modal-title`, `-modal-cancel`, `-modal-submit`

## /background-check/:code — background-check-view (View.tsx)
Landmark: `main#page-background-check-view`, `#page-title` = applicant name
- `#background-check-view-back`, `#background-check-view-retry` (in #page-actions, hidden while pending)
- `#background-check-view-not-found`
- `#background-check-view-applicant` (data-id = code); fields `#bc-field-code|full-name|nik|birth-date|nationality|phone|email|country|source|submitted|started|finished` (each a dt/dd pair; some optional); `#background-check-view-people` → candidate profile
Check outcome (also used inside the people-view BC tab):
- `#bc-outcome` data-status; `#bc-outcome-pending` (role=status), `#bc-outcome-on-hold`, `#bc-outcome-failed` (role=alert)
- `#bc-report`: `#bc-report-profile`, `#bc-report-summary` (text), `#bc-report-concerns` with `[data-cua=risk-flag]` data-severity, `#bc-report-gaps` (details)
- `#bc-report-sources`: `[data-cua=bc-source-summary]` data-id = web_search|social_media|phone|sipp, data-status = clear|review|risk|not_checked
- `#bc-evidence`: `[data-cua=bc-evidence-phone]` data-id = number, `[data-cua=bc-evidence-social]` data-id = username (both <details>, click summary to expand)
- `#bc-report-links`: `#bc-report-links-web_search|social_media|sipp` (details), `[data-cua=bc-link]` data-id = URL

## Workflows
**Add a candidate with resume**: /people → `#people-list-add` → `#add-people-modal` → `#job-select` (pick option) → optionally check `#add-people-autofill` → upload to `#add-people-cv` → wait `#add-people-autofill-status` to disappear → fill/verify `#add-people-name`, `#add-people-email`, `#add-people-phone` (+ optional dob/gender/linkedin/address) → `#add-people-modal-submit` → modal closes, success toast; `[data-cua=people-row]` list refreshes. Errors in `#add-people-error`.
**Search people**: /people → type in `#default-search` (500 ms debounce) and/or set `#people-list-gender|job|job-status|stage` → read `[data-cua=people-row]` (data-id) → click its name link → /people/<id>.
**Chat with AI**: /people?mode=chat (or `#people-tab-chat`) → `#people-chat-new` (or `#people-chat-new-empty`, or pick `#chat-session-<uuid>`) → optionally `#people-chat-agents` then toggle `#people-chat-agent-people` etc. (aria-pressed) → type in `#people-chat-input` → `#people-chat-send` → wait until `#people-chat-messages` aria-busy="false" and no `[data-streaming=true]` → read last `[data-cua=chat-message][data-role=assistant]`; agent data via `#people-chat-agent-results-toggle`.
**Start a background check**: /people/<id> → `#people-view-bc-start` (or `#people-view-tab-background-check` → `#people-view-bc-start-empty`) → `#bc-start-modal` → optionally `#bc-country` → `#bc-start-modal-submit` → page switches to BC tab; `#people-view-bc-current[data-status]` goes queued → processing → done (polls every 5 s). Quota refusal shows `#bc-quota-modal`.
**Read a background-check result**: /background-check → find `[data-cua=background-check-row][data-id=<code>]` (data-status=done) → `#background-check-row-<code>-open` → /background-check/<code> → wait `#bc-outcome[data-status=done]` → read `#bc-report-summary`, `[data-cua=risk-flag]` (data-severity), `[data-cua=bc-source-summary]`, `[data-cua=bc-risk]`. Same report renders in the people-view BC tab.


# Workspace, members, onboarding, public forms

## Workspace settings — `/workspace`
Landmark: `main#page-workspace[data-page=workspace]`, heading `h1#page-title`. Needs `workspace` access.
Tabs (`#workspace-tabs`, role=tablist; tab state is in URL `?tab=<key>`, keys: settings, knowledge, weight, assessmentWeight, stageDefaults, jobPortal, dynamicForm):
- `#workspace-tab-settings` / `-knowledge` / `-weight` / `-assessment-weight` / `-stage-defaults` / `-job-portal` / `-dynamic-form` — role=tab, aria-selected
- Panels: `#workspace-panel-<same slug>` (role=tabpanel; only the active one is rendered; stage-defaults/job-portal/dynamic-form/settings panels are `display:contents` wrappers)

Settings tab (`#workspace-panel-settings`, aria-busy while loading; form `#workspace-settings-form`):
- `#name` (name=name, required) — company name; Save is disabled while empty
- `#domain` (name=inboxEmail) — recruitment inbox, DISABLED (read-only, set at onboarding)
- `#workspace-country` — SearchableSelect trigger (custom combobox, label-for wired); `#workspace-country-clear` — clear country (only when a country is set)
- `#link` (name=link) — company website
- `#description` (name=description) — textarea; disabled + aria-busy while AI generates
- `#workspace-description-ai` — "Write with AI" (uses name + website)
- `#workspace-description-prompt` — icon-only custom-prompt trigger (aria-label "Custom AI prompt"); opens `#workspace-description-prompt-panel` (role=dialog) with `#workspace-description-prompt-input` (name=prompt), `#workspace-description-prompt-reset`, `#workspace-description-prompt-submit`. Popup closes on outside pointerdown.
- `#logo` (name=logo, hidden file input, aria-label "Upload company logo") — upload directly; uploads immediately on change
- `#workspace-save` — save settings (PUT); success/error shows a toast

Knowledge base tab (`#workspace-panel-knowledge`, aria-busy while loading/uploading):
- `#workspace-knowledge-search` (name=search) — debounced 400ms
- `#knowledge-upload` (name=file, hidden, accept .pdf, aria-label "Upload knowledge PDF") — uploads immediately on change
- `[data-cua=knowledge-item-list]` > `[data-cua=knowledge-item][data-id=<knowledge id (string)>]`
  - `#knowledge-item-<id>-open` — opens the PDF in a new tab
  - `#knowledge-item-<id>-delete` — icon-only (aria-label "Delete knowledge file"); opens confirm `#workspace-knowledge-delete-modal` → `#workspace-knowledge-delete-modal-submit` / `-cancel`
- `#workspace-knowledge-load-more` — next page (6 per page), only when more exist

Resume weight tab (`#workspace-panel-weight`): inputs come from ResumeWeightScore (not in scope). `#workspace-weight-total` — "N / 100"; `#workspace-weight-save` disabled unless total == 100 (error shown as role=alert).
Assessment weight tab (`#workspace-panel-assessment-weight`): `#workspace-assessment-weight-save` disabled while all weights are zero (role=alert message).
Stage defaults / dynamic form tabs: content from StageDefaultsEditor / DynamicFormEditor (not in scope).

Job portal tab — `JobPortalSettings` (`#job-portal-settings`, aria-busy while loading):
- `#job-portal-main-color` (name=main_color, aria-invalid) — CSS color text; `#job-portal-main-color-picker` (native color input, same value)
- `#job-portal-font-url` (name=font_url) — must be https or Save is disabled
- `#job-portal-font-family` (name=font_family)
- `#job-portal-privacy-policy`, `#job-portal-terms` — TextEditor rich-text ids (label-for wired)
- `#job-portal-preview` — live preview box (read-only)
- `#job-portal-save` — disabled while color/font URL invalid

## Members & roles — `/member`
Landmark: `main#page-members[data-page=members]`, heading `h1#page-title` (visually hidden; page has no visible h1). Needs `member` access.
Roles section `section#members-roles` (title `#members-roles-title`):
- `#members-role-search` (name=role_search, debounced 500ms → URL `role_search`)
- `#members-role-add` — opens role modal (create)
- `#members-role-table`; `tbody[data-cua=role-list]` (aria-busy) > `tr[data-cua=role-row][data-id=<role id>]`
  - `#role-row-<id>-edit`, `#role-row-<id>-delete` — NOT rendered for permanent roles (a lock badge, role=img "Locked …", is shown instead)
  - Delete uses the browser-native `window.confirm()` dialog (not a DOM modal) — the agent must accept the JS dialog.
- `#members-role-limit` (name=role_limit) — 10/20/50; role pagination uses `?role_page=`
Members section `section#members-members` (title `#members-members-title`):
- `#members-filter-toggle` — mobile-only (md:hidden) filter toggle, aria-expanded; filters are hidden on small screens until toggled
- `#members-role-filter` (name=role_id) — "All roles" = ""
- `#default-search` (name=member_search) — member search, debounced 500ms (id shared with other pages, unique per route)
- `#members-add` — opens member modal (create)
- `#members-member-table`; `tbody[data-cua=member-list]` (aria-busy) > `tr[data-cua=member-row][data-id=<member id>]`
  - `#member-row-<id>-edit` — opens member modal (edit: change name / role; this is the "role change" control)
  - `#member-row-<id>-delete` — remove member; native `window.confirm()` dialog
  - Both absent for permanent members (lock badge instead)
- `#members-member-limit` (name=member_limit); pagination `?member_page=`

Member modal `#member-modal` (role=dialog, labelled by `#modal-title` — legacy id kept):
- `#member-form-name` (name=name), `#member-form-email` (name=email; disabled when editing)
- `#member-form-password` (name=password; create only, pre-filled with a generated password), `#member-form-password-toggle` (icon-only show/hide, aria-pressed)
- `#member-form-role` (name=roleID; value 0 = placeholder) — Save disabled until name, email and role are set
- `#member-modal-add-from-algobash` — only on localhost dev builds, create mode; closes this modal and opens the Algobash import modal
- `#member-modal-cancel`, `#member-modal-submit` (aria-busy while saving). Backdrop click closes. Creating a member first creates an Algobash account, then the Alohire member.

Role modal `#role-modal` (labelled by `#role-modal-title`):
- `#role-form-name` (name=name) — Save disabled while empty
- `#role-form-permissions` (role=group) > checkboxes `#role-form-permission-<all|job|people|workspace|member|backgroundCheck>` (name=access). Checking `all` disables the others.
- `#role-modal-cancel`, `#role-modal-submit`

Algobash import modal — `AddAlgobashMembersModal` (`#add-algobash-members-modal`, labelled by `#add-algobash-members-title`; dev/localhost only):
- `#add-algobash-members-modal-close`, `#add-algobash-members-search` (name=search, debounced 300ms), `#add-algobash-members-total`
- `[data-cua=algobash-user-list]` (aria-busy) > `label[data-cua=algobash-user][data-id=<algobash account id>]` containing checkbox `#algobash-user-<id>` (name=accountIDs)
- `#add-algobash-members-load-more`, `#algobash-member-role` (name=roleID; 0 = none)
- `#add-algobash-members-modal-cancel`, `#add-algobash-members-modal-submit` (disabled until ≥1 user and a role selected)

## Onboarding — `/onboarding`
Landmark: `main#page-onboarding[data-page=onboarding]`, `h1#page-title`, form `#onboarding-form`. Redirects to `/workspace` if the session already has a workspace.
- `#name` (name=name, required), `#domain` (name=inboxEmail, required; local part of `<x>@job.alohire.com`)
- `#workspace-country` (SearchableSelect), `#onboarding-country-clear`
- `#link` (name=link), `#description` (name=description)
- `#onboarding-description-ai` (disabled until name filled), `#onboarding-description-prompt` (icon-only, aria-expanded) → `#onboarding-description-prompt-panel` (role=dialog) with `#onboarding-description-prompt-input` (name=prompt), `#onboarding-description-prompt-submit`
- `#logo` (name=logo, hidden file input, aria-label "Upload company logo")
- `#onboarding-submit` — "Create workspace"; only name + inbox are actually required (other asterisks are cosmetic). On success it reloads the session and navigates to `/`.

## Prior job reference form — `/form-prior/:jobUUID/:peopleUUID` (public, candidate-facing, no login)
Landmark: `main#page-prior-confirmation[data-page=prior-confirmation]`, `h1#page-title`. Invalid UUIDs redirect to `/404`.
- `#prior-confirmation-add` (header) / `#prior-confirmation-add-first` (empty state) — open reference modal
- `#prior-confirmation-reference-table`; `tbody[data-cua=reference-list]` > `tr[data-cua=reference-row][data-id=<reference id>]`
  - `#reference-row-<id>-edit` (icon-only "Edit reference"), `#reference-row-<id>-delete` (icon-only "Delete reference"), `#reference-row-<id>-linkedin` (only if set)
Reference modal `#reference-modal` (title `#reference-modal-title`, form `#reference-form`):
- `#reference-form-name` (name=name, required), `#reference-form-email` (name=email), `#reference-form-phone` (name=phone) — email OR phone required, `#reference-form-linkedin` (name=linkedin), `#reference-form-description` (name=description, required)
- `#reference-modal-close`, `#reference-modal-cancel`, `#reference-modal-submit` (type=submit; creates or updates depending on mode)
Delete modal `#reference-delete-modal` (title `#reference-delete-modal-title`): `#reference-delete-modal-cancel`, `#reference-delete-modal-submit`.

## Shared components
- **QuotaCard** (dashboard): `section#quota-card` (title `#quota-card-title`); `[data-cua=quota-list]` (aria-busy) > `[data-cua=quota-row][data-id=GETCONTACT_QUOTA|BACKGROUND_QUOTA][data-enabled=true|false]`; enabled rows have a role=progressbar (aria-valuenow = remaining, aria-valuemax = threshold); disabled rows show a "Locked" badge.
- **CvReviewConfigModal** (opened from the Kanban CV-review column settings): `#cv-review-config-modal` (title `#cv-review-config-modal-title`, form `#cv-review-config-form`, aria-busy while loading)
  - `#cv-review-config-modal-close`, `#cv-review-config-modal-cancel`, `#cv-review-config-modal-submit`
  - Custom dropdowns (aria-haspopup=menu, aria-expanded): `#cv-review-config-auto-reject` → menu `#cv-review-config-auto-reject-menu`, options `#cv-review-config-auto-reject-option-<0|2|3|4|5>`; `#cv-review-config-auto-accept` → `#cv-review-config-auto-accept-menu`, options `-option-<0|1|2|3|4>`; option 0 = Off. Options are role=menuitemradio with aria-checked; overlapping thresholds are disabled.
  - `#cv-review-config-accept-stage` (only when auto-accept ≠ Off) → `#cv-review-config-accept-stage-menu`, options `#cv-review-config-accept-stage-option-<stage name>`
- **CustomPrompt**: new optional props `id` (→ `<id>`, `<id>-panel`, `<id>-input`, `<id>-reset`, `<id>-submit`) and `ariaLabel` (default "Custom AI prompt"). Callers in CreateJob.tsx do not pass `id` yet (they still get the aria-label/aria-expanded).
- **Accordion**: new optional `id` prop; renders `[data-cua=accordion]#<id>`, toggle `#<id>-toggle` (aria-expanded, aria-controls) and body `#<id>-panel` (role=region, only rendered while open). Without `id` a generated `accordion-<n>` id is used (not stable — ViewJob.tsx callers should pass `id`).
- **RoleChecker** (route guards): when access is missing the route renders `#access-denied` (role=alert) instead of the page (so no `main[data-page]`); without a workspace `#onboarding-required` with link `#onboarding-required-link`; when background checks are off `#feature-disabled`.