Skip to content

Commit 8baa5a8

Browse files
ZhiXiao-Linclaude
ZhiXiao-Lin
and
claude
authored
fix(website): align capability demos with real Code TUI (#57)
Co-authored-by: Claude <claude@anthropic.com>
1 parent 78f962c commit 8baa5a8

13 files changed

Lines changed: 1538 additions & 1562 deletions

‎website/scripts/check-built-site.mjs‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,20 @@ const sharedTuiRegionMarkers = [
6666
'data-tui-region="footer"',
6767
];
6868

69+
const realCapabilityTuiMarkers = [
70+
'data-real-tui-scene="hitl"',
71+
'a3s-real-user-message',
72+
'a3s-real-tool-line',
73+
'◇ high',
74+
'default mode',
75+
];
76+
77+
const obsoleteCapabilityUiMarkers = [
78+
'a3s-capability-player-intro',
79+
'a3s-capability-tui-plan',
80+
'HUMAN APPROVAL REQUIRED',
81+
];
82+
6983
for (const homepage of ['index.html', 'en/index.html']) {
7084
const html = await readFile(path.join(outputRoot, homepage), 'utf8');
7185
for (const marker of capabilityMarkers) {
@@ -84,6 +98,22 @@ for (const homepage of ['index.html', 'en/index.html']) {
8498
);
8599
}
86100
}
101+
102+
for (const marker of realCapabilityTuiMarkers) {
103+
if (!html.includes(marker)) {
104+
throw new Error(
105+
`${homepage} is missing real capability TUI marker: ${marker}`,
106+
);
107+
}
108+
}
109+
110+
for (const marker of obsoleteCapabilityUiMarkers) {
111+
if (html.includes(marker)) {
112+
throw new Error(
113+
`${homepage} still renders obsolete capability UI: ${marker}`,
114+
);
115+
}
116+
}
87117
}
88118

89119
const brokenReferences = [];

‎website/scripts/check-doc-accuracy.mjs‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@ const [
8888
rspressConfig,
8989
homeLayout,
9090
tuiRuntimeDemo,
91+
tuiWelcomeBanner,
9192
] = await Promise.all([
9293
readFile(path.join(repositoryRoot, 'core', 'Cargo.toml'), 'utf8'),
9394
readFile(path.join(repositoryRoot, 'sdk', 'node', 'package.json'), 'utf8'),
@@ -105,6 +106,10 @@ const [
105106
path.join(websiteRoot, 'theme', 'components', 'TuiRuntimeDemo.tsx'),
106107
'utf8',
107108
),
109+
readFile(
110+
path.join(websiteRoot, 'theme', 'components', 'TuiWelcomeBanner.tsx'),
111+
'utf8',
112+
),
108113
]);
109114

