-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
1322 lines (1074 loc) · 65.2 KB
/
Copy pathindex.html
File metadata and controls
1322 lines (1074 loc) · 65.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A working outline for building layered feedback loops around agentic software delivery.">
<link rel="icon" href="data:,">
<title>How Feedback Loops Turn Agentic Coding Into a Self-Improving Factory</title>
<script>document.documentElement.classList.add('js');</script>
<style>
:root {
color-scheme: light dark;
--paper: #f5f1e8;
--ink: #17201c;
--muted: #5c6861;
--line: #cbc7bb;
--line-strong: #89928c;
--teal: #087d70;
--diagram-panel: #e8e3d7;
--diagram-accent: #d4e8e2;
--diagram-warm: #eee0c6;
--placeholder: #b43b32;
--sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--serif: Georgia, "Times New Roman", serif;
}
@media (prefers-color-scheme: dark) {
:root {
--paper: #151a17;
--ink: #eef1ed;
--muted: #abb5ae;
--line: #3f4942;
--line-strong: #748078;
--teal: #63cbbb;
--diagram-panel: #202823;
--diagram-accent: #1d3b35;
--diagram-warm: #3a3121;
--placeholder: #ff8a80;
}
}
* { box-sizing: border-box; }
html {
overflow-y: scroll;
scroll-behavior: smooth;
scroll-padding-top: 1.5rem;
}
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--sans);
font-size: 17px;
line-height: 1.65;
}
.page {
width: min(1728px, calc(100% - 64px));
margin: 0 auto;
padding: 28px 0 80px;
}
.hero {
padding: clamp(54px, 9vw, 110px) 0 clamp(44px, 7vw, 76px);
border-top: 5px solid var(--teal);
border-bottom: 1px solid var(--line-strong);
}
.cover-page .hero {
padding: clamp(38px, 5vw, 64px) 0 clamp(28px, 4vw, 46px);
}
.cover-page .hero h1 {
max-width: 790px;
font-size: clamp(2.5rem, 4.35vw, 4rem);
}
.cover-page .hero .subtitle { margin-top: 20px; }
h1,
h2 {
color: var(--ink);
line-height: 1.1;
text-wrap: balance;
}
h1 {
max-width: 1020px;
margin: 0;
font-family: var(--serif);
font-size: clamp(3rem, 7vw, 6rem);
font-weight: 600;
letter-spacing: -0.05em;
}
.subtitle {
max-width: 900px;
margin: 30px 0 0;
color: var(--muted);
font-family: var(--serif);
font-size: clamp(1.16rem, 2vw, 1.48rem);
line-height: 1.55;
}
.document-layout {
display: grid;
grid-template-columns: 270px minmax(0, 1fr);
gap: 58px;
align-items: start;
}
.document { min-width: 0; }
.document-page {
min-height: calc(100vh - 56px);
scroll-margin-top: 24px;
}
.js .document-page { display: none; }
.js .document-page.is-active { display: block; }
.cover-page { padding-bottom: 56px; }
.toc {
position: sticky;
top: 24px;
padding-top: 14px;
border-top: 3px solid var(--teal);
}
.toc strong {
display: block;
margin-bottom: 8px;
color: var(--ink);
font-size: 0.8rem;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.toc-intro {
margin: 0 0 16px;
color: var(--muted);
font-size: 0.79rem;
line-height: 1.45;
}
.toc ol {
margin: 0;
padding: 0;
list-style: none;
border-bottom: 1px solid var(--line);
}
.toc li { border-top: 1px solid var(--line); }
.toc a {
display: grid;
grid-template-columns: 3.25rem minmax(0, 1fr);
gap: 0.35rem;
padding: 13px 2px 14px;
text-decoration: none;
}
.toc-index {
color: var(--teal);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.1em;
line-height: 1.65;
}
.toc-title {
display: block;
color: var(--ink);
font-size: 0.91rem;
font-weight: 700;
line-height: 1.35;
}
.toc-summary {
display: block;
margin-top: 3px;
color: var(--muted);
font-size: 0.74rem;
line-height: 1.42;
}
.toc a:hover .toc-title,
.toc a:focus-visible .toc-title,
.toc a[aria-current="page"] .toc-title { color: var(--teal); }
.toc a:focus-visible {
outline: 2px solid var(--teal);
outline-offset: 4px;
}
.content-page {
width: 100%;
padding: 0 0 56px;
}
.page-masthead {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: clamp(54px, 9vw, 94px);
padding-bottom: 14px;
border-bottom: 1px solid var(--line-strong);
}
.contents-link,
.page-number {
color: var(--muted);
font-size: 0.73rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.contents-link { text-decoration: none; }
.contents-link:hover,
.contents-link:focus-visible { color: var(--teal); }
.contents-link:focus-visible {
outline: 2px solid var(--teal);
outline-offset: 4px;
}
.section-letter {
margin: 0 0 12px;
color: var(--teal);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.content-page > h2 {
max-width: 780px;
margin: 0 0 28px;
font-family: var(--serif);
font-size: clamp(2.2rem, 4.3vw, 3.5rem);
font-weight: 600;
letter-spacing: -0.036em;
}
.finished-stage {
max-width: 800px;
margin-bottom: 44px;
}
.finished-stage:has(> :is(.delivery-figure, .browser-verification-figure, .feedback-loops-figure)) { width: 100%; max-width: 1400px; }
.finished-stage:has(> :is(.delivery-figure, .browser-verification-figure, .feedback-loops-figure)) > :not(:is(.delivery-figure, .browser-verification-figure, .feedback-loops-figure)) { max-width: 800px; }
.finished-stage h3 {
margin: 0 0 22px;
font-family: var(--serif);
font-size: clamp(1.75rem, 3vw, 2.35rem);
font-weight: 600;
letter-spacing: -0.025em;
}
.finished-stage p { margin: 0 0 1.15em; }
.requirements {
margin: 0.25rem 0 1.4rem;
padding-left: 1.35rem;
}
.requirements li { margin: 0.3rem 0; }
.process-label {
margin-top: 28px;
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.11em;
text-transform: uppercase;
}
.finished-stage .process-line {
margin-bottom: 0;
padding: 16px 0;
border-top: 1px solid var(--line-strong);
border-bottom: 1px solid var(--line);
color: var(--teal);
font-weight: 700;
}
.feedback-records {
margin: 28px 0;
padding: 2px 0 2px 22px;
border-left: 3px solid var(--teal);
}
.feedback-records .process-label { color: var(--teal); }
.feedback-records p:last-child { margin-bottom: 0; }
.outline {
margin: 0;
padding-left: 1.35rem;
}
.outline > li {
margin: 0 0 1rem;
padding-left: 0.35rem;
}
.outline ul {
margin: 0.6rem 0 0;
padding-left: 1.35rem;
}
.outline ul li { margin: 0.35rem 0; }
.placeholder,
.placeholder strong,
.placeholder ul,
.placeholder li::marker {
color: var(--placeholder);
}
.workflow-code {
margin: 18px 0 22px;
padding: 18px 20px;
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 10px;
font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
font-size: 0.92rem;
line-height: 1.55;
white-space: pre;
}
.workflow-figure {
max-width: 800px;
margin: 34px 0 44px;
}
.workflow-figure svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.diagram-node {
fill: var(--diagram-panel);
stroke: var(--line-strong);
stroke-width: 1.5;
vector-effect: non-scaling-stroke;
}
.diagram-node-accent {
fill: var(--diagram-accent);
stroke: var(--teal);
}
.diagram-node-warm { fill: var(--diagram-warm); }
.diagram-line {
fill: none;
stroke: var(--line-strong);
stroke-width: 2;
vector-effect: non-scaling-stroke;
}
.diagram-guide {
fill: none;
stroke: var(--teal);
stroke-dasharray: 5 5;
stroke-width: 1.5;
vector-effect: non-scaling-stroke;
}
.diagram-arrowhead { fill: var(--line-strong); }
.diagram-text {
fill: var(--ink);
font-family: var(--sans);
font-size: 14px;
font-weight: 700;
text-anchor: middle;
}
.diagram-label {
fill: var(--teal);
font-family: var(--sans);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
text-anchor: middle;
text-transform: uppercase;
}
.overview-figure { width: 100%; max-width: 1400px; }
.delivery-figure { width: 100%; max-width: 1400px; }
.browser-verification-figure { width: 100%; max-width: 1400px; }
.feedback-loops-figure { width: 100%; max-width: 1400px; }
.overview-figure .overview-track {
fill: none;
stroke: var(--line-strong);
stroke-width: 2;
vector-effect: non-scaling-stroke;
}
.overview-figure .overview-station { fill: var(--teal); }
.overview-figure .overview-station-secondary { fill: var(--line-strong); }
.overview-figure .overview-station-number {
fill: var(--paper);
font-family: var(--sans);
font-size: 17px;
font-weight: 800;
text-anchor: middle;
}
.overview-figure .overview-station-label {
fill: var(--ink);
font-family: var(--sans);
font-size: 24px;
font-weight: 650;
text-anchor: middle;
}
.overview-figure .overview-feedback-label {
fill: var(--teal);
font-family: var(--sans);
font-size: 17px;
font-weight: 650;
letter-spacing: 0.04em;
text-anchor: middle;
}
.overview-figure .overview-feedback-path {
fill: none;
stroke: var(--teal);
stroke-width: 1.5;
stroke-dasharray: 6 6;
vector-effect: non-scaling-stroke;
}
.overview-figure .overview-feedback-arrowhead { fill: var(--teal); }
.workflow-figure figcaption {
margin-top: 12px;
color: var(--muted);
font-size: 0.8rem;
line-height: 1.5;
}
.page-navigation {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: stretch;
gap: 18px;
margin-top: 76px;
padding-top: 20px;
border-top: 1px solid var(--line-strong);
}
.page-navigation a {
min-width: 0;
color: var(--ink);
text-decoration: none;
}
.page-navigation a:hover .page-nav-title,
.page-navigation a:focus-visible .page-nav-title,
.page-navigation .page-nav-contents:hover,
.page-navigation .page-nav-contents:focus-visible { color: var(--teal); }
.page-navigation a:focus-visible {
outline: 2px solid var(--teal);
outline-offset: 5px;
}
.page-nav-next { text-align: right; }
.page-nav-label {
display: block;
margin-bottom: 3px;
color: var(--muted);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.11em;
text-transform: uppercase;
}
.page-nav-title {
display: block;
overflow: hidden;
font-family: var(--serif);
font-size: 0.98rem;
font-weight: 700;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
.page-nav-contents {
align-self: center;
padding: 8px 12px;
color: var(--muted) !important;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.11em;
text-transform: uppercase;
}
@media (min-width: 851px) {
body:has(#contents.is-active) .document-layout {
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
body:has(#contents.is-active) .toc {
position: static;
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
column-gap: 38px;
padding: 14px 0 18px;
border-bottom: 1px solid var(--line);
}
body:has(#contents.is-active) .toc strong,
body:has(#contents.is-active) .toc-intro {
grid-column: 1;
}
body:has(#contents.is-active) .toc-intro { margin-bottom: 0; }
body:has(#contents.is-active) .toc ol {
display: grid;
grid-column: 2;
grid-row: 1 / span 2;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: 18px;
border-bottom: 0;
}
body:has(#contents.is-active) .toc a { padding: 9px 2px 10px; }
body:has(#contents.is-active) .toc-summary { display: none; }
body:has(#contents.is-active) .document,
body:has(#contents.is-active) #contents { width: 100%; max-width: none; }
body:has(#contents.is-active) .cover-page .hero h1,
body:has(#contents.is-active) .cover-page .hero .subtitle { max-width: 1200px; }
}
@media (max-width: 850px) {
.page { width: min(100% - 28px, 1728px); }
.document-layout {
grid-template-columns: 1fr;
gap: 34px;
}
.toc { position: static; }
.toc ol {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 28px;
}
}
@media (max-width: 560px) {
.page { width: min(100% - 28px, 1120px); }
.toc ol { grid-template-columns: 1fr; }
.toc a { grid-template-columns: 3.4rem minmax(0, 1fr); }
.page-navigation {
grid-template-columns: 1fr 1fr;
gap: 20px 14px;
}
.page-nav-contents {
grid-column: 1 / -1;
grid-row: 1;
justify-self: center;
}
.page-nav-previous { grid-column: 1; }
.page-nav-next { grid-column: 2; }
}
@media print {
:root {
--paper: #ffffff;
--ink: #111111;
--muted: #444444;
--line: #b8b8b8;
--line-strong: #777777;
--teal: #176e64;
--placeholder: #a32620;
}
body { background: #fff; font-size: 10.5pt; }
.page { width: 100%; padding: 0; }
.document-layout { display: block; }
.toc { position: static; break-after: page; }
.document-page,
.js .document-page { display: block !important; min-height: 0; }
.cover-page { break-after: page; }
.hero { padding-top: 35mm; }
.content-page { width: 100%; padding-top: 18mm; break-before: page; }
.page-masthead,
.page-navigation { display: none; }
}
</style>
</head>
<body>
<div class="page">
<div class="document-layout">
<nav class="toc" aria-label="Contents">
<strong>Contents</strong>
<p class="toc-intro">Follow the work, the feedback loops, and the decisions that keep both improving.</p>
<ol>
<li>
<a href="#contents">
<span class="toc-index">START</span>
<span>
<span class="toc-title">Overview</span>
<span class="toc-summary">See how delivery, product feedback, and harness feedback connect.</span>
</span>
</a>
</li>
<li>
<a href="#delivery">
<span class="toc-index">A</span>
<span>
<span class="toc-title">Plan and deliver the work</span>
<span class="toc-summary">Turn an idea into scoped, tested, and reviewed work.</span>
</span>
</a>
</li>
<li>
<a href="#reviews">
<span class="toc-index">B</span>
<span>
<span class="toc-title">Review the product continuously</span>
<span class="toc-summary">Use independent reviews to find problems as the product evolves.</span>
</span>
</a>
</li>
<li>
<a href="#harness">
<span class="toc-index">C</span>
<span>
<span class="toc-title">Improve the workflow harness</span>
<span class="toc-summary">Turn recurring agent friction into better future runs.</span>
</span>
</a>
</li>
<li>
<a href="#user-workflow">
<span class="toc-index">D</span>
<span>
<span class="toc-title">Work at the decision points</span>
<span class="toc-summary">Approve direction, findings, priorities, and final outcomes.</span>
</span>
</a>
</li>
<li>
<a href="#precision">
<span class="toc-index">TOOLS</span>
<span>
<span class="toc-title">Make repeatable work precise</span>
<span class="toc-summary">Use skills and scripts to remove guesswork and compress noise.</span>
</span>
</a>
</li>
</ol>
</nav>
<main class="document">
<section id="contents" class="document-page cover-page is-active" data-page-title="Contents">
<header class="hero">
<h1>How Feedback Loops Turn Agentic Coding Into a Self-Improving Factory</h1>
<p class="subtitle">Build long-term and short-term review and feedback loops for your agents and your harness.</p>
</header>
<figure class="workflow-figure overview-figure">
<svg viewBox="0 80 1400 520" width="1400" height="520" style="display:block" role="img" aria-label="Workflow overview">
<defs>
<marker id="ar" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path fill="#9aa39d" d="M0 0L10 5L0 10z"></path></marker>
<marker id="ar-t" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path fill="#63cbbb" d="M0 0L10 5L0 10z"></path></marker>
</defs>
<rect x="60" y="230" width="1280" height="350" rx="10" fill="none" stroke="#3b433e" stroke-width="1.5" stroke-dasharray="6 6"></rect>
<text x="80" y="256" fill="#aab4ad" font-size="11" font-weight="500" letter-spacing="0.8">DELIVERY LOOP</text>
<g fill="none" stroke="#9aa39d" stroke-width="1.5" marker-end="url(#ar)">
<line x1="240" y1="340" x2="278" y2="340"></line><line x1="410" y1="340" x2="448" y2="340"></line><line x1="580" y1="340" x2="618" y2="340"></line><line x1="750" y1="340" x2="788" y2="340"></line><line x1="920" y1="340" x2="958" y2="340"></line>
<path d="M1090 340H1150Q1170 340 1170 360V438"></path>
<path d="M855 362V440Q855 460 875 460H958"></path>
<line x1="1090" y1="460" x2="1128" y2="460"></line>
<path d="M1170 482V520Q1170 540 1150 540H200Q180 540 180 520V362"></path>
</g>
<g fill="none" stroke="#63cbbb" stroke-width="1.5" stroke-dasharray="6 6" marker-end="url(#ar-t)">
<path d="M855 318V164"></path>
<path d="M790 140H667"></path>
<path d="M535 140H412"></path>
<path d="M345 162V318"></path>
</g>
<g fill="#252b27" stroke="#3b433e" stroke-width="1">
<rect x="110" y="318" width="130" height="44" rx="6"></rect><rect x="280" y="318" width="130" height="44" rx="6"></rect><rect x="620" y="318" width="130" height="44" rx="6"></rect><rect x="790" y="318" width="130" height="44" rx="6"></rect><rect x="960" y="318" width="130" height="44" rx="6"></rect><rect x="960" y="438" width="130" height="44" rx="6"></rect><rect x="1130" y="438" width="130" height="44" rx="6"></rect>
<rect x="790" y="118" width="130" height="44" rx="6"></rect><rect x="280" y="118" width="130" height="44" rx="6"></rect>
</g>
<g fill="#2b2418" stroke="#d1ad6e" stroke-width="1">
<rect x="450" y="318" width="130" height="44" rx="6"></rect><rect x="535" y="118" width="130" height="44" rx="6"></rect>
</g>
<g fill="#f2f4ef" font-size="13" font-weight="500" text-anchor="middle" dominant-baseline="central">
<text x="175" y="340">Task</text><text x="345" y="340">Research</text><text x="685" y="340">Execution</text><text x="855" y="340">Closeout</text><text x="1025" y="340">Found problems</text><text x="1025" y="460">Visual review</text><text x="1195" y="460">Agent processing</text>
<text x="855" y="140">Harness feedback</text><text x="345" y="140">Harness corrections</text>
</g>
<g fill="#d1ad6e" font-size="13" font-weight="500" text-anchor="middle" dominant-baseline="central">
<text x="515" y="340">User approval</text><text x="600" y="140">User approval</text>
</g>
</svg>
</figure>
</section>
<section id="delivery" class="document-page content-page" data-page-title="Plan and deliver the work">
<div class="page-masthead">
<a class="contents-link" href="#contents">Contents</a>
<span class="page-number">02 / 06</span>
</div>
<p class="section-letter">A / Delivery workflow</p>
<h2>Plan the work</h2>
<div class="finished-stage">
<p>Work can begin with a bug report, an agent report, a review finding, or an idea from you. Capture it in a durable work record so the investigation, evidence, decisions, and later results remain connected.</p>
<p>An agent then investigates the work in context. It examines the affected behavior, relevant code, dependencies, risks, and likely consequences. The original request becomes a wider proposal with:</p>
<ul class="requirements">
<li>The outcome the work should produce</li>
<li>The requirements that shape the solution</li>
<li>The proposed scope</li>
<li>Important boundaries</li>
<li>Known risks and dependencies</li>
<li>Expected product behavior</li>
<li>Evidence that can confirm completion</li>
</ul>
<p>Interface work also receives a design pass. A design agent develops the visual and interaction direction, and that direction becomes part of the proposal.</p>
<p>You review the intent, scope, trade-offs, and design direction. Once you sign off, the proposal is finalized into work that agents can execute.</p>
<p>This planning process applies to most tasks. The amount of investigation scales with the work, while interface changes add the design stage.</p>
<p class="process-label">Process</p>
<p class="process-line">Bug report, agent report, review finding, or idea → durable record → investigation → wider proposal → design when needed → user sign-off → agent-ready work</p>
</div>
<div class="finished-stage">
<h3>Run the delivery workflow</h3>
<p>Once you approve the proposal, one conductor agent owns the delivery run. It creates a dedicated branch and worktree for the task. This keeps each task isolated while several tasks move forward at the same time.</p>
<p><strong>Plan the run.</strong> A planning agent reads the approved proposal and investigates the relevant code. It turns the work into an execution plan made of ordered waves and focused lanes.</p>
<p>The plan defines:</p>
<ul class="requirements">
<li>What each lane must deliver</li>
<li>Which code each lane is responsible for</li>
<li>The contracts shared between lanes</li>
<li>The dependencies between waves</li>
<li>The evidence each lane must return</li>
</ul>
<p>Each lane should fit within roughly 200,000 to 300,000 tokens of agent context. Larger assignments are divided again so each agent can investigate, implement, test, and repair its work without carrying unrelated parts of the project.</p>
<p>The conductor reviews the plan, adjusts its boundaries, and locks the execution order before dispatching the coding agents.</p>
<p><strong>Execute the waves.</strong> Each wave contains the lanes that are ready to run. Several lanes can run in parallel. Later waves begin when the code, contracts, or decisions they depend on are ready.</p>
<p>Each lane goes to a coding agent with its goal, ownership boundaries, shared contracts, and expected evidence. The agent implements its part, writes its tests, and runs scoped checks over the files it changed.</p>
<p>All lanes belonging to the task work inside the same task worktree. The conductor coordinates agents that share contracts or touch the same files, carries decisions between waves, and resolves contradictions as the implementation develops.</p>
<p>The conductor also coordinates expensive checks and shared development resources. Agents check machine capacity before starting resource-heavy runs, and access to ports, services, databases, and shared build directories is scheduled across the active lanes.</p>
<p><strong>Review the combined result.</strong> When the implementation waves converge, independent review agents inspect the complete change in parallel. They review the actual code, tests, and outcome against the approved scope.</p>
<p>Their prompts remain neutral. The reviewers receive the scope and implementation evidence without the conductor's diagnosis, suspected problems, or preferred conclusions. Each reviewer forms its own verdict from the code.</p>
<p>The conductor checks every finding against the implementation and the workflow's quality rules. Findings supported by the evidence become repair work. Incorrect findings are rebutted with evidence, and findings outside the task boundary are recorded for later handling.</p>
<p><strong>Run the honesty check.</strong> Agents disclose failing tests, tool errors, incomplete work, unverified assumptions, the weakest part of their delivery, and review findings closed without evidence. Every disclosed item enters the repair set or is carried forward as an explicit unresolved finding. This prevents agents from hiding uncertainty behind a confident final report.</p>
<p>Review and honesty findings that require action become focused repair lanes assigned to fresh coding agents. Those agents correct the problems and return new scoped check evidence.</p>
<p><strong>Report the completed run.</strong> The conductor verifies the returned evidence and produces one run report covering the implementation, checks, review decisions, repairs, unresolved findings, and significant time sinks. The work remains in the isolated task worktree for the outer delivery process to commit and verify.</p>
<p class="process-label">Process</p>
<p class="process-line">Approved proposal → planning agent → conductor-approved wave plan → parallel coding lanes → scoped checks → unbiased reviews → honesty check → repair lanes → run report</p>
<figure class="workflow-figure delivery-figure">
<svg viewBox="0 0 1400 500" width="1400" height="500" role="img" aria-labelledby="delivery-diagram-title delivery-diagram-desc">
<title id="delivery-diagram-title">Delivery waves and lanes</title>
<desc id="delivery-diagram-desc">An approved proposal is investigated by a planning agent. A conductor approves the wave plan and dispatches two ordered waves containing parallel lanes. The combined result receives an unbiased review, repair, reporting, fresh close-out, and landing.</desc>
<defs>
<marker id="arrow-delivery" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto">
<path fill="#9aa39d" d="M 0 0 L 10 5 L 0 10 z"></path>
</marker>
</defs>
<rect x="30" y="45" width="1340" height="420" rx="10" fill="none" stroke="#3b433e" stroke-width="1.5" stroke-dasharray="6 6"></rect>
<text x="55" y="75" fill="#aab4ad" font-size="11" font-weight="500" letter-spacing="0.8">DELIVERY RUN</text>
<text x="825" y="130" fill="#63cbbb" font-size="13" font-weight="500" text-anchor="middle">Wave 1</text>
<text x="1045" y="130" fill="#63cbbb" font-size="13" font-weight="500" text-anchor="middle">Wave 2</text>
<g fill="none" stroke="#9aa39d" stroke-width="1.5" stroke-linejoin="round" marker-end="url(#arrow-delivery)">
<path d="M 220 220 H 280"></path><path d="M 430 220 H 490"></path>
<path d="M 670 220 H 715 V177 H 760"></path><path d="M 670 220 H 715 V277 H 760"></path>
<path d="M 890 177 H 980"></path><path d="M 890 277 H 980"></path>
<path d="M 1110 177 H 1150 V232 H 1190"></path><path d="M 1110 277 H 1150 V232 H 1190"></path>
<path d="M 1260 260 V 382 Q 1260 402 1240 402 H 1120"></path><path d="M 990 402 H 930"></path><path d="M 760 402 H 700"></path><path d="M 530 402 H 470"></path>
</g>
<g fill="#252b27" stroke="#3b433e" stroke-width="1">
<rect x="70" y="198" width="150" height="44" rx="6"></rect><rect x="280" y="198" width="150" height="44" rx="6"></rect><rect x="490" y="187" width="180" height="66" rx="6"></rect>
<rect x="760" y="155" width="130" height="44" rx="6"></rect><rect x="760" y="255" width="130" height="44" rx="6"></rect><rect x="980" y="155" width="130" height="44" rx="6"></rect><rect x="980" y="255" width="130" height="44" rx="6"></rect>
<rect x="990" y="380" width="130" height="44" rx="6"></rect><rect x="760" y="380" width="170" height="44" rx="6"></rect><rect x="530" y="380" width="170" height="44" rx="6"></rect><rect x="300" y="380" width="170" height="44" rx="6"></rect>
</g>
<rect x="1190" y="205" width="140" height="55" rx="6" fill="#252b27" stroke="#3b433e" stroke-width="1"></rect>
<g fill="#f2f4ef" font-size="13" font-weight="500" text-anchor="middle" dominant-baseline="central">
<text x="145" y="220">Approved proposal</text><text x="355" y="220">Planning agent</text><text x="580" y="207"><tspan x="580">Conductor locks plan</tspan><tspan x="580" dy="18">and coordinates run</tspan></text>
<text x="825" y="177">Lane A</text><text x="825" y="277">Lane B</text><text x="1045" y="177">Lane C</text><text x="1045" y="277">Lane D</text>
<text x="1055" y="402">Repair lanes</text><text x="845" y="402">Run report</text><text x="615" y="402">Fresh close-out</text><text x="385" y="402">Landed task</text>
</g>
<text x="1260" y="232" fill="#f2f4ef" font-size="13" font-weight="500" text-anchor="middle" dominant-baseline="central">Unbiased review</text>
</svg>
<figcaption>The planning agent divides the approved scope into ordered waves. The conductor locks the plan, coordinates the lanes, and carries the combined result through unbiased review, repair, reporting, fresh close-out, and landing.</figcaption>
</figure>
</div>
<div class="finished-stage">
<h3>Close out and land the completed work</h3>
<p>The build loop finishes with an implementation, a run report, and an uncommitted task worktree. The original conductor now turns that result into a deliverable that another agent can verify and land.</p>
<p><strong>Prove the exact branch.</strong> The conductor commits the completed work, runs the branch-level checks against that commit, and records proof for the resulting tree. If a check fails, the conductor repairs the branch, amends the commit, and repeats the proof.</p>
<p>Once the committed tree is green, the source branch is published so the close-out agent can retrieve the exact work. A production patch is also generated against the recorded target branch.</p>
<div class="feedback-records">
<p class="process-label">Every delivery leaves two feedback records</p>
<p><strong>Product report.</strong> Agents record unresolved product concerns discovered during the run, including incomplete work, failing tests, missing evidence, unverified behavior, known errors, and findings outside the approved scope. Its purpose is to preserve useful discoveries, keep the agent within its approved scope, prevent the current task from expanding, and ensure findings are not lost in chat.</p>
<p><strong>Harness debrief.</strong> Agents record problems with the workflow itself, including broken tools, misleading output, repeated manual commands, coordination friction, and missing or incorrect guidance. Its purpose is to turn delivery friction into better prompts, skills, scripts, checks, and workflow rules for future runs.</p>
<p>One record improves the product. The other improves the way agents work.</p>
</div>
<p>When the change requires visual evidence, the conductor writes a targeted browser checklist and adds it to the browser verification queue. The browser run happens later against the assembled product.</p>
<p>The conductor then posts a durable delivery report containing the source branch, target branch, completed checks, review results, browser request, product report, harness debrief, and any deviations from the agreed workflow.</p>
<p><strong>Use a fresh close-out conductor.</strong> A different agent reads the delivery report and retrieves the exact source branch and target. It generates a fresh production patch and makes a short, binary judgment:</p>
<ul class="requirements">
<li>Does the patch deliver the agreed outcome?</li>
<li>Is the solution appropriately scoped and simple?</li>
<li>Does it avoid introducing new problems?</li>
</ul>
<p>A mergeable patch continues to landing. A blocked patch returns with the exact defects that require repair.</p>
<p><strong>Land the work.</strong> The close-out conductor merges the task as one commit onto its recorded target branch and verifies the resulting commit. It then removes the completed task worktree and source branch, updates the tracker to show that the work is fixed in branch, and reports the exact landing result.</p>
<p class="process-label">Process</p>
<p class="process-line">Completed build run → commit exact tree → branch checks and recorded proof → publish source branch → browser and reporting handovers → fresh close-out conductor → production patch judgment → merge and landing proof → tracker update</p>
</div>
<div class="finished-stage">
<h3>Verify the assembled product in the browser</h3>
<p>Browser verification runs after completed task branches have converged into the assembled application. The browser agent sees the combined product state that people will actually use, and one running development stack can verify several completed changes.</p>
<p>This timing is a portfolio-level efficiency choice. Several tasks may be active at once, each isolated in its own worktree. Starting a complete application stack for every worktree creates repeated setup work and competition for ports, services, authentication, databases, build directories, and browser state. It also verifies an isolated product state that may change as soon as the next branch lands.</p>
<p>The build workflow therefore creates a durable browser request during delivery. The request remains queued while work continues, then runs against the assembled product after related changes have converged.</p>
<p>Browser verification is reserved for evidence that automated tests cannot provide:</p>
<ul class="requirements">
<li>Layout and visual state</li>
<li>Interaction behavior and usability</li>
<li>Real-browser rendering</li>
<li>Loading behavior and interface responsiveness</li>
<li>Console errors and warnings</li>
<li>Unexpected or failed network activity</li>
</ul>
<p><strong>Create a targeted handover.</strong> The delivery agent records what changed, where to find it, the exact actions to perform, and the result that should appear. The checklist also identifies the previous failure that must be gone and any console or network behavior that needs attention.</p>
<p><strong>Verify the assembled application.</strong> A browser agent starts the shared stack, confirms which application state it is viewing, and works through the queued checklist. After every navigation or state change, it captures and visually inspects a screenshot. It also records relevant console and network activity.</p>
<p>Each checklist item receives a clear result:</p>
<ul class="requirements">
<li>Visually verified</li>
<li>Functionally verified</li>
<li>Failed</li>
<li>Not verified, with the reason</li>
</ul>
<p>Failures include reproduction steps, expected and observed behavior, severity, screenshots, and captured network evidence. This gives later agents enough information to investigate without repeating the original browser session.</p>
<p><strong>Return findings to triage.</strong> Each verified failure becomes a durable product finding in the shared triage intake. Successful checks close their browser request. The evidence remains connected to the change that requested the verification.</p>
<p>The agents handle the detailed browser checks and evidence collection. You can review the final assembled product and decide which verified findings matter most.</p>
<p class="process-label">Process</p>
<p class="process-line">Browser request created during delivery → changes converge → assembled application starts once → targeted browser checks → screenshots, console, and network evidence → completed request or durable triage findings → final product review</p>
<figure class="workflow-figure browser-verification-figure">
<svg viewBox="0 0 1400 460" width="1400" height="460" role="img" aria-labelledby="browser-diagram-title browser-diagram-desc">
<title id="browser-diagram-title">Browser verification after task convergence</title>
<desc id="browser-diagram-desc">Several isolated task branches land into one assembled application before browser verification runs once against a shared development stack and produces evidence and findings.</desc>
<defs>
<marker id="arrow-browser" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto">
<path fill="#9aa39d" d="M 0 0 L 10 5 L 0 10 z"></path>
</marker>
<marker id="arrow-browser-support" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto">
<path fill="#63cbbb" d="M 0 0 L 10 5 L 0 10 z"></path>
</marker>
</defs>
<rect x="30" y="40" width="1340" height="380" rx="10" fill="none" stroke="#3b433e" stroke-width="1.5" stroke-dasharray="6 6"></rect>
<text x="55" y="70" fill="#aab4ad" font-size="11" font-weight="500" letter-spacing="0.8">ASSEMBLED PRODUCT VERIFICATION</text>
<text x="170" y="112" fill="#63cbbb" font-size="13" font-weight="500" text-anchor="middle">Isolated worktrees</text>
<g fill="none" stroke="#9aa39d" stroke-width="1.5" stroke-linejoin="round" marker-end="url(#arrow-browser)">
<path d="M 260 166 H 310 V240 H 360"></path><path d="M 260 246 H 360"></path><path d="M 260 326 H 310 V240 H 360"></path>
<path d="M 540 240 H 630"></path><path d="M 810 240 H 900"></path><path d="M 1080 240 H 1170"></path>
</g>
<path d="M 810 366 H 990 V 272" fill="none" stroke="#63cbbb" stroke-width="1.5" stroke-dasharray="6 6" stroke-linejoin="round" marker-end="url(#arrow-browser-support)"></path>
<g fill="#252b27" stroke="#3b433e" stroke-width="1">
<rect x="80" y="140" width="180" height="52" rx="6"></rect><rect x="80" y="220" width="180" height="52" rx="6"></rect><rect x="80" y="300" width="180" height="52" rx="6"></rect>
<rect x="360" y="208" width="180" height="64" rx="6"></rect><rect x="630" y="208" width="180" height="64" rx="6"></rect><rect x="900" y="208" width="180" height="64" rx="6"></rect><rect x="1170" y="208" width="170" height="64" rx="6"></rect>
<rect x="630" y="338" width="180" height="56" rx="6"></rect>
</g>
<g fill="#f2f4ef" font-size="13" font-weight="500" text-anchor="middle" dominant-baseline="central">
<text x="170" y="166">Task branch A</text><text x="170" y="246">Task branch B</text><text x="170" y="326">Task branch C</text>
<text x="450" y="229"><tspan x="450">Land completed</tspan><tspan x="450" dy="18">changes</tspan></text><text x="720" y="229"><tspan x="720">Assembled</tspan><tspan x="720" dy="18">application</tspan></text><text x="990" y="229"><tspan x="990">Browser</tspan><tspan x="990" dy="18">verification</tspan></text><text x="1255" y="229"><tspan x="1255">Visual, console, and</tspan><tspan x="1255" dy="18">network evidence</tspan></text>
<text x="720" y="357"><tspan x="720">One shared</tspan><tspan x="720" dy="18">development stack</tspan></text>
</g>
</svg>
<figcaption>Completed task branches converge before browser verification. One assembled application and one shared development stack can verify several changes together while capturing evidence from the product state people will actually use.</figcaption>
</figure>
</div>
<nav class="page-navigation" aria-label="Page navigation">
<a class="page-nav-previous" href="#contents">
<span class="page-nav-label">Previous</span>
<span class="page-nav-title">Cover and contents</span>
</a>
<a class="page-nav-contents" href="#contents">Contents</a>
<a class="page-nav-next" href="#reviews">
<span class="page-nav-label">Next</span>
<span class="page-nav-title">Continuous product review</span>
</a>
</nav>
</section>
<section id="reviews" class="document-page content-page" data-page-title="Review the product continuously">
<div class="page-masthead">
<a class="contents-link" href="#contents">Contents</a>
<span class="page-number">03 / 06</span>
</div>
<p class="section-letter">B / Automated reviews</p>
<h2>Review the product continuously</h2>
<div class="finished-stage">
<p>Additional review loops continue examining the product as new changes arrive and the assembled application evolves.</p>
<p><strong>Review new changes.</strong> Automated agents review new commits and proposed integrations independently of the agents that built them. Findings are tied to the exact version reviewed, stored durably, and checked again as the branch evolves so the current report reflects the current code.</p>
<p><strong>Run scheduled code reviews.</strong> Scheduled agents examine recently integrated work across task boundaries. This wider view can reveal conflicting assumptions, incomplete integrations, duplicated behavior, and problems created by the combined effect of several changes.</p>
<p><strong>Run scheduled browser reviews.</strong> Browser agents inspect the assembled application, exercise current behavior, and capture visual, interaction, console, and network findings.</p>
<p><strong>Preserve the findings.</strong> Each review records what was examined, which product version was used, what evidence supports the finding, and how serious the observed problem appears to be.</p>
<p>The reviewers' job ends when those findings have been stored in the shared intake. They surface evidence without expanding active tasks or deciding which findings should become new work.</p>