# Environments The ASK UI runs in three distinct execution environments. Each one carries a different cognitive contract with the user — *what kind of work am I doing right now, with what permissions, against what data?* — and the interface must signal which environment is active at every moment. > **Rule of thumb.** A user who can't tell which environment they're in within two seconds of landing on a screen is a bug. --- ## Why three? Two failure modes drive the split: 1. **Cognitive confusion.** A user typing a free-form question in Chat has different expectations than one stepping through a Vertical App. Mixing the chrome dissolves both modes. 2. **Permission scope.** Notebook reads documents. Vertical Apps write to external systems. The visual contract has to make that asymmetry obvious. --- ## 3.1 — General Chat The fluid prototyping surface. Daily-driver versatility for autonomous agent interaction. ### UX core driver Wide, conversational, low friction. ### Layout A wide, centralized conversational layout prioritizing rapid, text-based inputs and dynamic results. No sidebar. No persistent context pane. The composer is the visual anchor. ### Session state **Ephemeral.** New sessions don't preserve prior context unless the user explicitly pins them. ### Visual indicators - **Top-left badge:** `CHAT` in `caption` type style, neutral. - Background: `ask.paper`. - Composer: full-width, single-line by default, expandable. - No pod or app badge — chat is the unbounded surface. ### Action restrictions Read-only by default. Tool calls that hit external systems escalate to a HITL confirmation (Pattern B). --- ## 3.2 — Notebook The deep workspace. Anchored exploration of a specific knowledge base (a *Pod*). ### UX core driver Deep exploration of a specific base of knowledge. ### Layout A functional **split-screen architecture**: ``` ┌────────────────────────┬─────────────────────────┐ │ Conversational prompts│ Pinned contextual │ │ Left: 60% │ insights + active │ │ Scrollable thread │ source documentation │ │ │ Right: 40% │ └────────────────────────┴─────────────────────────┘ ``` - Left panel: prompts, drafts, agent responses. - Right panel: pinned citations, source documents (PDF/Doc viewer), agent scratchpad. ### Session state **Persistent.** Context and files are saved for continuous research. Closing and reopening the notebook restores both panels exactly. ### Visual indicators - **Top-left badge:** `NOTEBOOK` + Pod boundary in metadata style: *[Knowledge Pod: Legal Department — Senior Only]*. - The Pod badge is **high-visibility** and persistent — it never collapses or hides. - Background: `ask.paper`, with `ask.white` for the right-panel cards. - A subtle vertical rule (`ask.rule`) separates the two panels. ### Action restrictions - **Read-only** against uploaded documents — the Notebook never modifies sources. - **Write-enabled** for drafts, summaries, and synthesis output (saved to the Pod's draft area, not to external systems). - Cross-Pod queries are forbidden — Pod boundaries are enforced at the data layer. --- ## 3.3 — Vertical Apps The transactional surface. Logic-driven, predefined corporate workflows. ### UX core driver Step-by-step execution of a defined process, linked to external systems. ### Layout A highly structured interface. **Free-form text prompts are replaced by rigid input forms, step-by-step layout wizards, and progress steppers.** ``` ┌──────────────────────────────────────────────────┐ │ Stepper: ① ──── ② ──── ③ ──── ④ │ ← always visible ├──────────────────────────────────────────────────┤ │ │ │ Current step content │ │ Structured fields │ │ Inline validation │ │ │ ├──────────────────────────────────────────────────┤ │ [ Back ] [ Next ] │ └──────────────────────────────────────────────────┘ ``` ### Session state **Transactional.** Step-by-step execution linked to external systems. State is committed only when the user confirms via HITL. ### Visual indicators - **Top-left badge:** App-specific name, e.g. *Contract Reviewer*, *Non-Conformance Analyst*, *Invoice Reconciler*. The badge color matches the App's category. - A persistent **target-system chip** in the top-right: *Writes to: SAP S/4HANA · ERP · Tenant europe-west-1*. - Background: `ask.white` (more clinical than the conversational surfaces). ### Action restrictions - **Write-enabled**, but every external write requires explicit HITL confirmation ([Pattern B](./compliance-patterns.md#pattern-b--human-in-the-loop-hitl-validation)). - No free-form text input at the top level — the agent operates within the form schema. - RBAC-filtered action menus ([Pattern D](./compliance-patterns.md#pattern-d--implicit-rbac-filtering-zero-trust-ui)). --- ## The signal matrix For quick reference, when designing a new surface: | Property | Chat | Notebook | Vertical App | |---|---|---|---| | Layout | Wide single column | Split 60/40 | Stepper + forms | | Session | Ephemeral | Persistent | Transactional | | Background | `ask.paper` | `ask.paper` | `ask.white` | | Top-left badge | `CHAT` | `NOTEBOOK` + Pod | App name | | Top-right badge | — | — | Target system | | Composer | Conversational | Conversational (left) | Schema-driven forms | | Write target | None (ephemeral) | Pod drafts | External systems | | RBAC filter | Tool menu | Pod boundary | App menu + forms | | Citations required | Yes | Yes | Yes (per field) | | HITL required for | Tool writes | Pod writes | All external writes | --- ## Figma mapping In the `03 — Patterns` Figma file: ``` env/chat ← General Chat chrome (CHAT badge) env/notebook ← Notebook chrome (Knowledge Pod badge, split-screen) env/vertical ← Vertical App chrome (App badge, stepper) ``` Every product file composes from these three. Never reinvent the chrome. --- ## Common mistakes - **Mixing chrome.** A "chat inside the vertical app" is not allowed — the form schema *is* the interaction. - **Hiding the Pod badge.** The Notebook's Pod boundary must be visible at all times. Collapsing it for "more vertical space" leaks data: a user might paste from the wrong Pod and not notice. - **Using Vertical App chrome for read-only flows.** If there's no external write, it's a Notebook, not an App. - **Inventing a fourth environment.** If you think you need one, you almost certainly need a new Vertical App.