Docs/Guides
Guide source3 min read

Build interfaces around roles and intent

Resolve appropriate surfaces for people and agents while keeping authority on the execution side.

Download Markdown ↓
Source and verification context ⌄

Source-guided

Examiner la source ↗

Repository links may require access. Source inspection is separate from a clean public-package installation.

AN INTERACTIVE READING MAP

Get the shape of this guide.

Move through the ideas, inspect their relationships, or make a focused reading path. The complete guide stays below.

SÉQUENCE DE LECTUREComprendre les liens entre les idées
Choose a point to look closer
01 / Section du guide

Start with the task, actor and context

A reviewer, an operator and an agent may work on the same workflow while needing different information and actions. Model that difference explicitly instead of copying the entire workflow into unrelated screens.

Lire le contexte à l’appui

RoleMorph resolves a contract-authored surface from supplied context. The resolver validates the context and registry bindings, removes invalid components and returns actions with their resolved boundaries.

Explore a section, then continue with the complete article below.

1 / 4

Start with the task, actor and context

A reviewer, an operator and an agent may work on the same workflow while needing different information and actions. Model that difference explicitly instead of copying the entire workflow into unrelated screens.

RoleMorph resolves a contract-authored surface from supplied context. The resolver validates the context and registry bindings, removes invalid components and returns actions with their resolved boundaries.

Make action states understandable

The resulting actions distinguish allowed, requires_approval and blocked states. For an AI agent, the resolver also builds a plan that separates those action lists and reports missing information from diagnostics.

Use these states to explain what a caller can attempt next. A reviewer may need an approval action; an agent may need a structured reason it cannot proceed. Avoid turning a hidden button into the sole enforcement mechanism.

Surface behaviorGood useLimite
Different data depthShow the information needed for a roleFetch and redact through trusted server rules
Review-required actionExplain the next approval stepRequire evidence again at execution
Blocked actionProvide a useful reason or alternativeDo not execute through another unguarded route
Agent planExpose allowed and missing-information pathsThe plan itself grants no authority
See what a personal choice should change.Compare the choices · 3 ways to look closer

The same work can be shown in a quiet sequence, a dense overview or a detailed review. Inspect the boundary behind each choice.

What would help in this moment?
UNE SITUATION CONCRÈTE

Reduce the presentation load.

A person wants to focus on the current task without losing the rest of the workflow.

Ce qui change

A focused surface can show one section, a clear next step and optional supporting context.

Ce qui reste explicite

The complete underlying work and the person’s actual permissions do not change.

SUIVRE LA CONSÉQUENCE

Give a visible route back to the full picture. This site’s Focus and Step by step controls demonstrate a reversible reading projection.

Where this explanation comes from

Source-informed presentation examples. The local website applies its own authored projections; the V9 source review inspected preference precedence, role independence, shell boundaries and reversible adaptation in ContractSpec.

Design the unresolved state

An unknown or ambiguous surface match is a real product state. The resolver can return an unresolved result with diagnostics and no actionable components. Design a clear explanation and recovery path for that case.

A fallback screen should help the person choose a valid context or seek access. It should not silently replace missing policy context with a more permissive role.

Test a small role matrix

Choose one workflow and compare the intended surfaces for two human roles and one agent actor. Verify the components, action states and explanations each receives. Include an invalid binding and an unknown role.

Then call the backend directly for an action hidden or blocked by the UI. The server must still enforce its policy and approval requirements. Surface resolution and execution authorization are complementary checks.

See it in an example.

Governance / Advanced

Adapt the view. Preserve the boundary.

Build an interface

Inspect role-specific approval surfaces where adaptive hints cannot grant authority.

  1. Inspect the roles
  2. Separate permissions from policy
  3. Change presentation hints

Ce que montre la sourceThe inspected fixtures resolve surfaces for six roles.

Ne démontre pasThat hiding a control replaces server-side authorization.

Inspect the walkthroughBehavior · proof and limits · source checks

Follow the source behavior

An internal budget request reaches a founder, operations manager, frontline staff member, customer, AI agent, or auditor. Each role receives a relevant surface. Vendor commitment and budget exceptions retain explicit action boundaries across those views.

  1. Inspect the roles

    The internal approval fixture defines six roles and components for budget risk, vendor queues, requester status, agent procurement planning, and audit history.

  2. Separate permissions from policy

    The operations manager can be eligible for vendor selection while a budget exception still requires approval. The agent plan blocks vendor commitment and marks the budget exception as requiring approval.

  3. Change presentation hints

    The related service-delivery fixture compares plain and adaptive contexts and asserts unchanged action boundaries. The internal-approval fixture separately tests vendor restrictions and budget approval. Presentation guidance does not create authority.

  4. Inspect the restricted view

    The customer fixture hides protected actions and tests that explanations do not expose redacted information. Apply the same checks to the roles and data in your own workflow.

What this example establishes
Ce que montre la source
  • The inspected fixtures resolve surfaces for six roles.
  • Tests assert that adaptive hints preserve policy and permission boundaries.
  • The internal approval tests distinguish blocked actions, approval-required actions, and hidden customer actions.
Ne démontre pas
  • That hiding a control replaces server-side authorization.
  • That every host API or renderer automatically enforces the surface result.
  • A full production procurement app or an executed RoleMorph session in this review.
Reproduce the source checks

The source tests cover role resolution, adaptive-boundary invariance, vendor permission, budget approval, and customer hiding.

Répertoire de travail packages/platform/ui/surface-runtime

