# 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:

```typescript
// 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".

```typescript
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:

```typescript
// 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._