feat(workspace): add application intelligence

Phase 5.3. Three read-only reads that answer "how suitable is this job", "how
does my experience match", "what am I missing", "what happened previously".

Timeline (GET /{id}/timeline) is an interpretation layer over JobEvent, which
stays the source of historical truth. Each row gains a readable summary, a
category and a milestone flag; events group by day. Milestones are returned
unfiltered, because narrowing the detail must not hide what actually happened.

Job analysis (GET /{id}/analysis) extracts role, company, location, employment
type, seniority, salary, technologies, skills, responsibilities and keywords
from the advert, reusing the existing SkillTagger so the vocabulary matches the
job importer. It also reports what the advert does NOT say, which is usually the
more useful half.

Career matching (GET /{id}/match) feeds the master CareerProfile into the same
JobCvMatchService the CV builder uses, so one application scores identically
whichever surface asks. It returns the score, matched and missing skills, and
which experience and project entries are the evidence for each match.

All three are deterministic and own no data — no new table, no new column, and
nothing writes to the CareerProfile, a CvVariant, or the JobApplication. The AI
narrative stays where it already was, in AiWorkspaceService's job-analysis and
career-match modules, generated only when the user asks and versioned by the
append-only AiInteraction history. Opening a section costs nothing and changes
nothing.

Frontend adds Timeline, Analysis and Match sections to the workspace, sharing
one loader so loading, empty and error states are consistent. The deterministic
answer renders first, with the AI panel below it.

345 backend tests, 104 frontend tests, type check, production build all pass
locally.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

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

