Application patterns

27. BestBuds: one conversation across several presentations

27.1 Start with the product's state, not its screen size

A conversation has messages, participants, delivery state and a draft. Those are application concepts. A conversation screen has a timeline viewport, a focus destination and a current layout. Those are presentation concepts. Keeping the two groups separate allows the same conversation to appear on a phone and in a multi-pane desktop window.

The feature binds a conversation model and typed operations from the graph. Its page composes a conversation-list organism, timeline, message composer and optional supporting content. Atoms such as text, avatars, fields and actions are reused, while campaign and social semantics remain product-specific.

Figure 49. Schematic phone and desktop presentations of the same conversation. The larger presentation adds context rather than defining a second conversation. Each mount retains its own focus and scroll behavior. See the illustrated PDF for the diagram.

A conversation session is keyed by its relevant account and conversation identity. A route entry identifies one navigation occurrence. A mount identifies the actual presentation. These identities are related but not interchangeable. Two mounts must not race to write a single global “current chat” value.

27.2 Follow one message from contact to outcome

A person types a short reply. The local editor updates immediately and publishes revisioned edits to the draft owner. The Send control becomes available when the model says the draft can be submitted.

On contact, the button compresses locally. Its supporting composer plate can respond to one field impulse. The response is bounded to the composer's scope; it does not shake every message that shares a service dependency. Optional haptics acknowledge contact.

Activation invokes the conversation's send operation. The graph-owned workflow can create a pending row and retain the operation identity needed for retry. The row displays pending state without claiming delivery. If the operation fails, retry and discard remain explicit capabilities. A later state observation does not replay the original contact haptic.

This separation makes the design language replaceable. A restrained desktop recipe can suppress the field and use a quiet pressed state. A more expressive social recipe can retain the moving face and background response. The delivery workflow remains the same.

27.3 Adaptation preserves the reading task

On a compact window, the active conversation occupies the main route presentation. On an expanded window, the list can appear beside it. A supporting profile or event summary can become a third region where the constraints permit it.

The presentation plan changes; the draft owner does not. A message that was being read remains the logical scroll anchor. When a photograph arrives above it, reserved aspect ratio and anchor restoration prevent an unnecessary jump to unrelated content.

The interface also respects larger text. It can reduce simultaneous supporting content rather than clip messages into fixed-height rows. A narrow inspector-style mount is treated as narrow even if it lives on a large monitor.

27.4 Generation adds a region, not a competing workflow

An authorized agent can propose an event-planning region inside the conversation. It uses approved participant, time and venue organisms and receives only the permitted context. The proposal becomes a checked change to that graph-owned region.

Once the change is active, the CMP or React web/JS realization renders it. A draft already being edited remains associated with its field owner and revision. The agent can supply a suggestion, but cannot approve its own publish action or replace trusted safety controls.

Progressive access is enforced at the data boundary. An unrevealed profile image is not delivered to an unauthorized client or model merely because a theme draws it blurred. Visual masking and authorization are separate mechanisms.

27.5 A concrete qualification session

Open a conversation, enter a draft and scroll to an older message. Change the theme, widen the window and load an image above the anchor. Then introduce a failed send, revoke one action's permission and fail the generated event proposal.

The expected result is specific. The draft and conversation session remain owned. The reading anchor remains meaningful. The failed operation has a recovery action. The revoked action cannot execute. Generation failure leaves a usable manual interface. Tactile contact feedback continues locally without misrepresenting any application outcome.

This scenario tests the architecture as a connected system rather than proving isolated components only in their default states.

28. Blueprint: a dense workbench around a specialized canvas

HLD — Arrows project one graph editing session into outline, scene and inspector. The scene remains a specialized Blueprint responsibility. Open the diagram for full size.

28.1 The graph is the subject; the canvas is its presentation

Blueprint inspects and operates on application structure. Reaktor Graph remains authoritative for nodes, ports and valid connections. The canvas maintains the geometry and interaction structures required to display that graph efficiently.

These structures should not be confused. A canvas scene can contain control points and cached edge geometry that are not application graph entities. A displayed tentative wire is not yet an accepted application connection. The renderer must distinguish preview from committed topology.

Figure 50. A schematic workbench combines catalogue controls with a specialized graph canvas. The inspector subscribes to selected entities, and diagnostics explain local work without forcing every telemetry update through the entire canvas. See the illustrated PDF for the diagram.

