Pipeline health analysis
` is what should_ingest stamps when the model could not be
- * consulted at all — no API key, a timeout, a refusal. Those rows were ingested
- * anyway (INBOX_TRIAGE_FAIL_OPEN defaults true), so they are a provider-health
- * signal, not a filtering decision, and get their own chip.
- */
-function triageReason(code) {
- const raw = code || ''
- if (raw.startsWith('unclassified:')) {
- return { label: `Unclassified · ${raw.slice('unclassified:'.length)}`, cls: 'b-red' }
- }
- return TRIAGE_REASONS[raw] || { label: raw || 'Unknown', cls: 'b-gray' }
-}
-
-/** The three views over the ledger. `undefined` sends no is_application param. */
-const TRIAGE_VIEWS = {
- 'Filtered out': false,
- Kept: true,
- All: undefined,
-}
-
-/** The prototype computed "time ago" against a fixed 2026-07-09T20:00. */
-const NOW = new Date('2026-07-09T20:00')
+const SERVER_SCOPED_TABS = new Set(['All Applications', 'Unread'])
/**
* message_received_time / message_sent_time are plain string columns
@@ -96,6 +69,33 @@ function parseDate(value) {
return Number.isNaN(d.getTime()) ? null : d
}
+function startOfDay(d) {
+ return new Date(d.getFullYear(), d.getMonth(), d.getDate())
+}
+
+/**
+ * Outlook-style list timestamps in the client's local timezone.
+ * Within 7 days: weekday + AM/PM time. Older: dd/mm/yyyy + AM/PM time.
+ */
+function outlookListTime(value) {
+ if (!value) return '—'
+ const d = value instanceof Date ? value : new Date(value)
+ if (Number.isNaN(d.getTime())) return '—'
+ const time = d.toLocaleTimeString(undefined, {
+ hour: 'numeric',
+ minute: '2-digit',
+ hour12: true,
+ })
+ const daysAgo = Math.round((startOfDay(new Date()) - startOfDay(d)) / 86400000)
+ if (daysAgo < 7) {
+ const weekday = d.toLocaleDateString(undefined, { weekday: 'short' })
+ return `${weekday} ${time}`
+ }
+ const dd = String(d.getDate()).padStart(2, '0')
+ const mm = String(d.getMonth() + 1).padStart(2, '0')
+ return `${dd}/${mm}/${d.getFullYear()} ${time}`
+}
+
/**
* `source` arrives as the raw To address, because that is where the board tag
* lands — careers-rozee@, employee-referral@, mustakbil@ and so on. Strip
@@ -151,14 +151,15 @@ const RESUME_STATUS = {
failed: 'Failed', dlq: 'Failed', skipped: 'Pending',
}
+const SHORTLIST_JOB_WARNING = 'Choose one of the suggested jobs above to add this candidate to the shortlist.'
+
/**
* GET /inbox/fetch?record_id= -> the detail behind one application row.
*
* Returns serialize_message, a different shape from serialize_application, so it
* is remapped onto the row shape here and OVERLAID on the list row rather than
- * replacing it: serialize_message carries the body and the real decoded
- * attachments, but omits resume_text, so the list row keeps supplying that.
- * suggested_job_post_ids is dropped, same as everywhere else on this page.
+ * replacing it: serialize_message carries the body, decoded attachments, and
+ * the hydrated suggested_job_posts / assigned_job_post the role picker needs.
*/
async function fetchMessageDetail(recordId) {
const res = await inboxApi.getMessage(recordId)
@@ -191,6 +192,11 @@ async function fetchMessageDetail(recordId) {
matchReasoning: row.match_reasoning || '',
matchError: row.match_error || '',
matchedAt: parseDate(row.matched_at),
+ resumeText: row.resume_text || '',
+ suggestedIds: (row.suggested_job_post_ids || []).map(String),
+ suggestedPosts: Array.isArray(row.suggested_job_posts) ? row.suggested_job_posts : [],
+ assignedId: row.assigned_job_post_id ? String(row.assigned_job_post_id) : null,
+ assignedPost: row.assigned_job_post || null,
}
}
@@ -227,6 +233,8 @@ async function fetchApplications(params) {
experience: row.experience,
recruiter: row.recruiter,
duplicate: Boolean(row.duplicate),
+ suggestedIds: (row.suggested_job_post_ids || []).map(String),
+ assignedId: row.assigned_job_post_id ? String(row.assigned_job_post_id) : null,
}
})
}
@@ -234,46 +242,319 @@ async function fetchApplications(params) {
// Shared with the sidebar badge through qk.mailbox.counts — see inboxApi.fetchCounts.
const fetchInboxCounts = inboxApi.fetchCounts
+/** 500 is MAX_BULK_READ_IDS in backend/inbox/views.py; a longer list gets a 413. */
+const BULK_READ_CHUNK = 500
+
+async function setReadChunked(ids, read) {
+ let updated = 0
+ for (let i = 0; i < ids.length; i += BULK_READ_CHUNK) {
+ // Sequential on purpose. Each chunk is one UPDATE over a few hundred rows of
+ // the same table; firing them together only puts them in each other's way.
+ // eslint-disable-next-line no-await-in-loop
+ const res = await inboxApi.bulkSetRead(ids.slice(i, i + BULK_READ_CHUNK), read)
+ updated += res?.data?.updated ?? 0
+ }
+ return { updated, requested: ids.length }
+}
+
/**
- * POST /inbox/{record_id}/read — flips message_read false -> true for one row.
- *
- * Optimistic, so the row un-bolds on click instead of after the round trip, and
- * rolls back if the server rejects. Both mailbox caches hold {id, unread} rows,
- * so one setQueriesData over qk.mailbox.all() covers the Email tab and the
- * application tabs at once; `processing` is derived from the same column, so it
- * moves with it.
- *
- * NOTE: the route requires INBOX_EDIT while the lists only require INBOX_VIEW,
- * so a view-only user gets a 403 here and the row snaps back to unread.
+ * Rewrites ONE cache entry for a read-state flip: a row list, or the
+ * single-message detail object. Anything else (the counts object) passes through
+ * untouched — it has no `id`, and its delta is applied separately.
*/
-function useMarkRead(toast) {
+function patchReadState(data, idSet, read) {
+ const patchRow = (r) => (idSet.has(r.id)
+ ? {
+ ...r,
+ unread: !read,
+ // `processing` also carries Imported / Processed / Rejected, which are a
+ // different column. Only the read-derived pair moves with this one.
+ processing: r.processing === 'Unread' || r.processing === 'Read'
+ ? (read ? 'Read' : 'Unread')
+ : r.processing,
+ }
+ : r)
+ if (Array.isArray(data)) return data.map(patchRow)
+ if (data && typeof data === 'object' && data.id && idSet.has(data.id)) return patchRow(data)
+ return data
+}
+
+/**
+ * PATCH /inbox/read — flips message_read for one row or for two hundred.
+ *
+ * The single-row route (POST /inbox/{id}/read) still exists, but every flip goes
+ * through the bulk one so there is exactly ONE optimistic patch to reason about.
+ *
+ * Optimistic, so rows un-bold on click instead of after the round trip, and roll
+ * back if the server rejects. Both mailbox caches hold {id, unread} rows, so one
+ * setQueriesData over qk.mailbox.all() covers the Email tab and the application
+ * tabs at once; `processing` is derived from the same column, so it moves with it.
+ *
+ * NOTE: the route requires INBOX_EDIT while the lists only require INBOX_VIEW, so
+ * a view-only user gets a 403 here and the rows snap back. The bulk bars disable
+ * themselves for those users; click-to-read cannot, so it still relies on rollback.
+ */
+async function optimisticRead(qc, ids, read) {
+ await qc.cancelQueries({ queryKey: qk.mailbox.all() })
+ const previous = qc.getQueriesData({ queryKey: qk.mailbox.all() })
+ const idSet = new Set(ids)
+
+ // Which rows actually FLIP, counted BEFORE the patch: the counts object is a
+ // bag of totals with no per-row detail to derive the delta from afterwards.
+ // A Set, because the same id appears in several cached lists at once.
+ const flipping = new Set()
+ for (const [, data] of previous) {
+ if (!Array.isArray(data)) continue
+ for (const r of data) if (idSet.has(r.id) && Boolean(r.unread) === read) flipping.add(r.id)
+ }
+
+ qc.setQueriesData({ queryKey: qk.mailbox.all() }, (data) => patchReadState(data, idSet, read))
+ // The Unread tab badge and the sidebar badge share this entry. Without the
+ // delta they sit stale until the refetch lands — invisible for one row,
+ // glaring for two hundred. `previous` already covers it for rollback,
+ // because ['mailbox'] is a prefix of ['mailbox','counts'].
+ qc.setQueryData(qk.mailbox.counts(), (c) => (c
+ ? { ...c, unread: Math.max(0, (c.unread ?? 0) + (read ? -flipping.size : flipping.size)) }
+ : c))
+ return { previous }
+}
+
+function useSetRead(toast) {
const qc = useQueryClient()
return useMutation({
- mutationFn: (recordId) => inboxApi.markRead(recordId),
- onMutate: async (recordId) => {
- await qc.cancelQueries({ queryKey: qk.mailbox.all() })
- const previous = qc.getQueriesData({ queryKey: qk.mailbox.all() })
- qc.setQueriesData({ queryKey: qk.mailbox.all() }, (rows) => (
- Array.isArray(rows)
- ? rows.map((r) => (r.id === recordId
- ? { ...r, unread: false, processing: r.processing === 'Unread' ? 'Read' : r.processing }
- : r))
- : rows
- ))
- return { previous }
- },
- onError: (err, _recordId, ctx) => {
+ mutationFn: ({ ids, read }) => setReadChunked(ids, read),
+ onMutate: ({ ids, read }) => optimisticRead(qc, ids, read),
+ onError: (err, _vars, ctx) => {
for (const [key, data] of ctx?.previous ?? []) qc.setQueryData(key, data)
- toast(friendlyAuthError(err, 'Could not mark as read.'), 'error')
+ toast(friendlyAuthError(err, 'Could not update read state.'), 'error')
},
onSettled: () => qc.invalidateQueries({ queryKey: qk.mailbox.all() }),
})
}
+/**
+ * PATCH /inbox/read-all — every row matching a server-side list filter.
+ *
+ * The WRITE is a WHERE clause, but the optimistic patch still runs over the ids
+ * the caller can see: this endpoint is only ever used where the visible list IS
+ * the server's whole result (see SERVER_SCOPED_TABS, and the list endpoint takes
+ * no pagination), so those ids are the scope, not a sample of it. Without the
+ * patch the rows sit unchanged for a whole round trip plus a refetch, which reads
+ * as a dead button — and the reconciling refetch on settle corrects it anyway if
+ * the scope ever did reach further.
+ */
+function useSetReadAll(toast) {
+ const qc = useQueryClient()
+ return useMutation({
+ mutationFn: ({ read, filter }) => inboxApi.setReadAll({ read, ...filter }),
+ onMutate: ({ ids, read }) => optimisticRead(qc, ids ?? [], read),
+ onSuccess: (res, { read }) => {
+ const n = res?.data?.updated ?? 0
+ toast(
+ n === 0
+ ? `Nothing to mark ${read ? 'read' : 'unread'} here`
+ : `${n} ${n === 1 ? 'message' : 'messages'} marked ${read ? 'read' : 'unread'}`,
+ 'success',
+ )
+ },
+ onError: (err, _vars, ctx) => {
+ for (const [key, data] of ctx?.previous ?? []) qc.setQueryData(key, data)
+ toast(friendlyAuthError(err, 'Could not update read state.'), 'error')
+ },
+ onSettled: () => qc.invalidateQueries({ queryKey: qk.mailbox.all() }),
+ })
+}
+
+/**
+ * Multi-select over a row list: the Set, the toggles, and the pruning.
+ *
+ * The pruning is not optional. Rows leave a list under their own steam — the
+ * Unread tab drops a row the instant it is marked read — so a Set left alone
+ * keeps counting ids that are no longer on screen, and "Mark 12 read" quietly
+ * acts on 9 of them.
+ */
+function useRowSelection(rows) {
+ const [selectedIds, setSelectedIds] = useState(() => new Set())
+ const visibleIds = useMemo(() => rows.map((r) => r.id), [rows])
+
+ useEffect(() => {
+ setSelectedIds((prev) => {
+ if (prev.size === 0) return prev
+ const visible = new Set(visibleIds)
+ const next = new Set()
+ for (const id of prev) if (visible.has(id)) next.add(id)
+ // Same size means nothing was pruned. Returning `prev` keeps the Set
+ // identity stable, so this effect cannot retrigger itself.
+ return next.size === prev.size ? prev : next
+ })
+ }, [visibleIds])
+
+ const toggle = useCallback((id) => setSelectedIds((prev) => {
+ const next = new Set(prev)
+ if (next.has(id)) next.delete(id)
+ else next.add(id)
+ return next
+ }), [])
+
+ const clear = useCallback(() => setSelectedIds((prev) => (prev.size ? new Set() : prev)), [])
+
+ const toggleAll = useCallback(() => setSelectedIds((prev) => (
+ prev.size >= visibleIds.length ? new Set() : new Set(visibleIds)
+ )), [visibleIds])
+
+ return {
+ selectedIds,
+ toggle,
+ toggleAll,
+ clear,
+ allSelected: visibleIds.length > 0 && selectedIds.size === visibleIds.length,
+ }
+}
+
+/**
+ * The row tick. stopPropagation is load-bearing: without it a tick also runs the
+ * row's onClick, which opens the detail pane AND auto-marks it read — instantly
+ * undoing the "mark unread" the user is selecting rows for.
+ */
+function RowCheck({ checked, onToggle, label }) {
+ return (
+ { e.stopPropagation(); onToggle() }}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault()
+ e.stopPropagation()
+ onToggle()
+ }
+ }}
+ >
+ { setTab(t); setSelectedId(null) }}
+ onChange={(t) => { setTab(t); setSelectedId(null); selection.clear() }}
tabs={TABS.map((t) => ({ key: t, label: t, count: counts[t] }))}
/>
{tab === 'Email' ? (
selection.toggle(i.id)}
+ label={`Select ${i.name}`}
+ />
- {i.body || 'This email has no message body.'}
-
- )}
-
- )}
-
- {i.hasAttachment && (
-
-
-
-
-
- {i.resumeText || 'Resume text not extracted yet — the matching task has not run for this application.'}
-
+
+
+
+
)}
+
+
+ {!loading && (
+
+ Subject: {i.position || '(no subject)'}
+ {looksLikeHtml(i.bodyHtml) ? (
+
+ {i.body || 'This email has no message body.'}
+
+ )}
+
+ )}
+
+ {i.hasAttachment && (
+
+
+
+
+
+ {resumeText || 'Resume text not extracted yet — the matching task has not run for this application.'}
+
+
+
+ )}
+
+
+
+ {matchFailed ? (
+
+ {i.matchError || 'Matching failed for this application.'}
+
+
+ ) : (
+
+ AI verdict
+ {i.matchSummary || 'No match summary yet.'}
+ {i.matchedAt && (
+ Matched {fmtDate(i.matchedAt)}
+ )}
+ {i.matchReasoning && (
+
+ )}
+ {whyOpen && (
+ {i.matchReasoning}
+ )}
+
+ )}
+
+ Suggested roles
+ {suggestionCards.length === 0 && !manualPost ? (
+
+
+
+
+
+
+ ) : (
+ suggestionCards.map(({ rank, post }) => (
+ setSelection(String(id))}
+ resumeText={resumeText}
+ />
+ ))
+ )}
+ {manualPost && (
+ setSelection(String(id))}
+ resumeText={resumeText}
+ />
+ )}
+
+
+
+
+
-
+
+ {showPicker && (
+ setShowPicker(false)}
+ onPick={(post) => {
+ setManualPost(post)
+ setSelection(String(post.id))
+ }}
+ />
+ )}
)
}
@@ -810,131 +1350,11 @@ function AssignRecruiter({ item, recruiters, onClose, onSave }) {
)
}
-/* ============================================================
- Filtered Out — the intake gate's ledger (GET /inbox/triage).
-
- Every inbound mail is classified on subject + body and only the job
- applications get an inbox_messages row, so this tab is the ONLY place the
- dropped mail is visible. That is the point: a hard gate's real risk is the
- silent false negative, and Restore is what makes one recoverable.
-
- There is no body to preview here — the gate stores the verdict, never the
- mail. Restore re-fetches the original from upstream and runs it through the
- normal ingestion path.
- ============================================================ */
-function TriageTab({ query, view, onView, toast }) {
- const qc = useQueryClient()
- const rows = query.data?.rows ?? []
- const total = query.data?.total ?? 0
-
- const override = useMutation({
- mutationFn: ({ id, isApplication }) => inboxApi.overrideTriage(id, isApplication),
- onSuccess: (_d, vars) => {
- toast(
- vars.isApplication
- ? 'Restored — the message is being imported and matched.'
- : 'Marked as not an application.',
- 'success',
- )
- },
- onError: (err) => toast(friendlyAuthError(err, 'Could not update the verdict.'), 'error'),
- // qk.mailbox.all() covers the ledger, the application lists and the counts:
- // restoring writes a real inbox row, so all three are stale at once.
- onSettled: () => {
- qc.invalidateQueries({ queryKey: qk.mailbox.all() })
- qc.invalidateQueries({ queryKey: qk.mailbox.counts() })
- },
- })
-
- const pendingId = override.isPending ? override.variables?.id : null
-
- return (
- <>
-
- Intake gate · OpenAI
-
- {query.isPending ? 'Loading…' : query.isError ? 'Could not load' : `${total} message${total === 1 ? '' : 's'}`}
-
-
- {Object.keys(TRIAGE_VIEWS).map((key) => (
-
- ))}
-
-
-
-
- {query.isPending && (
- Fetching the intake ledger.
- )}
- {query.isError && (
-
- {friendlyAuthError(query.error, 'Request failed')}
-
- )}
- {query.isSuccess && rows.length === 0 && (
-
- Every message the gate has seen was judged a job application.
-
- )}
- {query.isSuccess && rows.map((r) => (
-
- {r.reason.label}
- {r.confidence != null && (
- {Math.round(r.confidence * 100)}% confident
- )}
- {r.hasAttachment && (
-
- Kept }
- {r.overriddenAt && Overridden }
-
- {r.evidence && (
- {r.evidence}
- )}
-
-
- {r.when ? fmtShort(r.when) : '—'}
- {r.isApplication ? (
-
- ) : (
-
- )}
-
-
- ))}
-
-
- )
-}
-
/** The live tab: real fetch, real loading state, real error state. */
function EmailTab({ query, toast }) {
const qc = useQueryClient()
+ const { can } = useAuth()
+ const canEdit = can('inbox.edit')
const [selectedId, setSelectedId] = useState(null)
const [replying, setReplying] = useState(null)
const [replyBody, setReplyBody] = useState('')
@@ -944,7 +1364,29 @@ function EmailTab({ query, toast }) {
const selected = emails.find((e) => e.id === selectedId)
const unread = emails.filter((e) => e.unread).length
- const markRead = useMarkRead(toast)
+ const selection = useRowSelection(emails)
+ const setRead = useSetRead(toast)
+ const setReadAll = useSetReadAll(toast)
+
+ function setReadSelected(read) {
+ const ids = [...selection.selectedIds]
+ if (!ids.length) return
+ setRead.mutate({ ids, read }, {
+ onSuccess: () => {
+ toast(`${ids.length} ${ids.length === 1 ? 'message' : 'messages'} marked ${read ? 'read' : 'unread'}`, 'success')
+ selection.clear()
+ },
+ })
+ }
+
+ /**
+ * This list is /inbox/fetch with no params — every persisted message, no
+ * filter, no pagination — so the empty scope really is the whole mailbox and
+ * the WHERE clause matches what is on screen exactly.
+ */
+ function setReadEverything(read) {
+ setReadAll.mutate({ read, filter: {}, ids: emails.map((e) => e.id) })
+ }
const sync = useMutation({
mutationFn: () => inboxApi.syncMailbox(),
@@ -989,7 +1431,7 @@ function EmailTab({ query, toast }) {
function selectEmail(e) {
setSelectedId(e.id)
- if (e.unread) markRead.mutate(e.id)
+ if (e.unread) setRead.mutate({ ids: [e.id], read: true })
}
const isImported = (e) => importedIds.has(e.id)
@@ -1011,8 +1453,19 @@ function EmailTab({ query, toast }) {
-
-
+
+
+ {query.isSuccess && emails.length > 0 && (
+ Fetching mailbox from the server. }
{query.isError && (
@@ -1028,6 +1481,11 @@ function EmailTab({ query, toast }) {
className={`inbox-item${e.unread ? ' unread' : ''}${selectedId === e.id ? ' active' : ''}`}
onClick={() => selectEmail(e)}
>
+ selection.toggle(e.id)}
+ label={`Select mail from ${e.from}`}
+ />
Imported }
- {e.when ? fmtShort(e.when) : '—'}
+ {outlookListTime(e.when)}
))}
diff --git a/frontend/src/screens/Matching.jsx b/frontend/src/screens/Matching.jsx
index 596e300..d8b9a1c 100644
--- a/frontend/src/screens/Matching.jsx
+++ b/frontend/src/screens/Matching.jsx
@@ -11,10 +11,10 @@ import { useEffect, useMemo, useState } from 'react'
import { useSearchParams } from 'react-router-dom'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
-import Modal from '../ui/Modal'
import EmailBody, { looksLikeHtml } from '../ui/EmailBody'
import { Tabs } from '../ui/Tabs'
import { Avatar, Badge, EmptyState, Icon } from '../ui/primitives'
+import { JobCard, PickRoleModal } from '../ui/SuggestedRoles'
import { useToast } from '../ui/Toast'
import { useAuth } from '../auth/AuthContext'
import { qk } from '../lib/queryKeys'
@@ -80,14 +80,6 @@ function htmlToText(value) {
return (doc.body?.textContent || '').replace(/[ \t]+\n/g, '\n').replace(/\n{3,}/g, '\n\n').trim()
}
-/** Requirement chip lights green when the resume text contains it (client-side). */
-function reqInResume(req, resumeText) {
- if (!req || !resumeText) return false
- const needle = String(req).trim().toLowerCase()
- if (!needle) return false
- return resumeText.toLowerCase().includes(needle)
-}
-
function mapApplication(row) {
const name = row.name || row.email || 'Unknown'
const suggested = Array.isArray(row.suggested_job_post_ids) ? row.suggested_job_post_ids : []
@@ -168,129 +160,6 @@ function AssignmentBadge({ item, titleById }) {
return No match
}
-function JobCard({ post, rank, selected, onSelect, resumeText, manual }) {
- const unavailable = Boolean(post?.unavailable) || !post?.title
- const title = post?.title || 'Unavailable'
- const meta = [
- post?.employment_type,
- post?.location,
- post?.experience_min != null || post?.experience_max != null
- ? `${post?.experience_min ?? '?'}–${post?.experience_max ?? '?'} yrs`
- : null,
- ].filter(Boolean).join(' · ')
-
- return (
- !unavailable && onSelect(post.id)}
- onKeyDown={(e) => {
- if (unavailable) return
- if (e.key === 'Enter' || e.key === ' ') {
- e.preventDefault()
- onSelect(post.id)
- }
- }}
- style={{
- cursor: unavailable ? 'not-allowed' : 'pointer',
- opacity: unavailable ? 0.55 : 1,
- borderColor: selected ? 'var(--primary)' : undefined,
- boxShadow: selected ? 'var(--ring)' : undefined,
- marginBottom: 8,
- alignItems: 'flex-start',
- }}
- >
-
-
- {manual ? 'Manual' : `AI #${rank}`}
- {title}
- {unavailable ? (
- Unavailable
- ) : (
- {post.status || 'draft'}
- )}
- {selected && Cancel}
- >
-
- Fetching job posts. }
- {isError && (
-
- {friendlyAuthError(error, 'Request failed')}
-
- )}
- {!isPending && !isError && data.length === 0 && (
- Try a different search.
- )}
-
- {data.map((p) => (
- { onPick(p); onClose() }}
- >
-
- {p.title}
-
- {[p.employment_type, p.location].filter(Boolean).join(' · ') || '—'}
-
-
- {p.status}
-
- ))}
-
-
- )
-}
-
export default function Matching() {
const { toast } = useToast()
const { can } = useAuth()
@@ -873,8 +742,7 @@ function MatchingWorkspace({
onClick={onAssign}
>
{selectedPost?.title
- ? `Assign to ${selectedPost.title}`
- : 'Assign'}
+ ? 'Assign' :'Assign'}
diff --git a/frontend/src/screens/Pipeline.jsx b/frontend/src/screens/Pipeline.jsx
index 87954ad..0e0cff9 100644
--- a/frontend/src/screens/Pipeline.jsx
+++ b/frontend/src/screens/Pipeline.jsx
@@ -28,7 +28,7 @@ import * as pipelineApi from '../api/pipeline'
/* Stage colours reference CSS tokens so the board re-tints with the theme. */
export const KANBAN_STAGES = [
- { name: 'Applied', color: 'var(--stage-1)' },
+ { name: 'Shortlist', color: 'var(--stage-1)' },
{ name: 'Screening', color: 'var(--stage-2)' },
{ name: 'Assessment', color: 'var(--stage-3)' },
{ name: 'Interview', color: 'var(--stage-4)' },
diff --git a/frontend/src/screens/Reports.jsx b/frontend/src/screens/Reports.jsx
index 333dbf2..82d25d5 100644
--- a/frontend/src/screens/Reports.jsx
+++ b/frontend/src/screens/Reports.jsx
@@ -45,8 +45,8 @@ const RANGES = [
/* Order matters: "reached" is a running sum from the end of this list back to
the start. REJECTED is deliberately absent — see the header note. */
const FUNNEL_ORDER = [
- { key: 'PENDING', label: 'Applied' },
- { key: 'CLOSED', label: 'Applied' },
+ { key: 'PENDING', label: 'Shortlist' },
+ { key: 'CLOSED', label: 'Shortlist' },
{ key: 'SCREENING', label: 'Screened' },
{ key: 'PROCESS', label: 'Screened' },
{ key: 'ONHOLD', label: 'Screened' },
diff --git a/frontend/src/screens/TalentPool.jsx b/frontend/src/screens/TalentPool.jsx
index dee2bcb..18f8a03 100644
--- a/frontend/src/screens/TalentPool.jsx
+++ b/frontend/src/screens/TalentPool.jsx
@@ -47,15 +47,15 @@ import { avatarColor, departments, initials as initialsOf } from '../data/seed'
/** The seed bucket holds 100 candidates; one template per person, no reuse. */
const FETCH_LIMIT = 100
-const STAGE_ORDER = ['Applied', 'Screening', 'Assessment', 'Interview', 'Offer', 'Hired']
+const STAGE_ORDER = ['Shortlist', 'Screening', 'Assessment', 'Interview', 'Offer', 'Hired']
/**
* Candidate_application_Status (backend/inbox/enums.py) -> the seed stage
* vocabulary every screen renders. CLOSED is the column default, i.e. untriaged,
- * so it reads as Applied rather than as an outcome.
+ * so it reads as Shortlist rather than as an outcome.
*/
const STAGE_FROM_STATUS = {
- PENDING: 'Applied', CLOSED: 'Applied', PROCESS: 'Screening',
+ PENDING: 'Shortlist', CLOSED: 'Shortlist', PROCESS: 'Screening',
ONHOLD: 'Screening', APPROVED: 'Hired', REJECTED: 'Rejected',
}
diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css
index a05f040..e5d2d24 100644
--- a/frontend/src/styles/styles.css
+++ b/frontend/src/styles/styles.css
@@ -719,7 +719,7 @@ canvas { width: 100%; max-width: 100%; display: block; }
/* ================= TABS ================= */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 22px; overflow-x: auto; }
-.tab { padding: 11px 16px; font-weight: 600; font-size: 13.5px; color: var(--text-2); border-bottom: 2px solid transparent; white-space: nowrap; transition: .15s; margin-bottom: -1px; }
+.tab { display: inline-flex; align-items: center; gap: 12px; padding: 11px 16px; font-weight: 600; font-size: 13.5px; color: var(--text-2); border-bottom: 2px solid transparent; white-space: nowrap; transition: .15s; margin-bottom: -1px; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.tab-pane { display: none; animation: fadeUp .25s; }
@@ -857,6 +857,46 @@ canvas { width: 100%; max-width: 100%; display: block; }
.ii-pos { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ii-meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.ii-time { font-size: 11px; color: var(--text-3); white-space: nowrap; }
+/* Inbox sidebar only: fit the list instead of scrolling sideways.
+ Username (.ii-name) and subject (.ii-pos) are left alone. */
+.inbox-split { grid-template-columns: minmax(0, 380px) 1fr; }
+.inbox-queue { overflow-x: hidden; min-width: 0; }
+.inbox-queue .inbox-item { min-width: 0; }
+.inbox-queue .ii-meta { flex-wrap: wrap; min-width: 0; }
+.inbox-queue .source-chip {
+ min-width: 0; max-width: 100%;
+ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.inbox-queue .toolbar-search { min-width: 0; }
+.inbox-bulk-bar {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 8px 12px;
+ border-bottom: 1px solid var(--border);
+ flex-wrap: nowrap;
+ min-width: 0;
+}
+.inbox-bulk-count {
+ flex: 1 1 auto;
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-size: 12px;
+ color: var(--text-3);
+}
+.inbox-bulk-actions {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ flex-shrink: 0;
+}
+.inbox-bulk-actions .btn-sm {
+ padding: 5px 8px;
+ font-size: 12px;
+ white-space: nowrap;
+}
/* `--chip` is the source's own brand colour, set inline. It tints the
background and fills the dot, while the label stays on theme text so
11px copy keeps its contrast in both modes. */
diff --git a/frontend/src/theme/ThemeProvider.jsx b/frontend/src/theme/ThemeProvider.jsx
index fa9a61d..dc785fe 100644
--- a/frontend/src/theme/ThemeProvider.jsx
+++ b/frontend/src/theme/ThemeProvider.jsx
@@ -47,6 +47,35 @@ export function useTheme() {
return ctx
}
+/**
+ * A counter that increments every time [data-theme] flips. Use it as an effect
+ * or useMemo dependency.
+ *
+ * Almost nothing needs this: a CSS custom property change repaints the whole
+ * document for free, which is why the app re-themes without any React
+ * involvement. It exists for the handful of places that CANNOT ride a variable
+ * — anything that bakes a colour into a canvas, a string, or a separate
+ * document at render time. Those read the palette through getComputedStyle
+ * exactly once and then hold a stale copy forever, because changing a custom
+ * property repaints CSS but never re-runs JavaScript.
+ *
+ * It watches the ATTRIBUTE rather than subscribing to this provider's state, on
+ * purpose. initTheme() runs before React mounts and applyTheme() can be called
+ * from outside the tree, so the attribute is the only source that is always
+ * current — and a component using this hook then needs no provider at all.
+ * Chart.jsx observes the same attribute directly, for the same reason.
+ */
+export function useThemeVersion() {
+ const [version, setVersion] = useState(0)
+ useEffect(() => {
+ if (typeof MutationObserver !== 'function') return undefined
+ const mo = new MutationObserver(() => setVersion((v) => v + 1))
+ mo.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] })
+ return () => mo.disconnect()
+ }, [])
+ return version
+}
+
export default function ThemeProvider({ children }) {
const [theme, setThemeState] = useState(
() => document.documentElement.getAttribute('data-theme') || 'light',
diff --git a/frontend/src/ui/EmailBody.jsx b/frontend/src/ui/EmailBody.jsx
index 2c80ee3..443f400 100644
--- a/frontend/src/ui/EmailBody.jsx
+++ b/frontend/src/ui/EmailBody.jsx
@@ -21,9 +21,16 @@
Remote images stay blocked until the user asks for them. A tracking pixel in
an applicant email would otherwise tell the sender exactly when a recruiter
opened it.
+
+ That CSS isolation has one cost worth stating plainly: custom properties do
+ not inherit across an iframe boundary, so this is the only component in the
+ app that cannot re-theme itself for free. Its palette is snapshotted into the
+ frame's