Skip to content

Commit 2f152ae

Browse files
claudeclaude
committed
fix(website): align plan preview with TUI
1 parent b909f58 commit 2f152ae

2 files changed

Lines changed: 46 additions & 106 deletions

File tree

‎website/theme/components/HomeLayout.tsx‎

Lines changed: 35 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -697,9 +697,6 @@ function RuntimeExecutionFlow({ labels }: { labels: (typeof copy)[Locale] }) {
697697
status: activeIndex < 4 ? 'pending' : activeIndex < 5 ? 'active' : 'done',
698698
},
699699
];
700-
const completedPlanCount = planItems.filter(
701-
(item) => item.status === 'done',
702-
).length;
703700
const subagents: Array<{
704701
name: string;
705702
task: string;
@@ -875,54 +872,6 @@ function RuntimeExecutionFlow({ labels }: { labels: (typeof copy)[Locale] }) {
875872
</article>
876873
) : null}
877874

878-
{activeIndex >= 1 ? (
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>
895-
) : null}
896-
897-
{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-
926875
{activeIndex >= 4 ? (
927876
<article
928877
className={[
@@ -1017,6 +966,19 @@ function RuntimeExecutionFlow({ labels }: { labels: (typeof copy)[Locale] }) {
1017966
</>
1018967
) : null}
1019968
</div>
969+
{activeIndex >= 1 ? (
970+
<section className="a3s-tui-plan" aria-label={labels.tuiPlan}>
971+
<ol>
972+
{planItems.map((item, index) => (
973+
<li className={`is-${item.status}`} key={item.label}>
974+
<span aria-hidden="true">{index === 0 ? '⎿' : ''}</span>
975+
<i aria-hidden="true">{tuiDemoStatusGlyph[item.status]}</i>
976+
<p>{item.label}</p>
977+
</li>
978+
))}
979+
</ol>
980+
</section>
981+
) : null}
1020982
<div className="a3s-tui-effort-rule">
1021983
<span>◇ high</span>
1022984
</div>
@@ -1045,6 +1007,28 @@ function RuntimeExecutionFlow({ labels }: { labels: (typeof copy)[Locale] }) {
10451007
<em>gpt-5 (128k context)</em>
10461008
</span>
10471009
</footer>
1010+
{visibleSubagents.length > 0 ? (
1011+
<section className="a3s-tui-agents" aria-label={labels.tuiSubagents}>
1012+
<header>
1013+
<span aria-hidden="true">•</span>
1014+
<strong>{labels.tuiParallelTask}</strong>
1015+
<small>
1016+
{runningSubagentCount} running · {completedSubagentCount}/3 done
1017+
· 00:04 · ↓ {subagentTokens} tokens
1018+
</small>
1019+
</header>
1020+
<div>
1021+
{visibleSubagents.map((agent) => (
1022+
<p className={`is-${agent.status}`} key={agent.name}>
1023+
<i aria-hidden="true">•</i>
1024+
<b>{agent.name}</b>
1025+
<span>{agent.task}</span>
1026+
<small>00:03 · ↓ {agent.tokens}</small>
1027+
</p>
1028+
))}
1029+
</div>
1030+
</section>
1031+
) : null}
10481032
</section>
10491033
</div>
10501034
);

‎website/theme/index.css‎

Lines changed: 11 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -489,28 +489,6 @@ body {
489489
justify-content: center;
490490
}
491491

492-
.a3s-hero-visual::before,
493-
.a3s-hero-visual::after {
494-
position: absolute;
495-
width: 140px;
496-
height: 140px;
497-
border-color: rgba(108, 163, 255, 0.22);
498-
border-style: solid;
499-
content: '';
500-
}
501-
502-
.a3s-hero-visual::before {
503-
top: 20px;
504-
right: 20px;
505-
border-width: 1px 1px 0 0;
506-
}
507-
508-
.a3s-hero-visual::after {
509-
bottom: 20px;
510-
left: 20px;
511-
border-width: 0 0 1px 1px;
512-
}
513-
514492
.a3s-runtime-visual {
515493
position: relative;
516494
width: min(100%, 520px);
@@ -5669,36 +5647,31 @@ body {
56695647

56705648
.a3s-tui-plan {
56715649
display: grid;
5672-
padding: 5px 8px;
5673-
gap: 3px;
5650+
padding: 1px 0 6px;
56745651
}
56755652

5676-
.a3s-tui-plan > header,
56775653
.a3s-tui-agents > header {
56785654
display: grid;
56795655
min-width: 0;
56805656
color: #cfd3d8;
56815657
align-items: center;
56825658
gap: 7px;
5683-
grid-template-columns: 13px auto minmax(0, 1fr) auto;
5659+
grid-template-columns: 13px minmax(0, 1fr) auto;
56845660
}
56855661

5686-
.a3s-tui-plan > header > span,
56875662
.a3s-tui-agents > header > span {
56885663
color: #77808b;
56895664
font-size: 12px;
56905665
text-align: center;
56915666
}
56925667

5693-
.a3s-tui-plan > header > strong,
56945668
.a3s-tui-agents > header > strong {
56955669
color: #dcdcdc;
56965670
font-size: 11.5px;
56975671
font-weight: 540;
56985672
line-height: 1.4;
56995673
}
57005674

5701-
.a3s-tui-plan > header > small,
57025675
.a3s-tui-agents > header > small {
57035676
overflow: hidden;
57045677
color: #77808b;
@@ -5708,10 +5681,6 @@ body {
57085681
white-space: nowrap;
57095682
}
57105683

5711-
.a3s-tui-plan > header > small {
5712-
grid-column: 4;
5713-
}
5714-
57155684
.a3s-tui-plan ol {
57165685
display: grid;
57175686
min-width: 0;
@@ -5727,14 +5696,15 @@ body {
57275696
min-height: 15px;
57285697
color: #8a929d;
57295698
align-items: center;
5730-
gap: 4px;
5731-
grid-template-columns: 13px 13px minmax(0, 1fr);
5699+
gap: 3px;
5700+
grid-template-columns: 20px 13px minmax(0, 1fr);
57325701
}
57335702

57345703
.a3s-tui-plan li > span {
57355704
color: #606872;
57365705
font-size: 11px;
5737-
text-align: center;
5706+
text-align: left;
5707+
white-space: pre;
57385708
}
57395709

57405710
.a3s-tui-plan li > i {
@@ -5773,19 +5743,10 @@ body {
57735743

57745744
.a3s-tui-agents {
57755745
display: grid;
5776-
padding: 4px 8px;
5746+
padding: 3px 0 0;
57775747
gap: 3px;
57785748
}
57795749

5780-
.a3s-tui-agents > header > em {
5781-
overflow: hidden;
5782-
color: #8d96a1;
5783-
font-size: 10px;
5784-
font-style: normal;
5785-
text-overflow: ellipsis;
5786-
white-space: nowrap;
5787-
}
5788-
57895750
.a3s-tui-agents > div {
57905751
display: grid;
57915752
min-width: 0;
@@ -5801,6 +5762,7 @@ body {
58015762
align-items: center;
58025763
gap: 7px;
58035764
grid-template-columns: 13px auto minmax(0, 1fr) auto;
5765+
padding-left: 20px;
58045766
}
58055767

58065768
.a3s-tui-agents > div > p > i {
@@ -6055,7 +6017,6 @@ body {
60556017
.a3s-tui-composer {
60566018
min-height: 0;
60576019
padding: 0 18px 9px;
6058-
border-top: 1px solid #242a31;
60596020
background: #15191f;
60606021
font-family: var(--a3s-mono);
60616022
}
@@ -6323,8 +6284,8 @@ body {
63236284

63246285
.a3s-tui-plan,
63256286
.a3s-tui-agents {
6326-
padding-right: 3px;
6327-
padding-left: 3px;
6287+
padding-right: 0;
6288+
padding-left: 0;
63286289
}
63296290

63306291
.a3s-tui-artifact {
@@ -6345,25 +6306,20 @@ body {
63456306
}
63466307

63476308
@media (max-width: 390px) {
6348-
.a3s-tui-plan > header,
63496309
.a3s-tui-agents > header {
63506310
gap: 3px 6px;
63516311
grid-template-columns: 13px auto minmax(0, 1fr);
63526312
}
63536313

6354-
.a3s-tui-plan > header > small,
63556314
.a3s-tui-agents > header > small {
63566315
grid-column: 2 / -1;
63576316
text-align: left;
63586317
}
63596318

6360-
.a3s-tui-agents > header > em {
6361-
text-align: right;
6362-
}
6363-
63646319
.a3s-tui-agents > div > p {
63656320
gap: 5px;
63666321
grid-template-columns: 13px auto minmax(0, 1fr) auto;
6322+
padding-left: 12px;
63676323
}
63686324

63696325
.a3s-tui-artifact {

0 commit comments

Comments
 (0)