The surrounding shell uses Surface controls for toolbars, menus, tabs, fields, dialogs and the command palette. Dense recipes adapt these controls to pointer and keyboard workflows. Their behavior contracts remain related to the mobile controls even when their spacing and presentation differ substantially.

28.2 A drag has two different results

During a node drag, the pointer produces local preview motion. The canvas updates hit testing and visual position immediately. It may publish bounded collaboration observations, but it does not need a full structural graph transaction for every pointer sample.

At commit, the authored position is applied to the appropriate document or graph owner. If the operation is a new connection, the graph validates the port relationship before it becomes authoritative. A rejected connection must disappear or remain clearly marked as an invalid preview, not look like a successful permanent edge.

Tactility can communicate the state of this interaction. A compatible port can receive a restrained attraction or highlight treatment. A rejected drop can produce a local response. These effects visualize the validator's result; they do not determine type compatibility themselves.

28.3 Different panes have different resource costs

A node inspector can be a normal Surface organism. A SQL editor or terminal may be a specialized island. A large canvas may need spatial hit testing, viewport culling and level-of-detail rendering. The shell coordinates their lifetimes without imposing the same internal representation on all of them.

Opening a heavy tool can load its implementation on demand. Hiding it can release expensive resources while retaining a document checkpoint. A theme change should not recreate every editor instance unless the implementation boundary explicitly requires it.

The inspector subscribes to the selected entity and its relevant state. A telemetry stream for unrelated nodes should not require rerendering the entire workbench. Detailed frame observations remain bounded and sampled so inspection does not overwhelm the system being inspected.

28.4 Zoom has two meanings

Workbench UI zoom changes chrome, spacing and available logical layout. Canvas zoom changes the graph's content coordinates. The two transforms are separate so increasing graph magnification does not also enlarge every toolbar and dialog.

Moving between displays can change pixel density. The renderer updates resource targets and coordinate mappings without changing application identity. Popup placement, hit testing and accessibility geometry follow the same declared transforms.

A tablet profile can prioritize inspection and a reduced set of simultaneous tools. A small phone profile may expose status and approved actions rather than scaling an entire desktop workspace into an unusable miniature. This is capability-based adaptation, not failure to share the design system.

An agent can inspect contracts, explain a finding and propose a patch. It does not bypass review or directly mutate a frontend-owned subtree. A code-owned inspector remains source-owned; a supported visual declaration can be edited through its graph definition.

A qualification session combines dragging with telemetry updates, repeated heavy-editor opening and closing, a theme change, cross-display resizing and a stale update. Correct behavior preserves geometry and ownership, rejects invalid structure, bounds memory and attributes missed deadlines to actual work.

The key measurement is not when an empty canvas appears. It is when useful graph geometry and the required interaction are available.

29. Operational software: an overview and an offline field task

29.1 One domain can require very different pages

An order-fulfillment application has desktop staff reviewing exceptions and field staff capturing delivery evidence. Both work with the same records and permitted state transitions, but their immediate tasks differ.

The desktop page can show a virtualized table, filters, a detail panel and audit information. The field page can show a short sequence with large usable targets, capture controls and explicit local-save status. A tablet can combine the task list and detail when space permits.

Figure 51. The desktop overview and mobile evidence task reuse status, form and action contracts. Their layouts differ because their work differs, not because every component contains an operating-system branch. See the illustrated PDF for the diagram.

The shared assets are domain contracts, reusable organisms and semantic design roles. Reusing those does not require forcing a wide table onto the phone.

29.2 Offline recording is not remote acceptance

A field worker captures a photograph and enters a quantity. The local draft owner records the edits. The media system stores or references evidence according to its privacy and persistence policy. A local confirmation can mean that the device has retained the work.

The backend may not have accepted it yet. That distinction must remain visible. A successful press animation cannot move an order into an authoritative completed state. Synchronization exposes pending, accepted or conflicting results through the graph-owned workflow.

A restrained tactile treatment can confirm capture or a scan. It must not imply a stronger outcome than the application state supports. The same rule holds when optional sound or haptics are disabled: the visible status remains intelligible.

29.3 State conflicts deserve a designed interface

Suppose a desktop operator changes an order while the field device is offline. When the device reconnects, its draft may refer to an older revision. Automatically replacing the form with the server value can erase valid evidence. Automatically overwriting the server can erase the operator's change.

