fix(workspace): clear native package and navigation readiness gates

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import {
   BlockerFunction, useBeforeUnload, useBlocker, useLocation, useNavigate, useParams, useSearchParams,
 } from "react-router-dom";
@@ -75,6 +75,7 @@ export function ApplicationWorkspace({
   const { confirm } = useConfirm();
   const [params, setParams] = useSearchParams();
   const section = sectionOverride ?? workspaceSection(params.get("section"));
+  const sectionId = useId();
 
   const [overview, setOverview] = useState<WorkspaceOverview | null>(null);
   const [error, setError] = useState<ViewResourceError | null>(null);
@@ -139,9 +140,17 @@ export function ApplicationWorkspace({
     load();
   }, [load]);
 
-  const go = (next: WorkspaceSectionKey) => {
-    if (onSectionChange) onSectionChange(next);
-    else setParams({ section: next }, { replace: true, state: location.state });
+  const go = (next: string) => {
+    if (next === "career-profile") {
+      navigate("/career?section=profile");
+      return;
+    }
+    if (onSectionChange) onSectionChange(workspaceSection(next));
+    else setParams((current) => {
+      const updated = new URLSearchParams(current);
+      updated.set("section", next);
+      return updated;
+    }, { state: location.state });
   };
   const close = onClose ?? (() => {
     const state = location.state as { from?: unknown; focusJobId?: unknown } | null;
@@ -200,11 +209,11 @@ export function ApplicationWorkspace({
           aria-label={t("workspaceSections")}
           sx={{ px: { xs: 0.5, sm: 1.5 }, borderTop: 1, borderColor: "divider", minHeight: 46 }}
         >
-          {WORKSPACE_SECTIONS.map((s) => <Tab key={s.key} value={s.key} label={workspaceSectionLabel(t, s.key)} sx={{ minHeight: 46, fontWeight: 700 }} />)}
+          {WORKSPACE_SECTIONS.map((s) => <Tab key={s.key} id={`${sectionId}-${s.key}`} aria-controls={`${sectionId}-panel`} value={s.key} label={workspaceSectionLabel(t, s.key)} sx={{ minHeight: 46, fontWeight: 700 }} />)}
         </Tabs>
       </Paper>
 
-      <Box sx={{ display: "grid", gap: 2, minWidth: 0 }}>
+      <Box role="tabpanel" id={`${sectionId}-panel`} aria-labelledby={`${sectionId}-${section}`} tabIndex={0} sx={{ display: "grid", gap: 2, minWidth: 0 }}>
         {section === "overview" && jobId > 0 && <ApplicationStatusSuggestion jobId={jobId} onApplied={load} />}
         {section === "overview" && <OverviewSection overview={overview} onGo={go} onReload={load} onEdit={() => setEditOpen(true)} />}
         {section === "analysis" && jobId > 0 && (
@@ -296,7 +305,7 @@ function ApplicationProgress({ status }: { status: string }) {
 
 function OverviewSection({ overview, onGo, onReload, onEdit }: {
   overview: WorkspaceOverview | null;
-  onGo: (s: WorkspaceSectionKey) => void;
+  onGo: (s: string) => void;
   onReload: () => void;
   onEdit: () => void;
 }) {
@@ -304,9 +313,9 @@ function OverviewSection({ overview, onGo, onReload, onEdit }: {
   const stats = useMemo(() => overview ? [
     { icon: <DescriptionOutlinedIcon fontSize="small" />, label: t("workspaceCv"), value: overview.cv.variantName ?? (overview.cv.hasTailoredCvText ? t("workspaceTailoredText") : t("workspaceNotPrepared")), ok: !!overview.cv.variantId || overview.cv.hasTailoredCvText, go: "cv" as const },
     { icon: <MailOutlineIcon fontSize="small" />, label: t("jobDetailsCoverLetter"), value: overview.hasCoverLetter ? t("workspaceReady") : t("workspaceNotWritten"), ok: overview.hasCoverLetter, go: "cover-letter" as const },
-    { icon: <FolderOutlinedIcon fontSize="small" />, label: t("workspaceDocuments"), value: overview.documentCount ? t("workspaceAttachedCount", { count: overview.documentCount }) : t("assetsNone"), ok: overview.documentCount > 0, go: "overview" as const },
+    { icon: <FolderOutlinedIcon fontSize="small" />, label: t("workspaceDocuments"), value: overview.documentCount ? t("workspaceAttachedCount", { count: overview.documentCount }) : t("assetsNone"), ok: overview.documentCount > 0, go: "documents" as const },
     { icon: <AutoFixHighIcon fontSize="small" />, label: t("workspaceAiSuggestions"), value: overview.aiInteractionCount ? t("workspaceSavedCount", { count: overview.aiInteractionCount }) : t("workspaceNoneYet"), ok: overview.aiInteractionCount > 0, go: "analysis" as const },
-    { icon: <ChecklistIcon fontSize="small" />, label: t("workspaceChecklist"), value: overview.checklistProgress ? t("workspaceDoneCount", { completed: overview.checklistProgress.completed, total: overview.checklistProgress.total }) : "—", ok: (overview.checklistProgress?.percent ?? 0) === 100, go: "overview" as const },
+    { icon: <ChecklistIcon fontSize="small" />, label: t("workspaceChecklist"), value: overview.checklistProgress ? t("workspaceDoneCount", { completed: overview.checklistProgress.completed, total: overview.checklistProgress.total }) : "—", ok: (overview.checklistProgress?.percent ?? 0) === 100, go: "checklist" as const },
   ] : [], [overview, t]);
 
   if (!overview) {
@@ -341,7 +350,7 @@ function OverviewSection({ overview, onGo, onReload, onEdit }: {
           <Typography component="h3" variant="subtitle1" sx={{ fontWeight: 700 }}>{nextStepLabel}</Typography>
           <Typography color="text.secondary" sx={{ mb: 1.5 }}>{nextStepReason}</Typography>
           <Button variant="contained" endIcon={<ArrowForwardIcon />}
-            onClick={() => overview.nextStep?.section && onGo(overview.nextStep.section as WorkspaceSectionKey)}>
+            onClick={() => onGo(overview.nextStep?.key === "complete-career-profile" ? "career-profile" : overview.nextStep?.section ?? "checklist")}>
             {nextStepLabel}
           </Button>
         </PageSection>
@@ -389,6 +398,18 @@ function OverviewSection({ overview, onGo, onReload, onEdit }: {
 
 function OverviewDetails({ jobId, overview, onReload, onEdit }: { jobId: number; overview: WorkspaceOverview; onReload: () => void; onEdit: () => void }) {
   const { t } = useI18n();
+  const [params] = useSearchParams();
+  const prefix = useId();
+  const triggers = useRef<Record<string, HTMLDivElement | null>>({});
+  const targets: Record<string, string> = { "job-details": "details", checklist: "tasks", documents: "documents", portfolio: "documents", timeline: "timeline", communication: "communication" };
+  const key = params.get("section") ?? "";
+  const target = Object.prototype.hasOwnProperty.call(targets, key) ? targets[key] : undefined;
+  const [expanded, setExpanded] = useState<Record<string, boolean>>({});
+  useEffect(() => {
+    if (!target) return;
+    setExpanded((current) => ({ ...current, [target]: true }));
+    triggers.current[target]?.focus();
+  }, [target]);
   const panels = [
     { id: "details", title: t("workspaceJobDetails"), content: <JobDetailsSection overview={overview} onEdit={onEdit} /> },
     { id: "tasks", title: t("workspaceChecklist"), content: <ApplicationChecklist jobId={jobId} onChanged={onReload} /> },
@@ -400,11 +421,11 @@ function OverviewDetails({ jobId, overview, onReload, onEdit }: { jobId: number;
   return (
     <Box>
       {panels.map((panel) => (
-        <Accordion key={panel.id} disableGutters elevation={0} sx={{ border: 1, borderColor: "divider", "&:not(:last-child)": { borderBottom: 0 }, "&:before": { display: "none" } }}>
-          <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls={`${panel.id}-content`} id={`${panel.id}-header`}>
+        <Accordion key={panel.id} expanded={!!expanded[panel.id]} onChange={(_, open) => setExpanded((current) => ({ ...current, [panel.id]: open }))} disableGutters elevation={0} sx={{ border: 1, borderColor: "divider", "&:not(:last-child)": { borderBottom: 0 }, "&:before": { display: "none" } }}>
+          <AccordionSummary ref={(node: HTMLDivElement | null) => { triggers.current[panel.id] = node; }} expandIcon={<ExpandMoreIcon />} aria-controls={`${prefix}-${panel.id}-content`} id={`${prefix}-${panel.id}-header`}>
             <Typography sx={{ fontWeight: 750 }}>{panel.title}</Typography>
           </AccordionSummary>
-          <AccordionDetails id={`${panel.id}-content`} sx={{ px: { xs: 1, sm: 2 }, pb: 2 }}>{panel.content}</AccordionDetails>
+          <AccordionDetails sx={{ px: { xs: 1, sm: 2 }, pb: 2 }}>{panel.content}</AccordionDetails>
         </Accordion>
       ))}
     </Box>