Quick Navigate -- DevTools

Idea

A "jump to" tool in DevTools that lets you navigate to any entity in the platform by searching. Type a name, pick from results, go there. Works everywhere, not just in the builder.

Feasibility: Easy

DevTools is already mounted globally via PageBase.vue on all authenticated routes. The only reason current tools are disabled outside the builder is an explicit isBuilder() check -- a navigate tool simply wouldn't use that gate.

What exists today

DevTools mount points:

• PageBase.vue (all authenticated pages) -- this is the one that matters
• CreativePreview.vue (standalone preview)
• Feature-flagged via ld.getFlag('devTools')

Router named routes (all navigable via $router.push):

• enterprises, edit_enterprise
• brands, edit_brand
• campaigns, edit_campaign
• creatives, build_creative
• creative_groups
• global_users, edit_global_user, edit_user
• home, profile, etc.

Backend list endpoints (via Vuex actions):

• fetchEnterprises -- supports search param
• fetchBrands -- supports search param
• fetchCampaigns -- supports search param
• fetchCreatives -- supports search param
• fetchCreativeGroups -- supports search param
• fetchWorkspaces -- supports search param
• fetchAccounts -- supports search param

All accept { search: { name: '...' } } and return paginated results with IDs.

Approach

UI

Add a "Navigate" entry to the DevTools tool list. Opens in a DevToolPanel like the other tools. Simple layout:

1. Resource type selector (dropdown or tabs): Enterprise, Brand, Campaign, Creative Group, Creative
2. Search input with debounce
3. Results list -- click to navigate

Each result shows name + breadcrumb context (e.g. "Banner Ad -- Summer Campaign -- Acme Brand"). Click navigates via $router.push with the correct named route and params.

Route construction

Routes follow predictable patterns. Given an entity from the API:

// Enterprise
{ name: 'edit_enterprise', params: { routeEnterpriseId: id } }

// Brand (needs workspace context)
{ name: 'edit_brand', params: { routeWorkspaceId: wsId, routeBrandId: id } }

// Campaign (needs workspace context)
{ name: 'edit_campaign', params: { routeWorkspaceId: wsId, routeCampaignId: id } }

// Creative (build view -- needs brand-campaign-group-creative composite ID)
{ name: 'build_creative', params: { routeCreativeId: `${brandId}-${campaignId}-${groupId}-${creativeId}` } }

The composite routeCreativeId format (brandId-campaignId-groupId-creativeId) means the search results need to include parent IDs. The backend list endpoints return workspace_id, brand_id, campaign_id, creative_group_id on creatives, so this data is available.

What needs building

1. QuickNavigate.vue -- new DevTools panel component

   • Resource type selector
   • Search input dispatching the appropriate Vuex fetch action with search: { name: query }
   • Results list with click-to-navigate
   • Keyboard support: arrow keys to select, Enter to navigate, Escape to close

2. DevTools.vue -- add QuickNavigate to tool list without isBuilder() gate

3. No backend changes needed -- all search endpoints already exist

Considerations

• Workspace context: Some routes are workspace-scoped (/workspaces/:id/brands/:id/edit). The entities returned from search include workspace_id, so the route can be constructed. But navigating cross-workspace might need assumeWorkspaceContext() -- the builder already does this.
• Permissions: User might not have access to all entity types. Could filter the resource type selector based on existing permission getters (getResourceListingPermission).
• Keyboard shortcut: Could add a global shortcut (e.g. Cmd+K) to open QuickNavigate directly, bypassing the DevTools menu. But this is a nice-to-have, not essential.

Complexity

Small. One new component, a few lines in DevTools.vue. The search infrastructure and routing already exist. The only mildly tricky part is constructing routeCreativeId for creatives, but the data is there.

Dependencies

None. Can be built independently of any other branch.