feat: custom agent deprecation banner for agent builder [ACTION-5011]

[neelasha-writer]

Summary

• Adds a deprecation banner to the writer-framework agent builder UI that mirrors the agentBuilder variant from fe.web-app
• Banner reads beforeDeprecationCutoffAbv2 and afterDeprecationCutoffAbv2 feature flags (same flags as fe.web-app and fe.core)
• Admin vs non-admin copy and CTAs driven by a new isOrganizationAdmin field passed from the platform via x-is-org-admin header

Before cutoff

• Admin: "This legacy agent editor will no longer be available - migrate your agent to the new Agent Builder now. Learn more" + Migrate agent button (dismissable)
• Non-admin: "This legacy agent editor will no longer be available - create a Playbook instead. Learn more" + Create a playbook button (dismissable)

After cutoff

• Admin: title "This agent builder is no longer supported" + "Migrate your team's agents to the new Agent Builder now." + Migrate agents (non-dismissable, canvas fully blocked)
• Non-admin: title "This agent builder is no longer supported" + "Create a Playbook instead." + Create a playbook (non-dismissable, canvas fully blocked)

Changes

Python backend

• ss_types.py — added isOrganizationAdmin: Optional[bool] to WriterApplicationInformation
• app_runner.py — reads x-is-org-admin header and passes it into the init session payload

Vue frontend

• core/index.ts — added isOrganizationAdmin to writerApplication type and exposed wf.isOrganizationAdmin computed
• builder/BuilderDeprecationBanner.vue — new component matching the fe.web-app banner design
• builder/BuilderApp.vue — mounts banner above the builder grid; adds a dimmer overlay that is visual-only pre-cutoff and fully blocking post-cutoff
• assets/custom-agent-deprecation-banner-bg.png — banner background image

Test plan

• Enable beforeDeprecationCutoffAbv2 flag → pre-cutoff banner appears, is dismissable, canvas remains interactive
• Enable afterDeprecationCutoffAbv2 flag → post-cutoff banner appears, no dismiss button, canvas is blocked
• Verify admin copy ("Migrate agent") vs non-admin copy ("Create a playbook") based on x-is-org-admin header
• Verify banner does not appear when neither flag is set

Made with Cursor

Summary by CodeRabbit

Release Notes

• New Features
  • Added an agent deprecation notification banner for eligible writers, with admin-specific actions.
  • Banner content adapts to whether the cutoff has passed: it shows a deadline countdown when applicable and switches to post-deadline messaging.
  • Admins get a “Migrate agents” path; others get an option to “Create a playbook.”
  • Users can dismiss the banner (before the cutoff); the choice is remembered across sessions.
  • After the cutoff, the page is visually dimmed and interactions are blocked while the banner remains active.

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds a custom-agent deprecation banner to the Writer Framework builder UI. The backend reads an x-is-org-admin HTTP header and passes it through WriterApplicationInformation. The frontend core exposes a computed isOrganizationAdmin value. A new BuilderDeprecationBanner.vue component renders pre/post-cutoff notices with migration or playbook CTAs. BuilderApp.vue wires the banner, dismissal state, and a blocking dimmer overlay.

Changes

Custom Agent Deprecation Banner

Layer / File(s)	Summary
Backend schema and header extraction src/writer/ss_types.py, src/writer/app_runner.py	WriterApplicationInformation gains an optional isOrganizationAdmin field. AppProcess._handle_session_init reads the x-is-org-admin request header and passes the boolean into the constructed model.
Frontend core: isOrganizationAdmin computed src/ui/src/core/index.ts	Internal writerApplication type extended with isOrganizationAdmin?: boolean. A computed value defaulting to false is added and exposed on the returned core object.
BuilderDeprecationBanner component src/ui/src/builder/BuilderDeprecationBanner.vue	New Vue 3 component with props for admin status, cutoff state, optional days remaining, and dismissibility. Renders conditional migrate/playbook CTAs and an optional dismiss button. Computes title and body from cutoff state and a countdown, builds URLs from injected core context, and handles navigation. Includes scoped CSS for banner layout and styling.
BuilderApp wiring and layout src/ui/src/builder/BuilderApp.vue	Imports BuilderDeprecationBanner and DEPRECATION_BANNER_DISMISSED_KEY. Adds dismissed ref persisted to localStorage, computed pre/post-cutoff flags, and showDeprecationBanner. Mounts the banner and conditional dimmer/blocker overlays. Root layout changed to flex column; new CSS for .deprecationBanner, .deprecationDimmer, and .deprecationBlocker.

