-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
923 lines (904 loc) · 85.7 KB
/
Copy pathindex.html
File metadata and controls
923 lines (904 loc) · 85.7 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' fill='%23111111'/%3E%3Cpath transform='translate(12.4,3.9) scale(0.4)' fill='%23FFFFFF' d='M0.123047 0.183838C30.3704 -0.193155 61.5253 0.117643 91.8252 0.171143V0.215088C93.8908 0.210607 95.9524 0.201319 98.0059 0.177979L97.9932 140.018L97.999 140.376C97.2973 140.793 63.8272 140.603 60.0508 140.6C60.1153 135.259 60.1187 129.849 60.1064 124.433C52.7323 124.42 45.365 124.437 38.0879 124.55L38.0977 140.584L0.115234 140.582C-0.129765 121.528 0.0923427 141.904 0.0898438 122.793L0.123047 0.183838ZM38.0879 31.8411L38.1152 92.7961L60.0576 92.8127L60.0518 36.9084C60.0516 35.2222 60.0477 33.5277 60.043 31.8274L38.0879 31.8411Z'/%3E%3C/svg%3E">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@300..800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<script>
document.documentElement.classList.add('js');
// Apply the theme before first paint: stored choice, else system.
try {
var t = localStorage.getItem('aif-theme');
if (t === 'dark' || ((!t || t === 'system') && matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.dataset.theme = 'dark';
}
} catch (e) {}
</script>
<script src="components.js" defer></script>
<script src="script.js" defer></script>
<script src="shader-bg.js" defer></script>
<title>The Agentic Interface Framework</title>
<meta name="description" content="Eight primitives for the layer where humans meet agentic software.">
<meta property="og:title" content="The Agentic Interface Framework">
<meta property="og:description" content="Eight primitives for the layer where humans meet agentic software.">
<meta property="og:type" content="website">
</head>
<body>
<site-header active="home"></site-header>
<main id="main">
<!-- Shared defs for the feature illustrations (see .i-* kit in styles.css) -->
<svg class="ill-defs" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="ill-shadow" x="-30%" y="-30%" width="160%" height="180%">
<feDropShadow dx="0" dy="8" stdDeviation="10" flood-color="#111111" flood-opacity="0.06"/>
<feDropShadow dx="0" dy="1" stdDeviation="2" flood-color="#111111" flood-opacity="0.05"/>
</filter>
</defs>
</svg>
<section class="hero">
<div class="container">
<h1 class="reveal">Agentic Interface <br>Framework</h1>
<p class="hero-sub reveal">A best-practice framework for taking your AI app<br>from chatbot <span class="hero-arrow" aria-hidden="true"><ph-icon name="arrow-right-bold" size="14"></ph-icon></span><span class="visually-hidden">to</span> agentic software.</p>
</div>
</section>
<section class="intro">
<div class="container prose">
<h2 class="reveal">The interface is the unsolved half of agentic software</h2>
<p class="reveal">For decades, software was built to be navigated. Product teams defined features, organized them into fixed screens, and expected users to learn the map.<br>
Agentic software changes that. It begins with intent, acts on the user’s behalf, and needs interfaces that can show progress, ask for input, handle uncertainty, and preserve results.<br>
<em>Chat is a great door and a terrible house.</em><br>
It is a powerful way to express intent, but it is not a complete interface.<br>
This framework proposes eight primitives for building the workspace agentic software needs, giving product owners, designers, and developers a shared foundation for keeping users informed and in control.</p>
<p class="reveal">
<a class="btn" href="quicktest.html">Test your Agent<span class="btn-icon" aria-hidden="true"><ph-icon name="arrow-right" size="12"></ph-icon></span></a>
</p>
</div>
</section>
<section class="primitives-acc" id="primitives">
<div class="container">
<h2 class="section-title reveal">The eight primitives</h2>
<p class="section-lede reveal">The eight primitives are the building blocks of an agentic interface. Each one names a category of concrete, proven patterns — from expressing intent to recovering from failure. Applied together, they produce a product where people can direct the agent, watch it work, trust its results, and keep what it makes: an interface, not just a chat box. Open a primitive to see its patterns.</p>
<!-- 01 Guide intent -->
<details class="acc-item" name="primitives" id="acc-guide-intent">
<summary>
<span class="numbox acc-num">1</span>
<h3 class="acc-title">Guide intent</h3>
<span class="acc-toggle" aria-hidden="true"></span>
</summary>
<div class="acc-body">
<p class="acc-oneliner">Help people understand what is possible and express what they want.</p>
<p class="acc-desc">The empty prompt is a tax on the user, and most people pay it badly. An interface that starts from a blank line assumes the person already knows the system’s range and how to phrase a request to reach it. A good agentic interface does the opposite: it teaches its own capabilities in the act of being used, and it makes precise expression easy when precision matters. Expressing intent well is a shared task between the person and the surface, not a test the person has to pass alone.</p>
<div class="feature-grid">
<div class="feature">
<h4 class="feature-title">Zero state</h4>
<figure class="ph ph-ill"><svg viewBox="0 0 320 200" role="img" aria-label="Illustration of a zero state offering suggested tasks instead of an empty screen" xmlns="http://www.w3.org/2000/svg">
<rect class="i-card" x="18" y="30" width="284" height="140" filter="url(#ill-shadow)"/>
<path class="i-icon-ink" transform="translate(38,50) scale(0.0547)" d="M197.58,129.06,146,110l-19-51.62a15.92,15.92,0,0,0-29.88,0L78,110l-51.62,19a15.92,15.92,0,0,0,0,29.88L78,178l19,51.62a15.92,15.92,0,0,0,29.88,0L146,178l51.62-19a15.92,15.92,0,0,0,0-29.88ZM137,164.22a8,8,0,0,0-4.74,4.74L112,223.85,91.78,169A8,8,0,0,0,87,164.22L32.15,144,87,123.78A8,8,0,0,0,91.78,119L112,64.15,132.22,119a8,8,0,0,0,4.74,4.74L191.85,144ZM144,40a8,8,0,0,1,8-8h16V16a8,8,0,0,1,16,0V32h16a8,8,0,0,1,0,16H184V64a8,8,0,0,1-16,0V48H152A8,8,0,0,1,144,40ZM248,88a8,8,0,0,1-8,8h-8v8a8,8,0,0,1-16,0V96h-8a8,8,0,0,1,0-16h8V72a8,8,0,0,1,16,0v8h8A8,8,0,0,1,248,88Z"/>
<rect class="i-bar" x="60" y="54" width="88" height="6"/>
<rect class="i-ink" x="38" y="78" width="18" height="18"/>
<path class="i-on-ink" transform="translate(42,82) scale(0.0391)" d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z"/>
<rect class="i-bar" x="66" y="84" width="120" height="6"/>
<rect class="i-panel" x="38" y="104" width="18" height="18"/>
<path class="i-icon" transform="translate(42,108) scale(0.0391)" d="M224,200h-8V40a8,8,0,0,0-8-8H152a8,8,0,0,0-8,8V80H96a8,8,0,0,0-8,8v40H48a8,8,0,0,0-8,8v64H32a8,8,0,0,0,0,16H224a8,8,0,0,0,0-16ZM160,48h40V200H160ZM104,96h40V200H104ZM56,144H88v56H56Z"/>
<rect class="i-bar-soft" x="66" y="110" width="96" height="6"/>
<rect class="i-panel" x="38" y="130" width="18" height="18"/>
<path class="i-icon" transform="translate(42,134) scale(0.0391)" d="M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM200,216H56V40h88V88a8,8,0,0,0,8,8h48V216Zm-32-80a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,136Zm0,32a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,168Z"/>
<rect class="i-bar-soft" x="66" y="136" width="108" height="6"/>
</svg></figure>
<p>An opening that shows what the system can do through suggested workflows, pre-rendered widgets, recent context, and recommended tasks, instead of a void.</p>
</div>
<div class="feature">
<h4 class="feature-title">Composer</h4>
<figure class="ph ph-ill"><svg viewBox="0 0 320 200" role="img" aria-label="Illustration of a chat composer with attach, voice, and send controls" xmlns="http://www.w3.org/2000/svg">
<rect class="i-card" x="18" y="52" width="284" height="96" filter="url(#ill-shadow)"/>
<rect class="i-bar" x="38" y="72" width="120" height="6"/>
<rect class="i-bar-soft" x="38" y="85" width="76" height="6"/>
<rect class="i-ink" x="162" y="69" width="1.5" height="13"/>
<g class="i-icon">
<path transform="translate(38,122) scale(0.0547)" d="M209.66 122.34a8 8 0 0 1 0 11.32l-82.05 82a56 56 0 0 1-79.2-79.21l99.37-99.44a40 40 0 0 1 56.61 56.57l-99.42 99.49a24 24 0 0 1-33.94-33.94l83.53-83.66a8 8 0 0 1 11.32 11.31l-83.53 83.66a8 8 0 0 0 11.32 11.32l99.41-99.49a24 24 0 0 0-33.94-33.94L59.72 147.76a40 40 0 0 0 56.57 56.56l82.05-82a8 8 0 0 1 11.32.02Z"/>
<path transform="translate(236,122) scale(0.0547)" d="M128 176a48.05 48.05 0 0 0 48-48V64a48 48 0 0 0-96 0v64a48.05 48.05 0 0 0 48 48ZM96 64a32 32 0 0 1 64 0v64a32 32 0 0 1-64 0Zm40 143.6V232a8 8 0 0 1-16 0v-24.4A80.11 80.11 0 0 1 48 128a8 8 0 0 1 16 0 64 64 0 0 0 128 0 8 8 0 0 1 16 0 80.11 80.11 0 0 1-72 79.6Z"/>
</g>
<rect class="i-ink" x="270" y="116" width="26" height="26"/>
<path class="i-on-ink" transform="translate(276.5,122.5) scale(0.0508)" d="M205.66 117.66a8 8 0 0 1-11.32 0L136 59.31V216a8 8 0 0 1-16 0V59.31L61.66 117.66a8 8 0 0 1-11.32-11.32l72-72a8 8 0 0 1 11.32 0l72 72a8 8 0 0 1 0 11.32Z"/>
</svg></figure>
<p>One clear, multimodal place to say what you want, in words, voice, or files.</p>
</div>
<div class="feature">
<h4 class="feature-title">Next-action suggestions</h4>
<figure class="ph ph-ill"><svg viewBox="0 0 320 200" role="img" aria-label="Illustration of a finished response followed by two next-action suggestion chips" xmlns="http://www.w3.org/2000/svg">
<rect class="i-card" x="18" y="46" width="284" height="108" filter="url(#ill-shadow)"/>
<rect class="i-bar" x="38" y="66" width="150" height="6"/>
<rect class="i-bar-soft" x="38" y="79" width="104" height="6"/>
<line class="i-line" x1="38" y1="98" x2="282" y2="98"/>
<rect class="i-ink" x="38" y="112" width="116" height="22"/>
<rect class="i-on-ink" x="50" y="120" width="58" height="6"/>
<path class="i-on-ink" transform="translate(132,118) scale(0.0391)" d="M221.66 133.66l-72 72a8 8 0 0 1-11.32-11.32L196.69 136H40a8 8 0 0 1 0-16h156.69l-58.35-58.34a8 8 0 0 1 11.32-11.32l72 72a8 8 0 0 1 0 11.32Z"/>
<rect class="i-panel" x="166" y="112" width="116" height="22"/>
<rect class="i-bar-soft" x="178" y="120" width="58" height="6"/>
</svg></figure>
<p>Surfaced follow-ups that move the work forward rather than leaving the user to guess.</p>
</div>
<div class="feature">
<h4 class="feature-title">Structured inputs</h4>
<figure class="ph ph-ill"><svg viewBox="0 0 320 200" role="img" aria-label="Illustration of a form with labeled input fields and a submit button" xmlns="http://www.w3.org/2000/svg">
<rect class="i-card" x="18" y="24" width="284" height="152" filter="url(#ill-shadow)"/>
<rect class="i-bar-soft" x="38" y="44" width="44" height="5"/>
<rect class="i-panel" x="38" y="53" width="116" height="26"/>
<rect class="i-bar" x="46" y="63" width="64" height="6"/>
<rect class="i-bar-soft" x="166" y="44" width="36" height="5"/>
<rect class="i-panel" x="166" y="53" width="116" height="26"/>
<rect class="i-bar-soft" x="38" y="87" width="52" height="5"/>
<rect class="i-panel" x="38" y="96" width="244" height="26"/>
<rect class="i-ink" x="256" y="130" width="26" height="26"/>
<path class="i-on-ink" transform="translate(262.5,136.5) scale(0.0508)" d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"/>
</svg></figure>
<p>Forms, fields, files, and parameters offered when precision matters more than open text.</p>
</div>
</div>
</div>
</details>
<!-- 02 Reveal progress -->
<details class="acc-item" name="primitives" id="acc-reveal-progress">
<summary>
<span class="numbox acc-num">2</span>
<h3 class="acc-title">Reveal progress</h3>
<span class="acc-toggle" aria-hidden="true"></span>
</summary>
<div class="acc-body">
<p class="acc-oneliner">Make the agent’s work visible while it happens.</p>
<p class="acc-desc">When software acts on its own over seconds, minutes, or hours, a silent gap is corrosive. The user is left asking whether anything is happening, whether it is the right thing, and whether they should wait or intervene. Showing the work turns waiting into monitoring and lets people catch a wrong turn early. The discipline is to show enough to build confidence without burying the person in every internal step, and to let detail expand on demand rather than by default.</p>
<div class="feature-grid">
<div class="feature">
<h4 class="feature-title">Execution states</h4>
<figure class="ph ph-ill"><svg viewBox="0 0 320 200" role="img" aria-label="Illustration of a five-step execution pipeline with completed, active, and pending states" xmlns="http://www.w3.org/2000/svg">
<rect class="i-card" x="18" y="52" width="284" height="96" filter="url(#ill-shadow)"/>
<line class="i-line" x1="58" y1="94" x2="94" y2="94"/>
<line class="i-line" x1="114" y1="94" x2="150" y2="94"/>
<line class="i-line" x1="170" y1="94" x2="206" y2="94"/>
<line class="i-line" x1="226" y1="94" x2="262" y2="94"/>
<rect class="i-ink" x="38" y="84" width="20" height="20"/>
<path class="i-on-ink" transform="translate(43,89) scale(0.0391)" d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"/>
<rect class="i-ink" x="94" y="84" width="20" height="20"/>
<path class="i-on-ink" transform="translate(99,89) scale(0.0391)" d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"/>
<rect class="i-ink" x="150" y="84" width="20" height="20"/>
<path class="i-on-ink" transform="translate(155,89) scale(0.0391)" d="M232.4,114.49,88.32,26.35a16,16,0,0,0-16.2-.3A15.86,15.86,0,0,0,64,39.87V216.13A15.94,15.94,0,0,0,80,232a16.07,16.07,0,0,0,8.36-2.35L232.4,141.51a15.81,15.81,0,0,0,0-27ZM80,215.94V40l143.83,88Z"/>
<rect class="i-panel" x="206" y="84" width="20" height="20"/>
<rect class="i-panel" x="262" y="84" width="20" height="20"/>
<rect class="i-bar-soft" x="38" y="112" width="20" height="5"/>
<rect class="i-bar-soft" x="94" y="112" width="20" height="5"/>
<rect class="i-bar-soft" x="150" y="112" width="20" height="5"/>
<rect class="i-bar-soft" x="206" y="112" width="20" height="5"/>
<rect class="i-bar-soft" x="262" y="112" width="20" height="5"/>
</svg></figure>
<p>Legible signals for planning, searching, generating, acting, waiting, and done.</p>
</div>
<div class="feature">
<h4 class="feature-title">Streaming</h4>
<figure class="ph ph-ill"><svg viewBox="0 0 320 200" role="img" aria-label="Illustration of a response streaming in with a typing caret and a loading spinner" xmlns="http://www.w3.org/2000/svg">
<rect class="i-card" x="18" y="52" width="284" height="96" filter="url(#ill-shadow)"/>
<path class="i-icon" transform="translate(268,72) scale(0.0547)" d="M232,128a104,104,0,0,1-208,0c0-41,23.81-78.36,60.66-95.27a8,8,0,0,1,6.68,14.54C60.15,61.59,40,93.27,40,128a88,88,0,0,0,176,0c0-34.73-20.15-66.41-51.34-80.73a8,8,0,0,1,6.68-14.54C208.19,49.64,232,87,232,128Z"/>
<rect class="i-bar" x="38" y="82" width="200" height="6"/>
<rect class="i-bar" x="38" y="95" width="156" height="6"/>
<rect class="i-bar-soft" x="38" y="108" width="64" height="6"/>
<rect class="i-ink" x="106" y="104.5" width="1.5" height="13"/>
</svg></figure>
<p>Responses, tool calls, and sub-agent runs that appear as they occur, not after a long silence.</p>
</div>
<div class="feature">
<h4 class="feature-title">Thinking summaries</h4>
<figure class="ph ph-ill"><svg viewBox="0 0 320 200" role="img" aria-label="Illustration of a collapsed thinking strip revealing a short synthesized summary" xmlns="http://www.w3.org/2000/svg">
<rect class="i-card" x="18" y="52" width="284" height="96" filter="url(#ill-shadow)"/>
<rect class="i-panel" x="38" y="72" width="244" height="26"/>
<path class="i-icon" transform="translate(46,79) scale(0.0469)" d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/>
<rect class="i-bar" x="66" y="82" width="110" height="6"/>
<rect class="i-bar-soft" x="46" y="110" width="140" height="6"/>
<rect class="i-bar-soft" x="46" y="123" width="96" height="6"/>
</svg></figure>
<p>Short, synthesized notes on what the agent is concluding, not just that it is busy.</p>
</div>
<div class="feature">
<h4 class="feature-title">Milestones</h4>
<figure class="ph ph-ill"><svg viewBox="0 0 320 200" role="img" aria-label="Illustration of a progress track with completed, current, and upcoming milestones" xmlns="http://www.w3.org/2000/svg">
<rect class="i-card" x="18" y="52" width="284" height="96" filter="url(#ill-shadow)"/>
<line class="i-line" x1="38" y1="96" x2="282" y2="96"/>
<rect class="i-ink" x="50" y="88" width="16" height="16"/>
<path class="i-on-ink" transform="translate(53.5,91.5) scale(0.0352)" d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"/>
<rect class="i-ink" x="114" y="88" width="16" height="16"/>
<path class="i-on-ink" transform="translate(117.5,91.5) scale(0.0352)" d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"/>
<rect class="i-ink" x="176" y="86" width="20" height="20"/>
<rect class="i-panel" x="242" y="88" width="16" height="16"/>
<rect class="i-bar" x="168" y="114" width="36" height="6"/>
</svg></figure>
<p>Clear markers when the work crosses a meaningful threshold.</p>
</div>
<div class="feature">
<h4 class="feature-title">Cost & effort transparency</h4>
<figure class="ph ph-ill"><svg viewBox="0 0 320 200" role="img" aria-label="Illustration of a status card with a time estimate, progress meter, and cost stats" xmlns="http://www.w3.org/2000/svg">
<rect class="i-card" x="18" y="52" width="284" height="96" filter="url(#ill-shadow)"/>
<path class="i-icon" transform="translate(38,72) scale(0.0547)" d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z"/>
<rect class="i-bar" x="58" y="76" width="70" height="6"/>
<rect class="i-bar-soft" x="38" y="94" width="200" height="8"/>
<rect class="i-ink" x="38" y="94" width="120" height="8"/>
<rect class="i-panel" x="38" y="110" width="46" height="18"/>
<rect class="i-bar-soft" x="46" y="117" width="30" height="4"/>
<rect class="i-panel" x="92" y="110" width="46" height="18"/>
<rect class="i-bar-soft" x="100" y="117" width="30" height="4"/>
</svg></figure>
<p>Honest signals about what a task is consuming and how long it will take.</p>
</div>
<div class="feature">
<h4 class="feature-title">Async & background work</h4>
<figure class="ph ph-ill"><svg viewBox="0 0 320 200" role="img" aria-label="Illustration of a notification inbox with unread background task updates" xmlns="http://www.w3.org/2000/svg">
<rect class="i-card" x="58" y="30" width="204" height="140" filter="url(#ill-shadow)"/>
<path class="i-icon-ink" transform="translate(78,50) scale(0.0547)" d="M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216ZM48,184c7.7-13.24,16-43.92,16-80a64,64,0,1,1,128,0c0,36.05,8.28,66.73,16,80Z"/>
<rect class="i-bar" x="98" y="54" width="64" height="6"/>
<line class="i-line" x1="58" y1="74" x2="262" y2="74"/>
<rect class="i-ink" x="78" y="82" width="8" height="8"/>
<rect class="i-bar" x="92" y="83" width="90" height="6"/>
<path class="i-icon" transform="translate(230,80) scale(0.0469)" d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z"/>
<line class="i-line" x1="58" y1="98" x2="262" y2="98"/>
<rect class="i-bar-soft" x="78" y="107" width="90" height="6"/>
<path class="i-icon" transform="translate(230,104) scale(0.0469)" d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z"/>
<line class="i-line" x1="58" y1="122" x2="262" y2="122"/>
<rect class="i-bar-soft" x="78" y="131" width="76" height="6"/>
<path class="i-icon" transform="translate(230,128) scale(0.0469)" d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z"/>
</svg></figure>
<p>Long-running and ambient tasks surfaced through an inbox or notification pattern, so attention is spent only when it is needed.</p>
</div>
</div>
</div>
</details>
<!-- 03 Show, don't tell -->
<details class="acc-item" name="primitives" id="acc-show-dont-tell">
<summary>
<span class="numbox acc-num">3</span>
<h3 class="acc-title">Show, don’t tell</h3>
<span class="acc-toggle" aria-hidden="true"></span>
</summary>
<div class="acc-body">
<p class="acc-oneliner">Turn responses into usable interfaces, not just text.</p>
<p class="acc-desc">A paragraph describing five options is worse than five buttons. When an agent produces a result, the highest-value form of that result is often something you can see and manipulate, not prose you have to parse and then act on elsewhere. Generated interface closes the gap between the answer and the next action. The layout should serve the task rather than forcing every kind of work through the same scrolling column of text.</p>
<div class="feature-grid">
<div class="feature">
<h4 class="feature-title">Generative UI</h4>
<figure class="ph ph-ill"><svg viewBox="0 0 320 200" role="img" aria-label="Illustration of a generated dashboard with a bar chart and a data table" xmlns="http://www.w3.org/2000/svg">
<rect class="i-card" x="18" y="47" width="284" height="106" filter="url(#ill-shadow)"/>
<rect class="i-bar" x="38" y="99" width="14" height="34"/>
<rect class="i-bar" x="58" y="83" width="14" height="50"/>
<rect class="i-ink" x="78" y="67" width="14" height="66"/>
<rect class="i-bar" x="98" y="91" width="14" height="42"/>
<line class="i-line" x1="38" y1="133" x2="120" y2="133"/>
<rect class="i-bar" x="170" y="67" width="44" height="6"/>
<rect class="i-bar" x="250" y="67" width="32" height="6"/>
<line class="i-line" x1="170" y1="83" x2="282" y2="83"/>
<rect class="i-bar-soft" x="170" y="92" width="32" height="6"/>
<rect class="i-bar-soft" x="260" y="92" width="22" height="6"/>
<line class="i-line" x1="170" y1="108" x2="282" y2="108"/>
<rect class="i-bar-soft" x="170" y="117" width="40" height="6"/>
<rect class="i-bar-soft" x="254" y="117" width="28" height="6"/>
<line class="i-line" x1="170" y1="133" x2="282" y2="133"/>
</svg></figure>
<p>Charts, tables, forms, dashboards, maps, timelines, controls, and small apps produced to fit the response.</p>
</div>
<div class="feature">
<h4 class="feature-title">Interactive controls</h4>
<figure class="ph ph-ill"><svg viewBox="0 0 320 200" role="img" aria-label="Illustration of a result panel with a slider, filter chips, and a result bar" xmlns="http://www.w3.org/2000/svg">
<rect class="i-card" x="18" y="42" width="284" height="116" filter="url(#ill-shadow)"/>
<line class="i-line" x1="38" y1="68" x2="198" y2="68"/>
<rect class="i-ink" x="128" y="62" width="12" height="12"/>
<rect class="i-ink" x="38" y="90" width="52" height="22"/>
<rect class="i-on-ink" x="46" y="98" width="36" height="6"/>
<rect class="i-panel" x="98" y="90" width="52" height="22"/>
<rect class="i-bar-soft" x="106" y="98" width="36" height="6"/>
<rect class="i-bar" x="38" y="132" width="146" height="6"/>
</svg></figure>
<p>Filters, sliders, inline edits, and drill-downs that let people work the result.</p>
</div>
<div class="feature">
<h4 class="feature-title">Contextual layouts</h4>
<figure class="ph ph-ill"><svg viewBox="0 0 320 200" role="img" aria-label="Illustration of an adaptive layout with a sidebar and a content canvas" xmlns="http://www.w3.org/2000/svg">
<rect class="i-card" x="18" y="36" width="284" height="128" filter="url(#ill-shadow)"/>
<rect class="i-panel" x="38" y="56" width="56" height="88"/>
<rect class="i-bar-soft" x="48" y="68" width="36" height="5"/>
<rect class="i-bar-soft" x="48" y="81" width="36" height="5"/>
<rect class="i-bar-soft" x="48" y="94" width="36" height="5"/>
<rect class="i-panel" x="108" y="56" width="174" height="88"/>
<rect class="i-bar" x="120" y="84" width="12" height="24"/>
<rect class="i-bar" x="138" y="68" width="12" height="40"/>
<rect class="i-bar" x="156" y="76" width="12" height="32"/>
<rect class="i-bar" x="120" y="116" width="110" height="6"/>
<rect class="i-bar-soft" x="120" y="126" width="70" height="6"/>
</svg></figure>
<p>An arrangement that adapts to the task instead of defaulting to chat.</p>
</div>
<div class="feature">
<h4 class="feature-title">Accessible generated UI</h4>
<figure class="ph ph-ill"><svg viewBox="0 0 320 200" role="img" aria-label="Illustration of a generated form field with a label, focus ring, and confirm button" xmlns="http://www.w3.org/2000/svg">
<rect class="i-card" x="18" y="52" width="284" height="96" filter="url(#ill-shadow)"/>
<rect class="i-bar-soft" x="38" y="74" width="56" height="5"/>
<rect class="i-panel" x="38" y="94" width="180" height="28"/>
<rect class="i-stroke-ink" x="34" y="90" width="188" height="36"/>
<rect class="i-bar" x="48" y="105" width="88" height="6"/>
<rect class="i-ink" x="256" y="95" width="26" height="26"/>
<path class="i-on-ink" transform="translate(262.5,101.5) scale(0.0508)" d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"/>
</svg></figure>
<p>Interfaces assembled at runtime must be as accessible as interfaces built by hand. Anything less trades one group’s convenience for another group’s exclusion.</p>
</div>
</div>
</div>
</details>
<!-- 04 Keep control -->
<details class="acc-item" name="primitives" id="acc-keep-control">
<summary>
<span class="numbox acc-num">4</span>
<h3 class="acc-title">Keep control</h3>
<span class="acc-toggle" aria-hidden="true"></span>
</summary>
<div class="acc-body">
<p class="acc-oneliner">Let agents act while people stay informed and in command, during the work rather than only after it.</p>
<p class="acc-desc">Autonomy without control is not a feature, it is a liability. As agents do more, the interface has to keep the human able to steer, and to place that steering inside the flow of execution instead of presenting a finished result to accept or reject. Control is not a wall at the end of the process; it is a set of handholds along the way. The bar rises with the stakes: the more sensitive, expensive, or irreversible an action, the more explicit the human’s say-so must be.</p>
<div class="feature-grid">
<div class="feature">
<h4 class="feature-title">Approvals</h4>
<figure class="ph ph-ill"><svg viewBox="0 0 320 200" role="img" aria-label="Illustration of an approval dialog with cancel and confirm buttons" xmlns="http://www.w3.org/2000/svg">
<rect class="i-card" x="70" y="40" width="180" height="120" filter="url(#ill-shadow)"/>
<rect class="i-bar" x="90" y="60" width="84" height="6"/>
<rect class="i-bar-soft" x="90" y="76" width="140" height="6"/>
<rect class="i-bar-soft" x="90" y="89" width="104" height="6"/>
<line class="i-line" x1="90" y1="104" x2="230" y2="104"/>
<rect class="i-panel" x="150" y="114" width="46" height="26"/>
<rect class="i-bar-soft" x="160" y="124" width="26" height="6"/>
<rect class="i-ink" x="204" y="114" width="26" height="26"/>
<path class="i-on-ink" transform="translate(210.5,120.5) scale(0.0508)" d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"/>
</svg></figure>
<p>An explicit go-ahead before sensitive, expensive, destructive, or irreversible actions.</p>
</div>
<div class="feature">
<h4 class="feature-title">Confirmations</h4>
<figure class="ph ph-ill"><svg viewBox="0 0 320 200" role="img" aria-label="Illustration of a lightweight confirmation toast with a check mark" xmlns="http://www.w3.org/2000/svg">
<rect class="i-card" x="60" y="78" width="200" height="44" filter="url(#ill-shadow)"/>
<path class="i-icon-ink" transform="translate(80,93) scale(0.0547)" d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"/>
<rect class="i-bar" x="104" y="97" width="70" height="6"/>
<rect class="i-panel" x="202" y="91" width="38" height="18"/>
<rect class="i-bar-soft" x="212" y="98" width="18" height="4"/>
</svg></figure>
<p>Lightweight checks for lower-stakes steps.</p>
</div>
<div class="feature">
<h4 class="feature-title">Clarifying questions</h4>
<figure class="ph ph-ill"><svg viewBox="0 0 320 200" role="img" aria-label="Illustration of a question prompt with two answer options" xmlns="http://www.w3.org/2000/svg">
<rect class="i-card" x="24" y="52" width="272" height="96" filter="url(#ill-shadow)"/>
<path class="i-icon-ink" transform="translate(44,72) scale(0.0547)" d="M140,180a12,12,0,1,1-12-12A12,12,0,0,1,140,180ZM128,72c-22.06,0-40,16.15-40,36v4a8,8,0,0,0,16,0v-4c0-11,10.77-20,24-20s24,9,24,20-10.77,20-24,20a8,8,0,0,0-8,8v8a8,8,0,0,0,16,0v-.72c18.24-3.35,32-17.9,32-35.28C168,88.15,150.06,72,128,72Zm104,56A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"/>
<rect class="i-bar" x="68" y="76" width="100" height="6"/>
<rect class="i-ink" x="44" y="102" width="110" height="24"/>
<rect class="i-on-ink" x="56" y="111" width="60" height="6"/>
<rect class="i-panel" x="166" y="102" width="110" height="24"/>
<rect class="i-bar-soft" x="178" y="111" width="60" height="6"/>
</svg></figure>
<p>Resolving ambiguity is a control act. When intent is unclear, the interface should ask rather than guess.</p>
</div>
<div class="feature">
<h4 class="feature-title">Permissions</h4>
<figure class="ph ph-ill"><svg viewBox="0 0 320 200" role="img" aria-label="Illustration of a permissions list with per-scope toggles" xmlns="http://www.w3.org/2000/svg">
<rect class="i-card" x="60" y="40" width="200" height="120" filter="url(#ill-shadow)"/>
<path class="i-icon" transform="translate(80,61) scale(0.0469)" d="M208,80H176V56a48,48,0,0,0-96,0V80H48A16,16,0,0,0,32,96V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V96A16,16,0,0,0,208,80ZM96,56a32,32,0,0,1,64,0V80H96ZM208,208H48V96H208V208Z"/>
<rect class="i-bar" x="102" y="64" width="72" height="6"/>
<rect class="i-ink" x="216" y="60" width="24" height="14"/>
<rect class="i-on-ink" x="228" y="62" width="10" height="10"/>
<line class="i-line" x1="80" y1="83.5" x2="240" y2="83.5"/>
<path class="i-icon" transform="translate(80,94) scale(0.0469)" d="M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM200,216H56V40h88V88a8,8,0,0,0,8,8h48V216Zm-32-80a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,136Zm0,32a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,168Z"/>
<rect class="i-bar" x="102" y="97" width="56" height="6"/>
<rect class="i-ink" x="216" y="93" width="24" height="14"/>
<rect class="i-on-ink" x="228" y="95" width="10" height="10"/>
<line class="i-line" x1="80" y1="116.5" x2="240" y2="116.5"/>
<path class="i-icon" transform="translate(80,127) scale(0.0469)" d="M128,24C74.17,24,32,48.6,32,80v96c0,31.4,42.17,56,96,56s96-24.6,96-56V80C224,48.6,181.83,24,128,24Zm80,104c0,9.62-7.88,19.43-21.61,26.92C170.93,163.35,150.19,168,128,168s-42.93-4.65-58.39-13.08C55.88,147.43,48,137.62,48,128V111.36c17.06,15,46.23,24.64,80,24.64s62.94-9.68,80-24.64ZM69.61,53.08C85.07,44.65,105.81,40,128,40s42.93,4.65,58.39,13.08C200.12,60.57,208,70.38,208,80s-7.88,19.43-21.61,26.92C170.93,115.35,150.19,120,128,120s-42.93-4.65-58.39-13.08C55.88,99.43,48,89.62,48,80S55.88,60.57,69.61,53.08ZM186.39,202.92C170.93,211.35,150.19,216,128,216s-42.93-4.65-58.39-13.08C55.88,195.43,48,185.62,48,176V159.36c17.06,15,46.23,24.64,80,24.64s62.94-9.68,80-24.64V176C208,185.62,200.12,195.43,186.39,202.92Z"/>
<rect class="i-bar" x="102" y="130" width="64" height="6"/>
<rect class="i-panel" x="216" y="126" width="24" height="14"/>
<rect class="i-bar" x="218" y="128" width="10" height="10"/>
</svg></figure>
<p>Legible scope for what the agent can and cannot touch.</p>
</div>
<div class="feature">
<h4 class="feature-title">Interrupt, redirect, rerun</h4>
<figure class="ph ph-ill"><svg viewBox="0 0 320 200" role="img" aria-label="Illustration of a running task with stop and rerun controls" xmlns="http://www.w3.org/2000/svg">
<rect class="i-card" x="20" y="58" width="280" height="84" filter="url(#ill-shadow)"/>
<rect class="i-bar-soft" x="40" y="78" width="64" height="6"/>
<rect class="i-bar-soft" x="40" y="105" width="168" height="8"/>
<rect class="i-ink" x="40" y="105" width="76" height="8"/>
<rect class="i-ink" x="220" y="96" width="26" height="26"/>
<path class="i-on-ink" transform="translate(226.5,102.5) scale(0.0508)" d="M200,40H56A16,16,0,0,0,40,56V200a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Zm0,160H56V56H200V200Z"/>
<rect class="i-panel" x="254" y="96" width="26" height="26"/>
<path class="i-icon" transform="translate(260.5,102.5) scale(0.0508)" d="M224,128a96,96,0,0,1-94.71,96H128A95.38,95.38,0,0,1,62.1,197.8a8,8,0,0,1,11-11.63A80,80,0,1,0,71.43,71.39a3.07,3.07,0,0,1-.26.25L44.59,96H72a8,8,0,0,1,0,16H24a8,8,0,0,1-8-8V56a8,8,0,0,1,16,0V85.8L60.25,60A96,96,0,0,1,224,128Z"/>
</svg></figure>
<p>The ability to stop, change course, or try again mid-task.</p>
</div>
<div class="feature">
<h4 class="feature-title">Respectful surfacing</h4>
<figure class="ph ph-ill"><svg viewBox="0 0 320 200" role="img" aria-label="Illustration of a content card with a quiet notification toast at its corner" xmlns="http://www.w3.org/2000/svg">
<rect class="i-card" x="38" y="56" width="210" height="104" filter="url(#ill-shadow)"/>
<rect class="i-bar" x="58" y="76" width="120" height="6"/>
<rect class="i-bar-soft" x="58" y="92" width="170" height="6"/>
<rect class="i-bar-soft" x="58" y="105" width="170" height="6"/>
<rect class="i-bar-soft" x="58" y="118" width="140" height="6"/>
<rect class="i-bar-soft" x="58" y="131" width="100" height="6"/>
<rect class="i-panel" x="210" y="42" width="90" height="30"/>
<path class="i-icon" transform="translate(222,51) scale(0.0469)" d="M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216ZM48,184c7.7-13.24,16-43.92,16-80a64,64,0,1,1,128,0c0,36.05,8.28,66.73,16,80Z"/>
<rect class="i-bar-soft" x="242" y="55" width="36" height="4"/>
</svg></figure>
<p>The agent may ask, notify, or wait, and it should choose the least intrusive option that still keeps the person in command.</p>
</div>
</div>
</div>
</details>
<!-- 05 Earn trust -->
<details class="acc-item" name="primitives" id="acc-earn-trust">
<summary>
<span class="numbox acc-num">5</span>
<h3 class="acc-title">Earn trust</h3>
<span class="acc-toggle" aria-hidden="true"></span>
</summary>
<div class="acc-body">
<p class="acc-oneliner">The interface must earn belief rather than assume it.</p>
<p class="acc-desc">Trust is not a tone of voice, and confident prose is not evidence. An agent that sounds sure while being wrong is more dangerous than one that is transparent about what it knows and how it knows it. The interface is where trust is calibrated, up when the system deserves it and down when it does not. That calibration depends on the surface telling the truth about its own certainty, its sources, and its memory.</p>
<div class="feature-grid">
<div class="feature">
<h4 class="feature-title">Disclosure & AI labeling</h4>
<figure class="ph ph-ill"><svg viewBox="0 0 320 200" role="img" aria-label="Illustration of a content card labeled with an AI chip above text lines" xmlns="http://www.w3.org/2000/svg">
<rect class="i-card" x="18" y="58" width="284" height="84" filter="url(#ill-shadow)"/>
<rect class="i-ink" x="38" y="78" width="26" height="16"/>
<path class="i-on-ink" transform="translate(42,82) scale(0.03125)" d="M197.58,129.06,146,110l-19-51.62a15.92,15.92,0,0,0-29.88,0L78,110l-51.62,19a15.92,15.92,0,0,0,0,29.88L78,178l19,51.62a15.92,15.92,0,0,0,29.88,0L146,178l51.62-19a15.92,15.92,0,0,0,0-29.88ZM137,164.22a8,8,0,0,0-4.74,4.74L112,223.85,91.78,169A8,8,0,0,0,87,164.22L32.15,144,87,123.78A8,8,0,0,0,91.78,119L112,64.15,132.22,119a8,8,0,0,0,4.74,4.74L191.85,144ZM144,40a8,8,0,0,1,8-8h16V16a8,8,0,0,1,16,0V32h16a8,8,0,0,1,0,16H184V64a8,8,0,0,1-16,0V48H152A8,8,0,0,1,144,40ZM248,88a8,8,0,0,1-8,8h-8v8a8,8,0,0,1-16,0V96h-8a8,8,0,0,1,0-16h8V72a8,8,0,0,1,16,0v8h8A8,8,0,0,1,248,88Z"/>
<rect class="i-on-ink" x="53" y="84" width="7" height="4"/>
<rect class="i-bar" x="38" y="102" width="180" height="6"/>
<rect class="i-bar-soft" x="38" y="115" width="120" height="6"/>
</svg></figure>
<p>People should know when they are talking to or reading from an agent.</p>
</div>
<div class="feature">
<h4 class="feature-title">Provenance & citations</h4>
<figure class="ph ph-ill"><svg viewBox="0 0 320 200" role="img" aria-label="Illustration of text lines with citation markers and a source link row" xmlns="http://www.w3.org/2000/svg">
<rect class="i-card" x="18" y="52" width="284" height="96" filter="url(#ill-shadow)"/>
<rect class="i-bar" x="38" y="72" width="140" height="6"/>
<rect class="i-panel" x="184" y="70" width="10" height="10"/>
<rect class="i-bar" x="38" y="88" width="110" height="6"/>
<rect class="i-panel" x="154" y="86" width="10" height="10"/>
<line class="i-line" x1="38" y1="108" x2="282" y2="108"/>
<path class="i-icon" transform="translate(38,118) scale(0.0469)" d="M165.66,90.34a8,8,0,0,1,0,11.32l-64,64a8,8,0,0,1-11.32-11.32l64-64A8,8,0,0,1,165.66,90.34ZM215.6,40.4a56,56,0,0,0-79.2,0L106.34,70.45a8,8,0,0,0,11.32,11.32l30.06-30a40,40,0,0,1,56.57,56.56l-30.07,30.06a8,8,0,0,0,11.31,11.32L215.6,119.6a56,56,0,0,0,0-79.2ZM138.34,174.22l-30.06,30.06a40,40,0,1,1-56.56-56.57l30.05-30.05a8,8,0,0,0-11.32-11.32L40.4,136.4a56,56,0,0,0,79.2,79.2l30.06-30.07a8,8,0,0,0-11.32-11.31Z"/>
<rect class="i-bar-soft" x="58" y="121" width="90" height="6"/>
</svg></figure>
<p>Claims should carry where they came from.</p>
</div>
<div class="feature">
<h4 class="feature-title">Source attribution</h4>
<figure class="ph ph-ill"><svg viewBox="0 0 320 200" role="img" aria-label="Illustration of a result card with source attribution chips in its footer" xmlns="http://www.w3.org/2000/svg">
<rect class="i-card" x="18" y="52" width="284" height="96" filter="url(#ill-shadow)"/>
<rect class="i-bar" x="38" y="72" width="180" height="6"/>
<rect class="i-bar-soft" x="38" y="85" width="120" height="6"/>
<line class="i-line" x1="38" y1="104" x2="282" y2="104"/>
<path class="i-icon-ink" transform="translate(38,118) scale(0.0469)" d="M165.66,90.34a8,8,0,0,1,0,11.32l-64,64a8,8,0,0,1-11.32-11.32l64-64A8,8,0,0,1,165.66,90.34ZM215.6,40.4a56,56,0,0,0-79.2,0L106.34,70.45a8,8,0,0,0,11.32,11.32l30.06-30a40,40,0,0,1,56.57,56.56l-30.07,30.06a8,8,0,0,0,11.31,11.32L215.6,119.6a56,56,0,0,0,0-79.2ZM138.34,174.22l-30.06,30.06a40,40,0,1,1-56.56-56.57l30.05-30.05a8,8,0,0,0-11.32-11.32L40.4,136.4a56,56,0,0,0,79.2,79.2l30.06-30.07a8,8,0,0,0-11.32-11.31Z"/>
<rect class="i-panel" x="62" y="116" width="16" height="16"/>
<rect class="i-bar-soft" x="82" y="122" width="14" height="4"/>
<rect class="i-panel" x="112" y="116" width="16" height="16"/>
<rect class="i-bar-soft" x="132" y="122" width="14" height="4"/>
<rect class="i-panel" x="162" y="116" width="16" height="16"/>
<rect class="i-bar-soft" x="182" y="122" width="14" height="4"/>
</svg></figure>
<p>Generated content should point back to what it drew on.</p>
</div>
<div class="feature">
<h4 class="feature-title">Honest confidence</h4>
<figure class="ph ph-ill"><svg viewBox="0 0 320 200" role="img" aria-label="Illustration of a statement with a confidence meter beneath it" xmlns="http://www.w3.org/2000/svg">
<rect class="i-card" x="18" y="64" width="284" height="72" filter="url(#ill-shadow)"/>
<rect class="i-bar" x="38" y="84" width="200" height="6"/>
<rect class="i-bar-soft" x="38" y="104" width="160" height="8"/>
<rect class="i-ink" x="38" y="104" width="104" height="8"/>
<rect class="i-panel" x="208" y="100" width="26" height="16"/>
<rect class="i-bar-soft" x="213" y="106" width="16" height="4"/>
</svg></figure>
<p>Uncertainty communicated plainly, without either false precision or a blanket disclaimer that hedges everything equally.</p>
</div>
<div class="feature">
<h4 class="feature-title">Memory transparency</h4>
<figure class="ph ph-ill"><svg viewBox="0 0 320 200" role="img" aria-label="Illustration of a memory panel with viewable, editable, and deletable entries" xmlns="http://www.w3.org/2000/svg">
<rect class="i-card" x="18" y="48" width="284" height="104" filter="url(#ill-shadow)"/>
<path class="i-icon-ink" transform="translate(38,66) scale(0.0547)" d="M247.31,124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57,61.26,162.88,48,128,48S61.43,61.26,36.34,86.35C17.51,105.18,9,124,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208s66.57-13.26,91.66-38.34c18.83-18.83,27.3-37.61,27.65-38.4A8,8,0,0,0,247.31,124.76ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.47,133.47,0,0,1,25,128,133.33,133.33,0,0,1,48.07,97.25C70.33,75.19,97.22,64,128,64s57.67,11.19,79.93,33.25A133.46,133.46,0,0,1,231.05,128C223.84,141.46,192.43,192,128,192Zm0-112a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z"/>
<rect class="i-bar" x="60" y="70" width="90" height="6"/>
<line class="i-line" x1="38" y1="90" x2="282" y2="90"/>
<rect class="i-bar-soft" x="38" y="99" width="130" height="6"/>
<g class="i-icon">
<path transform="translate(248,96) scale(0.0469)" d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z"/>
<path transform="translate(268,96) scale(0.0469)" d="M216,48H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM192,208H64V64H192ZM80,24a8,8,0,0,1,8-8h80a8,8,0,0,1,0,16H88A8,8,0,0,1,80,24Z"/>
</g>
<line class="i-line" x1="38" y1="114" x2="282" y2="114"/>
<rect class="i-bar-soft" x="38" y="123" width="100" height="6"/>
<g class="i-icon">
<path transform="translate(248,120) scale(0.0469)" d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z"/>
<path transform="translate(268,120) scale(0.0469)" d="M216,48H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM192,208H64V64H192ZM80,24a8,8,0,0,1,8-8h80a8,8,0,0,1,0,16H88A8,8,0,0,1,80,24Z"/>
</g>
</svg></figure>
<p>What the agent remembers should be viewable, editable, and deletable.</p>
</div>
<div class="feature">
<h4 class="feature-title">Agent identity</h4>
<figure class="ph ph-ill"><svg viewBox="0 0 320 200" role="img" aria-label="Illustration of an agent identity plate with avatar, name, and role" xmlns="http://www.w3.org/2000/svg">
<rect class="i-card" x="18" y="54" width="284" height="92" filter="url(#ill-shadow)"/>
<rect class="i-ink" x="38" y="74" width="32" height="32"/>
<path class="i-on-ink" transform="translate(46,82) scale(0.0625)" d="M197.58,129.06,146,110l-19-51.62a15.92,15.92,0,0,0-29.88,0L78,110l-51.62,19a15.92,15.92,0,0,0,0,29.88L78,178l19,51.62a15.92,15.92,0,0,0,29.88,0L146,178l51.62-19a15.92,15.92,0,0,0,0-29.88ZM137,164.22a8,8,0,0,0-4.74,4.74L112,223.85,91.78,169A8,8,0,0,0,87,164.22L32.15,144,87,123.78A8,8,0,0,0,91.78,119L112,64.15,132.22,119a8,8,0,0,0,4.74,4.74L191.85,144ZM144,40a8,8,0,0,1,8-8h16V16a8,8,0,0,1,16,0V32h16a8,8,0,0,1,0,16H184V64a8,8,0,0,1-16,0V48H152A8,8,0,0,1,144,40ZM248,88a8,8,0,0,1-8,8h-8v8a8,8,0,0,1-16,0V96h-8a8,8,0,0,1,0-16h8V72a8,8,0,0,1,16,0v8h8A8,8,0,0,1,248,88Z"/>
<rect class="i-bar" x="82" y="80" width="110" height="6"/>
<rect class="i-bar-soft" x="82" y="93" width="70" height="6"/>
<line class="i-line" x1="38" y1="116" x2="282" y2="116"/>
<rect class="i-bar-soft" x="38" y="124" width="160" height="6"/>
</svg></figure>
<p>How the agent presents itself should be consistent and not misleading.</p>
</div>
</div>
</div>
</details>
<!-- 06 Expect failure -->
<details class="acc-item" name="primitives" id="acc-expect-failure">
<summary>
<span class="numbox acc-num">6</span>
<h3 class="acc-title">Expect failure</h3>
<span class="acc-toggle" aria-hidden="true"></span>
</summary>
<div class="acc-body">
<p class="acc-oneliner">Assume the agent will fail, and make failure survivable.</p>
<p class="acc-desc">Agentic systems are probabilistic, which means they will be wrong, blocked, or interrupted, and the only question is whether the interface was designed for that or caught off guard by it. Most trust is lost not at the first error but at the first error that could not be understood, corrected, or undone. A surface that plans for failure keeps a bad step from becoming a dead end. Recovery is a first-class part of the design, not an edge case bolted on later.</p>
<div class="feature-grid">
<div class="feature">
<h4 class="feature-title">Honest error states</h4>
<figure class="ph ph-ill"><svg viewBox="0 0 320 200" role="img" aria-label="Illustration of an error card with a warning header, explanation lines, and a retry chip" xmlns="http://www.w3.org/2000/svg">
<rect class="i-card" x="18" y="44" width="284" height="112" filter="url(#ill-shadow)"/>
<rect class="i-faint" x="38" y="64" width="244" height="28"/>
<path class="i-icon-ink" transform="translate(48,71) scale(0.0547)" d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z"/>
<rect class="i-bar" x="72" y="75" width="96" height="6"/>
<rect class="i-bar-soft" x="38" y="102" width="168" height="6"/>
<rect class="i-bar-soft" x="38" y="114" width="120" height="6"/>
<rect class="i-panel" x="222" y="100" width="60" height="22"/>
<path class="i-icon" transform="translate(230,106) scale(0.0391)" d="M224,128a96,96,0,0,1-94.71,96H128A95.38,95.38,0,0,1,62.1,197.8a8,8,0,0,1,11-11.63A80,80,0,1,0,71.43,71.39a3.07,3.07,0,0,1-.26.25L44.59,96H72a8,8,0,0,1,0,16H24a8,8,0,0,1-8-8V56a8,8,0,0,1,16,0V85.8L60.25,60A96,96,0,0,1,224,128Z"/>
<rect class="i-bar-soft" x="246" y="109" width="26" height="4"/>
</svg></figure>
<p>Say what went wrong in terms the person can act on.</p>
</div>
<div class="feature">
<h4 class="feature-title">Graceful degradation</h4>
<figure class="ph ph-ill"><svg viewBox="0 0 320 200" role="img" aria-label="Illustration of a card with a dimmed loading half above a divider and a crisp manual action below" xmlns="http://www.w3.org/2000/svg">
<rect class="i-card" x="18" y="44" width="284" height="112" filter="url(#ill-shadow)"/>
<rect class="i-faint" x="38" y="64" width="140" height="6"/>
<rect class="i-faint" x="38" y="77" width="96" height="6"/>
<path class="i-icon" transform="translate(270,67) scale(0.0469)" d="M232,128a104,104,0,0,1-208,0c0-41,23.81-78.36,60.66-95.27a8,8,0,0,1,6.68,14.54C60.15,61.59,40,93.27,40,128a88,88,0,0,0,176,0c0-34.73-20.15-66.41-51.34-80.73a8,8,0,0,1,6.68-14.54C208.19,49.64,232,87,232,128Z"/>
<line class="i-line" x1="18" y1="100" x2="302" y2="100"/>
<rect class="i-bar" x="38" y="125" width="150" height="6"/>
<rect class="i-ink" x="256" y="115" width="26" height="26"/>
<path class="i-on-ink" transform="translate(262.5,121.5) scale(0.0508)" d="M221.66 133.66l-72 72a8 8 0 0 1-11.32-11.32L196.69 136H40a8 8 0 0 1 0-16h156.69l-58.35-58.34a8 8 0 0 1 11.32-11.32l72 72a8 8 0 0 1 0 11.32Z"/>
</svg></figure>
<p>When the agent is uncertain or unavailable, the user should lose speed, not agency.</p>
</div>
<div class="feature">
<h4 class="feature-title">Correction</h4>
<figure class="ph ph-ill"><svg viewBox="0 0 320 200" role="img" aria-label="Illustration of a struck-through line replaced by a corrected line with an edit pencil" xmlns="http://www.w3.org/2000/svg">
<rect class="i-card" x="18" y="52" width="284" height="96" filter="url(#ill-shadow)"/>
<rect class="i-bar-soft" x="38" y="86" width="170" height="6"/>
<line class="i-line" x1="34" y1="89" x2="212" y2="89"/>
<rect class="i-bar" x="50" y="106" width="170" height="6"/>
<path class="i-icon-ink" transform="translate(228,103) scale(0.0469)" d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z"/>
</svg></figure>
<p>Make it easy to fix the agent when it is wrong.</p>
</div>
<div class="feature">
<h4 class="feature-title">Undo & rollback</h4>
<figure class="ph ph-ill"><svg viewBox="0 0 320 200" role="img" aria-label="Illustration of undo and rollback action buttons above a stacked history of records" xmlns="http://www.w3.org/2000/svg">
<rect class="i-card" x="18" y="44" width="284" height="112" filter="url(#ill-shadow)"/>
<rect class="i-panel" x="38" y="64" width="26" height="26"/>
<path class="i-icon" transform="translate(44.5,70.5) scale(0.0508)" d="M232,144a64.07,64.07,0,0,1-64,64H80a8,8,0,0,1,0-16h88a48,48,0,0,0,0-96H51.31l34.35,34.34a8,8,0,0,1-11.32,11.32l-48-48a8,8,0,0,1,0-11.32l48-48A8,8,0,0,1,85.66,45.66L51.31,80H168A64.07,64.07,0,0,1,232,144Z"/>
<rect class="i-ink" x="74" y="64" width="26" height="26"/>
<path class="i-on-ink" transform="translate(80.5,70.5) scale(0.0508)" d="M136,80v43.47l36.12,21.67a8,8,0,0,1-8.24,13.72l-40-24A8,8,0,0,1,120,128V80a8,8,0,0,1,16,0Zm-8-48A95.44,95.44,0,0,0,60.08,60.15C52.81,67.51,46.35,74.59,40,82V64a8,8,0,0,0-16,0v40a8,8,0,0,0,8,8H72a8,8,0,0,0,0-16H49c7.15-8.42,14.27-16.35,22.39-24.57a80,80,0,1,1,1.66,114.75,8,8,0,1,0-11,11.64A96,96,0,1,0,128,32Z"/>
<rect class="i-panel" x="54" y="98" width="196" height="26"/>
<rect class="i-panel" x="46" y="104" width="196" height="26"/>
<rect class="i-panel" x="38" y="110" width="196" height="26"/>
<rect class="i-bar-soft" x="48" y="117" width="84" height="4"/>
<rect class="i-bar-soft" x="48" y="125" width="56" height="4"/>
</svg></figure>
<p>Undo reverses a user’s own action; rollback recovers from a bad action the agent took. Both matter, and conflating them leaves gaps.</p>
</div>
<div class="feature">
<h4 class="feature-title">Refusal surfaces</h4>
<figure class="ph ph-ill"><svg viewBox="0 0 320 200" role="img" aria-label="Illustration of a refusal card with a prohibit header, a reason line, and an alternative suggestion chip" xmlns="http://www.w3.org/2000/svg">
<rect class="i-card" x="18" y="44" width="284" height="112" filter="url(#ill-shadow)"/>
<path class="i-icon-ink" transform="translate(38,64) scale(0.0547)" d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm88,104a87.56,87.56,0,0,1-20.41,56.28L71.72,60.4A88,88,0,0,1,216,128ZM40,128A87.56,87.56,0,0,1,60.41,71.72L184.28,195.6A88,88,0,0,1,40,128Z"/>
<rect class="i-bar" x="62" y="68" width="104" height="6"/>
<rect class="i-bar-soft" x="38" y="88" width="190" height="6"/>
<line class="i-line" x1="38" y1="104" x2="282" y2="104"/>
<rect class="i-panel" x="38" y="114" width="70" height="22"/>
<rect class="i-bar-soft" x="46" y="123" width="36" height="4"/>
<path class="i-icon" transform="translate(88,120) scale(0.0391)" d="M221.66 133.66l-72 72a8 8 0 0 1-11.32-11.32L196.69 136H40a8 8 0 0 1 0-16h156.69l-58.35-58.34a8 8 0 0 1 11.32-11.32l72 72a8 8 0 0 1 0 11.32Z"/>
</svg></figure>
<p>When the agent will not or cannot act, it should say so and say why.</p>
</div>
</div>
</div>
</details>
<!-- 07 Make artifacts -->
<details class="acc-item" name="primitives" id="acc-make-artifacts">
<summary>
<span class="numbox acc-num">7</span>
<h3 class="acc-title">Make artifacts</h3>
<span class="acc-toggle" aria-hidden="true"></span>
</summary>
<div class="acc-body">
<p class="acc-oneliner">Work should produce durable outputs, not evaporate into a transcript.</p>
<p class="acc-desc">The thinking can happen in the conversation, but the product of the work should live somewhere stable. When results exist only as messages scrolled past, the work is effectively lost the moment the session ends. Artifacts are not only an endpoint: they accumulate, get revised, and are handed off, so the interface should treat them as living objects from the start. The test is simple: if the conversation disappeared, would the work still be there.</p>
<div class="feature-grid">
<div class="feature">
<h4 class="feature-title">Live artifacts</h4>
<figure class="ph ph-ill"><svg viewBox="0 0 320 200" role="img" aria-label="Illustration of a live dashboard with a line chart and two stat chips" xmlns="http://www.w3.org/2000/svg">
<rect class="i-card" x="48" y="40" width="224" height="120" filter="url(#ill-shadow)"/>
<rect class="i-ink" x="68" y="60" width="8" height="8"/>
<rect class="i-bar" x="82" y="61" width="64" height="6"/>
<path class="i-stroke" d="M68 98 L114 82 L160 92 L206 76 L252 86"/>
<line class="i-line" x1="68" y1="106" x2="252" y2="106"/>
<rect class="i-panel" x="68" y="116" width="88" height="24"/>
<rect class="i-bar-soft" x="76" y="121" width="24" height="4"/>
<rect class="i-bar" x="76" y="129" width="44" height="6"/>
<rect class="i-panel" x="164" y="116" width="88" height="24"/>
<rect class="i-bar-soft" x="172" y="121" width="24" height="4"/>
<rect class="i-bar" x="172" y="129" width="36" height="6"/>
</svg></figure>
<p>Dashboards, apps, and tools that keep working after they are made.</p>
</div>
<div class="feature">
<h4 class="feature-title">Static artifacts</h4>
<figure class="ph ph-ill"><svg viewBox="0 0 320 200" role="img" aria-label="Illustration of a portrait document with a folded corner, a title, and body text lines" xmlns="http://www.w3.org/2000/svg">
<rect class="i-card" x="100" y="25" width="120" height="150" filter="url(#ill-shadow)"/>
<path class="i-line" d="M202 25 L202 43 L220 43"/>
<rect class="i-bar" x="120" y="61" width="56" height="6"/>
<rect class="i-bar-soft" x="120" y="79" width="80" height="6"/>
<rect class="i-bar-soft" x="120" y="93" width="80" height="6"/>
<rect class="i-bar-soft" x="120" y="107" width="80" height="6"/>
<rect class="i-bar-soft" x="120" y="121" width="52" height="6"/>
</svg></figure>
<p>Reports, slides, documents, and plans that stand on their own.</p>
</div>
<div class="feature">
<h4 class="feature-title">Iterative updates</h4>
<figure class="ph ph-ill"><svg viewBox="0 0 320 200" role="img" aria-label="Illustration of a document where one highlighted block is being edited in place" xmlns="http://www.w3.org/2000/svg">
<rect class="i-card" x="70" y="38" width="180" height="124" filter="url(#ill-shadow)"/>
<rect class="i-bar-soft" x="90" y="58" width="140" height="6"/>
<rect class="i-bar-soft" x="90" y="71" width="140" height="6"/>
<rect class="i-bar-soft" x="90" y="84" width="92" height="6"/>
<rect class="i-faint" x="90" y="98" width="140" height="24"/>
<rect class="i-bar" x="98" y="107" width="88" height="6"/>
<path class="i-icon-ink" transform="translate(210,104) scale(0.0469)" d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z"/>
<rect class="i-bar-soft" x="90" y="130" width="124" height="6"/>
</svg></figure>
<p>Change one part without regenerating the whole.</p>
</div>
<div class="feature">
<h4 class="feature-title">Version awareness</h4>
<figure class="ph ph-ill"><svg viewBox="0 0 320 200" role="img" aria-label="Illustration of a version timeline with two checked past versions, the current version, and a diff chip" xmlns="http://www.w3.org/2000/svg">
<rect class="i-card" x="38" y="52" width="244" height="96" filter="url(#ill-shadow)"/>
<line class="i-line" x1="76" y1="85" x2="151" y2="85"/>
<line class="i-line" x1="169" y1="85" x2="244" y2="85"/>
<rect class="i-panel" x="58" y="76" width="18" height="18"/>
<path class="i-icon" transform="translate(62.5,80.5) scale(0.0352)" d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"/>
<rect class="i-panel" x="151" y="76" width="18" height="18"/>
<path class="i-icon" transform="translate(155.5,80.5) scale(0.0352)" d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"/>
<rect class="i-ink" x="244" y="76" width="18" height="18"/>
<path class="i-on-ink" transform="translate(248.5,80.5) scale(0.0352)" d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"/>
<rect class="i-panel" x="218" y="104" width="44" height="24"/>
<rect class="i-bar" x="226" y="110" width="28" height="4"/>
<rect class="i-bar-soft" x="226" y="118" width="20" height="4"/>
</svg></figure>
<p>Know what changed, when, and from what.</p>
</div>
<div class="feature">
<h4 class="feature-title">Portability</h4>
<figure class="ph ph-ill"><svg viewBox="0 0 320 200" role="img" aria-label="Illustration of an artifact with download, export, and link sharing options" xmlns="http://www.w3.org/2000/svg">
<rect class="i-card" x="78" y="36" width="164" height="128" filter="url(#ill-shadow)"/>
<rect class="i-panel" x="98" y="56" width="124" height="40"/>
<rect class="i-bar" x="106" y="67" width="76" height="6"/>
<rect class="i-bar-soft" x="106" y="79" width="52" height="6"/>
<line class="i-line" x1="98" y1="108" x2="222" y2="108"/>
<rect class="i-ink" x="98" y="120" width="24" height="24"/>
<path class="i-on-ink" transform="translate(104,126) scale(0.0469)" d="M224,144v64a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V144a8,8,0,0,1,16,0v56H208V144a8,8,0,0,1,16,0Zm-101.66,5.66a8,8,0,0,0,11.32,0l40-40a8,8,0,0,0-11.32-11.32L136,124.69V32a8,8,0,0,0-16,0v92.69L93.66,98.34a8,8,0,0,0-11.32,11.32Z"/>
<rect class="i-panel" x="148" y="120" width="24" height="24"/>
<path class="i-icon" transform="translate(154,126) scale(0.0469)" d="M216,112v96a16,16,0,0,1-16,16H56a16,16,0,0,1-16-16V112A16,16,0,0,1,56,96H80a8,8,0,0,1,0,16H56v96H200V112H176a8,8,0,0,1,0-16h24A16,16,0,0,1,216,112ZM93.66,69.66,120,43.31V136a8,8,0,0,0,16,0V43.31l26.34,26.35a8,8,0,0,0,11.32-11.32l-40-40a8,8,0,0,0-11.32,0l-40,40A8,8,0,0,0,93.66,69.66Z"/>
<rect class="i-panel" x="198" y="120" width="24" height="24"/>
<path class="i-icon" transform="translate(204,126) scale(0.0469)" d="M165.66,90.34a8,8,0,0,1,0,11.32l-64,64a8,8,0,0,1-11.32-11.32l64-64A8,8,0,0,1,165.66,90.34ZM215.6,40.4a56,56,0,0,0-79.2,0L106.34,70.45a8,8,0,0,0,11.32,11.32l30.06-30a40,40,0,0,1,56.57,56.56l-30.07,30.06a8,8,0,0,0,11.31,11.32L215.6,119.6a56,56,0,0,0,0-79.2ZM138.34,174.22l-30.06,30.06a40,40,0,1,1-56.56-56.57l30.05-30.05a8,8,0,0,0-11.32-11.32L40.4,136.4a56,56,0,0,0,79.2,79.2l30.06-30.07a8,8,0,0,0-11.32-11.31Z"/>
</svg></figure>
<p>Exports, links, and embeds, so artifacts outlive the conversation that produced them.</p>
</div>
</div>
</div>
</details>
<!-- 08 Build a home -->
<details class="acc-item" name="primitives" id="acc-build-a-home">
<summary>
<span class="numbox acc-num">8</span>
<h3 class="acc-title">Build a home</h3>
<span class="acc-toggle" aria-hidden="true"></span>
</summary>
<div class="acc-body">
<p class="acc-oneliner">Give agentic work a persistent, coherent place that fits the product it lives in.</p>
<p class="acc-desc">A single task is not a product. As agentic work accumulates across sessions, threads, and outputs, it needs somewhere to live that holds together and belongs to its surroundings. An agent grafted onto a product as a floating box in the corner will always feel like a guest. The interface should give the work continuity over time and coherence with the brand, domain, and surfaces around it, and it should learn from how the person corrects and steers it.</p>
<div class="feature-grid">
<div class="feature">
<h4 class="feature-title">Navigation</h4>
<figure class="ph ph-ill"><svg viewBox="0 0 320 200" role="img" aria-label="Illustration of an app frame with a sidebar of navigation rows beside a content pane" xmlns="http://www.w3.org/2000/svg">
<rect class="i-card" x="40" y="35" width="240" height="130" filter="url(#ill-shadow)"/>
<rect class="i-panel" x="52" y="47" width="70" height="106"/>
<rect class="i-panel" x="134" y="47" width="134" height="106"/>
<g class="i-icon">
<path transform="translate(64,59) scale(0.0391)" d="M104,40H56A16,16,0,0,0,40,56v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,104,40Zm0,64H56V56h48v48Zm96-64H152a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Zm0,64H152V56h48v48Zm-96,32H56a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V152A16,16,0,0,0,104,136Zm0,64H56V152h48v48Zm96-64H152a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V152A16,16,0,0,0,200,136Zm0,64H152V152h48v48Z"/>
<path transform="translate(64,107) scale(0.0391)" d="M216,72H130.67L102.93,51.2a16.12,16.12,0,0,0-9.6-3.2H40A16,16,0,0,0,24,64V200a16,16,0,0,0,16,16H216.89A15.13,15.13,0,0,0,232,200.89V88A16,16,0,0,0,216,72Zm0,128H40V64H93.33L123.2,86.4A8,8,0,0,0,128,88h88Z"/>
<path transform="translate(64,131) scale(0.0391)" d="M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z"/>
</g>
<rect class="i-bar-soft" x="78" y="61.5" width="30" height="5"/>
<rect class="i-ink" x="58" y="79" width="58" height="18"/>
<path class="i-on-ink" transform="translate(64,83) scale(0.0391)" d="M128,24A104,104,0,0,0,36.18,176.88L24.83,210.93a16,16,0,0,0,20.24,20.24l34.05-11.35A104,104,0,1,0,128,24Zm0,192a87.87,87.87,0,0,1-44.06-11.81,8,8,0,0,0-6.54-.67L40,216,52.47,178.6a8,8,0,0,0-.66-6.54A88,88,0,1,1,128,216Z"/>
<rect class="i-on-ink" x="78" y="85.5" width="26" height="5"/>
<rect class="i-bar-soft" x="78" y="109.5" width="28" height="5"/>
<rect class="i-bar-soft" x="78" y="133.5" width="24" height="5"/>
<rect class="i-bar" x="148" y="61" width="64" height="6"/>
<rect class="i-bar-soft" x="148" y="74" width="96" height="6"/>
<rect class="i-bar-soft" x="148" y="87" width="72" height="6"/>
</svg></figure>
<p>Movement across tasks, threads, artifacts, and workspaces.</p>
</div>
<div class="feature">
<h4 class="feature-title">Output browsers</h4>
<figure class="ph ph-ill"><svg viewBox="0 0 320 200" role="img" aria-label="Illustration of a two-by-two grid of output tiles with one tile highlighted" xmlns="http://www.w3.org/2000/svg">
<rect class="i-card" x="62" y="26" width="196" height="148" filter="url(#ill-shadow)"/>
<rect class="i-panel" x="80" y="44" width="74" height="50"/>
<rect class="i-panel" x="166" y="44" width="74" height="50"/>
<rect class="i-panel" x="80" y="106" width="74" height="50"/>
<rect class="i-panel" x="166" y="106" width="74" height="50"/>
<rect class="i-bar" x="100" y="72" width="8" height="12"/>
<rect class="i-bar" x="113" y="64" width="8" height="20"/>
<rect class="i-bar" x="126" y="69" width="8" height="15"/>
<rect class="i-stroke-ink" x="77" y="41" width="80" height="56"/>
<rect class="i-bar" x="178" y="60" width="42" height="6"/>
<rect class="i-bar-soft" x="178" y="72" width="30" height="6"/>
<path class="i-icon" transform="translate(111,125) scale(0.0469)" d="M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM200,216H56V40h88V88a8,8,0,0,0,8,8h48V216Zm-32-80a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,136Zm0,32a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,168Z"/>
<path class="i-icon" transform="translate(197,125) scale(0.0469)" d="M224,200h-8V40a8,8,0,0,0-8-8H152a8,8,0,0,0-8,8V80H96a8,8,0,0,0-8,8v40H48a8,8,0,0,0-8,8v64H32a8,8,0,0,0,0,16H224a8,8,0,0,0,0-16ZM160,48h40V200H160ZM104,96h40V200H104ZM56,144H88v56H56Z"/>
</svg></figure>
<p>A way to find and revisit what the agent has made.</p>
</div>
<div class="feature">
<h4 class="feature-title">Threads & context panels</h4>
<figure class="ph ph-ill"><svg viewBox="0 0 320 200" role="img" aria-label="Illustration of a three-pane layout with a thread list, a center document, and a context panel" xmlns="http://www.w3.org/2000/svg">
<rect class="i-card" x="30" y="40" width="260" height="120" filter="url(#ill-shadow)"/>
<rect class="i-panel" x="46" y="56" width="50" height="88"/>
<rect class="i-panel" x="108" y="56" width="104" height="88"/>
<rect class="i-panel" x="224" y="56" width="50" height="88"/>
<rect class="i-ink" x="52" y="66" width="38" height="14"/>
<rect class="i-on-ink" x="58" y="70.5" width="24" height="5"/>
<rect class="i-bar-soft" x="58" y="94.5" width="28" height="5"/>
<rect class="i-bar-soft" x="58" y="118.5" width="22" height="5"/>
<rect class="i-bar" x="120" y="70" width="68" height="6"/>
<rect class="i-bar-soft" x="120" y="84" width="80" height="6"/>
<rect class="i-bar-soft" x="120" y="98" width="56" height="6"/>
<rect class="i-panel" x="230" y="68" width="38" height="12"/>
<rect class="i-bar-soft" x="235" y="72" width="20" height="4"/>
<rect class="i-panel" x="230" y="86" width="38" height="12"/>
<rect class="i-bar-soft" x="235" y="90" width="16" height="4"/>
<rect class="i-bar-soft" x="230" y="110" width="32" height="5"/>
</svg></figure>
<p>Structure for ongoing work and the material it draws on.</p>
</div>
<div class="feature">
<h4 class="feature-title">Memory & continuity</h4>
<figure class="ph ph-ill"><svg viewBox="0 0 320 200" role="img" aria-label="Illustration of two session cards connected by a link across the gap between them" xmlns="http://www.w3.org/2000/svg">
<rect class="i-panel" x="32" y="65" width="110" height="70"/>
<rect class="i-card" x="178" y="65" width="110" height="70" filter="url(#ill-shadow)"/>
<line class="i-line" x1="142" y1="100" x2="178" y2="100"/>
<rect class="i-bar" x="48" y="84" width="62" height="6"/>
<rect class="i-bar-soft" x="48" y="98" width="46" height="6"/>
<rect class="i-bar" x="194" y="84" width="62" height="6"/>
<rect class="i-bar-soft" x="194" y="98" width="40" height="6"/>
<rect class="i-ink" x="153" y="93" width="14" height="14"/>
<path class="i-on-ink" transform="translate(156,96) scale(0.0313)" d="M165.66,90.34a8,8,0,0,1,0,11.32l-64,64a8,8,0,0,1-11.32-11.32l64-64A8,8,0,0,1,165.66,90.34ZM215.6,40.4a56,56,0,0,0-79.2,0L106.34,70.45a8,8,0,0,0,11.32,11.32l30.06-30a40,40,0,0,1,56.57,56.56l-30.07,30.06a8,8,0,0,0,11.31,11.32L215.6,119.6a56,56,0,0,0,0-79.2ZM138.34,174.22l-30.06,30.06a40,40,0,1,1-56.56-56.57l30.05-30.05a8,8,0,0,0-11.32-11.32L40.4,136.4a56,56,0,0,0,79.2,79.2l30.06-30.07a8,8,0,0,0-11.32-11.31Z"/>
</svg></figure>
<p>Context carried across sessions so the person does not start over each time.</p>
</div>
<div class="feature">
<h4 class="feature-title">Brand & domain fit</h4>
<figure class="ph ph-ill"><svg viewBox="0 0 320 200" role="img" aria-label="Illustration of the same widget in two frames, the right one wearing a brand header band" xmlns="http://www.w3.org/2000/svg">
<rect class="i-panel" x="30" y="58" width="120" height="84"/>
<rect class="i-card" x="170" y="58" width="120" height="84" filter="url(#ill-shadow)"/>
<rect class="i-ink" x="170" y="58" width="120" height="10"/>
<rect class="i-on-ink" x="176" y="60" width="6" height="6"/>
<rect class="i-bar" x="46" y="78" width="52" height="6"/>
<rect class="i-bar-soft" x="46" y="90" width="38" height="6"/>
<rect class="i-bar" x="46" y="114" width="10" height="12"/>
<rect class="i-bar" x="63" y="106" width="10" height="20"/>
<rect class="i-bar" x="80" y="110" width="10" height="16"/>
<rect class="i-bar" x="186" y="78" width="52" height="6"/>
<rect class="i-bar-soft" x="186" y="90" width="38" height="6"/>
<rect class="i-bar" x="186" y="114" width="10" height="12"/>
<rect class="i-bar" x="203" y="106" width="10" height="20"/>
<rect class="i-bar" x="220" y="110" width="10" height="16"/>
</svg></figure>
<p>An experience that looks and behaves like the product it belongs to, in the language of its field.</p>
</div>
<div class="feature">
<h4 class="feature-title">Adaptive layouts</h4>
<figure class="ph ph-ill"><svg viewBox="0 0 320 200" role="img" aria-label="Illustration of a desktop frame and a phone frame sharing the same content" xmlns="http://www.w3.org/2000/svg">
<rect class="i-card" x="50" y="48" width="150" height="100" filter="url(#ill-shadow)"/>
<rect class="i-panel" x="224" y="60" width="46" height="88"/>
<rect class="i-bar" x="66" y="66" width="96" height="6"/>
<rect class="i-bar-soft" x="66" y="78" width="64" height="6"/>
<rect class="i-bar" x="66" y="114" width="14" height="18"/>
<rect class="i-bar" x="90" y="104" width="14" height="28"/>
<rect class="i-bar" x="114" y="110" width="14" height="22"/>
<rect class="i-bar" x="232" y="72" width="30" height="6"/>
<rect class="i-bar-soft" x="232" y="84" width="20" height="6"/>
<rect class="i-bar" x="232" y="113" width="30" height="5"/>
<rect class="i-bar" x="232" y="122" width="16" height="5"/>
<rect class="i-bar" x="232" y="131" width="23" height="5"/>
</svg></figure>
<p>Coherence across desktop, mobile, and embedded surfaces.</p>
</div>
<div class="feature">
<h4 class="feature-title">Feedback & steering</h4>
<figure class="ph ph-ill"><svg viewBox="0 0 320 200" role="img" aria-label="Illustration of a response block with thumbs-up and thumbs-down buttons and steering chips beneath a divider" xmlns="http://www.w3.org/2000/svg">
<rect class="i-card" x="40" y="48" width="240" height="104" filter="url(#ill-shadow)"/>
<rect class="i-bar" x="60" y="68" width="136" height="6"/>
<rect class="i-bar-soft" x="60" y="81" width="92" height="6"/>
<line class="i-line" x1="60" y1="97" x2="260" y2="97"/>
<rect class="i-panel" x="60" y="109" width="22" height="22"/>
<path class="i-icon" transform="translate(65.5,114.5) scale(0.043)" d="M234,80.12A24,24,0,0,0,216,72H160V56a40,40,0,0,0-40-40,8,8,0,0,0-7.16,4.42L75.06,96H32a16,16,0,0,0-16,16v88a16,16,0,0,0,16,16H204a24,24,0,0,0,23.82-21l12-96A24,24,0,0,0,234,80.12ZM32,112H72v88H32ZM223.94,97l-12,96a8,8,0,0,1-7.94,7H88V105.89l36.71-73.43A24,24,0,0,1,144,56V80a8,8,0,0,0,8,8h64a8,8,0,0,1,7.94,9Z"/>
<rect class="i-panel" x="90" y="109" width="22" height="22"/>
<path class="i-icon" transform="translate(95.5,114.5) scale(0.043)" d="M239.82,157l-12-96A24,24,0,0,0,204,40H32A16,16,0,0,0,16,56v88a16,16,0,0,0,16,16H75.06l37.78,75.58A8,8,0,0,0,120,240a40,40,0,0,0,40-40V184h56a24,24,0,0,0,23.82-27ZM72,144H32V56H72Zm150,21.29a7.88,7.88,0,0,1-6,2.71H152a8,8,0,0,0-8,8v24a24,24,0,0,1-19.29,23.54L88,150.11V56H204a8,8,0,0,1,7.94,7l12,96A7.87,7.87,0,0,1,222,165.29Z"/>
<rect class="i-panel" x="160" y="109" width="46" height="22"/>
<rect class="i-bar-soft" x="170" y="117.5" width="26" height="5"/>
<rect class="i-ink" x="214" y="109" width="46" height="22"/>
<rect class="i-on-ink" x="224" y="117.5" width="26" height="5"/>
</svg></figure>
<p>Corrections and preferences that teach the agent, surfaced as interface rather than buried in settings.</p>
</div>
</div>
</div>
</details>
</div>
</section>
<!-- Contributors + contribute -->
<section class="contributors" id="contribute">
<div class="container">
<h2 class="section-title reveal">Written by practitioners</h2>
<p class="contrib-invite reveal">Engineers, designers, and product leaders who build agentic software and have watched the same problems recur across very different products.</p>
<ul class="contrib-names reveal">
<li><span class="contrib-avatar" aria-hidden="true">A</span>Abhishek</li>
<li><span class="contrib-avatar" aria-hidden="true">A</span>Aditya</li>
<li><span class="contrib-avatar" aria-hidden="true">P</span>Parikshit</li>
<li><span class="contrib-avatar" aria-hidden="true">P</span>Prakhar</li>
<li><span class="contrib-avatar" aria-hidden="true">R</span>Rabi</li>
<li><span class="contrib-avatar" aria-hidden="true">Z</span>Zahle</li>
</ul>
<p class="contrib-invite reveal">This is a starting point, not a finished specification. If these primitives describe what you have already learned, sign on. If they miss something, say what, and show the pattern.</p>
<p class="reveal">
<button class="btn" id="contrib-btn" aria-expanded="false" aria-controls="contrib-form">Contribute<span class="btn-icon" aria-hidden="true"><ph-icon name="arrow-right" size="12"></ph-icon></span></button>
</p>
<form id="contrib-form" class="contrib-form" hidden>
<label>
<span class="field-label">Your name</span>
<input class="input" type="text" name="name" autocomplete="name" placeholder="How you'd like to be credited">
</label>
<label>
<span class="field-label">Message</span>
<textarea class="input" name="message" rows="5" required placeholder="What held, what broke, what's missing — or just: sign me on."></textarea>
</label>
<div class="form-row">
<button type="submit" class="btn">Send<span class="btn-icon" aria-hidden="true"><ph-icon name="arrow-right" size="12"></ph-icon></span></button>
<p class="form-note">Opens your mail app, addressed to parikshit@thesys.dev.</p>
</div>
</form>
</div>
</section>
</main>
<site-footer></site-footer>
</body>
</html>