[FE] Show competency criteria whose gradeable subsection has been deleted #826

This section is background and a suggested approach, not the ticket's source of truth. The User
Story and Acceptance Criteria define what must be true when the work is done.

In short

Nothing on the backend hides these criteria, so no backend change is needed. The tagging row
a criterion points at stores the subsection as a plain opaque string with no foreign key to course
content and no resolver, and criterion creation validates only that the string parses as a usage
key whose course matches the group's scope. Deleting the subsection leaves every one of those rows
untouched, so the endpoint that returns a competency's groups and criteria returns an orphaned
criterion like any other. The one backend requirement is a negative one, that this read path never
acquires a filter on whether the content still exists, which is recorded in Open Questions rather
than built here.

How the page decides a criterion is unresolvable. Subsection titles are resolved on the client
by taking the criterion's usage key, reading the outline of the course that key names, and finding
the matching node. A criterion counts as unresolvable when that outline was read and contains no
node with that usage key, and also when the outline could not be read at all, because the request
failed or the author has no access to the course: from the client the two cases look the same, so
both show the same "Content unavailable" chip. A request still in flight is the one state that is
not a verdict: while a course's outline loads, that course's criteria are replaced by one ghosted
placeholder rule box with a LoadingSpinner, so no criterion is labelled before its outline has
been checked.

Which course outlines the page loads, and through which query. Parse the course key out of
each criterion's usage key, reduce that to the distinct set of courses the competency's criteria
reference, and read one outline per course. The page needs exactly these outlines anyway to title
the criteria that do resolve, so this adds no request that titling does not already require. Read
them through the same cached query the course browse panel uses rather than a second request path,
so a course already expanded in the browse panel costs nothing to resolve here.

What the criterion shows in place of a title. The "Content unavailable" chip, with Paragon's
Warning icon next to the text, so the state is named in words rather than by an icon or a color
alone. The course the subsection belonged to is not repeated on the criterion: the rule box that
holds it already names the course in its "From within ..." header, which is how an author with
several unresolvable criteria tells which course each one came from.

Implementation specifics

• Extend the Selected Content components [FE] Create & View Competency Criteria #672 adds under
  src/taxonomy/competency-management/criteria-groups/, rather than introducing a parallel
  rendering path for these criteria.
• Derive the course key with getCourseKey from src/generic/key-utils.ts. It throws on a
  string it cannot parse, so wrap the call: a criterion whose stored key does not parse as a course
  block key is unresolvable with no course to name, and must not break the surrounding list.
• Read outlines through the query the course browse panel already uses.
  useCourseOutlineIndex (src/course-outline/data/outlineIndexQuery.ts) wraps
  getCourseOutlineIndex and keys on courseOutlineQueryKeys.index(courseId). The number of
  courses is only known at render time, so a hook call per course is not possible: build the batch
  with useQueries over that same key factory and query function, following the batching precedent
  in src/content-tags-drawer/data/apiHooks.ts. Reusing the key factory is what makes these
  entries share the browse panel's cache instead of duplicating its requests. Carry the hook's own
  retry: false and pass refetchOnMount: false, matching how the browse panel reads outlines.
• Search the returned structure's full section-to-subsection tree for the usage key, starting
  at courseStructure on the response envelope (CourseOutline, src/course-outline/data/types.ts)
  and recursing through each node's childInfo.children; the node fields come from XBlockBase and
  XBlock in src/data/types.ts. Do not assume a position or depth, and do not match on title.
• Branch on the query state explicitly. A pending outline query renders the ghosted placeholder
  rule box with a LoadingSpinner for that course's criteria. A successful read with no matching
  usage key and a failed read, including a permission failure, both render the "Content
  unavailable" chip.
• Do not block the criteria list on the outline queries. Render the groups at once, with each
  course's criteria behind its placeholder, then replace each placeholder with the criteria as that
  course's outline settles.
• Scope a failed outline read to the criteria that depend on it. One unreadable course marks
  only its own criteria "Content unavailable" and must not take down the rest of the competency's
  criteria.
• Memoize the distinct course-key list on the criteria query's own data reference, not on an
  array recomputed inline in the same render. A dependency rebuilt every render defeats the
  memoization silently, with no type error or failing test to catch it, and here it would refire a
  batch of outline queries.
