> For the complete documentation index, see [llms.txt](https://faction-os.gitbook.io/faction-os-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://faction-os.gitbook.io/faction-os-docs/.spec_system/archive/phases/phase_19/session_03_web_shell_and_store.md).

# Session 03: Web Shell And Store

**Session ID**: `phase19-session03-web-shell-and-store` **Package**: apps/web **Status**: Complete **Completed**: 2026-06-26 **Estimated Tasks**: \~12-25 **Estimated Duration**: 2-4 hours

***

## Objective

Restructure the web orchestration surface around the new contracts while keeping the existing compact panel usable.

***

## Scope

### In Scope (MVP)

* Extend `orchestrationApi` for new snapshot routes and mutation helpers
* Add store slices for plans, attention, executors, hero lifecycle, permissions, file intents, workpad, evidence, diagnostics, channels, and metrics
* Add WebSocket reducers and refresh-on-mutation helpers for every Session 01 event family
* Split the current Orchestration shell into header, tabs, drawers, and focused subcomponents while preserving existing compact rows
* Empty, loading, stale revision, unavailable, observe-only, proposal-only, and executor-ready render states

### Out of Scope

* Deep feature behavior for each tab
* Playwright coverage for mutating flows

***

## Prerequisites

* [x] Sessions 01 and 02 complete
* [x] Existing `OrchestrationPanel.tsx`, `orchestrationApi`, and Zustand store patterns inspected

***

## Deliverables

1. Updated API client methods for Phase 19 orchestration routes
2. Store slices and pure payload normalizers for new event families
3. Component shell with tabs/drawers ready for later sessions
4. Web tests for reducer hydration and current panel preservation

***

## Source Coverage And Evidence

Source coverage:

* Session Split Plan Session 03: Web Shell And Store
* Current Baseline section for existing Orchestration panel behavior
* Historical Reference Shape and Implementation Target 26 for adjacent UI chunks
* Balls-To-The-Wall Track C: Web Restructure

Key EXAMPLES links:

* [Asset inventory component chunks](https://github.com/AI-with-Apex-VIP/factionos/tree/main/.spec_system/EXAMPLES/findings/asset-inventory.md#L36-L88)
* [Tech stack component chunks](https://github.com/AI-with-Apex-VIP/factionos/tree/main/.spec_system/EXAMPLES/findings/tech-stack.md#L122-L139)
* [Historical user guide](https://github.com/AI-with-Apex-VIP/factionos/tree/main/.spec_system/EXAMPLES/1st-pass-artifacts/skills/factionos-guide/SKILL.md#L11-L18)
* [Historical WebSocket events](https://github.com/AI-with-Apex-VIP/factionos/tree/main/.spec_system/EXAMPLES/findings/websocket-events.txt#L1-L172)

***

## Success Criteria

* [x] Existing queue, template, lineage, and guarded-action display behavior is preserved
* [x] New slices hydrate from route snapshots and update from WebSocket events
* [x] The detail modal renders empty and unavailable states without crashing
* [x] Component tests cover compatibility with current Orchestration data


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://faction-os.gitbook.io/faction-os-docs/.spec_system/archive/phases/phase_19/session_03_web_shell_and_store.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.