@@ -0,0 +1,344 @@
+import React, { useCallback, useEffect, useState } from "react";
+
+import {
+  Alert, Box, Chip, Divider, LinearProgress, Paper, Skeleton, Stack, ToggleButton,
+  ToggleButtonGroup, Typography,
+} from "@mui/material";
+
+import { getApiErrorMessage } from "../api";
+import {
+  CareerMatch, JobAnalysis, TIMELINE_CATEGORY_LABELS, Timeline, applicationIntelligenceApi,
+} from "../applicationWorkspace";
+
+// Phase 5.3 — Application Intelligence sections for the workspace.
+//
+// Everything here renders a deterministic, read-only backend answer. No component triggers an AI
+// generation: that stays an explicit user action in AiWorkspacePanel, so nothing on this page can
+// silently spend a token or change the user's data.
+// docs/architecture/application-workspace.md.
+
+// One loader for all three sections: same fetch/loading/empty/error shape, so the sections stay
+// consistent and each one is just its own rendering.
+function useIntelligence<T>(load: () => Promise<T>, deps: React.DependencyList) {
+  const [data, setData] = useState<T | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const run = useCallback(load, deps);
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    run()
+      .then((result) => {
+        if (cancelled) return;
+        setData(result);
+        setError(null);
+      })
+      .catch((err) => {
+        if (!cancelled) setError(getApiErrorMessage(err, "Could not load this section."));
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [run]);
+
+  return { data, error, loading };
+}
+
+function SectionShell({ title, subtitle, loading, error, empty, emptyText, children }: {
+  title: string;
+  subtitle?: string;
+  loading: boolean;
+  error: string | null;
+  empty?: boolean;
+  emptyText?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <Paper sx={{ p: { xs: 2, sm: 2.5 }, borderRadius: 3 }}>
+      <Typography variant="subtitle2" sx={{ fontWeight: 800 }}>{title}</Typography>
+      {subtitle && <Typography variant="caption" color="text.secondary">{subtitle}</Typography>}
+      <Divider sx={{ my: 1.5 }} />
+      {loading ? (
+        <Stack spacing={1}>{[0, 1, 2].map((i) => <Skeleton key={i} variant="rounded" height={40} />)}</Stack>
+      ) : error ? (
+        <Alert severity="error">{error}</Alert>
+      ) : empty ? (
+        <Typography variant="body2" color="text.secondary">{emptyText}</Typography>
+      ) : (
+        children
+      )}
+    </Paper>
+  );
+}
+
+function Chips({ label, values, color }: { label: string; values: string[]; color?: "success" | "warning" | "default" }) {
+  if (values.length === 0) return null;
+  return (
+    <Box>
+      <Typography variant="caption" color="text.secondary" sx={{ fontWeight: 700 }}>{label}</Typography>
+      <Stack direction="row" flexWrap="wrap" gap={0.5} sx={{ mt: 0.5 }}>
+        {values.map((v) => (
+          <Chip key={v} size="small" label={v} variant="outlined"
+            color={color === "default" ? undefined : color} />
+        ))}
+      </Stack>
+    </Box>
+  );
+}
+
+function Bullets({ label, values }: { label: string; values: string[] }) {
+  if (values.length === 0) return null;
+  return (
+    <Box>
+      <Typography variant="caption" color="text.secondary" sx={{ fontWeight: 700 }}>{label}</Typography>
+      <Stack component="ul" spacing={0.5} sx={{ mt: 0.5, pl: 2.5, mb: 0 }}>
+        {values.map((v, i) => (
+          <Typography key={i} component="li" variant="body2">{v}</Typography>
+        ))}
+      </Stack>
+    </Box>
+  );
+}
+
+// ---------- Timeline ----------
+
+export function ApplicationTimeline({ jobId }: { jobId: number }) {
+  const [category, setCategory] = useState<string>("");
+  const { data, error, loading } = useIntelligence<Timeline>(
+    () => applicationIntelligenceApi.timeline(jobId, category || undefined),
+    [jobId, category],
+  );
+
+  const hasEvents = (data?.totalEvents ?? 0) > 0;
+
+  return (
+    <Stack spacing={2}>
+      {hasEvents && (data?.milestones.length ?? 0) > 0 && (
+        <Paper sx={{ p: 2, borderRadius: 3 }}>
+          <Typography variant="subtitle2" sx={{ fontWeight: 800, mb: 1 }}>Milestones</Typography>
+          <Stack spacing={0.75}>
+            {(data?.milestones ?? []).map((m) => (
+              <Stack key={m.id} direction="row" spacing={1} justifyContent="space-between" alignItems="baseline">
+                <Typography variant="body2" sx={{ fontWeight: 600 }}>{m.summary}</Typography>
+                <Typography variant="caption" color="text.secondary">
+                  {new Date(m.at).toLocaleDateString()}
+                </Typography>
+              </Stack>
+            ))}
+          </Stack>
+        </Paper>
+      )}
+
+      <SectionShell
+        title="Timeline"
+        subtitle="Everything recorded for this application, newest first."
+        loading={loading}
+        error={error}
+        empty={!hasEvents}
+        emptyText="Nothing has happened yet. Activity appears here as you move the application along."
+      >
+        {/* SectionShell takes children as a prop, so this JSX is built before it decides whether to
+            render it — every access has to tolerate a null `data`. */}
+        <Stack spacing={2}>
+          {(data?.categories.length ?? 0) > 1 && (
+            <ToggleButtonGroup
+              size="small"
+              exclusive
+              value={category}
+              onChange={(_e, next) => setCategory(next ?? "")}
+              aria-label="Filter timeline by category"
+              sx={{ flexWrap: "wrap" }}
+            >
+              <ToggleButton value="" aria-label="All events">All</ToggleButton>
+              {(data?.categories ?? []).map((c) => (
+                <ToggleButton key={c} value={c} aria-label={TIMELINE_CATEGORY_LABELS[c] ?? c}>
+                  {TIMELINE_CATEGORY_LABELS[c] ?? c}
+                </ToggleButton>
+              ))}
+            </ToggleButtonGroup>
+          )}
+
+          {(data?.days.length ?? 0) === 0 ? (
+            <Typography variant="body2" color="text.secondary">No events in this category.</Typography>
+          ) : (
+            (data?.days ?? []).map((day) => (
+              <Box key={day.date}>
+                <Typography variant="caption" sx={{ fontWeight: 800, textTransform: "uppercase", letterSpacing: ".06em", color: "text.secondary" }}>
+                  {day.label}
+                </Typography>
+                <Stack spacing={1} sx={{ mt: 0.75, pl: 1.5, borderLeft: "2px solid", borderColor: "divider" }}>
+                  {day.events.map((e) => (
+                    <Box key={e.id} sx={{ pl: 1.5 }}>
+                      <Stack direction="row" spacing={0.75} alignItems="center" flexWrap="wrap">
+                        <Typography variant="body2" sx={{ fontWeight: e.isMilestone ? 700 : 500 }}>
+                          {e.summary}
+                        </Typography>
+                        {e.isMilestone && <Chip size="small" label="Milestone" color="primary" variant="outlined" />}
+                      </Stack>
+                      {e.detail && (
+                        <Typography variant="caption" color="text.secondary">{e.detail}</Typography>
+                      )}
+                    </Box>
+                  ))}
+                </Stack>
+              </Box>
+            ))
+          )}
+        </Stack>
+      </SectionShell>
+    </Stack>
+  );
+}
+
+// ---------- Analysis ----------
+
+export function ApplicationAnalysis({ jobId }: { jobId: number }) {
+  const { data, error, loading } = useIntelligence<JobAnalysis>(
+    () => applicationIntelligenceApi.analysis(jobId),
+    [jobId],
+  );
+
+  const facts: [string, string | null][] = data
+    ? [
+        ["Role", data.role],
+        ["Company", data.company],
+        ["Location", data.location],
+        ["Employment type", data.employmentType],
+        ["Seniority", data.seniority],
+        ["Salary", data.salary],
+      ]
+    : [];
+
+  return (
+    <SectionShell
+      title="Analysis"
+      subtitle="Read straight from the advert — no AI, same answer every time."
+      loading={loading}
+      error={error}
+    >
+      <Stack spacing={2}>
+        {data && !data.hasJobDescription && (
+          <Alert severity="info" sx={{ borderRadius: 2 }}>
+            No advert text saved yet. Paste it into the application to get requirements, technologies
+            and interview topics.
+          </Alert>
+        )}
+
+        <Typography variant="body2">{data?.summary}</Typography>
+
+        <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", sm: "160px 1fr" }, rowGap: 0.75, columnGap: 2 }}>
+          {facts.map(([k, v]) => (
+            <React.Fragment key={k}>
+              <Typography variant="body2" color="text.secondary">{k}</Typography>
+              <Typography variant="body2">{v ?? "—"}</Typography>
+            </React.Fragment>
+          ))}
+        </Box>
+
+        <Chips label="Technologies" values={data?.technologies ?? []} />
+        <Chips label="Skills" values={data?.skills ?? []} />
+        <Bullets label="Important requirements" values={data?.importantRequirements ?? []} />
+        <Bullets label="Responsibilities" values={data?.responsibilities ?? []} />
+        <Chips label="Likely interview topics" values={data?.interviewTopics ?? []} />
+        <Bullets label="Not stated in the advert" values={data?.missingInformation ?? []} />
+      </Stack>
+    </SectionShell>
+  );
+}
+
+// ---------- Match ----------
+
+export function ApplicationMatch({ jobId }: { jobId: number }) {
+  const { data, error, loading } = useIntelligence<CareerMatch>(
+    () => applicationIntelligenceApi.match(jobId),
+    [jobId],
+  );
+
+  return (
+    <SectionShell
+      title="Match"
+      subtitle="Your master career profile against this advert. Reads your profile; never changes it."
+      loading={loading}
+      error={error}
+    >
+      <Stack spacing={2}>
+        {data && !data.hasCareerProfile ? (
+          <Alert severity="info" sx={{ borderRadius: 2 }}>
+            No career profile yet. Matching compares the advert against your master profile — build it
+            once and every application scores against it.
+          </Alert>
+        ) : (
+          <>
+            <Box>
+              <Stack direction="row" justifyContent="space-between" alignItems="baseline">
+                <Typography variant="h4" sx={{ fontWeight: 900 }}>{data?.score}%</Typography>
+                <Chip size="small" label={data?.band} variant="outlined" />
+              </Stack>
+              <LinearProgress
+                variant="determinate"
+                value={data?.score ?? 0}
+                aria-label="Career match score"
+                sx={{ mt: 1, height: 8, borderRadius: 4 }}
+              />
+            </Box>
+
+            {data && !data.hasEnoughSignal && (
+              <Alert severity="warning" sx={{ borderRadius: 2 }}>
+                The advert is too short to score reliably. Paste the full text for a real match.
+              </Alert>
+            )}
+
+            <Chips label="Matched" values={data?.matchedSkills ?? []} color="success" />
+            <Chips label="Missing" values={data?.missingSkills ?? []} color="warning" />
+
+            {(data?.relevantExperience.length ?? 0) > 0 && (
+              <Box>
+                <Typography variant="caption" color="text.secondary" sx={{ fontWeight: 700 }}>
+                  Relevant experience
+                </Typography>
+                <Stack spacing={1} sx={{ mt: 0.5 }}>
+                  {(data?.relevantExperience ?? []).map((e, i) => (
+                    <Box key={i}>
+                      <Typography variant="body2" sx={{ fontWeight: 600 }}>{e.title}</Typography>
+                      {e.subtitle && <Typography variant="caption" color="text.secondary">{e.subtitle}</Typography>}
+                      <Stack direction="row" flexWrap="wrap" gap={0.5} sx={{ mt: 0.5 }}>
+                        {e.matched.map((k) => <Chip key={k} size="small" label={k} variant="outlined" />)}
+                      </Stack>
+                    </Box>
+                  ))}
+                </Stack>
+              </Box>
+            )}
+
+            {(data?.relevantProjects.length ?? 0) > 0 && (
+              <Box>
+                <Typography variant="caption" color="text.secondary" sx={{ fontWeight: 700 }}>
+                  Relevant projects
+                </Typography>
+                <Stack spacing={1} sx={{ mt: 0.5 }}>
+                  {(data?.relevantProjects ?? []).map((p, i) => (
+                    <Box key={i}>
+                      <Typography variant="body2" sx={{ fontWeight: 600 }}>{p.title}</Typography>
+                      {p.subtitle && <Typography variant="caption" color="text.secondary">{p.subtitle}</Typography>}
+                      <Stack direction="row" flexWrap="wrap" gap={0.5} sx={{ mt: 0.5 }}>
+                        {p.matched.map((k) => <Chip key={k} size="small" label={k} variant="outlined" />)}
+                      </Stack>
+                    </Box>
+                  ))}
+                </Stack>
+              </Box>
+            )}
+          </>
+        )}
+
+        <Bullets label="Suggestions" values={data?.suggestions ?? []} />
+      </Stack>
+    </SectionShell>
+  );
+}