docs: add interactive component catalog and runtime tutorial

website/docs/v6/en/_nav.json

@@ -2,12 +2,12 @@
   {
     "text": "Docs",
     "link": "/guide/",
-    "activeMatch": "^/guide/(?!examples/|playground/)"
+    "activeMatch": "^/guide/(?!examples/|components/)"
   },
   {
-    "text": "Playground",
-    "link": "/guide/playground/",
-    "activeMatch": "^/guide/playground/"
+    "text": "Components",
+    "link": "/guide/components/",
+    "activeMatch": "^/guide/components/"
   },
   {
     "text": "Examples",

website/docs/v6/en/api/index.mdx

@@ -45,4 +45,4 @@ When connecting your own infrastructure, you can replace `LlmClient`,
 `ContextProvider`, `MemoryStore`, `SessionStore`, Workspace services, tools,
 permission confirmation, hooks, MCP transports, and graph stores. To see how
 events reach a UI first, open the
-[A3S TUI and Web Playground](/guide/playground/).
+[A3S TUI and A3S Web component docs](/guide/components/).

website/docs/v6/en/guide/_meta.json

@@ -3,8 +3,8 @@
   "tui",
   {
     "type": "dir",
-    "name": "playground",
-    "label": "Playground",
+    "name": "components",
+    "label": "Components",
     "collapsible": true,
     "collapsed": false
   },

website/docs/v6/en/guide/components/_meta.json

@@ -0,0 +1,17 @@
+[
+  "index",
+  {
+    "type": "dir",
+    "name": "tui",
+    "label": "A3S TUI",
+    "collapsible": true,
+    "collapsed": false
+  },
+  {
+    "type": "dir",
+    "name": "web",
+    "label": "A3S Web",
+    "collapsible": true,
+    "collapsed": false
+  }
+]

website/docs/v6/en/guide/components/index.mdx

@@ -0,0 +1,28 @@
+---
+title: 'Components'
+description: 'Inspect and operate individual A3S TUI and A3S Web components'
+---
+
+# Components
+
+These pages do not simulate one prebuilt task flow. Every example isolates one component and exposes
+its important states. Edit an input, change a status, or make a decision to see the component respond.
+
+| Library | Documentation                                                                                                                                                                                                                                                                                      |
+| ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| A3S TUI | [Activity](/guide/components/tui/activity), [input and confirmation](/guide/components/tui/input), [navigation](/guide/components/tui/navigation), [data and changes](/guide/components/tui/data), [feedback](/guide/components/tui/feedback)                                                      |
+| A3S Web | [Task input](/guide/components/web/tasks), [execution](/guide/components/web/execution), [permissions and recovery](/guide/components/web/permissions), [coordination](/guide/components/web/coordination), [results](/guide/components/web/results), [workspace](/guide/components/web/workspace) |
+
+## Where each component appears
+
+<AgentBuildingBlocks />
+
+The map follows the runtime stages of a task. The component pages answer the more concrete question:
+how should one event, approval request, or result appear to the user?
+
+## Example scope
+
+- Interactions change local React state only. They do not connect to a model, run commands, or edit files.
+- Examples are redrawn for the documentation width and do not replace the production products.
+- [`A3S-Lab/TUI`](https://github.com/A3S-Lab/TUI) is the source of truth for TUI components.
+- [`apps/web`](https://github.com/A3S-Lab/a3s/tree/main/apps/web) is the source of truth for Web components.

website/docs/v6/en/guide/components/tui/_meta.json

@@ -0,0 +1 @@
+["index", "activity", "input", "navigation", "data", "feedback"]

website/docs/v6/en/guide/components/tui/activity.mdx

@@ -0,0 +1,20 @@
+---
+title: 'Activity'
+description: 'Operate ActivityBlock and Checklist in isolation'
+---
+
+# Activity
+
+## ActivityBlock
+
+A summary for one reasoning or tool activity. Change its status, then select the body to reveal its log.
+
+<A3SComponentDemo name="ActivityBlock" />
+
+## Checklist
+
+A list of plan items. Select an item to cycle through todo, in progress, and complete.
+
+<A3SComponentDemo name="Checklist" />
+
+These components render tool and plan events. They display scheduling state; they do not schedule work.

website/docs/v6/en/guide/components/tui/data.mdx

@@ -0,0 +1,24 @@
+---
+title: 'Data and changes'
+description: 'Operate DataTable, DiffView, and ToolLogView in isolation'
+---
+
+# Data and changes
+
+## DataTable
+
+For structured tool-call, Run, or Artifact data. Change the sort key and select a row.
+
+<A3SComponentDemo name="DataTable" />
+
+## DiffView
+
+Shows file changes. Switch between unified and split views, or reveal whitespace.
+
+<A3SComponentDemo name="DiffView" />
+
+## ToolLogView
+
+Organizes output by tool call. Filter active calls or expand an individual result.
+
+<A3SComponentDemo name="ToolLogView" />

website/docs/v6/en/guide/components/tui/feedback.mdx

@@ -0,0 +1,30 @@
+---
+title: 'Feedback'
+description: 'Operate Alert, Progress, Toast, and SessionStatus in isolation'
+---
+
+# Feedback
+
+## Alert
+
+Info, success, warning, and error states use distinct semantic colors with one stable layout.
+
+<A3SComponentDemo name="Alert" />
+
+## Progress
+
+A pausable progress display. Move the slider to inspect any completion value.
+
+<A3SComponentDemo name="Progress" />
+
+## Toast
+
+Short feedback that leaves terminal content visible. Trigger or dismiss it.
+
+<A3SComponentDemo name="Toast" />
+
+## SessionStatus
+
+Collects the work mode, model settings, context use, and keyboard hints.
+
+<A3SComponentDemo name="SessionStatus" />

website/docs/v6/en/guide/components/tui/index.mdx

@@ -0,0 +1,21 @@
+---
+title: 'A3S TUI components'
+description: 'Activity, input, navigation, data, and feedback components from A3S TUI'
+---
+
+# A3S TUI components
+
+A3S TUI renders `AgentEvent`, plans, tool logs, diffs, and Session state in a terminal. The pages
+below isolate the components, so you do not need to understand a complete screen first.
+
+| Category                                              | Components                                    |
+| ----------------------------------------------------- | --------------------------------------------- |
+| [Activity](/guide/components/tui/activity)            | `ActivityBlock`, `Checklist`                  |
+| [Input and confirmation](/guide/components/tui/input) | `ChoicePrompt`, `Confirm`, `TextInput`        |
+| [Navigation](/guide/components/tui/navigation)        | `Tabs`, `TreePicker`                          |
+| [Data and changes](/guide/components/tui/data)        | `DataTable`, `DiffView`, `ToolLogView`        |
+| [Feedback](/guide/components/tui/feedback)            | `Alert`, `Progress`, `Toast`, `SessionStatus` |
+
+See
+[`src/components/mod.rs`](https://github.com/A3S-Lab/TUI/blob/main/src/components/mod.rs)
+for the complete export list.

website/docs/v6/en/guide/components/tui/input.mdx

@@ -0,0 +1,24 @@
+---
+title: 'Input and confirmation'
+description: 'Operate ChoicePrompt, Confirm, and TextInput in isolation'
+---
+
+# Input and confirmation
+
+## ChoicePrompt
+
+Use it for a short set of mutually exclusive options. Select an option to inspect focus and selection.
+
+<A3SComponentDemo name="ChoicePrompt" />
+
+## Confirm
+
+Renders a human approval request from the runtime. Allow and deny only update this local example.
+
+<A3SComponentDemo name="Confirm" />
+
+## TextInput
+
+A single-line instruction input with length, empty, and submit feedback.
+
+<A3SComponentDemo name="TextInput" />

website/docs/v6/en/guide/components/tui/navigation.mdx

@@ -0,0 +1,18 @@
+---
+title: 'Navigation'
+description: 'Operate Tabs and TreePicker in isolation'
+---
+
+# Navigation
+
+## Tabs
+
+Move between Transcript, Changes, and Artifacts without leaving the current Session.
+
+<A3SComponentDemo name="Tabs" />
+
+## TreePicker
+
+Expand a directory and pick files for context. Expansion and selection remain independent.
+
+<A3SComponentDemo name="TreePicker" />

website/docs/v6/en/guide/components/web/_meta.json

@@ -0,0 +1,9 @@
+[
+  "index",
+  "tasks",
+  "execution",
+  "permissions",
+  "coordination",
+  "results",
+  "workspace"
+]

website/docs/v6/en/guide/components/web/coordination.mdx

@@ -0,0 +1,18 @@
+---
+title: 'Coordination'
+description: 'Operate the runtime plan and subagent lists in isolation'
+---
+
+# Coordination
+
+## TaskRuntimePlanList
+
+Shows the current plan and completion ratio. Select an item to cycle its state.
+
+<A3SComponentDemo name="TaskRuntimePlanList" />
+
+## TaskRuntimeSubagentList
+
+Shows subagent status and progress. Selecting an item does not cancel or restart it.
+
+<A3SComponentDemo name="TaskRuntimeSubagentList" />

website/docs/v6/en/guide/components/web/execution.mdx

@@ -0,0 +1,24 @@
+---
+title: 'Execution'
+description: 'Operate ExecutionStream, ReasoningDisclosure, and ToolCallTimeline in isolation'
+---
+
+# Execution
+
+## ExecutionStream
+
+Appends runtime events in arrival order. Select `next event` to add them one at a time.
+
+<A3SComponentDemo name="ExecutionStream" />
+
+## ReasoningDisclosure
+
+A collapsible reasoning summary with distinct live and complete states.
+
+<A3SComponentDemo name="ReasoningDisclosure" />
+
+## ToolCallTimeline
+
+One tool call with its status, command, and output. Status and expansion remain local to the component.
+
+<A3SComponentDemo name="ToolCallTimeline" />

website/docs/v6/en/guide/components/web/index.mdx

@@ -0,0 +1,22 @@
+---
+title: 'A3S Web components'
+description: 'Task, execution, permission, coordination, result, and workspace components from A3S Web'
+---
+
+# A3S Web components
+
+A3S Web consumes runtime Sessions, event streams, permission requests, Artifacts, and Memory data.
+These pages group components by responsibility instead of placing everything in one fixed flow.
+
+| Category                                                      | Components                                                   |
+| ------------------------------------------------------------- | ------------------------------------------------------------ |
+| [Task input](/guide/components/web/tasks)                     | `TaskComposer`, `TaskLibrary`                                |
+| [Execution](/guide/components/web/execution)                  | `ExecutionStream`, `ReasoningDisclosure`, `ToolCallTimeline` |
+| [Permissions and recovery](/guide/components/web/permissions) | `PermissionDecision`, `RecoveryNotice`                       |
+| [Coordination](/guide/components/web/coordination)            | `TaskRuntimePlanList`, `TaskRuntimeSubagentList`             |
+| [Results](/guide/components/web/results)                      | `DeliverySummary`, `ArtifactEntries`, `ChangesInspector`     |
+| [Workspace](/guide/components/web/workspace)                  | `WorkspaceEditor`, `MemoryGraph`                             |
+
+See
+[`apps/web/docs/COMPONENT_SPEC.md`](https://github.com/A3S-Lab/a3s/blob/main/apps/web/docs/COMPONENT_SPEC.md)
+for the complete component boundary.

website/docs/v6/en/guide/components/web/permissions.mdx

@@ -0,0 +1,18 @@
+---
+title: 'Permissions and recovery'
+description: 'Operate PermissionDecision and RecoveryNotice in isolation'
+---
+
+# Permissions and recovery
+
+## PermissionDecision
+
+Keeps the operation, scope, and decision in one approval panel. Reset after allowing or denying.
+
+<A3SComponentDemo name="PermissionDecision" />
+
+## RecoveryNotice
+
+The recovery entry point after a Session is interrupted. Dismiss it or enter the restoring state.
+
+<A3SComponentDemo name="RecoveryNotice" />

website/docs/v6/en/guide/components/web/results.mdx

@@ -0,0 +1,24 @@
+---
+title: 'Results'
+description: 'Operate DeliverySummary, ArtifactEntries, and ChangesInspector in isolation'
+---
+
+# Results
+
+## DeliverySummary
+
+Combines completion state, verification, and a change summary with optional details.
+
+<A3SComponentDemo name="DeliverySummary" />
+
+## ArtifactEntries
+
+Select an Artifact from the current Run and inspect its type, size, and URI.
+
+<A3SComponentDemo name="ArtifactEntries" />
+
+## ChangesInspector
+
+Select a file and switch between unified and split diffs.
+
+<A3SComponentDemo name="ChangesInspector" />

website/docs/v6/en/guide/components/web/tasks.mdx

@@ -0,0 +1,18 @@
+---
+title: 'Task input'
+description: 'Operate TaskComposer and TaskLibrary in isolation'
+---
+
+# Task input
+
+## TaskComposer
+
+Combines task input, context entry, mode, and reasoning effort. Edit the text, change mode, and submit.
+
+<A3SComponentDemo name="TaskComposer" />
+
+## TaskLibrary
+
+Filters and selects recent tasks. Searching does not discard the current selection.
+
+<A3SComponentDemo name="TaskLibrary" />

website/docs/v6/en/guide/components/web/workspace.mdx

@@ -0,0 +1,18 @@
+---
+title: 'Workspace'
+description: 'Operate WorkspaceEditor and MemoryGraph in isolation'
+---
+
+# Workspace
+
+## WorkspaceEditor
+
+Switch files, edit a line, and inspect the unsaved state.
+
+<A3SComponentDemo name="WorkspaceEditor" />
+
+## MemoryGraph
+
+Switch between relation graph and timeline modes. Select a memory node in the graph.
+
+<A3SComponentDemo name="MemoryGraph" />