110115
const sourceVersions = new Map([
@@ -166,7 +171,7 @@ if (JSON.stringify(versions) !== JSON.stringify(configuredVersions)) {
166171
);
167172
}
168173
if (
169-
![homeLayout, tuiRuntimeDemo].some((source) =>
174+
![homeLayout, tuiRuntimeDemo, tuiWelcomeBanner].some((source) =>
170175
source.includes(`a3s-code ${manifest.current}`),
171176
)
172177
) {

‎website/theme/capability-responsive.css‎

Lines changed: 140 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@media (max-width: 1100px) {
22
.a3s-capability-console {
3-
grid-template-columns: 230px minmax(0, 1fr);
3+
grid-template-columns: 225px minmax(0, 1fr);
44
}
55

66
.a3s-capability-selector > button {
@@ -15,10 +15,8 @@
1515
height: 31px;
1616
}
1717

18-
.a3s-capability-player-intro {
19-
align-items: flex-start;
20-
grid-template-columns: 1fr;
21-
gap: 14px;
18+
.a3s-real-tool-line > header {
19+
grid-template-columns: 15px auto minmax(0, 1fr);
2220
}
2321
}
2422

@@ -66,10 +64,6 @@
6664
.a3s-capability-selector > button > em {
6765
display: none;
6866
}
69-
70-
.a3s-capability-player-stage {
71-
min-height: 390px;
72-
}
7367
}
7468

7569
@media (max-width: 640px) {
@@ -101,103 +95,183 @@
10195
font-size: 10px;
10296
}
10397

104-
.a3s-capability-player-intro {
105-
gap: 9px;
98+
.a3s-capability-player > .a3s-tui-terminal {
99+
padding: 14px 11px 8px;
106100
}
107101

108-
.a3s-capability-player-intro h3 {
109-
font-size: 16px;
102+
.a3s-capability-player.is-fullscreen > .a3s-tui-terminal {
103+
padding: 5px;
110104
}
111105

112-
.a3s-capability-player-stage {
113-
min-height: 360px;
106+
.a3s-real-transcript {
107+
gap: 14px;
114108
}
115109

116-
.a3s-capability-scene {
117-
min-height: 350px;
118-
padding: 0;
110+
.a3s-real-user-message {
111+
padding: 11px 10px;
119112
}
120113

121-
.a3s-capability-call,
122-
.a3s-runtime-tool-call {
123-
grid-template-columns: auto minmax(0, 1fr);
114+
.a3s-real-user-message > p,
115+
.a3s-real-tool-line > header > strong {
116+
font-size: 10.5px;
124117
}
125118

126-
.a3s-capability-call em {
127-
display: none;
119+
.a3s-real-tool-line > header > code {
120+
font-size: 9.5px;
128121
}
129122

130-
.a3s-progressive-endpoint span {
123+
.a3s-real-tool-line > div > p > code {
124+
font-size: 9px;
125+
}
126+
127+
.a3s-real-approval > ol > li > span,
128+
.a3s-real-approval > ol > li > b,
129+
.a3s-real-approval > ol > li > i,
130+
.a3s-real-approval > ol > li > p,
131+
.a3s-real-approval-detail > span,
132+
.a3s-real-approval-detail > code {
133+
font-size: 9.5px;
134+
}
135+
136+
.a3s-real-runtime-tracker > header {
137+
grid-template-columns: 13px minmax(0, 1fr);
138+
}
139+
140+
.a3s-real-runtime-tracker > header > small {
141+
padding-left: 20px;
142+
grid-column: 1 / -1;
143+
}
144+
145+
.a3s-real-runtime-tracker > div > p {
146+
grid-template-columns: 13px auto minmax(0, 1fr);
147+
}
148+
149+
.a3s-real-runtime-tracker > div > p > small {
131150
display: none;
132151
}
133152

134-
.a3s-progressive-steps > div {
135-
grid-template-columns: 54px 14px minmax(0, 1fr);
153+
.a3s-real-ide {
154+
grid-template-rows: minmax(0, 1fr) 52px;
155+
gap: 3px;
136156
}
137157

138-
.a3s-intelligence-workbench {
139-
min-height: 0;
140-
grid-template-columns: 1fr;
158+
.a3s-real-ide-main,
159+
.a3s-real-ide-footer {
160+
gap: 3px;
141161
}
142162

143-
.a3s-intelligence-code {
144-
border-right: 0;
145-
border-bottom: 1px solid #29323c;
163+
.a3s-real-ide-main {
164+
grid-template-columns: minmax(105px, 0.31fr) minmax(0, 0.69fr);
146165
}
147166

148-
.a3s-intelligence-workbench > aside {
149-
min-height: 174px;
167+
.a3s-real-ide-frame {
168+
border-radius: 5px;
169+
grid-template-rows: 24px minmax(0, 1fr);
150170
}
151171

152-
.a3s-intelligence-workbench li {
153-
min-height: 34px;
172+
.a3s-real-ide-frame > header {
173+
padding: 0 6px;
174+
font-size: 8.5px;
154175
}
155176

156-
.a3s-capability-scene--intelligence {
157-
min-height: 0;
177+
.a3s-real-ide-tree > div {
178+
padding: 4px 2px;
158179
}
159180

160-
.a3s-capability-scene--intelligence > footer {
161-
flex-wrap: wrap;
181+
.a3s-real-ide-tree p {
182+
min-height: 23px;
183+
padding: 0 3px;
184+
grid-template-columns: 11px minmax(0, 1fr);
185+
gap: 3px;
186+
font-size: 8.5px;
162187
}
163188

164-
.a3s-capability-scene--intelligence > footer code {
165-
display: none;
189+
.a3s-real-ide-tree p:nth-child(n + 2) {
190+
padding-left: 8px;
166191
}
167192

168-
.a3s-ctx-results > div {
169-
grid-template-columns: 18px 48px minmax(0, 1fr);
193+
.a3s-real-ide-code > p {
194+
min-height: 24px;
195+
grid-template-columns: 28px minmax(0, 1fr);
170196
}
171197

172-
.a3s-ctx-results > div small {
173-
display: none;
198+
.a3s-real-ide-code > p > span {
199+
padding-right: 5px;
200+
font-size: 8px;
174201
}
175202

176-
.a3s-ctx-actions {
177-
grid-template-columns: 1fr;
203+
.a3s-real-ide-code > p > code,
204+
.a3s-real-ide-results > p {
205+
font-size: 8.5px;
178206
}
179207

180-
.a3s-capability-tui-tag:nth-of-type(n + 4) {
181-
display: none;
208+
.a3s-real-ide-footer .a3s-real-ide-frame > p {
209+
padding-right: 5px;
210+
padding-left: 5px;
211+
font-size: 7.5px;
212+
}
213+
214+
.a3s-real-ctx-results > div > p {
215+
grid-template-columns: 23px minmax(0, 1fr);
216+
}
217+
218+
.a3s-real-ctx-results > div > p > b,
219+
.a3s-real-ctx-results > div > p > strong,
220+
.a3s-real-notice {
221+
font-size: 9.5px;
222+
}
223+
224+
.a3s-real-ctx-results > div > small,
225+
.a3s-real-ctx-results > footer {
226+
padding-left: 28px;
227+
font-size: 8.5px;
228+
}
229+
}
230+
231+
@media (max-width: 390px) {
232+
.a3s-real-approval > ol > li {
233+
grid-template-columns: 10px 11px 12px minmax(0, 1fr);
234+
gap: 3px;
235+
}
236+
237+
.a3s-real-approval > ol > li > p {
238+
font-size: 8.7px;
239+
}
240+
241+
.a3s-real-tool-line > header {
242+
grid-template-columns: 13px auto minmax(0, 1fr);
243+
gap: 3px;
244+
}
245+
246+
.a3s-real-tool-line > header > strong {
247+
font-size: 9.5px;
248+
}
249+
250+
.a3s-real-tool-line > header > code {
251+
font-size: 8.7px;
252+
}
253+
254+
.a3s-real-ide-main {
255+
grid-template-columns: 96px minmax(0, 1fr);
256+
}
257+
258+
.a3s-real-ide-footer {
259+
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
260+
}
261+
262+
.a3s-real-ctx-results > div > p > strong,
263+
.a3s-real-ctx-results > div > small {
264+
white-space: normal;
265+
}
266+
267+
.a3s-real-ctx-results > footer {
268+
white-space: normal;
182269
}
183270
}
184271

185272
@media (prefers-reduced-motion: reduce) {
186-
.a3s-capability-player-stage,
187-
.a3s-capability-tui-plan li.is-active > i,
188-
.a3s-progressive-steps .is-active i,
189-
.a3s-progressive-view.is-ready,
190-
.a3s-runtime-batch > div.is-running > i b,
191-
.a3s-ctx-actions > div.is-ready {
192-
animation: none;
193-
}
194-
195-
.a3s-capability-selector > button,
196-
.a3s-capability-selector > button::after,
197-
.a3s-capability-approval,
198-
.a3s-progressive-steps > div,
199-
.a3s-runtime-batch > div > i b,
200-
.a3s-intelligence-workbench li {
201-
transition: none;
273+
.a3s-capability-console,
274+
.a3s-capability-selector {
275+
scroll-behavior: auto;
202276
}
203277
}

0 commit comments

Comments
 (0)