The domain defines a conflict policy. The UI presents that policy with the relevant values and recovery operations. Surface contributes fields, summaries, dialogs and stable editing behavior; it does not invent a universal conflict resolution rule for all records.

The draft remains associated with the record and revision. Changing theme or pane arrangement does not clear it. A filter change cancels obsolete list requests but does not cancel an already committed evidence operation.

29.4 Media and account changes constrain caching

Evidence photos are private resources. A thumbnail can serve the overview while a full image is acquired for inspection. Decoded images and retained camera resources have separate lifetimes.

Switching accounts must not leave the next user with an authorized-looking preview of the previous user's evidence. Cache identity, credentials and display permission are related but separate checks. A stable content hash does not remove the need to verify who may see the resource.

This is also why agent context must be scoped. An exception-summary agent may need selected order data, but not every captured image or every account's history.

29.5 Deployment profiles and acceptance

A camera-heavy field client can use direct CMP. A web-first administrative client can later use React web/JS. The shared component definitions remain useful even when the implementation uses different native capture facilities.

A generated inspection checklist can be an approved graph-owned region. It cannot demand unrelated secrets or add arbitrary executable validation. Publishing an order transition still invokes the real application capability.

The qualification scenario records evidence offline, changes layout, receives a conflicting revision and switches account. The expected outcome preserves work, exposes the intended conflict policy, keeps evidence correctly scoped and never labels pending synchronization as remote completion.

30. Learning software: explanation beside an interactive model

30.1 The arrangement follows the learning task

A learning application can combine an explanation, interactive model, exercise, notes and progress summary. These are product organisms rather than unrelated pages. A reading mode prioritizes text. An exploration mode allocates more room to the model. An expanded layout can show supporting explanation beside manipulation.

Figure 52. Text, a custom model and retained notes participate in one Surface composition. Their owners remain distinct so changing an explanation does not reset a paused simulation or erase a note. See the illustrated PDF for the diagram.

The graph owns lesson identity, attempts, progress and permitted actions. The interactive model owns its internal numerical state unless the application explicitly persists or synchronizes it. The notes owner retains user edits across layout and theme changes.

30.2 Distinguish educational physics from UI physics

A spring diagram can use physical response to teach. Dragging a parameter can show a constraint. A snapping relationship can indicate a valid connection. An impulse can illustrate causal propagation.

However, a scientific model has its own equations and fidelity requirements. It must not silently reuse the approximate visual wave kernel merely because both produce moving shapes. Decorative Tactile behavior belongs to the interface. A lesson's numerical results belong to the educational model.

The same distinction prevents a theme change from changing the lesson's answer. A material language can alter tool affordances and surrounding controls without modifying the model parameters or the recorded result of an exercise.

30.3 Accessibility can expose the model's structure

A custom visualization should offer semantic operations. A learner can select a variable, move a parameter by a specified amount, pause the model or inspect a relationship. These commands support keyboard and assistive interaction as well as agents.

A table, description or stepwise mode can provide another route to the relevant information. Reduced motion can preserve causal explanation one step at a time rather than forcing continuous animation. The goal is not to speak every pixel; it is to expose the model's meaningful state and operations.

The graph can connect these capabilities to the rest of the lesson. It does not need to receive every rendered particle position if those positions are internal numerical or drawing detail.

30.4 Generated explanation is content with an owner

An agent can propose an explanation or compose approved exercise organisms. The proposal enters an approved graph-owned region. The application retains provenance and the user's attempt state separately from generated text.

The agent cannot mark mastery merely by rendering a success panel. Submitting an attempt invokes the learning application's operation, which determines the result according to its policy. A generated explanation can be replaced without rewriting an already recorded attempt.

A note being edited also remains independent. The supporting explanation may change while the note field retains its identity and revision. An active input-method session is not discarded to make room for newly generated content.

30.5 Resource priorities reflect the task

The main lesson text should become usable before an optional procedural background or heavy visualization finishes loading. Audio and video need captions or alternatives and explicit playback lifetimes. A hidden simulation stops unnecessary drawing while retaining the state needed to resume it.

The qualification session pauses the model, edits notes, enlarges text, uses keyboard controls, changes layout and regenerates explanation. Correct behavior preserves the notes and model state, keeps alternatives operable and prevents generated presentation from changing authoritative learning records.

This example demonstrates why a custom engine and a design system are complementary. The engine retains specialized computation while Surface provides coherent composition, ownership and interaction around it.