{
  "topic": "platform-architecture",
  "title": "Tutxy Technical Architecture: Server-Driven UI, WebSockets & 4-Category State Taxonomy",
  "summary": "Tutxy is architected as a high-performance modern web ecosystem. The frontend separates marketing and SEO into an edge-rendered Astro application and authenticated interactive consoles into a React/Vite SPA. Client state adheres strictly to the 4-Category State Ownership Rule: Zustand for Identity/Context, TanStack React Query for Server State, WebSockets for cache updates, and local hooks for UI.",
  "estimatedTokens": 810,
  "entityDefinitions": [
    {
      "term": "4-Category State Ownership Rule",
      "definition": "Architectural constraint preventing state duplication by assigning state strictly to: 1. Zustand (Identity), 2. TanStack Query (Server State), 3. WebSockets (Cache Sync), and 4. Local UI hooks."
    },
    {
      "term": "Server-Driven UI (SDUI)",
      "definition": "Dynamic rendering engine where the backend Go Kernel controls layout trees, widget order, and action payloads without requiring client recompilation."
    },
    {
      "term": "Generative Engine Optimization (GEO)",
      "definition": "Structured content indexing and token-chunked knowledge blocks tailored for neural search crawlers and AI assistants."
    }
  ],
  "coreFacts": [
    "Tutxy eliminates monolithic React Contexts to prevent cascading re-renders across the dashboard.",
    "Incoming WebSocket events write directly into the TanStack Query cache via queryClient.setQueriesData().",
    "The video card spotlight and digital whiteboard maintain symmetric viewport controls (dock, duck, pop-out PiP, maximize).",
    "Multi-tenant authorization resolves memberships in under 12ms using a 9-step evaluator chain."
  ],
  "pedagogicalStandards": {
    "examBoards": [
      "N/A - Core Infrastructure"
    ],
    "gradeLevels": [
      "N/A - Enterprise Architecture"
    ],
    "methodology": "Hexagonal Architecture, Microservices, and Event-Driven Cache Synchronization."
  },
  "liveClassroomCapabilities": [
    "Symmetric viewport window docking with minSize={25} protection against panel collapse.",
    "Container isolation with CSS isolate to eliminate z-index bleeding between video and canvas.",
    "Multi-channel notifications delivering alerts across In-App, Web Push, Email (SES), and SMS (Twilio)."
  ],
  "citations": [
    {
      "title": "Tutxy Engineering Architecture Spec",
      "url": "https://tutxy.com/docs/architecture",
      "description": "Complete technical documentation of Tutxy state layer and WebRTC media fabric."
    }
  ],
  "canonicalFAQ": [
    {
      "question": "How is state managed in the Tutxy React console?",
      "answer": "Tutxy uses Zustand for client identity/context tokens and TanStack React Query for authoritative server data, with WebSockets directly updating the query cache."
    }
  ]
}