fix(workspace): port 2 A2 UX fixes — palette :active + locked-premium upgrade CTA

A2 cross-project audit: 12 remaining HelpmateAI Day-37 UI fixes
visually + code diffed against Job Agent. 10 DISMISS (Job Agent's
independently-built frontend already does the right thing — icon-only
mobile search clustered with the avatar, fixed FAB assistant panel vs
inline margin-top:auto ask-group, fully inline-styled FeedbackButtons,
data-active accent palette rows, Step-7b tier-limit Notice + in-scope
.b-notice-action CTA, expires_at retention labels, etc.). Only TWO
real defects ported:

7913bb6 — command-palette :active touch press. CommandPalette sets
data-active only via onMouseEnter / Arrow keys (no touch path), so a
tapped row on a phone got zero press feedback. Added `.b-cmd-item
:active` (+ icon) mirroring the existing `[data-active="true"]`
treatment exactly, so touch and keyboard selection look identical.
Pure additive CSS.

425a87d + 11a18d8 — locked Premium toggle had no actionable upgrade
(P1). On Free the toggle was HTML-`disabled`, so its only upgrade
hint was a hover `title` — invisible on touch, dead control. The
toggle was already always-visible (11a18d8's "obvious/visible" half
is satisfied), so only the actionable-locked-state needed porting.
Split the disabled reasons: tier-locked stays interactive (a tap
calls the new onPremiumLockedUpgrade -> WorkspaceShell surfaces the
SAME upgrade Notice + .b-notice-action CTA the 429 tier-limit path
uses, with workspaceQuota.upgrade_url); analysisLoading /
out-of-credits remain real disables. Controlled `checked` stays false
when tier-locked so premium never flips on. Reuses the established
Notice mechanism — no new toast/CSS.

tsc + eslint clean. Command palette regression-checked (renders fine,
:active is additive). Premium-toggle path code-verified (reuses the
already-rendered Notice+action surface); a live check would need a
provisioned resume+JD workspace.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: LEANDERANTONY

frontend/src/app/globals.css

@@ -7444,6 +7444,23 @@ code {
   border-color: rgba(90, 134, 255, 0.30);
   color: var(--accent-strong);
 }
+/* Touch has no hover and no arrow keys, so the data-active highlight
+   can never MOVE on a phone — selectedIndex only changes via
+   onMouseEnter / ArrowUp-Down (see CommandPalette.tsx). Give every row
+   the same highlight the instant it's pressed: the touch analog of the
+   desktop cursor/hover. Pure CSS so it fires on touchstart with no JS
+   round-trip; declared after [data-active] (equal specificity) so a
+   press always reads, and it mirrors the [data-active] treatment so
+   touch and keyboard selection look identical. */
+.b-cmd-item:active {
+  background: rgba(90, 134, 255, 0.10);
+  color: var(--fg);
+}
+.b-cmd-item:active .b-cmd-item-icon {
+  background: rgba(90, 134, 255, 0.16);
+  border-color: rgba(90, 134, 255, 0.30);
+  color: var(--accent-strong);
+}
 .b-cmd-item-main {
   flex: 1;
   min-width: 0;

frontend/src/components/workspace/AnalysisRunner.tsx

@@ -53,6 +53,13 @@ export type AnalysisRunnerProps = {
    *  state because both this component and the run-hook need to read
    *  it. */
   onPremiumChange: (next: boolean) => void;
+  /** Called when a Free-tier user interacts with the tier-locked
+   *  premium toggle. The parent surfaces the standard upgrade Notice
+   *  (the same `.b-notice-action` CTA the 429 tier-limit path uses)
+   *  instead of the toggle being a dead HTML-`disabled` control whose
+   *  only upgrade hint is a hover `title` — which never shows on
+   *  touch (the P1 gap HelpmateAI's 425a87d/11a18d8 closed). */
+  onPremiumLockedUpgrade: () => void;
 };
 
 // Pipeline stages shown in the redesigned layout.
@@ -118,6 +125,7 @@ export function AnalysisRunner({
   quota,
   premium,
   onPremiumChange,
+  onPremiumLockedUpgrade,
 }: AnalysisRunnerProps) {
   // Premium toggle gating logic.
   //   * Disabled when quota is null (anonymous / restoring / fetch
@@ -137,6 +145,17 @@ export function AnalysisRunner({
     premiumAvailable && premiumLimit > 0 && premiumRemaining <= 0;
   const premiumDisabled =
     !premiumAvailable || analysisLoading || premiumOutOfCredits;
+  // Split the "disabled" reasons. Tier-locked (Free) is NOT a hard
+  // HTML-disable: a disabled checkbox is dead on touch and its only
+  // upgrade hint is the hover `title`, which never shows on a phone —
+  // so a Free user tapping Premium got zero feedback and no upgrade
+  // path (the P1 gap HelpmateAI's 425a87d/11a18d8 closed). Keep it
+  // interactive when tier-locked so a tap surfaces the upgrade CTA;
+  // `premiumDisabled` still drives the LOCKED-LOOKING visual state.
+  // analysisLoading / out-of-credits stay real disables — transient
+  // or wait-for-reset, not an upgrade situation.
+  const tierLocked = !premiumAvailable;
+  const premiumInputDisabled = analysisLoading || premiumOutOfCredits;
   const premiumTooltip = !premiumAvailable
     ? "Upgrade to Pro for premium AI (GPT-5.5)"
     : premiumOutOfCredits
@@ -238,9 +257,20 @@ export function AnalysisRunner({
           >
             <input
               aria-label="Run with premium AI (GPT-5.5)"
+              aria-disabled={tierLocked || premiumInputDisabled}
               checked={premium && !premiumDisabled}
-              disabled={premiumDisabled}
-              onChange={(event) => onPremiumChange(event.target.checked)}
+              disabled={premiumInputDisabled}
+              onChange={(event) => {
+                if (tierLocked) {
+                  // Locked by plan, not a transient state: don't flip
+                  // premium on — surface the upgrade CTA instead. The
+                  // controlled `checked` stays false on re-render
+                  // (premiumDisabled is true while tier-locked).
+                  onPremiumLockedUpgrade();
+                  return;
+                }
+                onPremiumChange(event.target.checked);
+              }}
               type="checkbox"
             />
             <span className="b-premium-toggle-label">

frontend/src/components/workspace/WorkspaceShell.tsx

@@ -2097,6 +2097,17 @@ export function WorkspaceShell() {
               currentWorkflowStage={currentWorkflowStage}
               onClearRole={clearWorkspaceRole}
               onPremiumChange={setPremium}
+              onPremiumLockedUpgrade={() =>
+                setWorkspaceNotice({
+                  level: "info",
+                  message:
+                    "Premium AI (GPT-5.5) is a Pro feature. Upgrade your plan to run premium tailoring.",
+                  action: {
+                    label: "Upgrade",
+                    href: workspaceQuota?.upgrade_url || "/#pricing",
+                  },
+                })
+              }
               onRunAnalysis={() => void handleRunAnalysis()}
               premium={premium}
               quota={workspaceQuota}