Docs/Guides
Source guide3 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

Inspect the 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.

READING SEQUENCEUnderstand how the ideas connect
Choose a point to look closer
01 / Guide section

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.

Read the supporting context

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 useBoundary
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?
A CONCRETE SITUATION

Reduce the presentation load.

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

What changes

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

What stays explicit

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

FOLLOW THE CONSEQUENCE

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

Source demonstratesThe inspected fixtures resolve surfaces for six roles.

Does not demonstrateThat 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
Source demonstrates
  • 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.
Does not demonstrate
  • 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.

Working directory 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

Source demonstratesThe source includes a declarative table contract and a shared account-grid showcase.

Does not demonstrateServer 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
Source demonstrates
  • 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.
Does not demonstrate
  • 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.

Working directory 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 →
Your view

Make room for your context.

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

Your context

The different parts of you

Choose a starting point

A useful mix of context, visuals and gentle guidance.

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

Reading comfort

Choose your language

Interface language changes text only. Markets, prices and workflows keep their own settings.

Translation coverage

Original source

Navigation151
Graph616
Categories378
Portfolio833
Examples2,035
Source preview1,542

More translations will be added as content is reviewed.

This preference is saved on this browser.

Search the website

Useful starting points

No results. Try a shorter phrase, an operation name or another search area.

A LITTLE ROOM TO EXPLORE

Find something to explore.

Open a closer look on this page, try a different perspective, or follow the detail into its own page.

How previews and controls work
01

Look before you leave

Hover a link or focus it with Tab to see a preview. Clicking the original link or pressing Enter always opens its destination.

02

Stay with the context

Move into the preview to explore its sections. Use Alt + ↓ from a focused link to enter it with the keyboard. Escape closes it.

03

Open the possibilities

Disclosure rows, perspective choices and highlighted controls reveal more. Your view changes reading comfort and the context you explore.

A separate button for a closer look

Show small preview buttons beside links where there is room. Tap the eye to inspect, or tap the link to go straight there. This choice stays in this tab.

No browsing history is collected. Reduced motion follows your device and Your view.