🏗️ Architecture: How should tab-based navigation (SkillStudio, Observatory) b...

Date: 2026-03-04
Time: 16:31:19 UTC
Session: gspace1-175.4
Agent: angular
Confidence: 94%
Status: ✅ Documented

📋 Decision Context

Question:

How should tab-based navigation (SkillStudio, Observatory) be converted to route-driven navigation so Vitto can detect user context from URLs?

Task: Session 175: Super Vitto Context Plan — Phase A: Route-First Navigation

🎯 Decision Made

Chosen:

Converted SkillStudio from ux-tabs to child routes with router-outlet shell. Created SkillStudioDataService as shared state service. Created 3 child route components (SkillMarketplaceRouteComponent, SkillBuilderRouteComponent, SkillTestRouteComponent). Converted Observatory to child routes (agents, system, sandbox). Enhanced VittoChatContextService.detectSubRouteContext() with regex-based sub-route parsing. Added sub-route labels to systemPromptEnrichment computed signal.

Options Considered:

1. Convert tabs to child routes with router-outlet shell (chosen)
2. Keep tabs but add URL hash fragments for context detection
3. Use query parameters (?tab=builder) for tab state
4. Create a custom TabContextBridge to synchronize tab state with VittoChatContextService

💭 Reasoning

Routes are the universal identifier for Vitto's context detection. NavigationEnd events fire automatically, no bridge messages needed. The URL IS the context signal. Hash fragments and query params are second-class citizens in Angular Router — they don't trigger guards, resolvers, or NavigationEnd consistently. The router-outlet shell pattern preserves the parent layout (sub-nav bar) while giving each child its own route. SkillStudioDataService extracts shared state (skills, selectedSkill, builderForm) so child routes can share data without prop drilling. This is the exact pattern used by Observatory and gograb-admin ConfigSettings.

📁 Files Involved

• libs/libs-ai/vitto-hub/src/lib/routes/vitto-hub.routes.ts
• libs/libs-ai/vitto-hub/src/lib/components/skill-studio/skill-studio.component.ts
• libs/libs-ai/vitto-hub/src/lib/components/skill-studio/skill-studio.component.html
• libs/libs-ai/vitto-hub/src/lib/components/skill-studio/skill-studio-data.service.ts
• libs/libs-ai/vitto-hub/src/lib/components/skill-studio/skill-marketplace/skill-marketplace.component.ts
• libs/libs-ai/vitto-hub/src/lib/components/skill-studio/skill-builder/skill-builder.component.ts
• libs/libs-ai/vitto-hub/src/lib/components/skill-studio/skill-test/skill-test.component.ts
• apps/gograb-ai/src/app/pages/observatory/observatory-page.component.ts
• apps/gograb-ai/src/app/pages/observatory/observatory-agents.component.ts
• apps/gograb-ai/src/app/pages/observatory/observatory-system.component.ts
• libs/libs-ai/vitto-chat/src/lib/services/vitto-chat-context.service.ts

🔗 Related

• Decision ID: dev_1772641879791_gr76r39
• Session: 175
• Workspace: gspace1

Auto-generated by MCP Smart Consolidation