Improve Workflow Studio hierarchy and publish status recovery

[AbigailDeng]

Problem and solution

The Workflow Studio packed identity, status, and low-frequency commands into one crowded header; the graph controls competed with the minimap; the node inspector obscured the usable canvas; and several labels could not recover their full text. The page also retained a transient publish Error after an authoritative refresh reported no active or completed binding.

This change:

• separates identity/status from primary commands, moves low-frequency destinations into the More menu, aligns the Back action, and preserves full breadcrumb/title text through tooltips;
• gives the graph, controls, minimap, selection, and inspector one compact visual system while reserving canvas space for the inspector and keeping manual zoom stable;
• clarifies the sidebar Chat affordance without changing navigation destinations;
• clears stale publish failures only after a successful authoritative member refresh confirms a non-failed or empty binding state;
• treats a failed TanStack Query refetch as non-authoritative, preserving the current Error/run state instead of consuming cached data as a fresh response;
• keeps the node inspector inside the actual editor region on compact viewports, uses the same lg breakpoint for bottom-sheet layout and canvas inset behavior, and exposes async publish status changes through a polite live region.

Impacted paths

• apps/aevatar-console-web/src/pages/team-member-workflow-studio/**
• apps/aevatar-console-web/src/shared/graphs/**
• apps/aevatar-console-web/src/shared/navigation/**
• apps/aevatar-console-web/src/app.navigation.test.ts
• apps/aevatar-console-web/src/global.less
• apps/aevatar-console-web/src/locales/en-US.ts

No backend, root configuration, CI, or documentation files changed.

Validation

• Frozen install with pnpm 10.2.1: passed.
• Changed-file Biome lint: 13 TypeScript/TSX files, 0 diagnostics.
• TypeScript: passed.
• Focused stale publish regression: passed.
• Workflow Studio suite: 82/82 passed.
• Full Jest after rebase: 130/130 suites, 1080/1080 tests passed.
• Production build after rebase: passed.
• FKST pre-commit: changed-file Biome, TypeScript, node Jest 93/93 passed.
• FKST pre-push: full Jest 1080/1080, production build, and docs lint (77 files, 0 errors) passed.
• Independent PR diff review: one blocking mobile inspector containment finding repaired; follow-up focused/full validation and browser QA passed.
• GitHub CI for 4b23102d2: changes, FKST host policy, fast gates, console-web, and coverage quality passed; backend-heavy jobs skipped as expected for a frontend-only diff.
• git diff --check: passed.

The clean origin/dev baseline currently reports 82 Biome errors, 83 warnings, and 11 infos. Per explicit user approval, changed-file Biome is the lint evidence for local validation and pre-commit; TypeScript, Jest, build, hooks, browser QA, and PR checks remain mandatory. No hook was bypassed and --no-verify was not used.

Browser QA

Authenticated in-app browser against the hosted backend through http://127.0.0.1:5173:

• Loaded My Teams -> xiaomi home -> Workflow and confirmed the six-node workflow reports Published, with no stale Error.
• Exercised Fit View, node selection/inspector, inspector close, YAML editor open/close, and More/primary action layout without running, saving, applying, or publishing.
• Desktop 1280x720: inspector, controls, and minimap do not overlap; no horizontal page overflow.
• Mobile 390x844: six nodes load and Fit View places all six inside the canvas; identity/actions and controls/minimap do not overlap; no horizontal page overflow.
• Post-review 820x844 and 390x844: the bottom inspector remains within the editor, its header and Close action remain visible, its body retains internal scrolling, and the page has no horizontal overflow.
• Browser console errors: 0 on the clean authenticated QA tab.

Screenshots:

• /Users/xiezixin/.fkst/artifacts/aevatar-frontend/20260720T072338Z-be8fedbe/screenshots/workflow-after-origin-dev-sync-desktop.png
• /Users/xiezixin/.fkst/artifacts/aevatar-frontend/20260720T072338Z-be8fedbe/screenshots/workflow-after-origin-dev-sync-mobile.png

Local browser QA is evidence only. The repository does not currently provide a GitHub-hosted frontend browser E2E check.

Recurrence prevention

• Immediate symptom: the info message said no published status was visible while the header remained Error.
• Root cause: successful refresh branches did not clear the prior transient publish error, and a failed TanStack Query refetch() could resolve with isError: true plus old cached data.
• General failure pattern: treating query result data as fresh without first validating the refetch result.
• Similar locations searched: all 25 frontend .refetch() call sites; one separate pre-existing direct servicesResult.data consumer remains in src/pages/studio/index.tsx and is intentionally outside this PR.
• Guard added: failed or missing member refresh results show the refresh error and return before workflow refresh, run lookup, or publish-state mutation.
• Regression test added: rejected publish -> failed member refresh retains Error/Refresh and suppresses Publish -> successful empty refresh converges to Draft.
• Hard gate: focused regression, Workflow Studio suite, full Jest, TypeScript, changed-file Biome, production build, FKST hooks, and browser QA.
• Remaining risks: the independent Studio services refresh path should receive its own focused fix and test if reproduced; this PR does not broaden into that workflow.

FKST provenance

• Skill: aevatar-frontend-fkst
• Issue: user-reported browser screenshot defect; no linked GitHub issue
• Worktree: /Users/xiezixin/.fkst/runtime/aevatar-frontend/manual/fix-2026-07-20_workflow-studio-visual-hierarchy
• Branch: fix/2026-07-20_workflow-studio-visual-hierarchy
• Operator: AbigailDeng
• Freshness: rebased onto origin/dev@248c4e2ecb4387a4e8fc94de1414a3fc32f50e04
• Workflow run: 20260720T072338Z-be8fedbe

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 83.45%. Comparing base (248c4e2) to head (c05c5bf).

@@           Coverage Diff           @@
##              dev    #2882   +/-   ##
=======================================
  Coverage   83.44%   83.45%           
=======================================
  Files        1376     1376           
  Lines      112700   112700           
  Branches    14365    14365           
=======================================
+ Hits        94048    94052    +4     
+ Misses      12099    12096    -3     
+ Partials     6553     6552    -1     

Flag	Coverage Δ
ci	83.45% <ø> (+<0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.
see 1 file with indirect coverage changes

🚀 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.