Sequence Diagram(s)

sequenceDiagram
  participant Browser
  participant AppProcess
  participant WriterApplicationInformation
  participant core as generateCore()
  participant BuilderApp
  participant BuilderDeprecationBanner

  Browser->>AppProcess: WebSocket session init (x-is-org-admin: true)
  AppProcess->>WriterApplicationInformation: construct(isOrganizationAdmin=true)
  WriterApplicationInformation-->>AppProcess: application info payload
  AppProcess-->>Browser: session init response with isOrganizationAdmin
  Browser->>core: writerApplication.isOrganizationAdmin
  core-->>BuilderApp: isOrganizationAdmin computed ref
  BuilderApp->>BuilderApp: compute showDeprecationBanner, isPostCutoff
  BuilderApp->>BuilderDeprecationBanner: render(:isOrganizationAdmin, :isPostCutoff, :showDismiss)
  BuilderDeprecationBanner-->>BuilderApp: emit dismiss
  BuilderApp->>BuilderApp: onDismissBanner → localStorage + dismissed ref

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• writer/writer-framework#1068: Both PRs modify AppProcess._handle_session_init in src/writer/app_runner.py to extract and propagate session metadata from HTTP request headers into WriterApplicationInformation.
• writer/writer-framework#1081: Both PRs modify src/ui/src/builder/BuilderApp.vue styling and z-index layering to manage UI stacking context (retrieved PR modifies .builderHeader z-index, main PR adds deprecation overlay layering).

Suggested reviewers

• madeindjs

Poem

🐰 Hop hop, the banner appears,
A countdown clock for all to see!
With flags and refs and localStorage cheer,
The dimmer blocks what must not be.
Migrate or playbook, the rabbit cries —
Before the cutoff date arrives! 🌸

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The pull request title accurately summarizes the main change: adding a custom agent deprecation banner to the agent builder UI. It is specific, concise, and clearly communicates the primary objective.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch ACTION-5011-figma-changes

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/ui/src/builder/BuilderApp.vue`:
- Around line 88-92: The dimmer visibility at Line 88 uses isDeprecationActive
as its visibility condition, but this does not account for dismissal or
cloud-related checks. This causes the dimmer to remain visible even after users
dismiss the banner. Replace the v-if="isDeprecationActive" condition with the
same condition used to control the banner visibility (which should include
dismissal state checks). Apply the same fix to the other affected location at
Lines 234-242 to ensure dimmer visibility is consistently tied to whether the
banner is actually displayed to the user.

In `@src/ui/src/builder/BuilderDeprecationBanner.vue`:
- Around line 182-183: The condition at line 182 and line 190 is checking for
both orgId and appId, but the navigation URLs being returned only use orgId and
do not reference appId at all. Remove the unnecessary appId check (specifically
the writerAppId validation) from both the condition at line 182 and the
condition at line 190, keeping only the orgId check. This will allow valid
org-scoped users to access the CTA destinations even when appId is not
available.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: f10f9b7f-7b2b-4bbe-ad45-e655a17c9a0f

📥 Commits

Reviewing files that changed from the base of the PR and between 80c3c3b and 7b6ac13.

⛔ Files ignored due to path filters (1)

• src/ui/src/assets/custom-agent-deprecation-banner-bg.png is excluded by !**/*.png

📒 Files selected for processing (5)

• src/ui/src/builder/BuilderApp.vue
• src/ui/src/builder/BuilderDeprecationBanner.vue
• src/ui/src/core/index.ts
• src/writer/app_runner.py
• src/writer/ss_types.py