Skip to content

Commit 1ee35b4

Browse files
CodegassCodegass
committed
Architecture: show validation↔docker links + clean mobile stack
Desktop - Bridge column now splits into two subgrid slots: the upper pair (use tool / tool output) aligns with the ReAct row, the lower pair (checks memory / checks files) aligns with the Validation row, so both sets of arrows physically sit next to the boxes they connect. - Each validator box carries its own target tag (Agent State Evaluator → Agent Memory, File Validator → Java Project Files) matching the paper's explicit edges. Mobile (≤700px) - Reorders to Input → ReAct → Docker → Validation → Report, matching the natural reading flow. - Adds a labeled connector strip on top of each box (↓ from input, ↓ use tool / ↑ tool output, ↑ checks memory & files, ↓ setup report when done). - ReAct quad collapses to 2×2 without the arrow-only columns; below 440px it stacks to one column.
1 parent cfa4d9a commit 1ee35b4

2 files changed

Lines changed: 126 additions & 49 deletions

File tree

‎website/css/style.css‎

Lines changed: 98 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -850,15 +850,25 @@ header.g {
850850
font-weight: 500;
851851
}
852852

853-
/* Horizontal bridge column between ReAct and Docker */
853+
/* Bridge column: two slots, aligned to ReAct row and Validation row respectively */
854854
.ag-bridge {
855+
display: grid;
856+
grid-template-rows: subgrid;
857+
grid-row: 1 / span 2;
858+
padding: 0 4px;
859+
}
860+
861+
.bridge-slot {
855862
display: flex;
856863
flex-direction: column;
857864
justify-content: center;
858-
gap: 24px;
859-
padding: 0 4px;
865+
align-items: center;
866+
gap: 20px;
860867
}
861868

