How the Persona-Adaptive UI Adjusts Detail Levels for Different Users in Understand-Anything

The persona-adaptive UI in Understand-Anything uses a global Zustand store to track three user personas—non-technical, junior, and experienced—and dynamically filters graph nodes, conditionally renders educational panels, and scopes exports to match the user's technical expertise.

The Understand-Anything dashboard implements a sophisticated persona-adaptive UI that tailors code visualization complexity to distinct user types. By storing the active persona in a reactive global state, the application ensures non-technical stakeholders see high-level architecture while experienced developers access granular implementation details like individual functions and class members.

Storing and Managing Persona State in Zustand

The foundation of the persona-adaptive system resides in the global state management layer. In packages/dashboard/src/store.ts at line 289, the Zustand store defines the persona property as a union type "non-technical" | "junior" | "experienced" alongside the setPersona action. Any component can subscribe to this state using the useDashboardStore hook, triggering re-renders across the dashboard when users switch their experience level.

Programmatic Persona Switching

Developers can imperatively update the persona without UI interaction by accessing the store's getter method. This pattern is useful for keyboard shortcuts, automated testing, or deep-linking specific view modes.

// Switch persona programmatically (e.g. from a shortcut or test)
import { useDashboardStore } from "./store";

function switchToExperienced() {
  const setPersona = useDashboardStore.getState().setPersona;
  setPersona("experienced");
}

Interface Components and Layout Adaptation

The UI provides a dedicated control for persona selection while the main layout responds to state changes by mounting different panel combinations.

The Persona Selector Component

Located at packages/dashboard/src/components/PersonaSelector.tsx line 5, the selector presents three user-friendly labels—Overview, Learn, and Deep Dive—that map to the internal persona IDs. When a user selects an option, the component invokes setPersona to update the global store, causing dependent components to re-render immediately.

Conditional Panel Rendering in App.tsx

The primary layout logic in packages/dashboard/src/App.tsx at line 1566 uses the active persona to determine which educational and informational panels to display. The implementation branches the component tree to show different interfaces:

• Non-technical: Renders only ProjectOverview with high-level architecture graphs and file explorer
• Junior: Displays LearnPanel containing guided tours and interactive language lessons
• Experienced: Shows the full NodeInfo panel with deep-dive capabilities into specific code entities

// Layout branching in App.tsx (simplified)
{persona === "non-technical" ? (
  <ProjectOverview />
) : persona === "junior" || tourActive ? (
  <LearnPanel />
) : (
  <NodeInfo />
)}

Filtering Technical Detail by Persona

Beyond layout changes, the persona-adaptive UI actively filters the underlying data to prevent cognitive overload for less technical users.

Graph Node Filtering in GraphView.tsx

The graph visualization layer implements persona-aware filtering in packages/dashboard/src/components/GraphView.tsx at line 439. When the active persona equals "non-technical", the filter removes low-level implementation nodes—such as individual functions, methods, and class members—from the rendered graph. The logic checks against a subFileTypes set to identify granular entities that should remain hidden from overview users.

// Persona-aware node filter used in GraphView
const filteredGraphNodes = graph.nodes.filter((n) => {
  if (persona === "non-technical" && subFileTypes.has(n.type)) {
    return false; // hide low-level implementation details
  }
  return true;
});

Export and Search Scoping

The export functionality respects the current persona to ensure that shared data matches the user's current view. In packages/dashboard/src/components/ExportMenu.tsx at line 186, the component constructs filteredGraphNodes using the same persona-based filtering logic applied in the graph view. This ensures that when a non-technical user exports a project visualization, the resulting file excludes implementation details they never saw in the interface.

Performance Optimization Through Memoization

To maintain responsiveness on large codebases, the Understand-Anything dashboard memoizes expensive layout calculations using the persona flag as part of the dependency key. According to the project's design specification graph-layout-scaling-design, the layout engine only recomputes graph positioning when the persona actually changes—or when underlying topology or diff mode changes—preventing redundant processing during pan-and-zoom interactions.

Summary

• The persona-adaptive UI in Understand-Anything defines three experience levels—non-technical, junior, and experienced—in the Zustand store at packages/dashboard/src/store.ts.
• PersonaSelector.tsx maps user-friendly labels to internal state IDs, while App.tsx conditionally renders ProjectOverview, LearnPanel, or NodeInfo based on the active persona.
• GraphView.tsx filters low-level nodes (functions, class members) from the visualization when persona === "non-technical", keeping the graph clean for stakeholders.
• ExportMenu.tsx applies the same filtering logic to ensure exported data respects the current detail level.
• Layout computations are memoized against persona changes to maintain performance on large repositories.

Frequently Asked Questions

What are the three user personas in Understand-Anything?

The dashboard recognizes three personas: non-technical for stakeholders needing architectural overviews, junior for developers requiring guided learning paths, and experienced for senior developers who need access to full implementation details and deep-dive analysis tools.

How does the persona-adaptive UI filter the code graph?

In GraphView.tsx, the system checks if the active persona is "non-technical" and if the node type exists in the subFileTypes set. If both conditions match, the filter returns false, removing individual functions and class members from the visualization while keeping high-level files and modules visible.

Can I programmatically set the user persona?

Yes. By importing useDashboardStore from the store file and calling useDashboardStore.getState().setPersona("experienced"), you can imperatively switch personas for testing, keyboard shortcuts, or initialization scripts without using the dropdown interface.

Does changing personas trigger a full graph re-render?

While components re-render to reflect the new detail level, heavy layout calculations are memoized. The graph layout engine only recomputes positions when the persona value actually changes (or when topology changes), ensuring the UI remains responsive even when navigating complex codebases.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}