feat(expert): structured plan card with active-plan pointer

[andypalmi]

Stacked on top of the task list PR #8468. Review and merge that one first.

Closes FlowFuse/engineering#345

Summary

Turns the plan reply into a structured card with a name, a description, and a collapsible body, and introduces an active-plan pointer so the chat always shows which plan is currently in effect.

When a plan is waiting for approval the card is expanded with its action buttons. Once approved it collapses to a single line, and the plan that owns the currently pinned task list is marked with an Active pill. Approving another plan, or reactivating an earlier one, moves the pill and swaps the pinned task list to match.

Changes

• PlanCard.vue: structured layout with a Plan: <name> heading, a description line, and the plan body inside a collapsible section; an Active pill in the collapsed header; awaiting-approval vs approved states; heading sized like a top-level heading and the pill given a solid accent fill for legibility.
• AnswerWrapper.vue: passes name, description, active, and awaiting-approval into the card, deriving isActivePlan from the plan id and the active-plan pointer.
• product-expert.js: adds the activePlanId getter, derived from the pinned task list's planId, so the active plan and its task list stay in sync.

Anatomy of the card

While a plan awaits approval the card is fully expanded. The heading is the plan name, followed by the plan description, then the plan content, with the action buttons at the bottom. The card also falls back gracefully: a plan without structured fields renders as before, so this is backward compatible.

Collapsed states

Once approved the card collapses to a single line. The active plan carries the Active pill; other plans do not.

Active:

Not active:

Active-plan pointer

Only one plan is active at a time. Approving a new plan makes the previous one no longer active, so the Active pill moves to the newest approved plan.

Reactivating an earlier plan

You can ask the Expert to reactivate a previous plan. Doing so moves the Active pill back to that plan and swaps the pinned task list to that plan's tasks.

Reactivating the first plan: the pinned task list at the bottom now shows the first plan's tasks.

Reactivating the second plan again: the pinned task list swaps to the second plan's tasks, matching the currently active plan.

Backward compatibility

The whole plan and task experience is gated behind the supportsPlansAndTasks capability flag, which is introduced in the stacked task list PR #8468. When the flag is absent the agent runs in its previous mode and does not emit the plan/task surface.

A plan reply without the structured name/description fields also renders exactly as it did before, so older agent responses are unaffected.

Testing

• Approved a plan and confirmed the card collapses and gains the Active pill.
• Approved a second plan and confirmed the pill moves off the first.
• Reactivated the first plan and confirmed the pill and the pinned task list both switch back to it.
• Reactivated the second plan and confirmed both switch to it.
• Confirmed an unstructured plan reply still renders correctly.
• Verified light rendering; card uses shared theme tokens for both themes.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
⚠️ Please upload report for BASE (feat/expert-task-list-ui@5c2b89a). Learn more about missing BASE report.

Additional details and impacted files

@@                     Coverage Diff                     @@
##             feat/expert-task-list-ui    #8469   +/-   ##
===========================================================
  Coverage                            ?   76.88%           
===========================================================
  Files                               ?      460           
  Lines                               ?    24741           
  Branches                            ?     6596           
===========================================================
  Hits                                ?    19022           
  Misses                              ?     5719           
  Partials                            ?        0           

Flag	Coverage Δ
backend	76.88% <ø> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.