869+
.bridge-slot-valid .ag-bridge-row .arr,
870+
.bridge-slot-valid .ag-bridge-row .lbl { color: #d97706; }
871+
862872
.ag-bridge-row {
863873
display: flex;
864874
flex-direction: column;
@@ -881,6 +891,25 @@ header.g {
881891
white-space: nowrap;
882892
}
883893

894+
/* Validator target label */
895+
.v-box { display: flex; flex-direction: column; }
896+
897+
.v-target {
898+
margin-top: 6px;
899+
padding-top: 6px;
900+
border-top: 1px dashed var(--border);
901+
font-family: var(--mono);
902+
font-size: 0.5rem;
903+
letter-spacing: 0.06em;
904+
text-transform: uppercase;
905+
color: #d97706;
906+
display: flex;
907+
align-items: center;
908+
gap: 4px;
909+
}
910+
911+
.v-target .arr { font-size: 12px; line-height: 1; }
912+
884913
/* Docker internals */
885914
.ag-fs {
886915
border: 1px dashed var(--border);
@@ -935,32 +964,15 @@ header.g {
935964
gap: 8px;
936965
}
937966

938-
.v-links {
939-
display: flex;
940-
flex-wrap: wrap;
941-
gap: 4px 14px;
942-
padding-top: 6px;
943-
border-top: 1px dashed var(--border);
944-
}
945-
946-
.vlink {
947-
display: inline-flex;
948-
align-items: center;
949-
gap: 4px;
950-
font-family: var(--mono);
951-
font-size: 0.5rem;
952-
letter-spacing: 0.04em;
953-
color: var(--fg-dim);
954-
}
955-
956-
.vlink .arr { color: var(--fg-faint); font-size: 12px; line-height: 1; }
957-
958967
/* Input/Report columns: compact, centered */
959968
.ag-input,
960969
.ag-report {
961970
align-self: stretch;
962971
}
963972

973+
/* ── Mobile-only connector strips (hidden on desktop) ── */
974+
.mobile-flow { display: none; }
975+
964976
/* Responsive: reflow on narrow viewports */
965977
@media (max-width: 1000px) {
966978
.arch-grid {
@@ -970,31 +982,86 @@ header.g {
970982
"input react docker"
971983
"report react docker"
972984
"valid valid docker";
985+
grid-auto-flow: dense;
973986
}
974987
.ag-bridge { display: none; }
988+
.ag-valid { border-top: 2px solid #d97706; }
975989
}
976990

991+
/* Phone: vertical single-column stack with explicit connector strips */
977992
@media (max-width: 700px) {
978993
.arch-grid {
979994
grid-template-columns: 1fr;
995+
grid-template-rows: auto;
980996
grid-template-areas:
981997
"input"
982998
"react"
983-
"valid"
984999
"docker"
1000+
"valid"
9851001
"report";
1002+
gap: 0;
1003+
}
1004+
1005+
/* Each section gets a mobile-only flow strip on top via ::before */
1006+
.arch-grid .ag { position: relative; }
1007+
1008+
.ag-react::before,
1009+
.ag-docker::before,
1010+
.ag-valid::before,
1011+
.ag-report::before {
1012+
display: flex;
1013+
align-items: center;
1014+
justify-content: center;
1015+
gap: 8px;
1016+
padding: 10px 12px;
1017+
margin: 0 -12px 10px -12px;
1018+
font-family: var(--mono);
1019+
font-size: 0.5rem;
1020+
letter-spacing: 0.08em;
1021+
text-transform: uppercase;
1022+
color: var(--fg-faint);
1023+
background: var(--bg-subtle);
1024+
border-bottom: 1px dashed var(--border);
9861025
}
1026+
1027+
.ag-react::before { content: "↓ from User Input"; }
1028+
.ag-docker::before { content: "↓ use tool / ↑ tool output"; color: var(--fg-dim); }
1029+
.ag-valid::before { content: "↑ checks memory & files (Docker)"; color: #d97706; }
1030+
.ag-report::before { content: "↓ when all tasks finished (ReAct → Report)"; color: #16a34a; }
1031+
1032+
/* Validation's highlighted feedback strip stays on top */
1033+
.ag-valid .ag-feedback-top {
1034+
margin-top: 0;
1035+
}
1036+
1037+
/* ReAct quad: 2×2 compact grid with inline arrows inside boxes */
9871038
.react-quad {
988-
grid-template-columns: 1fr;
989-
grid-template-rows: repeat(6, auto);
1039+
grid-template-columns: 1fr 1fr;
1040+
grid-template-rows: auto auto;
1041+
gap: 6px;
9901042
}
9911043
.r-thinking { grid-column: 1; grid-row: 1; }
992-
.r-plan { grid-column: 1; grid-row: 2; }
993-
.r-action { grid-column: 1; grid-row: 3; }
994-
.r-observation { grid-column: 1; grid-row: 4; }
995-
.r-obs { grid-column: 1; grid-row: 5; }
996-
.r-decision { grid-column: 1; grid-row: 6; }
1044+
.r-action { grid-column: 2; grid-row: 1; }
1045+
.r-decision { grid-column: 1; grid-row: 2; }
1046+
.r-observation { grid-column: 2; grid-row: 2; }
1047+
.r-plan, .r-obs { display: none; }
1048+
1049+
/* Two-column docker stays readable on phone */
1050+
.ag-fs-inner { flex-direction: column; }
1051+
1052+
/* Validation grid stays 2 cols (validator + evaluator); stack below 440px */
1053+
.v-grid { grid-template-columns: 1fr 1fr; }
1054+
}
1055+
1056+
@media (max-width: 440px) {
9971057
.v-grid { grid-template-columns: 1fr; }
1058+
.react-quad {
1059+
grid-template-columns: 1fr;
1060+
}
1061+
.r-thinking { grid-column: 1; grid-row: 1; }
1062+
.r-action { grid-column: 1; grid-row: 2; }
1063+
.r-observation { grid-column: 1; grid-row: 3; }
1064+
.r-decision { grid-column: 1; grid-row: 4; }
9981065
}
9991066

10001067
/* ============================================================

‎website/index.html‎

Lines changed: 28 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -220,15 +220,27 @@ <h5>Observation</h5>
220220
</div>
221221
</div>
222222

223-
<!-- Col 3 spanning 2 rows: horizontal bridge -->
223+
<!-- Col 3 spanning 2 rows: bridges ReAct↔Docker and Validation↔Docker -->
224224
<div class="ag ag-bridge">
225-
<div class="ag-bridge-row">
226-
<span class="arr">→</span>
227-
<span class="lbl">use tool</span>
225+
<div class="bridge-slot bridge-slot-react">
226+
<div class="ag-bridge-row">
227+
<span class="arr">→</span>
228+
<span class="lbl">use tool</span>
229+
</div>
230+
<div class="ag-bridge-row">
231+
<span class="arr">←</span>
232+
<span class="lbl">tool output</span>
233+
</div>
228234
</div>
229-
<div class="ag-bridge-row">
230-
<span class="arr">←</span>
231-
<span class="lbl">tool output</span>
235+
<div class="bridge-slot bridge-slot-valid">
236+
<div class="ag-bridge-row bridge-row-mem">
237+
<span class="arr">→</span>
238+
<span class="lbl">checks memory</span>
239+
</div>
240+
<div class="ag-bridge-row bridge-row-files">
241+
<span class="arr">→</span>
242+
<span class="lbl">checks files</span>
243+
</div>
232244
</div>
233245
</div>
234246

@@ -267,29 +279,27 @@ <h5>Java Project Files</h5>
267279
<div class="ag ag-valid">
268280
<div class="ag-feedback-top">
269281
<span class="arr">↑</span>
270-
<span class="lbl">feedback → Observation</span>
282+
<span class="lbl">feedback → Observation (ReAct Loop)</span>
271283
</div>
272284
<div class="ag-section-header c-amber">Validation System</div>
273285
<div class="v-grid">
274-
<div class="dia-box c-green">
275-
<h5>File Validator</h5>
286+
<div class="dia-box c-blue v-box">
287+
<h5>Agent State Evaluator</h5>
276288
<ul>
277289
<li>Rule based</li>
278-
<li>Reads Java files directly</li>
290+
<li>Detects stuck loops</li>
279291
</ul>
292+
<div class="v-target"><span class="arr">→</span> Agent Memory</div>
280293
</div>
281-
<div class="dia-box c-blue">
282-
<h5>State Evaluator</h5>
294+
<div class="dia-box c-green v-box">
295+
<h5>File Validator</h5>
283296
<ul>
284297
<li>Rule based</li>
285-
<li>Reads Agent Memory</li>
298+
<li>Ground truth over claims</li>
286299
</ul>
300+
<div class="v-target"><span class="arr">→</span> Java Project Files</div>
287301
</div>
288302
</div>
289-
<div class="v-links">
290-
<span class="vlink"><span class="arr">→</span> checks memory</span>
291-
<span class="vlink"><span class="arr">→</span> checks files</span>
292-
</div>
293303
</div>
294304

295305
</div>

0 commit comments

Comments
 (0)