Context Sovereignty: Solving the “Sticky Identity” Problem

“Your role in the boardroom shouldn’t follow you to the bar. UIs must respect the sovereignty of the route.”

---

1. The Mess (The Diagnostic)

We built a Ferrari: a high-performance Universal Identity system. One user, multiple roles (Owner, Staff, Client). It was elegant in the database, but a disaster in the browser.

The problem? Sticky Identity.

Once a user activated their “Owner” role in a specific branch, that privilege “leaked” everywhere. When they navigated to their Personal Space (/espacio) to book a simple haircut as a client, the UI was still shouting business metrics at them. The global state was “sticky”—it clung to the user like operative residue.

The Fragmented Code (The Debt)

Components were blindly trusting the global state without verifying the intent of the current page:

// SmartFeed.tsx (The Mess)
export const SmartFeed: React.FC = () => {
  // Blindly trusts global role regardless of the URL
  const isOwner = useAppSelector(selectIsOwnerActive); 
  
  return (
    <div>
      {/* Leak: Showing financial data in a civilian zone */}
      {isOwner && <FinancialRadar />} 
      {/* ... */}
    </div>
  );
};

This is Mediocrity. It breaks the “exclusive club” vibe we promised our members. It’s noisy engineering that ignores the user’s mental context.

---

2. The Strategy (The Vision)

We needed to shift from Identity-Driven UI to Route-Driven Context.

The architectural goal was simple: Context Sovereignty. The Page (the Route) is the supreme authority. If the URL says /espacio, the system must strip away all operative privileges and treat the user as a civilian, regardless of their global rank.

We chose View Mode Injection over “Sticky State”. The page dictates the mode; the component simply obeys.

---

3. The Craft (The Transformation)

We refactored our “Intelligent Components” to accept an explicit mode. If provided, this mode annihilates any global role detection.

The Transformation (WIP)

We moved the logic from “Global Detection” to “Explicit Injection”.

interface Props {
  // Explicit context injection
  mode?: 'client' | 'staff' | 'owner' | 'auto'; 
}

export const SmartFeed: React.FC<Props> = ({ mode = 'auto' }) => {
  const globalIsOwner = useAppSelector(selectIsOwnerActive);
  
  // Sovereignty Logic: Prop overrides global state
  const isOwnerView = mode === 'auto' ? globalIsOwner : mode === 'owner';
  const isClientView = mode === 'client' || (!isOwnerView && !isStaff);

  return (
    <div className={isClientView ? "grid-cols-1" : "grid-cols-3"}>
      {isOwnerView && <FinancialRadar />} 
      {isClientView && <PersonalVisits />}
    </div>
  );
};

Then, in the Sovereign Page (EspacioPage.tsx), we enforce the law:

// EspacioPage.tsx - The Enforcer
<SmartFeed mode="client" /> // Forcing the civilian mode

---

4. The Result (The Art)

The UI is now hermetic.

• Zero Leaks: Owners can finally use the app as clients without “work” bleeding into their personal space.
• Predictability: The code explicitly states the intent of every screen.
• Safety: We eliminated the risk of showing sensitive financial data in public-facing views.

Context Sovereignty isn’t just about UI; it’s about respecting the user’s mental state. We don’t just build software; we build boundaries.

---

dammgo labs - Engineering as Art.