Merge pull request 'feat(ux): product/UX review implementation (onboarding, empty states, a11y, mobile kanban)' (#27) from feat/ux-review-quick-wins into main

job-tracker-ui/src/App.tsx

@@ -100,6 +100,16 @@ function titleFor(path: string, t: (k: any) => string): string {
   return t("appTitle");
 }
 
+function subtitleFor(path: string, t: (k: any) => string): string | undefined {
+  if (path === "/dashboard") return t("dashboardPageSubtitle");
+  if (path.startsWith("/jobs")) return t("jobsPageSubtitle");
+  if (path.startsWith("/kanban")) return t("kanbanPageSubtitle");
+  if (path.startsWith("/reminders")) return t("remindersPageSubtitle");
+  if (path.startsWith("/correspondence/review")) return t("gmailReviewPageSubtitle");
+  if (path.startsWith("/correspondence")) return t("correspondencePageSubtitle");
+  return undefined;
+}
+
 function PageLoader() {
   return <Box sx={{ p: 4 }}><Typography variant="h6">Loading...</Typography></Box>;
 }
@@ -123,6 +133,9 @@ function Shell({ jobPageSize, setJobPageSize, jobColumns, setJobColumns, themeMo
 
   const path = location.pathname;
   const isJobs = path.startsWith("/jobs");
+  const shortcutHint = useMemo(() => (
+    typeof navigator !== "undefined" && /Mac|iPhone|iPod|iPad/.test(navigator.platform) ? "⌘K" : "Ctrl+K"
+  ), []);
 
   useEffect(() => {
     api.get<AuthConfig>("/auth/config").then((r) => setRequireAuth(Boolean(r.data?.requireAuth))).catch(() => setRequireAuth(false));
@@ -206,6 +219,7 @@ function Shell({ jobPageSize, setJobPageSize, jobColumns, setJobColumns, themeMo
   if (requireAuth && !me) return <Navigate to="/" replace state={{ from: path }} />;
 
   const pageTitle = titleFor(path, t);
+  const pageSubtitle = subtitleFor(path, t);
   const breadcrumbs = breadcrumbsFor(path, t);
   const setAndPersistPageSize = (n: 15 | 20 | 25) => { setJobPageSize(n); window.localStorage.setItem("jobPageSize", String(n)); };
   const setAndPersistColumns = (next: JobTableColumns) => { setJobColumns(next); window.localStorage.setItem("jobColumns", JSON.stringify(next)); };
@@ -246,14 +260,19 @@ function Shell({ jobPageSize, setJobPageSize, jobColumns, setJobColumns, themeMo
         <IconButton
           color="secondary"
           size="small"
-          title={t("quickSearch")}
+          title={`${t("quickSearch")} (${shortcutHint})`}
           onClick={() => setQuickOpen(true)}
           sx={{ border: "1px solid", borderColor: "divider", borderRadius: 2.5, width: 42, height: 42, flex: "0 0 auto" }}
         >
           <SearchIcon fontSize="small" />
         </IconButton>
       ) : (
-        <Button variant="outlined" startIcon={<SearchIcon />} onClick={() => setQuickOpen(true)}>{t("quickSearch")}</Button>
+        <Button variant="outlined" startIcon={<SearchIcon />} onClick={() => setQuickOpen(true)} sx={{ gap: 0.5 }}>
+          {t("quickSearch")}
+          <Box component="span" sx={{ ml: 0.75, px: 0.75, py: 0.125, borderRadius: 1, border: "1px solid", borderColor: "divider", fontSize: 11, fontWeight: 700, color: "text.secondary", lineHeight: 1.6 }}>
+            {shortcutHint}
+          </Box>
+        </Button>
       )}
       {isJobs ? (
         <Button variant="contained" onClick={() => setAddOpen(true)} sx={{ flex: { xs: 1, sm: "0 0 auto" }, minHeight: 42 }}>
@@ -267,6 +286,7 @@ function Shell({ jobPageSize, setJobPageSize, jobColumns, setJobColumns, themeMo
     <>
       <AppShell
         pageTitle={pageTitle}
+        pageSubtitle={pageSubtitle}
         breadcrumbs={breadcrumbs}
         pathname={path}
         nav={nav}
@@ -284,7 +304,7 @@ function Shell({ jobPageSize, setJobPageSize, jobColumns, setJobColumns, themeMo
       >
         <Suspense fallback={<PageLoader />}>
           <Routes>
-            <Route path="/" element={<Navigate to="/jobs" replace />} />
+            <Route path="/" element={<Navigate to="/dashboard" replace />} />
             <Route path="/dashboard" element={<DashboardView />} />
             <Route path="/jobs" element={<JobTable refreshToken={refreshToken} pageSize={jobPageSize} onPageSizeChange={setAndPersistPageSize} columns={jobColumns} onColumnsChange={setAndPersistColumns} mode="jobs" />} />
             <Route path="/reminders" element={<RemindersView />} />

job-tracker-ui/src/components/DashboardView.tsx

@@ -23,6 +23,7 @@ import AutoGraphIcon from "@mui/icons-material/AutoGraph";
 
 import { api } from "../api";
 import ViewStateNotice from "./ViewStateNotice";
+import OnboardingChecklist from "./OnboardingChecklist";
 import { getUserKeyFromToken } from "../themePrefs";
 import { useI18n } from "../i18n/I18nProvider";
 import { statusLabel } from "../pipeline";
@@ -287,6 +288,7 @@ export default function DashboardView() {
 
   return (
     <Box>
+      <OnboardingChecklist hasJobs={(stats?.total ?? 0) > 0} />
       <SectionCard
         sx={{
           backgroundColor: "background.paper",

job-tracker-ui/src/components/GoogleAuthCard.tsx

@@ -51,6 +51,7 @@ export default function GoogleAuthCard({ onSignedIn }: { onSignedIn?: () => void
   const { t } = useI18n();
   const [me, setMe] = useState<MeResponse | null>(null);
   const [working, setWorking] = useState(false);
+  const [allowRegistration, setAllowRegistration] = useState(false);
   const hostRef = useRef<HTMLDivElement | null>(null);
 
   const clientId = (process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID || "").trim();
@@ -72,6 +73,9 @@ export default function GoogleAuthCard({ onSignedIn }: { onSignedIn?: () => void
 
   useEffect(() => {
     void refreshMe();
+    api.get<{ allowRegistration: boolean }>("/auth/config").then((res) => {
+      setAllowRegistration(Boolean(res.data?.allowRegistration));
+    }).catch(() => setAllowRegistration(false));
   }, []);
 
   useEffect(() => {
@@ -156,7 +160,7 @@ export default function GoogleAuthCard({ onSignedIn }: { onSignedIn?: () => void
 
           {!signedIn ? (
             <Typography sx={{ color: "text.secondary" }}>
-              {t("googleSignInHint")}
+              {allowRegistration ? t("googleSignInHintSelfServe") : t("googleSignInHint")}
             </Typography>
           ) : me?.provider === "local" ? (
             <Typography sx={{ color: "text.secondary" }}>

job-tracker-ui/src/components/JobDetailsDialog.tsx

@@ -1132,6 +1132,7 @@ export default function JobDetailsDialog({ open, jobId, onClose, initialTab = 0,
             <MatchScoreCard score={matchScore} loading={loadingMatchScore} />
             {loadingCandidateFit ? <Box sx={{ py: 4, display: "flex", justifyContent: "center" }}><CircularProgress size={28} /></Box> : candidateFit ? (
               <Box sx={{ display: "flex", flexDirection: "column", gap: 2.5 }}>
+                <Typography variant="caption" sx={{ color: "text.secondary", display: "block", mt: -1 }}>{t("jobDetailsAiFitHint")}</Typography>
                 <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 1, flexWrap: "wrap" }}>
                   <Box><Typography variant="overline">{t("jobDetailsHowYouMatch")}</Typography><Typography sx={{ whiteSpace: "pre-wrap" }}>{candidateFit.matchSummary}</Typography></Box>
                   <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap", alignItems: "center" }}>
@@ -1230,13 +1231,14 @@ function MatchScoreCard({ score, loading }: { score: MatchScore | null; loading:
     <Box sx={{ p: 1.75, mb: 2, borderRadius: 3, border: "1px solid", borderColor: "divider", backgroundColor: "background.default" }}>
       <Box sx={{ display: "flex", gap: 2.5, alignItems: "center", flexWrap: "wrap", mb: 1.5 }}>
         {score.hasEnoughSignal ? (
-          <Box sx={{ position: "relative", width: 92, height: 92, flexShrink: 0 }}>
-            <CircularProgress variant="determinate" value={100} size={92} thickness={4} sx={{ color: "divider", position: "absolute" }} />
+          <Box role="img" aria-label={`${t("matchScoreTitle")}: ${score.score}%`} sx={{ position: "relative", width: 92, height: 92, flexShrink: 0 }}>
+            <CircularProgress variant="determinate" value={100} size={92} thickness={4} aria-hidden="true" sx={{ color: "divider", position: "absolute" }} />
             <CircularProgress
               variant="determinate"
               value={score.score}
               size={92}
               thickness={4}
+              aria-hidden="true"
               color={color === "inherit" ? "primary" : color}
               sx={{ position: "absolute", "& .MuiCircularProgress-circle": { strokeLinecap: "round" } }}
             />

job-tracker-ui/src/components/JobTable.tsx

@@ -110,6 +110,19 @@ function parseTags(raw?: string | null): string[] {
 }
 
 
+function EmptyJobsState({ firstTime, onOpenSettings, t }: { firstTime: boolean; onOpenSettings: () => void; t: (key: any) => string }) {
+  if (!firstTime) {
+    return <Typography sx={{ py: 2, textAlign: "center", color: "text.secondary" }}>{t("jobTableNoJobsFound")}</Typography>;
+  }
+  return (
+    <Box sx={{ py: 4, textAlign: "center" }}>
+      <Typography sx={{ fontWeight: 800, mb: 0.5 }}>{t("jobTableEmptyFirstTimeTitle")}</Typography>
+      <Typography sx={{ color: "text.secondary", mb: 1.5, maxWidth: 440, mx: "auto" }}>{t("jobTableEmptyFirstTimeBody")}</Typography>
+      <Button variant="text" onClick={onOpenSettings}>{t("jobTableEmptyFirstTimeBookmarklet")}</Button>
+    </Box>
+  );
+}
+
 function generateOverview(job: JobApplication): string {
   if (job.fullSummary) return job.fullSummary;
   if (job.shortSummary) return job.shortSummary;
@@ -220,6 +233,12 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
     return jobs.filter((job) => needsWorkflowWork(job));
   }, [jobs, readinessFilter]);
 
+  // Distinguishes "you have zero jobs, period" from "no results match your filters" so the
+  // empty state can actually help a first-time user instead of just saying "nothing here".
+  const noFiltersActive = !debouncedSearch.trim() && statusFilter === "All" && companyFilterId === "All"
+    && !debouncedLocation.trim() && !needsFollowUpOnly && readinessFilter === "all";
+  const isFirstTimeEmpty = mode === "jobs" && total === 0 && noFiltersActive;
+
   const selectedIdSet = useMemo(() => new Set(selectedIds), [selectedIds]);
 
   const selectedAllOnPage = filteredJobs.length > 0 && filteredJobs.every((job) => selectedIdSet.has(job.id));
@@ -629,7 +648,9 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
                 </Paper>
               );
             })}
-            {filteredJobs.length === 0 && !jobsResource.loading && !jobsResource.error ? <Typography sx={{ py: 2, textAlign: "center" }}>{t("jobTableNoJobsFound")}</Typography> : null}
+            {filteredJobs.length === 0 && !jobsResource.loading && !jobsResource.error ? (
+              <EmptyJobsState firstTime={isFirstTimeEmpty} onOpenSettings={() => navigate("/settings")} t={t} />
+            ) : null}
           </Stack>
         ) : (
           <Box sx={{ overflowX: "auto" }}>
@@ -721,7 +742,9 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
                     </React.Fragment>
                   );
                 })}
-                {filteredJobs.length === 0 && !jobsResource.loading && !jobsResource.error ? <TableRow><TableCell colSpan={visibleDesktopColumns}><Typography sx={{ py: 2, textAlign: "center" }}>{t("jobTableNoJobsFound")}</Typography></TableCell></TableRow> : null}
+                {filteredJobs.length === 0 && !jobsResource.loading && !jobsResource.error ? (
+                  <TableRow><TableCell colSpan={visibleDesktopColumns}><EmptyJobsState firstTime={isFirstTimeEmpty} onOpenSettings={() => navigate("/settings")} t={t} /></TableCell></TableRow>
+                ) : null}
               </TableBody>
             </Table>
           </Box>

job-tracker-ui/src/components/KanbanBoard.tsx

@@ -101,7 +101,18 @@ export default function KanbanBoard() {
       />
 
       {!jobsResource.loading && !jobsResource.error ? (
-        <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "repeat(3, 1fr)", xl: "repeat(6, 1fr)" }, gap: 2, alignItems: "start" }}>
+        <Box
+          sx={{
+            display: { xs: "flex", md: "grid" },
+            gridTemplateColumns: { md: "repeat(3, 1fr)", xl: "repeat(6, 1fr)" },
+            gap: 2,
+            alignItems: "start",
+            overflowX: { xs: "auto", md: "visible" },
+            scrollSnapType: { xs: "x mandatory", md: "none" },
+            pb: { xs: 1, md: 0 },
+            "-webkit-overflow-scrolling": "touch",
+          }}
+        >
           {STATUSES.map((status) => {
             const c = toneColor(theme, status);
             const list = groups.get(status) ?? [];
@@ -114,6 +125,8 @@ export default function KanbanBoard() {
                   p: 1.5,
                   borderRadius: 3,
                   minHeight: 220,
+                  flex: { xs: "0 0 85vw", md: "none" },
+                  scrollSnapAlign: { xs: "start", md: "none" },
                   border: "1px solid",
                   borderColor: "divider",
                   background: theme.palette.mode === "dark" ? alpha(theme.palette.common.white, 0.02) : alpha(theme.palette.text.primary, 0.015),

job-tracker-ui/src/components/OnboardingChecklist.tsx

@@ -0,0 +1,81 @@
+import React, { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { Box, Button, IconButton, Paper, Stack, Typography } from "@mui/material";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import RadioButtonUncheckedIcon from "@mui/icons-material/RadioButtonUnchecked";
+import CloseIcon from "@mui/icons-material/Close";
+import { alpha, useTheme } from "@mui/material/styles";
+
+import { api } from "../api";
+import { getUserKeyFromToken } from "../themePrefs";
+import { useI18n } from "../i18n/I18nProvider";
+
+function dismissKey() {
+  return `onboardingChecklistDismissed:${getUserKeyFromToken()}`;
+}
+
+type MeResponse = { profileCvText?: string | null };
+
+export default function OnboardingChecklist({ hasJobs }: { hasJobs: boolean }) {
+  const theme = useTheme();
+  const navigate = useNavigate();
+  const { t } = useI18n();
+  const [hasCv, setHasCv] = useState<boolean | null>(null);
+  const [dismissed, setDismissed] = useState(() => window.localStorage.getItem(dismissKey()) === "1");
+
+  useEffect(() => {
+    let active = true;
+    api.get<MeResponse>("/auth/me")
+      .then((r) => { if (active) setHasCv(Boolean(r.data?.profileCvText?.trim())); })
+      .catch(() => { if (active) setHasCv(false); });
+    return () => { active = false; };
+  }, []);
+
+  const allDone = hasCv === true && hasJobs;
+  if (dismissed || allDone || hasCv === null) return null;
+
+  const dismiss = () => {
+    window.localStorage.setItem(dismissKey(), "1");
+    setDismissed(true);
+  };
+
+  const steps = [
+    { done: hasCv, label: t("onboardingStepCv"), action: () => navigate("/profile"), actionLabel: t("onboardingStepCvAction") },
+    { done: hasJobs, label: t("onboardingStepJob"), action: () => navigate("/jobs"), actionLabel: t("onboardingStepJobAction") },
+    { done: hasCv === true && hasJobs, label: t("onboardingStepMatch"), action: () => navigate("/jobs"), actionLabel: t("onboardingStepMatchAction") },
+  ];
+
+  return (
+    <Paper
+      sx={{
+        p: 2.25,
+        mb: 2,
+        borderRadius: 4,
+        border: "1px solid",
+        borderColor: alpha(theme.palette.primary.main, 0.25),
+        background: alpha(theme.palette.primary.main, 0.04),
+        position: "relative",
+      }}
+    >
+      <IconButton size="small" onClick={dismiss} aria-label={t("onboardingDismiss")} sx={{ position: "absolute", top: 8, right: 8 }}>
+        <CloseIcon fontSize="small" />
+      </IconButton>
+      <Typography sx={{ fontWeight: 900, mb: 0.25 }}>{t("onboardingTitle")}</Typography>
+      <Typography variant="body2" sx={{ color: "text.secondary", mb: 1.5 }}>{t("onboardingBody")}</Typography>
+      <Stack spacing={1}>
+        {steps.map((step) => (
+          <Box key={step.label} sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 1.5, flexWrap: "wrap" }}>
+            <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+              {step.done ? <CheckCircleIcon fontSize="small" color="success" /> : <RadioButtonUncheckedIcon fontSize="small" sx={{ color: "text.secondary" }} />}
+              <Typography variant="body2" sx={{ fontWeight: step.done ? 400 : 700, color: step.done ? "text.secondary" : "text.primary", textDecoration: step.done ? "line-through" : "none" }}>
+                {step.label}
+              </Typography>
+            </Box>
+            {!step.done ? <Button size="small" variant="text" onClick={step.action}>{step.actionLabel}</Button> : null}
+          </Box>
+        ))}
+      </Stack>
+    </Paper>
+  );
+}

job-tracker-ui/src/i18n/translations.ts

@@ -18,6 +18,12 @@ export const translations = {
     home: "Home",
     analytics: "Analytics",
     overview: "Overview",
+    dashboardPageSubtitle: "Your search at a glance — response rate, funnel, and what needs attention.",
+    jobsPageSubtitle: "Filter, search, and manage every application in one table.",
+    kanbanPageSubtitle: "Drag a card between stages to update its status.",
+    remindersPageSubtitle: "Everything due for follow-up, soonest first.",
+    correspondencePageSubtitle: "Every message linked to a job, in one inbox.",
+    gmailReviewPageSubtitle: "Review Gmail threads before linking them to a job.",
     account: "Account",
     profile: "Profile",
     admin: "Admin",
@@ -306,6 +312,15 @@ export const translations = {
     cropDialogSave: "Save image",
     dashboardOverviewTitle: "Dashboard overview",
     dashboardHeroLabel: "Job search overview",
+    onboardingTitle: "Get set up",
+    onboardingBody: "A few steps to get the most out of Jobbjakt.",
+    onboardingDismiss: "Dismiss",
+    onboardingStepCv: "Add your CV",
+    onboardingStepCvAction: "Add CV",
+    onboardingStepJob: "Import your first job",
+    onboardingStepJobAction: "Add job",
+    onboardingStepMatch: "Check your CV match score on a job",
+    onboardingStepMatchAction: "Open jobs",
     dashboardResponseRate: "{rate}% response rate",
     dashboardMonthsShort: "{count} mo",
     dashboardAppliedCount: "{count} applied",
@@ -606,6 +621,7 @@ export const translations = {
     googleAvailableToLink: "Available to link",
     googleLinkedDate: "Linked {date}",
     googleSignInHint: "Sign in with a Google account that has already been linked to your Jobbjakt user.",
+    googleSignInHintSelfServe: "Continue with Google. New here? We'll create your account automatically.",
     continueWithGoogle: "Continue with Google",
     signInWithGoogle: "Sign in with Google",
     linkWithGoogle: "Link with Google",
@@ -750,6 +766,9 @@ export const translations = {
     jobTableOverview: "Overview",
     jobTableNoSummaryYet: "No summary yet.",
     jobTableNoJobsFound: "No jobs found.",
+    jobTableEmptyFirstTimeTitle: "No jobs yet — let's fix that.",
+    jobTableEmptyFirstTimeBody: "Click \"Add job\" above to add one manually, or paste a job posting URL. There's also a one-click bookmarklet that captures a posting straight from the page you're viewing.",
+    jobTableEmptyFirstTimeBookmarklet: "Set up the bookmarklet",
     jobTableSetStatus: "Set {status}",
     editJobTitle: "Edit job",
     editJobIntro: "Update job details, timeline status, documents, and notes from one editing workspace.",
@@ -894,6 +913,7 @@ export const translations = {
     jobDetailsFollowUpSent: "Follow-up sent and logged.",
     jobDetailsFollowUpSendFailed: "Failed to send follow-up.",
     jobDetailsHowYouMatch: "How you match",
+    jobDetailsAiFitHint: "AI opinion — strengths, gaps, and a tailored pitch based on your CV and this posting.",
     matchScoreTitle: "Match score",
     matchScoreLoading: "Scoring your CV against this role…",
     matchScoreBand_Strong: "Strong match",
@@ -902,7 +922,7 @@ export const translations = {
     matchScoreBand_Unknown: "Not enough signal",
     matchScoreKeywordsCovered: "{matched}/{total} keywords",
     matchScoreNoSignal: "Add more CV detail or a fuller job description to get a reliable score.",
-    matchScoreDeterministicHint: "Deterministic keyword coverage — no AI, so the score is stable and repeatable.",
+    matchScoreDeterministicHint: "Deterministic keyword coverage — no AI, so the score is stable and repeatable. For a written opinion on strengths and gaps, see the AI section below.",
     matchScoreMatched: "Matched keywords",
     matchScoreMissing: "Missing keywords",
     matchScoreNoneYet: "No matches found yet.",
@@ -976,6 +996,12 @@ export const translations = {
     home: "Hjem",
     analytics: "Analyse",
     overview: "Oversikt",
+    dashboardPageSubtitle: "Søket ditt i korte trekk — svarrate, trakt og hva som trenger oppmerksomhet.",
+    jobsPageSubtitle: "Filtrer, søk og administrer alle søknader i én tabell.",
+    kanbanPageSubtitle: "Dra et kort mellom stadier for å oppdatere status.",
+    remindersPageSubtitle: "Alt som trenger oppfølging, snarest først.",
+    correspondencePageSubtitle: "Alle meldinger koblet til en jobb, i én innboks.",
+    gmailReviewPageSubtitle: "Se gjennom Gmail-tråder før du kobler dem til en jobb.",
     account: "Konto",
     profile: "Profil",
     admin: "Admin",
@@ -1264,6 +1290,15 @@ export const translations = {
     cropDialogSave: "Lagre bilde",
     dashboardOverviewTitle: "Dashboard-oversikt",
     dashboardHeroLabel: "Oversikt over jobbsøket",
+    onboardingTitle: "Kom i gang",
+    onboardingBody: "Noen få steg for å få mest mulig ut av Jobbjakt.",
+    onboardingDismiss: "Lukk",
+    onboardingStepCv: "Legg til CV-en din",
+    onboardingStepCvAction: "Legg til CV",
+    onboardingStepJob: "Importer din første jobb",
+    onboardingStepJobAction: "Legg til jobb",
+    onboardingStepMatch: "Sjekk CV-matchscoren på en jobb",
+    onboardingStepMatchAction: "Åpne jobber",
     dashboardResponseRate: "{rate}% svarrate",
     dashboardMonthsShort: "{count} md",
     dashboardAppliedCount: "{count} søkt",
@@ -1564,6 +1599,7 @@ export const translations = {
     googleAvailableToLink: "Tilgjengelig for kobling",
     googleLinkedDate: "Koblet {date}",
     googleSignInHint: "Logg inn med en Google-konto som allerede er koblet til Jobbjakt-brukeren din.",
+    googleSignInHintSelfServe: "Fortsett med Google. Ny her? Vi oppretter kontoen din automatisk.",
     continueWithGoogle: "Fortsett med Google",
     signInWithGoogle: "Logg inn med Google",
     linkWithGoogle: "Koble til med Google",
@@ -1708,6 +1744,9 @@ export const translations = {
     jobTableOverview: "Oversikt",
     jobTableNoSummaryYet: "Ingen oppsummering ennå.",
     jobTableNoJobsFound: "Ingen jobber funnet.",
+    jobTableEmptyFirstTimeTitle: "Ingen jobber ennå — la oss fikse det.",
+    jobTableEmptyFirstTimeBody: "Klikk \"Legg til jobb\" over for å legge til en manuelt, eller lim inn en lenke til en stillingsannonse. Det finnes også et bokmerke som fanger en annonse rett fra siden du ser på.",
+    jobTableEmptyFirstTimeBookmarklet: "Sett opp bokmerket",
     jobTableSetStatus: "Sett {status}",
     editJobTitle: "Rediger jobb",
     editJobIntro: "Oppdater jobbdetaljer, status i tidslinjen, dokumenter og notater fra ett redigeringsområde.",
@@ -1852,6 +1891,7 @@ export const translations = {
     jobDetailsFollowUpSent: "Oppfølging sendt og loggført.",
     jobDetailsFollowUpSendFailed: "Kunne ikke sende oppfølging.",
     jobDetailsHowYouMatch: "Slik matcher du",
+    jobDetailsAiFitHint: "AI-vurdering — styrker, svakheter og et skreddersydd pitch basert på CV-en din og denne annonsen.",
     matchScoreTitle: "Match-score",
     matchScoreLoading: "Vurderer CV-en mot denne stillingen…",
     matchScoreBand_Strong: "Sterk match",
@@ -1860,7 +1900,7 @@ export const translations = {
     matchScoreBand_Unknown: "For lite grunnlag",
     matchScoreKeywordsCovered: "{matched}/{total} nøkkelord",
     matchScoreNoSignal: "Legg til mer CV-innhold eller en fyldigere stillingstekst for en pålitelig score.",
-    matchScoreDeterministicHint: "Deterministisk nøkkelorddekning — ingen AI, så scoren er stabil og repeterbar.",
+    matchScoreDeterministicHint: "Deterministisk nøkkelorddekning — ingen AI, så scoren er stabil og repeterbar. For en skriftlig vurdering av styrker og svakheter, se AI-seksjonen under.",
     matchScoreMatched: "Treff på nøkkelord",
     matchScoreMissing: "Manglende nøkkelord",
     matchScoreNoneYet: "Ingen treff ennå.",

job-tracker-ui/src/layout/AppShell.tsx

@@ -59,6 +59,7 @@ const SIDEBAR_SELECTED_ICON = "#a5b4fc";
 
 export default function AppShell({
   pageTitle,
+  pageSubtitle,
   breadcrumbs,
   pathname,
   nav,
@@ -76,6 +77,7 @@ export default function AppShell({
   children,
 }: {
   pageTitle: string;
+  pageSubtitle?: string;
   breadcrumbs: string[];
   pathname: string;
   nav: NavItem[];
@@ -481,6 +483,11 @@ export default function AppShell({
               <Typography variant="h5" sx={{ fontWeight: 600, overflowWrap: "anywhere" }}>
                 {pageTitle}
               </Typography>
+              {pageSubtitle ? (
+                <Typography variant="body2" sx={{ color: "text.secondary", mt: 0.25, overflowWrap: "anywhere" }}>
+                  {pageSubtitle}
+                </Typography>
+              ) : null}
             </Box>
           </Box>
 

job-tracker-ui/src/views/CorrespondenceInboxPage.tsx

@@ -82,10 +82,11 @@ export default function CorrespondenceInboxPage() {
             Cross-job view of imported correspondence and Gmail-linked history.
           </Typography>
         </Box>
-        <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
+        <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap", alignItems: "center" }}>
           <Chip icon={<MailOutlineIcon />} label={`${items.length} items`} variant="outlined" />
           <Chip label={`${filteredSummary.linked} linked`} variant="outlined" color={filteredSummary.linked > 0 ? "success" : "default"} />
           <Chip label={`${filteredSummary.inbound} inbound`} variant="outlined" />
+          <Button variant="outlined" size="small" onClick={() => navigate("/correspondence/review")}>Review Gmail queue</Button>
         </Box>
       </Box>
 

job-tracker-ui/src/views/GmailReviewPage.tsx

@@ -138,6 +138,7 @@ export default function GmailReviewPage() {
           <Button variant="outlined" onClick={() => void load()} disabled={loading || syncing}>
             {loading ? "Loading..." : "Refresh"}
           </Button>
+          <Button variant="text" onClick={() => navigate("/correspondence")}>Back to inbox</Button>
         </Box>
       </Box>
 

job-tracker-ui/src/views/LandingPage.tsx

@@ -50,7 +50,7 @@ export default function LandingPage() {
     let active = true;
     api
       .get("/auth/me")
-      .then(() => { if (active) navigate("/jobs", { replace: true }); })
+      .then(() => { if (active) navigate("/dashboard", { replace: true }); })
       .catch(() => { if (active) setChecking(false); });
     return () => { active = false; };
   }, [navigate]);

job-tracker-ui/src/views/LoginPage.tsx

@@ -33,7 +33,7 @@ export default function LoginPage() {
   const [rememberMe, setRememberMe] = useState(() => getRememberMePref());
   const [loading, setLoading] = useState(false);
 
-  const nextPath = (location?.state?.from as string | undefined) ?? "/jobs";
+  const nextPath = (location?.state?.from as string | undefined) ?? "/dashboard";
 
   useEffect(() => {
     api