bun test src/rolemorph/fixture-domains.test.ts

Fixture and tests inspected; not executed here.

UI / Intermediate

Build a table from a data view

Build an interface

Compare a declarative account table with the shared client and server controller surfaces.

  1. Start with the declarative table
  2. Compare rendering layers
  3. Explore visible states

Ce que montre la sourceThe source includes a declarative table contract and a shared account-grid showcase.

Ne démontre pasServer throughput or database performance.

Inspect the walkthroughBehavior · proof and limits · source checks

Follow the source behavior

The same sample account grid appears through ContractSpec's data-view, headless table, web primitive, and design-system layers. You can inspect how sorting, selection, expansion, loading, and empty states are represented without adopting a whole business template.

  1. Start with the declarative table

    The README's DataViewSpec references a sample query and declares a table view. Its initial state uses four rows per page, descending ARR sorting, a hidden notes column, and the account column pinned left.

  2. Compare rendering layers

    The showcase exposes client, server, DataView, web primitive, and native primitive lanes around the same account data. Inspect how each layer maps the shared table behavior.

  3. Explore visible states

    The UI source includes pinning, sorting, row expansion, simulated loading, empty state, and an interaction log. Its smoke fixture checks rendering and selected interactions.

  4. Adapt the source contract

    Replace sample account fields and the query reference with your own data contract. Establish server filtering, pagination, authorization, and performance behavior in your host application.

What this example establishes
Ce que montre la source
  • The source includes a declarative table contract and a shared account-grid showcase.
  • The inspected smoke fixture asserts key UI controls, descending sort state, expansion, and row-press logging.
  • The generated registry declares an inline UI preview for data-grid-showcase.
Ne démontre pas
  • Server throughput or database performance.
  • A live production dataset or backend integration.
  • A newly verified browser session in this review; the preview registration is source evidence.
Reproduce the source checks

The smoke source checks the table surfaces and selected interactions in a Happy DOM environment.

Répertoire de travail examples/data-grid-showcase

bun test src/ui/DataGridShowcase.smoke.test.tsx

Test and preview source inspected; not executed here.

Continue from here.

Concepts

Authentication, policy and scoped approval

3 min read

Give each decision a clear owner and prove that denied requests never reach the protected handler.

Look inside the guideOpening context · complete reading path

Separate the decisions

Authentication establishes who is calling. Policy decides whether that subject may perform a particular operation in context. Scoped approval supplies evidence that a specific request or class of effects has been reviewed. A ceremony requirement can require additional, fresh verification at execution time.

Work through the guide
Guides

Compose features with explicit dependencies

3 min read

Connect capabilities, operations and provider ports without hiding what a feature needs to execute.

Look inside the guideOpening context · complete reading path

Treat a feature as a set of declared dependencies

A larger feature often combines operations, policy decisions, UI surfaces and external services. Feature Hubs provide a way to make those relationships inspectable rather than burying them in application startup code.

Work through the guide
Concepts

What the runtime checks

3 min read

Follow a call from transport context to handler execution, then understand the limits of each guard.

Look inside the guideOpening context · complete reading path

Follow the execution boundary

A registered call resolves an operation and its bound handler, prepares the input and execution context, invokes the handler, and validates the returned value. The exact checks depend on the contract and the ports supplied by the host.

Work through the guide
Next: Compose features with explicit dependencies →
Votre vue

Make room for your context.

Shape the presentation around this moment. You can change it whenever you need.

Votre contexte

The different parts of you

Choose a starting point

Un mélange utile de contexte, de visuels et de guidage discret.

Tune each dimension
Each dimension can change independently. Product permissions and available actions stay unchanged.

Support the way you begin and return

Tune your support

Confort de lecture

Choisir votre langue

La langue de l’interface change uniquement le texte. Les marchés, les prix et les parcours conservent leurs propres paramètres.

Couverture des traductions

Une partie du contenu est affichée en anglais.

Navigation151
Graphe616
Catégories378
Portfolio833
Exemples2 035
Aperçu de la source1 542

D’autres traductions seront ajoutées à mesure que le contenu sera relu.

Cette préférence est enregistrée dans ce navigateur.

Rechercher sur le site

Des points de départ utiles

Aucun résultat. Essayez une expression plus courte, un nom d’opération ou un autre périmètre de recherche.

UN PEU DE PLACE POUR EXPLORER

Trouvez quelque chose à explorer.

Ouvrez un aperçu détaillé sur cette page, essayez une autre perspective ou suivez le détail vers sa propre page.

Fonctionnement des aperçus et des commandes
01

Regarder avant de partir

Survolez un lien ou sélectionnez-le avec Tab pour voir un aperçu. Cliquer sur le lien d’origine ou appuyer sur Entrée ouvre toujours sa destination.

02

Rester dans le contexte

Entrez dans l’aperçu pour explorer ses sections. Depuis un lien sélectionné, utilisez Alt + ↓ pour y entrer au clavier. Échap le ferme.

03

Ouvrir les possibilités

Les lignes dépliables, les choix de perspective et les commandes mises en évidence révèlent davantage. Votre vue adapte le confort de lecture et le contexte exploré.

Un bouton séparé pour voir de plus près

Affichez de petits boutons d’aperçu à côté des liens quand l’espace le permet. Touchez l’œil pour examiner ou le lien pour y aller directement. Ce choix reste dans cet onglet.

Aucun historique de navigation n’est collecté. La réduction des animations suit votre appareil et Votre vue.