Skip to content

Commit 762615d

Browse files
ZhiXiao-LinZhiXiao-Lin
authored
docs: add interactive component catalog and runtime tutorial (#35)
1 parent d9d718c commit 762615d

78 files changed

Lines changed: 7449 additions & 3156 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎website/docs/v6/en/_nav.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22
{
33
"text": "Docs",
44
"link": "/guide/",
5-
"activeMatch": "^/guide/(?!examples/|playground/)"
5+
"activeMatch": "^/guide/(?!examples/|components/)"
66
},
77
{
8-
"text": "Playground",
9-
"link": "/guide/playground/",
10-
"activeMatch": "^/guide/playground/"
8+
"text": "Components",
9+
"link": "/guide/components/",
10+
"activeMatch": "^/guide/components/"
1111
},
1212
{
1313
"text": "Examples",

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,4 +45,4 @@ When connecting your own infrastructure, you can replace `LlmClient`,
4545
`ContextProvider`, `MemoryStore`, `SessionStore`, Workspace services, tools,
4646
permission confirmation, hooks, MCP transports, and graph stores. To see how
4747
events reach a UI first, open the
48-
[A3S TUI and Web Playground](/guide/playground/).
48+
[A3S TUI and A3S Web component docs](/guide/components/).

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
"tui",
44
{
55
"type": "dir",
6-
"name": "playground",
7-
"label": "Playground",
6+
"name": "components",
7+
"label": "Components",
88
"collapsible": true,
99
"collapsed": false
1010
},

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
[
2+
"index",
3+
{
4+
"type": "dir",
5+
"name": "tui",
6+
"label": "A3S TUI",
7+
"collapsible": true,
8+
"collapsed": false
9+
},
10+
{
11+
"type": "dir",
12+
"name": "web",
13+
"label": "A3S Web",
14+
"collapsible": true,
15+
"collapsed": false
16+
}
17+
]

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
---
2+
title: 'Components'
3+
description: 'Inspect and operate individual A3S TUI and A3S Web components'
4+
---
5+
6+
# Components
7+
8+
These pages do not simulate one prebuilt task flow. Every example isolates one component and exposes
9+
its important states. Edit an input, change a status, or make a decision to see the component respond.
10+
11+
| Library | Documentation |
12+
| ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
13+
| 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) |
14+
| 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) |
15+
16+
## Where each component appears
17+
18+
<AgentBuildingBlocks />
19+
20+
The map follows the runtime stages of a task. The component pages answer the more concrete question:
21+
how should one event, approval request, or result appear to the user?
22+
23+
## Example scope
24+
25+
- Interactions change local React state only. They do not connect to a model, run commands, or edit files.
26+
- Examples are redrawn for the documentation width and do not replace the production products.
27+
- [`A3S-Lab/TUI`](https://github.com/A3S-Lab/TUI) is the source of truth for TUI components.
28+
- [`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‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
["index", "activity", "input", "navigation", "data", "feedback"]

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
title: 'Activity'
3+
description: 'Operate ActivityBlock and Checklist in isolation'
4+
---
5+
6+
# Activity
7+
8+
## ActivityBlock
9+
10+
A summary for one reasoning or tool activity. Change its status, then select the body to reveal its log.
11+
12+
<A3SComponentDemo name="ActivityBlock" />
13+
14+
## Checklist
15+
16+
A list of plan items. Select an item to cycle through todo, in progress, and complete.
17+
18+
<A3SComponentDemo name="Checklist" />
19+
20+
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‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
---
2+
title: 'Data and changes'
3+
description: 'Operate DataTable, DiffView, and ToolLogView in isolation'
4+
---
5+
6+
# Data and changes
7+
8+
## DataTable
9+
10+
For structured tool-call, Run, or Artifact data. Change the sort key and select a row.
11+
12+
<A3SComponentDemo name="DataTable" />
13+
14+
## DiffView
15+
16+
Shows file changes. Switch between unified and split views, or reveal whitespace.
17+
18+
<A3SComponentDemo name="DiffView" />
19+
20+
## ToolLogView
21+
22+
Organizes output by tool call. Filter active calls or expand an individual result.
23+
24+
<A3SComponentDemo name="ToolLogView" />

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
---
2+
title: 'Feedback'
3+
description: 'Operate Alert, Progress, Toast, and SessionStatus in isolation'
4+
---
5+
6+
# Feedback
7+
8+
## Alert
9+
10+
Info, success, warning, and error states use distinct semantic colors with one stable layout.
11+
12+
<A3SComponentDemo name="Alert" />
13+
14+
## Progress
15+
16+
A pausable progress display. Move the slider to inspect any completion value.
17+
18+
<A3SComponentDemo name="Progress" />
19+
20+
## Toast
21+
22+
Short feedback that leaves terminal content visible. Trigger or dismiss it.
23+
24+
<A3SComponentDemo name="Toast" />
25+
26+
## SessionStatus
27+
28+
Collects the work mode, model settings, context use, and keyboard hints.
29+
30+
<A3SComponentDemo name="SessionStatus" />

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
---
2+
title: 'A3S TUI components'
3+
description: 'Activity, input, navigation, data, and feedback components from A3S TUI'
4+
---
5+
6+
# A3S TUI components
7+
8+
A3S TUI renders `AgentEvent`, plans, tool logs, diffs, and Session state in a terminal. The pages
9+
below isolate the components, so you do not need to understand a complete screen first.
10+
11+
| Category | Components |
12+
| ----------------------------------------------------- | --------------------------------------------- |
13+
| [Activity](/guide/components/tui/activity) | `ActivityBlock`, `Checklist` |
14+
| [Input and confirmation](/guide/components/tui/input) | `ChoicePrompt`, `Confirm`, `TextInput` |
15+
| [Navigation](/guide/components/tui/navigation) | `Tabs`, `TreePicker` |
16+
| [Data and changes](/guide/components/tui/data) | `DataTable`, `DiffView`, `ToolLogView` |
17+
| [Feedback](/guide/components/tui/feedback) | `Alert`, `Progress`, `Toast`, `SessionStatus` |
18+
19+
See
20+
[`src/components/mod.rs`](https://github.com/A3S-Lab/TUI/blob/main/src/components/mod.rs)
21+
for the complete export list.

0 commit comments

Comments
 (0)