Skip to content

Commit b909f58

Browse files
claudeclaude
committed
feat(website): expand TUI execution demo
1 parent 22f9166 commit b909f58

2 files changed

Lines changed: 686 additions & 45 deletions

File tree

‎website/theme/components/HomeLayout.tsx‎

Lines changed: 228 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -309,8 +309,22 @@ const runtimeLayers = [
309309
tags: string[];
310310
}>;
311311

312-
const tuiDemoPhases = ['compose', 'explore', 'command', 'answer'] as const;
313-
const tuiDemoDurations = [2400, 1750, 1850, 4200];
312+
const tuiDemoPhases = [
313+
'compose',
314+
'plan',
315+
'delegate',
316+
'track',
317+
'artifact',
318+
'remoteui',
319+
'answer',
320+
] as const;
321+
const tuiDemoDurations = [2400, 1900, 2600, 2300, 2100, 2600, 4200];
322+
type TuiDemoStatus = 'pending' | 'active' | 'done';
323+
const tuiDemoStatusGlyph: Record<TuiDemoStatus, string> = {
324+
pending: '◻',
325+
active: '◼',
326+
done: '✔',
327+
};
314328
const tuiMascot = [
315329
' .-^-.',
316330
' /_____\\',
@@ -400,7 +414,7 @@ const copy = {
400414
architectureBody:
401415
'示例使用仓库中实际提供的 a3s_code API。滚动或点击步骤，代码会逐步加入 Session、上下文限制、权限、事件流和持久化。',
402416
architectureAlt:
403-
'A3S Code 一次执行的交互流程图，展示请求的输入、Runtime 的处理和每一步输出。',
417+
'A3S Code 一次执行的交互流程图，展示任务规划、进度追踪、并行子智能体、报告制品和 RemoteUI 渐进式界面。',
404418
capabilitiesEyebrow: 'WHAT YOU GET',
405419
capabilitiesTitle: 'Runtime 提供的五类能力',
406420
capabilitiesBody:
@@ -434,13 +448,29 @@ const copy = {
434448
tuiTip: '输入消息 · / 打开命令 · Shift+Tab 切换模式 · Ctrl+C 两次退出',
435449
tuiUser: 'You',
436450
tuiWorking: 'Working…',
437-
tuiExplore: 'Explored',
438-
tuiExploreSummary: '读取 AGENTS.md、Cargo.toml 与发布工作流',
439-
tuiCommand: 'Ran command',
440-
tuiCommandSummary: 'git diff --check && cargo test -p a3s-code-core',
441-
tuiCommandResult: '测试通过 · 0 warnings',
451+
tuiPlan: 'Plan',
452+
tuiPlanInspect: '读取项目约束与发布配置',
453+
tuiPlanDelegate: '并行检查代码、测试与文档',
454+
tuiPlanPublish: '生成报告制品并打开 RemoteUI',
455+
tuiSubagents: 'Subagents',
456+
tuiParallelTask: '并行检查发布风险',
457+
tuiAgentExploreTask: '扫描约束与发布工作流',
458+
tuiAgentTestTask: '运行核心回归测试',
459+
tuiAgentReviewTask: '核对文档与包元数据',
460+
tuiArtifact: 'Artifact',
461+
tuiArtifactPath: 'release-risk-report/index.html',
462+
tuiArtifactWriting: 'publishing…',
463+
tuiArtifactReady: 'HTML · 18.4 KB',
464+
tuiOpenView: 'Open view',
465+
tuiRemoteUi: 'RemoteUI',
466+
tuiRemotePreparing: 'preparing',
467+
tuiRemoteStreaming: 'streaming',
468+
tuiRemoteReady: 'ready',
469+
tuiReportTitle: '发布风险报告',
470+
tuiReportSummary: '2 risks · 12 checks',
442471
tuiAssistant: 'A3S Code',
443-
tuiResponse: '检查完成。发现 2 个发布风险，并给出了对应文件与验证依据。',
472+
tuiResponse:
473+
'检查完成。3 个子智能体并行完成；报告制品已生成，可通过 RemoteUI 打开。',
444474
tuiContext: 'ctx:12%',
445475
tutorialStep: '步骤',
446476
tutorialCode: '代码',
@@ -483,7 +513,7 @@ const copy = {
483513
architectureBody:
484514
'The example uses the actual a3s_code API in this repository. Scroll or select a step to add the Session, context limits, policy, event stream, and persistence.',
485515
architectureAlt:
486-
'An interactive A3S Code run showing the input, runtime work, and output of each step.',
516+
'An interactive A3S Code run showing task planning, progress tracking, parallel subagents, report artifacts, and a progressive RemoteUI view.',
487517
capabilitiesEyebrow: 'WHAT YOU GET',
488518
capabilitiesTitle: 'Five parts of the runtime',
489519
capabilitiesBody:
@@ -518,14 +548,29 @@ const copy = {
518548
'Type a message · / for commands · Shift+Tab cycles mode · Ctrl+C twice to exit',
519549
tuiUser: 'You',
520550
tuiWorking: 'Working…',
521-
tuiExplore: 'Explored',
522-
tuiExploreSummary: 'Read AGENTS.md, Cargo.toml, and release workflows',
523-
tuiCommand: 'Ran command',
524-
tuiCommandSummary: 'git diff --check && cargo test -p a3s-code-core',
525-
tuiCommandResult: 'tests passed · 0 warnings',
551+
tuiPlan: 'Plan',
552+
tuiPlanInspect: 'Read repo constraints and release config',
553+
tuiPlanDelegate: 'Check code, tests, and docs in parallel',
554+
tuiPlanPublish: 'Publish report artifact and open RemoteUI',
555+
tuiSubagents: 'Subagents',
556+
tuiParallelTask: 'Audit release risks in parallel',
557+
tuiAgentExploreTask: 'Scan constraints and release workflows',
558+
tuiAgentTestTask: 'Run the core regression suite',
559+
tuiAgentReviewTask: 'Review docs and package metadata',
560+
tuiArtifact: 'Artifact',
561+
tuiArtifactPath: 'release-risk-report/index.html',
562+
tuiArtifactWriting: 'publishing…',
563+
tuiArtifactReady: 'HTML · 18.4 KB',
564+
tuiOpenView: 'Open view',
565+
tuiRemoteUi: 'RemoteUI',
566+
tuiRemotePreparing: 'preparing',
567+
tuiRemoteStreaming: 'streaming',
568+
tuiRemoteReady: 'ready',
569+
tuiReportTitle: 'Release risk report',
570+
tuiReportSummary: '2 risks · 12 checks',
526571
tuiAssistant: 'A3S Code',
527572
tuiResponse:
528-
'Review complete. I found two release risks and linked each one to its file and verification evidence.',
573+
'Review complete. Three subagents finished in parallel; the report artifact is ready to open in RemoteUI.',
529574
tuiContext: 'ctx:12%',
530575
tutorialStep: 'STEP',
531576
tutorialCode: 'CODE',
@@ -637,6 +682,63 @@ function RuntimeExecutionFlow({ labels }: { labels: (typeof copy)[Locale] }) {
637682
const active = tuiDemoPhases[activeIndex] ?? tuiDemoPhases[0];
638683
const isRunning = isPlaying && isVisible;
639684
const isWorking = activeIndex > 0 && activeIndex < tuiDemoPhases.length - 1;
685+
const planItems: Array<{ label: string; status: TuiDemoStatus }> = [
686+
{
687+
label: labels.tuiPlanInspect,
688+
status:
689+
activeIndex < 1 ? 'pending' : activeIndex === 1 ? 'active' : 'done',
690+
},
691+
{
692+
label: labels.tuiPlanDelegate,
693+
status: activeIndex < 2 ? 'pending' : activeIndex < 4 ? 'active' : 'done',
694+
},
695+
{
696+
label: labels.tuiPlanPublish,
697+
status: activeIndex < 4 ? 'pending' : activeIndex < 5 ? 'active' : 'done',
698+
},
699+
];
700+
const completedPlanCount = planItems.filter(
701+
(item) => item.status === 'done',
702+
).length;
703+
const subagents: Array<{
704+
name: string;
705+
task: string;
706+
status: TuiDemoStatus;
707+
tokens: string;
708+
}> = [
709+
{
710+
name: 'explore',
711+
task: labels.tuiAgentExploreTask,
712+
status: activeIndex >= 3 ? 'done' : 'active',
713+
tokens: '0.8k',
714+
},
715+
{
716+
name: 'test',
717+
task: labels.tuiAgentTestTask,
718+
status: activeIndex >= 4 ? 'done' : 'active',
719+
tokens: '1.5k',
720+
},
721+
{
722+
name: 'review',
723+
task: labels.tuiAgentReviewTask,
724+
status: activeIndex >= 3 ? 'done' : 'active',
725+
tokens: '0.9k',
726+
},
727+
];
728+
const completedSubagentCount = subagents.filter(
729+
(agent) => agent.status === 'done',
730+
).length;
731+
const runningSubagentCount = subagents.length - completedSubagentCount;
732+
const visibleSubagents =
733+
activeIndex === 2
734+
? subagents
735+
: activeIndex === 3
736+
? subagents.filter((agent) => agent.status === 'active')
737+
: [];
738+
const subagentTokens =
739+
activeIndex < 3 ? '1.8k' : activeIndex < 4 ? '2.7k' : '3.2k';
740+
const artifactIsPublished = activeIndex >= 5;
741+
const remoteUiIsReady = activeIndex >= 6;
640742
const typingInterval = Math.max(
641743
18,
642744
Math.floor(1550 / Math.max(labels.flowTask.length, 1)),
@@ -774,39 +876,126 @@ function RuntimeExecutionFlow({ labels }: { labels: (typeof copy)[Locale] }) {
774876
) : null}
775877

776878
{activeIndex >= 1 ? (
777-
<article
778-
className={[
779-
'a3s-tui-entry',
780-
'a3s-tui-entry--tool',
781-
activeIndex === 1 ? 'is-active' : 'is-complete',
782-
].join(' ')}
783-
>
784-
<span aria-hidden="true">•</span>
785-
<div>
786-
<strong>{labels.tuiExplore}</strong>
787-
<small>└ {labels.tuiExploreSummary}</small>
788-
</div>
789-
</article>
879+
<section className="a3s-tui-plan" aria-label={labels.tuiPlan}>
880+
<header>
881+
<span aria-hidden="true">•</span>
882+
<strong>{labels.tuiPlan}</strong>
883+
<small>{completedPlanCount}/3 done</small>
884+
</header>
885+
<ol>
886+
{planItems.map((item, index) => (
887+
<li className={`is-${item.status}`} key={item.label}>
888+
<span aria-hidden="true">{index === 0 ? '⎿' : ''}</span>
889+
<i aria-hidden="true">{tuiDemoStatusGlyph[item.status]}</i>
890+
<p>{item.label}</p>
891+
</li>
892+
))}
893+
</ol>
894+
</section>
790895
) : null}
791896

792897
{activeIndex >= 2 ? (
898+
<section
899+
className="a3s-tui-agents"
900+
aria-label={labels.tuiSubagents}
901+
>
902+
<header>
903+
<span aria-hidden="true">•</span>
904+
<strong>{labels.tuiSubagents}</strong>
905+
<em>{labels.tuiParallelTask}</em>
906+
<small>
907+
{runningSubagentCount} running · {completedSubagentCount}/3
908+
done · ↓ {subagentTokens}
909+
</small>
910+
</header>
911+
{visibleSubagents.length > 0 ? (
912+
<div>
913+
{visibleSubagents.map((agent) => (
914+
<p className={`is-${agent.status}`} key={agent.name}>
915+
<i aria-hidden="true">•</i>
916+
<b>{agent.name}</b>
917+
<span>{agent.task}</span>
918+
<small>↓ {agent.tokens}</small>
919+
</p>
920+
))}
921+
</div>
922+
) : null}
923+
</section>
924+
) : null}
925+
926+
{activeIndex >= 4 ? (
793927
<article
794928
className={[
795-
'a3s-tui-entry',
796-
'a3s-tui-entry--tool',
797-
activeIndex === 2 ? 'is-active' : 'is-complete',
798-
].join(' ')}
929+
'a3s-tui-artifact',
930+
artifactIsPublished ? 'is-published' : 'is-publishing',
931+
remoteUiIsReady ? 'is-ready' : '',
932+
]
933+
.filter(Boolean)
934+
.join(' ')}
799935
>
800-
<span aria-hidden="true">•</span>
801-
<div>
802-
<strong>{labels.tuiCommand}</strong>
803-
<code>│ {labels.tuiCommandSummary}</code>
804-
<small>└ {labels.tuiCommandResult}</small>
936+
<div className="a3s-tui-artifact-meta">
937+
<header>
938+
<span aria-hidden="true">◇</span>
939+
<strong>{labels.tuiArtifact}</strong>
940+
<small>
941+
{artifactIsPublished
942+
? labels.tuiArtifactReady
943+
: labels.tuiArtifactWriting}
944+
</small>
945+
</header>
946+
<code>{labels.tuiArtifactPath}</code>
947+
<span
948+
className={[
949+
'a3s-tui-open-view',
950+
activeIndex === 5 ? 'is-opening' : '',
951+
]
952+
.filter(Boolean)
953+
.join(' ')}
954+
>
955+
<i aria-hidden="true">↗</i>
956+
{artifactIsPublished
957+
? labels.tuiOpenView
958+
: labels.tuiArtifactWriting}
959+
{artifactIsPublished ? <b>{labels.tuiRemoteUi}</b> : null}
960+
</span>
961+
</div>
962+
<div
963+
className={[
964+
'a3s-tui-remote-view',
965+
!artifactIsPublished
966+
? 'is-preparing'
967+
: remoteUiIsReady
968+
? 'is-ready'
969+
: 'is-streaming',
970+
].join(' ')}
971+
>
972+
<header>
973+
<span aria-hidden="true">●</span>
974+
<b>{labels.tuiRemoteUi}</b>
975+
<small>
976+
{!artifactIsPublished
977+
? labels.tuiRemotePreparing
978+
: remoteUiIsReady
979+
? labels.tuiRemoteReady
980+
: labels.tuiRemoteStreaming}
981+
</small>
982+
</header>
983+
<div>
984+
<strong>{labels.tuiReportTitle}</strong>
985+
<small>
986+
{remoteUiIsReady ? labels.tuiReportSummary : '···'}
987+
</small>
988+
<span aria-hidden="true">
989+
<i />
990+
<i />
991+
<i />
992+
</span>
993+
</div>
805994
</div>
806995
</article>
807996
) : null}
808997

809-
{activeIndex >= 3 ? (
998+
{activeIndex >= 6 ? (
810999
<article className="a3s-tui-entry a3s-tui-entry--assistant">
8111000
<span aria-hidden="true">•</span>
8121001
<div>

0 commit comments

Comments
 (0)