• Use Paragon's Warning icon from @openedx/paragon/icons alongside the text label, not in
  place of it, and do not distinguish the state by color alone.
• Carry the accessible text in a visually hidden sr-only sibling span, not in an aria-label
  on the wrapper. A plain span or div takes the implicit generic role, which prohibits
  aria-label and is not reliably announced. CompetencyTreeItem.tsx in the same directory already
  does this for the tree's own accessible labels.
• Style the state by overriding Paragon's own design tokens, not the resolved CSS properties.
  Trace the token's resolution in the installed theme first: if it already resolves to the intended
  value, the override is dead code and should not be added. Use a relative unit (rem, %) for any
  typography token, as Paragon's own defaults do, even if a design spec names a pixel value.
• Prefer Paragon's grid for the small-screen behavior over new media queries, as the
  associations panel does with Row/Col. If a component-local SCSS file is added and does use
  Paragon's custom-media breakpoint names, add
  @use "@openedx/paragon/styles/css/core/custom-media-breakpoints.css" in that file: a component
  SCSS imported from its own .tsx compiles as its own root stylesheet and does not inherit the
  @use in src/index.scss, and an unresolved custom-media name is not a syntax error, so the rule
  compiles and then silently never matches. The lint and unit-test commands do not compile Sass, so
  verify any new at-rule by test-compiling the file exactly as the bundler imports it.
• Key any selector for a criterion inside a nested group off the class marking the group unit
  (for example .criteria-group > ul), not a fixed structural depth (> ul > li > ul), which
  matches one nesting level and stops applying past it.
• Do not add a backend existence flag to the criteria read endpoint. That endpoint lives in
  openedx-core, which must not import from openedx-platform (enforced by .importlinter), so
  it cannot resolve a usage key against the modulestore or the content search index. Resolution
  stays on the client, which is also where titling already happens.
• Tests: a criterion whose usage key is absent from a successfully read outline renders the
  "Content unavailable" chip and the warning icon; a criterion present in the outline renders its
  title unchanged; a pending outline query renders the ghosted placeholder rule box with a spinner
  for that course and no "Content unavailable" chip; a failed outline query and a 403 each render
  the "Content unavailable" chip; a group whose every criterion is unresolvable renders all of them;
  an unparseable stored key renders the chip without throwing; several criteria in one course fire
  a single outline query rather than one per criterion, and re-rendering fires no further ones; the
  "Content unavailable" state is present as text in the DOM; the chip and the rule box header stay
  within the layout at a small viewport width.
• Out of scope: removing an unresolvable criterion, which moved to a follow-up ticket in the
  10/13 rescope; a tooltip or other way to expose the stored usage key, which is its own follow-up;
  the learner-facing progress surface, which faces the same situation and has its own design work
  ahead of it; the warning shown before deleting a subsection on the Course Outline page; any job
  that prunes or reports orphaned criteria in bulk; and any competency-level indication that a
  competency's rules can no longer be satisfied.

src/taxonomy/competency-management/ holds the Competency Management page, its competency tree,
and its shared messages.ts (#680), with the associations panel and course browse panel in its
associations/ and course-search/ subdirectories (#670). The Selected Content components this
ticket extends are added by #672 in the same tree; the rows below extend them rather than replacing
them.

New files

Modified files

• [FE] Create & View Competency Criteria #672 lists a group's criteria in its Selected Content area and owns the components this ticket
  extends.
• [FE] Competency Management Course Search/View #670 provides the associations panel and the course browse panel, and establishes reading a
  course outline lazily per course through useCourseOutlineIndex.
• [FE] Display Competency ID on the Competency Management page #680 provides the Competency Management page, its competency tree, and the page's messages.ts.
• src/generic/key-utils.ts for getCourseKey; src/course-outline/data/outlineIndexQuery.ts for
  useCourseOutlineIndex and src/course-outline/data/queryKeys.ts for the key factory to batch
  over; src/course-outline/data/types.ts and src/data/types.ts for the outline envelope and its
  node fields; src/content-tags-drawer/data/apiHooks.ts for the useQueries batching precedent.
• src/taxonomy/competency-management/CompetencyTreeItem.tsx for the sr-only accessible-label
  precedent this page already follows, and src/taxonomy/competency-management/messages.ts for
  where its copy lives.
• .claude/frontend-app-authoring-architecture-overview.md for the authoring frontend's conventions
  and how it consumes this library's APIs.