@iowarp/clio-coder 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (226) hide show
  1. package/CHANGELOG.md +407 -0
  2. package/CODE_OF_CONDUCT.md +21 -0
  3. package/CONTRIBUTING.md +224 -0
  4. package/LICENSE +202 -0
  5. package/NOTICE +9 -0
  6. package/README.md +798 -0
  7. package/SECURITY.md +72 -0
  8. package/assets/clio-coder-logo-128.webp +0 -0
  9. package/damage-control-rules.yaml +419 -0
  10. package/dist/acp-UMLFVA3F.js +92 -0
  11. package/dist/agents-Q4MYPMUW.js +91 -0
  12. package/dist/auth-O6HYIJ6J.js +521 -0
  13. package/dist/chunk-262G75JS.js +35 -0
  14. package/dist/chunk-26BZQOAD.js +1281 -0
  15. package/dist/chunk-2J63S4SF.js +508 -0
  16. package/dist/chunk-3DANZDGR.js +717 -0
  17. package/dist/chunk-4UQA7NCT.js +29 -0
  18. package/dist/chunk-527KG6XR.js +497 -0
  19. package/dist/chunk-5LDRNKX2.js +1063 -0
  20. package/dist/chunk-5N2FG33Q.js +25 -0
  21. package/dist/chunk-67MTHP2E.js +135 -0
  22. package/dist/chunk-6CWDTGUC.js +20 -0
  23. package/dist/chunk-7BHLZB3A.js +2115 -0
  24. package/dist/chunk-7RBKDI66.js +348 -0
  25. package/dist/chunk-AMFR5YA3.js +541 -0
  26. package/dist/chunk-BBUH4VAA.js +1224 -0
  27. package/dist/chunk-BYEU76JP.js +899 -0
  28. package/dist/chunk-CLJ5HLUD.js +458 -0
  29. package/dist/chunk-D5YD55AR.js +116 -0
  30. package/dist/chunk-DXQNI4PC.js +61 -0
  31. package/dist/chunk-E3NYWENM.js +1004 -0
  32. package/dist/chunk-GNGDQYDU.js +34688 -0
  33. package/dist/chunk-GOTUR54M.js +9 -0
  34. package/dist/chunk-HBU5MTAM.js +41 -0
  35. package/dist/chunk-HMYNFFY4.js +28 -0
  36. package/dist/chunk-JPOWPFCU.js +1010 -0
  37. package/dist/chunk-JWHCJDCI.js +1215 -0
  38. package/dist/chunk-KBR4MZZR.js +41 -0
  39. package/dist/chunk-KKKPTZLM.js +93 -0
  40. package/dist/chunk-ME6DNWIU.js +66 -0
  41. package/dist/chunk-NI4DEJMC.js +88 -0
  42. package/dist/chunk-O4EJEDHO.js +659 -0
  43. package/dist/chunk-PIDUD6M2.js +31 -0
  44. package/dist/chunk-PS4PFJQP.js +29459 -0
  45. package/dist/chunk-QV47YRF4.js +48 -0
  46. package/dist/chunk-RQDWMVRB.js +279 -0
  47. package/dist/chunk-TFSSEXL6.js +136 -0
  48. package/dist/chunk-TKHQ4DGZ.js +8290 -0
  49. package/dist/chunk-TPOCL34A.js +2876 -0
  50. package/dist/chunk-UGYAX5YI.js +565 -0
  51. package/dist/chunk-UHTSULZS.js +461 -0
  52. package/dist/chunk-UU3R62TT.js +128 -0
  53. package/dist/chunk-UWIJNAOB.js +3906 -0
  54. package/dist/chunk-VOO7NYPP.js +914 -0
  55. package/dist/chunk-VPAWTYLY.js +117 -0
  56. package/dist/chunk-WD6AJM35.js +1216 -0
  57. package/dist/chunk-X3BR7HWV.js +115 -0
  58. package/dist/chunk-X3NE4WVW.js +120 -0
  59. package/dist/chunk-XNISANGE.js +1395 -0
  60. package/dist/chunk-XV4ZJ6ZM.js +3177 -0
  61. package/dist/cli/index.js +236 -0
  62. package/dist/clio-KIQ5SNDS.js +53 -0
  63. package/dist/components-JVHMUBEB.js +653 -0
  64. package/dist/config-ZFCDBMDC.js +372 -0
  65. package/dist/configure-G4E3A2PG.js +27 -0
  66. package/dist/context-CDXTP2MP.js +293 -0
  67. package/dist/context-E3KIFVXI.js +185 -0
  68. package/dist/context-clear-3F4PLXOS.js +102 -0
  69. package/dist/context-index-Q7YSYTR3.js +106 -0
  70. package/dist/docs-YIETIWZI.js +280 -0
  71. package/dist/doctor-M5HJJZOL.js +61 -0
  72. package/dist/domains/agents/builtins/architect.md +33 -0
  73. package/dist/domains/agents/builtins/coder.md +31 -0
  74. package/dist/domains/agents/builtins/context-bootstrap.md +38 -0
  75. package/dist/domains/agents/builtins/debugger.md +30 -0
  76. package/dist/domains/agents/builtins/documenter.md +31 -0
  77. package/dist/domains/agents/builtins/git-master.md +30 -0
  78. package/dist/domains/agents/builtins/provenance.md +30 -0
  79. package/dist/domains/agents/builtins/researcher.md +71 -0
  80. package/dist/domains/agents/builtins/scout.md +42 -0
  81. package/dist/domains/agents/builtins/tester.md +31 -0
  82. package/dist/domains/agents/builtins/verifier.md +30 -0
  83. package/dist/domains/agents/builtins/wiki-writer.md +41 -0
  84. package/dist/eval-B3KZZESM.js +2674 -0
  85. package/dist/evidence-V67CHM35.js +233 -0
  86. package/dist/evolve-YDZSUQYA.js +518 -0
  87. package/dist/extensions-SRG7XCAH.js +207 -0
  88. package/dist/fleet-CA2CRTVG.js +760 -0
  89. package/dist/fleet-preflight-CLIAX7YR.js +21 -0
  90. package/dist/init-2OZDJE2D.js +227 -0
  91. package/dist/memory-3PIQQAKX.js +207 -0
  92. package/dist/models-DY35XI7Y.js +237 -0
  93. package/dist/paths-5OMXW7Z4.js +57 -0
  94. package/dist/preload-KZVHET2B.js +11 -0
  95. package/dist/reset-PIFYNOS3.js +216 -0
  96. package/dist/run-3VSPP24F.js +735 -0
  97. package/dist/share-D36RQCXM.js +241 -0
  98. package/dist/skills-F2MRLELY.js +445 -0
  99. package/dist/skills-eval-E2ZTW4PL.js +932 -0
  100. package/dist/targets-DZMEZAH4.js +977 -0
  101. package/dist/trace-7NYCUI2J.js +250 -0
  102. package/dist/uninstall-AD3JWHBB.js +322 -0
  103. package/dist/upgrade-WYYBKGDY.js +301 -0
  104. package/dist/usage-ULIDAGFF.js +755 -0
  105. package/dist/version-ROZ6CZKH.js +16 -0
  106. package/dist/wiki-generate-PKFIX6OB.js +377 -0
  107. package/dist/worker/entry.js +1739 -0
  108. package/docs/README.md +93 -0
  109. package/docs/acp.md +120 -0
  110. package/docs/alcf-provider.md +72 -0
  111. package/docs/architecture.md +172 -0
  112. package/docs/artifact-versions.md +54 -0
  113. package/docs/built-in-agents.md +265 -0
  114. package/docs/capacity-and-scheduling.md +97 -0
  115. package/docs/commands-and-modes.md +554 -0
  116. package/docs/config-knobs-audit.md +115 -0
  117. package/docs/configuration-and-targets.md +812 -0
  118. package/docs/context-engine.md +236 -0
  119. package/docs/dispatch-architecture-rationale.md +126 -0
  120. package/docs/documentation-coverage.md +46 -0
  121. package/docs/documentation-guide.md +166 -0
  122. package/docs/environment-variables.md +105 -0
  123. package/docs/eval-runner.md +205 -0
  124. package/docs/evals-internal.md +298 -0
  125. package/docs/evidence-and-memory.md +243 -0
  126. package/docs/evolution.md +143 -0
  127. package/docs/exit-codes-and-output.md +74 -0
  128. package/docs/extensions-and-sharing.md +306 -0
  129. package/docs/fleet-demo-runbook.md +179 -0
  130. package/docs/fleet-dispatch.md +591 -0
  131. package/docs/glossary.md +75 -0
  132. package/docs/html/agents_blueprint.html +936 -0
  133. package/docs/html/alcf_blueprint.html +324 -0
  134. package/docs/html/architecture_blueprint.html +850 -0
  135. package/docs/html/commands_blueprint.html +794 -0
  136. package/docs/html/config_knobs_audit_blueprint.html +178 -0
  137. package/docs/html/configuration_blueprint.html +1080 -0
  138. package/docs/html/context_blueprint.html +603 -0
  139. package/docs/html/documentation_blueprint.html +832 -0
  140. package/docs/html/environment_blueprint.html +404 -0
  141. package/docs/html/eval_blueprint.html +743 -0
  142. package/docs/html/evals_internal_blueprint.html +190 -0
  143. package/docs/html/evolution_blueprint.html +674 -0
  144. package/docs/html/extensions_blueprint.html +2065 -0
  145. package/docs/html/fleet_dispatch_blueprint.html +286 -0
  146. package/docs/html/index.html +919 -0
  147. package/docs/html/lifecycle_blueprint.html +723 -0
  148. package/docs/html/memory_blueprint.html +699 -0
  149. package/docs/html/middleware_blueprint.html +664 -0
  150. package/docs/html/models_blueprint.html +2366 -0
  151. package/docs/html/observability_blueprint.html +683 -0
  152. package/docs/html/provider_adapter_blueprint.html +245 -0
  153. package/docs/html/safety_blueprint.html +1386 -0
  154. package/docs/html/shared.css +571 -0
  155. package/docs/html/shared.js +143 -0
  156. package/docs/html/skills_blueprint.html +671 -0
  157. package/docs/html/soak_blueprint.html +182 -0
  158. package/docs/html/tool_usage_blueprint.html +350 -0
  159. package/docs/html/tools_blueprint.html +2249 -0
  160. package/docs/html/trace_blueprint.html +235 -0
  161. package/docs/html/tui_design_blueprint.html +314 -0
  162. package/docs/html/validation_blueprint.html +961 -0
  163. package/docs/html/worker_dispatch_blueprint.html +231 -0
  164. package/docs/installation-and-lifecycle.md +308 -0
  165. package/docs/middleware-and-components.md +148 -0
  166. package/docs/model-catalog.md +189 -0
  167. package/docs/observability.md +233 -0
  168. package/docs/proactive-memory.md +452 -0
  169. package/docs/prompt-envelope-and-tools.md +142 -0
  170. package/docs/provider-adapter-cookbook.md +148 -0
  171. package/docs/release-cut-checklist.md +138 -0
  172. package/docs/safety-model.md +357 -0
  173. package/docs/scientific-validation.md +105 -0
  174. package/docs/session-lifecycle.md +156 -0
  175. package/docs/skills-marketplace.md +46 -0
  176. package/docs/tool-usage.md +527 -0
  177. package/docs/trace-store.md +132 -0
  178. package/docs/troubleshooting.md +33 -0
  179. package/docs/tui-design.md +239 -0
  180. package/docs/worker-dispatch-mechanics.md +242 -0
  181. package/package.json +132 -0
  182. package/skills/README.md +408 -0
  183. package/skills/git/commit-crafting/SKILL.md +79 -0
  184. package/skills/git/commit-crafting/evals.md +92 -0
  185. package/skills/git/create-pr/SKILL.md +116 -0
  186. package/skills/git/create-pr/evals.md +114 -0
  187. package/skills/git/investigate-issue/SKILL.md +139 -0
  188. package/skills/git/investigate-issue/evals.md +94 -0
  189. package/skills/git/resolve-merge-conflicts/SKILL.md +96 -0
  190. package/skills/git/resolve-merge-conflicts/evals.md +58 -0
  191. package/skills/git/review-changes/SKILL.md +103 -0
  192. package/skills/git/review-changes/evals.md +85 -0
  193. package/skills/git/worktree-create/SKILL.md +92 -0
  194. package/skills/git/worktree-create/evals.md +97 -0
  195. package/skills/git/worktree-create/references/worktree-setup.md +66 -0
  196. package/skills/git/worktree-merge/SKILL.md +95 -0
  197. package/skills/git/worktree-merge/evals.md +114 -0
  198. package/skills/skill-marketplace.json +261 -0
  199. package/skills/workflow/cut-it/SKILL.md +86 -0
  200. package/skills/workflow/cut-it/evals.md +42 -0
  201. package/src/domains/agents/builtins/architect.md +33 -0
  202. package/src/domains/agents/builtins/coder.md +31 -0
  203. package/src/domains/agents/builtins/context-bootstrap.md +38 -0
  204. package/src/domains/agents/builtins/debugger.md +30 -0
  205. package/src/domains/agents/builtins/documenter.md +31 -0
  206. package/src/domains/agents/builtins/git-master.md +30 -0
  207. package/src/domains/agents/builtins/provenance.md +30 -0
  208. package/src/domains/agents/builtins/researcher.md +71 -0
  209. package/src/domains/agents/builtins/scout.md +42 -0
  210. package/src/domains/agents/builtins/tester.md +31 -0
  211. package/src/domains/agents/builtins/verifier.md +30 -0
  212. package/src/domains/agents/builtins/wiki-writer.md +41 -0
  213. package/src/domains/agents/fleets/build-review.md +34 -0
  214. package/src/domains/agents/fleets/build-test.md +35 -0
  215. package/src/domains/agents/fleets/sdlc.md +86 -0
  216. package/src/domains/prompts/fragments/identity/clio-worker.md +11 -0
  217. package/src/domains/prompts/fragments/identity/clio.md +26 -0
  218. package/src/domains/prompts/fragments/operating/contract.md +64 -0
  219. package/src/domains/prompts/fragments/safety/auto-edit.md +14 -0
  220. package/src/domains/prompts/fragments/safety/full-auto.md +14 -0
  221. package/src/domains/prompts/fragments/safety/read-only.md +13 -0
  222. package/src/domains/prompts/fragments/safety/suggest.md +13 -0
  223. package/src/domains/prompts/fragments/wiki/page.md +75 -0
  224. package/src/domains/prompts/fragments/wiki/plan.md +48 -0
  225. package/src/domains/providers/models/cloud-models/alcf.yaml +40 -0
  226. package/src/domains/providers/models/local-models/clio-local-coding-targets.yaml +993 -0
package/docs/html/context_blueprint.html ADDED
@@ -0,0 +1,603 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Clio Coder Context Engine Blueprint (v0.3.0)</title>
7
+
8
+ <style>
9
+ :root {
10
+ --bg-dark: #090d16;
11
+ --bg-grid: rgba(255, 255, 255, 0.02);
12
+ --bg-card: rgba(13, 20, 38, 0.45);
13
+ --bg-card-hover: rgba(20, 30, 58, 0.6);
14
+ --border-card: rgba(255, 255, 255, 0.08);
15
+ --border-card-hover: rgba(0, 240, 255, 0.3);
16
+ --text-main: #f3f4f6;
17
+ --text-muted: #9ca3af;
18
+ --text-dim: #6b7280;
19
+
20
+ --color-cyan: #00f0ff;
21
+ --color-cyan-rgb: 0, 240, 255;
22
+ --color-purple: #bd00ff;
23
+ --color-purple-rgb: 189, 0, 255;
24
+ --color-emerald: #10b981;
25
+ --color-emerald-rgb: 16, 185, 129;
26
+ --color-amber: #f59e0b;
27
+ --color-amber-rgb: 245, 158, 11;
28
+ --color-rose: #ef4444;
29
+ --color-rose-rgb: 239, 68, 68;
30
+
31
+ --gradient-main: linear-gradient(135deg, var(--color-cyan), var(--color-purple));
32
+ --shadow-glow: 0 0 25px rgba(0, 240, 255, 0.15);
33
+ --font-sans: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
34
+ --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
35
+
36
+ --glass-blur: blur(12px);
37
+ }
38
+
39
+ * {
40
+ box-sizing: border-box;
41
+ margin: 0;
42
+ padding: 0;
43
+ }
44
+
45
+ body {
46
+ background-color: var(--bg-dark);
47
+ background-image:
48
+ radial-gradient(circle at 10% 20%, rgba(var(--color-cyan-rgb), 0.05) 0%, transparent 40%),
49
+ radial-gradient(circle at 90% 80%, rgba(var(--color-purple-rgb), 0.05) 0%, transparent 40%),
50
+ radial-gradient(circle at 50% 50%, #0d1527 0%, var(--bg-dark) 100%);
51
+ color: var(--text-main);
52
+ font-family: var(--font-sans);
53
+ min-height: 100vh;
54
+ line-height: 1.6;
55
+ overflow-x: hidden;
56
+ position: relative;
57
+ }
58
+
59
+ body::before {
60
+ content: '';
61
+ position: absolute;
62
+ inset: 0;
63
+ background-image: linear-gradient(var(--bg-grid) 1px, transparent 1px),
64
+ linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px);
65
+ background-size: 40px 40px;
66
+ background-position: center top;
67
+ pointer-events: none;
68
+ z-index: 0;
69
+ opacity: 0.8;
70
+ }
71
+
72
+ .container {
73
+ max-width: 1400px;
74
+ margin: 0 auto;
75
+ padding: 2rem;
76
+ position: relative;
77
+ z-index: 1;
78
+ }
79
+
80
+ /* Header Styling */
81
+ header {
82
+ display: flex;
83
+ justify-content: space-between;
84
+ align-items: center;
85
+ margin-bottom: 2.5rem;
86
+ padding-bottom: 1.5rem;
87
+ border-bottom: 1px solid rgba(255, 255, 255, 0.05);
88
+ }
89
+
90
+ .header-left {
91
+ display: flex;
92
+ align-items: center;
93
+ gap: 1rem;
94
+ }
95
+
96
+ .header-logo {
97
+ display: inline-flex;
98
+ align-items: center;
99
+ justify-content: center;
100
+ width: 48px;
101
+ height: 48px;
102
+ background: rgba(255, 255, 255, 0.02);
103
+ border: 1px solid var(--border-card);
104
+ border-radius: 12px;
105
+ }
106
+
107
+ .header-logo svg {
108
+ width: 28px;
109
+ height: 28px;
110
+ }
111
+
112
+ .header-title-wrapper h1 {
113
+ font-size: 1.5rem;
114
+ font-weight: 800;
115
+ letter-spacing: -0.03em;
116
+ background: linear-gradient(to right, #ffffff, #c7d2fe, var(--color-cyan));
117
+ -webkit-background-clip: text;
118
+ -webkit-text-fill-color: transparent;
119
+ }
120
+
121
+ .header-title-wrapper p {
122
+ font-size: 0.825rem;
123
+ color: var(--text-muted);
124
+ }
125
+
126
+ .header-right {
127
+ display: flex;
128
+ align-items: center;
129
+ gap: 1rem;
130
+ }
131
+
132
+ .back-btn {
133
+ background: rgba(255, 255, 255, 0.03);
134
+ border: 1px solid var(--border-card);
135
+ color: var(--text-muted);
136
+ padding: 0.5rem 1rem;
137
+ border-radius: 8px;
138
+ font-size: 0.875rem;
139
+ font-weight: 600;
140
+ text-decoration: none;
141
+ display: inline-flex;
142
+ align-items: center;
143
+ gap: 0.5rem;
144
+ transition: all 0.2s;
145
+ }
146
+
147
+ .back-btn:hover {
148
+ background: rgba(255, 255, 255, 0.08);
149
+ color: var(--text-main);
150
+ border-color: rgba(var(--color-cyan-rgb), 0.3);
151
+ }
152
+
153
+ .version-badge {
154
+ background: rgba(0, 240, 255, 0.08);
155
+ border: 1px solid rgba(0, 240, 255, 0.25);
156
+ color: var(--color-cyan);
157
+ padding: 0.35rem 0.75rem;
158
+ border-radius: 50px;
159
+ font-size: 0.75rem;
160
+ font-weight: 600;
161
+ font-family: var(--font-mono);
162
+ }
163
+
164
+ /* Tabs Navigation */
165
+ .tabs-nav {
166
+ display: flex;
167
+ gap: 0.75rem;
168
+ margin-bottom: 2rem;
169
+ }
170
+
171
+ .tab-btn {
172
+ background: rgba(255, 255, 255, 0.03);
173
+ border: 1px solid var(--border-card);
174
+ color: var(--text-muted);
175
+ padding: 0.6rem 1.25rem;
176
+ border-radius: 8px;
177
+ font-size: 0.875rem;
178
+ font-weight: 600;
179
+ cursor: pointer;
180
+ display: flex;
181
+ align-items: center;
182
+ gap: 0.5rem;
183
+ transition: all 0.2s;
184
+ }
185
+
186
+ .tab-btn:hover {
187
+ background: rgba(255, 255, 255, 0.06);
188
+ color: var(--text-main);
189
+ }
190
+
191
+ .tab-btn.active {
192
+ background: var(--gradient-main);
193
+ color: #090d16;
194
+ border-color: transparent;
195
+ box-shadow: 0 4px 15px rgba(var(--color-cyan-rgb), 0.25);
196
+ }
197
+
198
+ /* Content Layout */
199
+ .tab-pane {
200
+ display: none;
201
+ animation: fadeIn 0.3s ease-out forwards;
202
+ }
203
+
204
+ .tab-pane.active {
205
+ display: block;
206
+ }
207
+
208
+ @keyframes fadeIn {
209
+ from { opacity: 0; transform: translateY(8px); }
210
+ to { opacity: 1; transform: translateY(0); }
211
+ }
212
+
213
+ /* Split layout */
214
+ .blueprint-layout {
215
+ display: grid;
216
+ grid-template-columns: 1fr 1fr;
217
+ gap: 2rem;
218
+ align-items: start;
219
+ }
220
+
221
+ @media (max-width: 1100px) {
222
+ .blueprint-layout {
223
+ grid-template-columns: 1fr;
224
+ }
225
+ }
226
+
227
+ .glass-card {
228
+ background: var(--bg-card);
229
+ border: 1px solid var(--border-card);
230
+ border-radius: 16px;
231
+ padding: 1.75rem;
232
+ margin-bottom: 2rem;
233
+ backdrop-filter: var(--glass-blur);
234
+ box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
235
+ }
236
+
237
+ .glass-card h2 {
238
+ font-size: 1.25rem;
239
+ font-weight: 700;
240
+ color: #ffffff;
241
+ margin-bottom: 1.25rem;
242
+ display: flex;
243
+ align-items: center;
244
+ gap: 0.5rem;
245
+ border-bottom: 1px solid rgba(255, 255, 255, 0.05);
246
+ padding-bottom: 0.75rem;
247
+ }
248
+
249
+ .glass-card h2 svg {
250
+ width: 18px;
251
+ height: 18px;
252
+ color: var(--color-cyan);
253
+ }
254
+
255
+ .glass-card p {
256
+ font-size: 0.925rem;
257
+ color: var(--text-muted);
258
+ margin-bottom: 1rem;
259
+ }
260
+
261
+ /* Form Elements */
262
+ .form-group {
263
+ margin-bottom: 1.25rem;
264
+ }
265
+
266
+ .form-group label {
267
+ display: block;
268
+ font-size: 0.8rem;
269
+ font-weight: 600;
270
+ color: var(--text-muted);
271
+ margin-bottom: 0.5rem;
272
+ text-transform: uppercase;
273
+ letter-spacing: 0.05em;
274
+ }
275
+
276
+ select, input {
277
+ width: 100%;
278
+ background: rgba(9, 13, 22, 0.7);
279
+ border: 1px solid var(--border-card);
280
+ border-radius: 8px;
281
+ padding: 0.65rem 0.85rem;
282
+ color: #fff;
283
+ font-family: var(--font-sans);
284
+ font-size: 0.9rem;
285
+ outline: none;
286
+ }
287
+
288
+ /* Stacked Token Visualizer */
289
+ .stack-meter {
290
+ height: 32px;
291
+ border-radius: 8px;
292
+ background: rgba(255,255,255,0.02);
293
+ border: 1px solid var(--border-card);
294
+ overflow: hidden;
295
+ display: flex;
296
+ margin: 1.5rem 0 0.75rem 0;
297
+ }
298
+
299
+ .stack-seg {
300
+ height: 100%;
301
+ transition: width 0.3s ease;
302
+ }
303
+
304
+ .seg-sys { background: var(--color-cyan); }
305
+ .seg-msg { background: var(--color-purple); }
306
+ .seg-tools { background: var(--color-amber); }
307
+ .seg-free { background: rgba(255, 255, 255, 0.08); }
308
+
309
+ .legend-row {
310
+ display: flex;
311
+ flex-wrap: wrap;
312
+ gap: 1rem;
313
+ font-size: 0.75rem;
314
+ color: var(--text-muted);
315
+ margin-bottom: 1.5rem;
316
+ }
317
+
318
+ .legend-item {
319
+ display: flex;
320
+ align-items: center;
321
+ gap: 0.4rem;
322
+ }
323
+
324
+ .legend-dot {
325
+ width: 8px;
326
+ height: 8px;
327
+ border-radius: 50%;
328
+ }
329
+
330
+ /* Pressure gauge card */
331
+ .verdict-box {
332
+ border-radius: 12px;
333
+ padding: 1.25rem;
334
+ border: 1px solid transparent;
335
+ margin-top: 1.5rem;
336
+ }
337
+
338
+ .verdict-box.normal { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.3); color: var(--color-emerald); }
339
+ .verdict-box.warn { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.3); color: var(--color-amber); }
340
+ .verdict-box.error { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.3); color: var(--color-rose); }
341
+
342
+ pre {
343
+ background: rgba(0,0,0,0.3);
344
+ border: 1px solid var(--border-card);
345
+ border-radius: 8px;
346
+ padding: 1rem;
347
+ overflow-x: auto;
348
+ margin: 1rem 0;
349
+ }
350
+
351
+ code {
352
+ font-family: var(--font-mono);
353
+ font-size: 0.85rem;
354
+ }
355
+
356
+ /* Footer */
357
+ footer {
358
+ text-align: center;
359
+ margin-top: 4rem;
360
+ padding-top: 2rem;
361
+ border-top: 1px solid rgba(255, 255, 255, 0.05);
362
+ color: var(--text-dim);
363
+ font-size: 0.875rem;
364
+ }
365
+ </style>
366
+ </head>
367
+ <body>
368
+ <div class="container">
369
+ <header>
370
+ <div class="header-left">
371
+ <div class="header-logo">
372
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: var(--color-cyan);"><title>Icon</title>
373
+ <line x1="18" y1="20" x2="18" y2="10"></line>
374
+ <line x1="12" y1="20" x2="12" y2="4"></line>
375
+ <line x1="6" y1="20" x2="6" y2="14"></line>
376
+ </svg>
377
+ </div>
378
+ <div class="header-title-wrapper">
379
+ <h1>Clio Coder Context Engine</h1>
380
+ <p>Sliding context windows, token accounting estimators, and single-threshold compaction</p>
381
+ </div>
382
+ </div>
383
+ <div class="header-right">
384
+ <span class="version-badge">Clio Coder v0.3.0</span>
385
+ <a href="index.html" class="back-btn">
386
+ <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><title>Icon</title><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
387
+ Dashboard Hub
388
+ </a>
389
+ </div>
390
+ </header>
391
+
392
+ <div class="tabs-nav">
393
+ <button type="button" class="tab-btn active" onclick="switchTab('interactive')">
394
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><title>Icon</title><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>
395
+ Pressure &amp; Compaction Calculator
396
+ </button>
397
+ <button type="button" class="tab-btn" onclick="switchTab('reference')">
398
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><title>Icon</title><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
399
+ Full Technical Reference
400
+ </button>
401
+ </div>
402
+
403
+ <!-- TAB 1: INTERACTIVE -->
404
+ <main class="tab-pane active" id="pane-interactive">
405
+ <div class="blueprint-layout">
406
+
407
+ <!-- Left: Sliders inputs -->
408
+ <div class="specs-col">
409
+ <div class="glass-card">
410
+ <h2>
411
+ <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><title>Icon</title><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
412
+ Context Parameters
413
+ </h2>
414
+ <p>Set token counts to estimate context window pressure and determine compaction behavior.</p>
415
+
416
+ <div class="form-group">
417
+ <label for="windowSize">Context Window Limit</label>
418
+ <select id="windowSize" onchange="recalculate()">
419
+ <option value="128000">128,000 tokens (Standard Local/Cloud)</option>
420
+ <option value="32768">32,768 tokens (Compact Local)</option>
421
+ <option value="8192">8,192 tokens (Legacy Model)</option>
422
+ </select>
423
+ </div>
424
+
425
+ <div class="form-group">
426
+ <label>System Prompt + Tools (tokens)</label>
427
+ <input type="range" id="sizeSys" min="2000" max="40000" step="1000" value="12000" oninput="recalculate()">
428
+ <span id="txtSys" style="font-family:var(--font-mono); font-size:0.8rem;">12,000</span>
429
+ </div>
430
+
431
+ <div class="form-group">
432
+ <label>Messages History (tokens)</label>
433
+ <input type="range" id="sizeMsg" min="4000" max="120000" step="2000" value="48000" oninput="recalculate()">
434
+ <span id="txtMsg" style="font-family:var(--font-mono); font-size:0.8rem;">48,000</span>
435
+ </div>
436
+
437
+ <div class="form-group">
438
+ <label>Tool Observations (tokens)</label>
439
+ <input type="range" id="sizeTools" min="0" max="50000" step="1000" value="15000" oninput="recalculate()">
440
+ <span id="txtTools" style="font-family:var(--font-mono); font-size:0.8rem;">15,000</span>
441
+ </div>
442
+
443
+ <div class="form-group">
444
+ <label>Compaction Threshold</label>
445
+ <input type="range" id="threshold" min="0.5" max="0.95" step="0.05" value="0.80" oninput="recalculate()">
446
+ <span id="txtThreshold" style="font-family:var(--font-mono); font-size:0.8rem;">0.80</span>
447
+ </div>
448
+ </div>
449
+ </div>
450
+
451
+ <!-- Right: Gauges and results -->
452
+ <div class="specs-col">
453
+ <div class="glass-card">
454
+ <h2>
455
+ <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><title>Icon</title><line x1="18" y1="20" x2="18" y2="10"></line><line x1="12" y1="20" x2="12" y2="4"></line><line x1="6" y1="20" x2="6" y2="14"></line></svg>
456
+ Context Pressure Gauge
457
+ </h2>
458
+ <p>Visual representation of model context window space.</p>
459
+
460
+ <div class="stack-meter">
461
+ <div class="stack-seg seg-sys" id="segSys" style="width: 10%"></div>
462
+ <div class="stack-seg seg-msg" id="segMsg" style="width: 40%"></div>
463
+ <div class="stack-seg seg-tools" id="segTools" style="width: 15%"></div>
464
+ <div class="stack-seg seg-free" id="segFree" style="width: 35%"></div>
465
+ </div>
466
+
467
+ <div class="legend-row">
468
+ <div class="legend-item"><span class="legend-dot seg-sys"></span>System Prompt (<span id="pctSys">10%</span>)</div>
469
+ <div class="legend-item"><span class="legend-dot seg-msg"></span>Messages (<span id="pctMsg">40%</span>)</div>
470
+ <div class="legend-item"><span class="legend-dot seg-tools"></span>Tool Obs (<span id="pctTools">15%</span>)</div>
471
+ <div class="legend-item"><span class="legend-dot seg-free"></span>Free Space (<span id="pctFree">35%</span>)</div>
472
+ </div>
473
+
474
+ <div class="verdict-header">Compaction Verdict</div>
475
+ <div id="verdictBox" class="verdict-box normal">
476
+ <strong id="verdictTitle" style="display:block; font-size:1.1rem">NO COMPACTION REQUIRED</strong>
477
+ <span id="verdictDesc">Pressure is below threshold. Full context fits cleanly.</span>
478
+ </div>
479
+
480
+ <div id="maskedPreviewBox" style="margin-top:1.5rem; display:none">
481
+ <div class="verdict-header">Simulated Observation Mask Marker</div>
482
+ <pre><code id="maskedPreviewText">[Observation masked: read output was 240 lines...]</code></pre>
483
+ </div>
484
+ </div>
485
+ </div>
486
+
487
+ </div>
488
+ </main>
489
+
490
+ <!-- TAB 2: TECHNICAL REFERENCE -->
491
+ <main class="tab-pane" id="pane-reference">
492
+ <div class="glass-card">
493
+ <h2>Clio Coder Context Engine Specification</h2>
494
+ <p>Clio Coder tracks context pressure, records per-turn snapshots, and protects the provider context with bounded tool results plus single-threshold compaction.</p>
495
+
496
+ <h3 style="margin: 1.5rem 0 0.5rem 0; color:#fff;">Token Estimator</h3>
497
+ <p>Accounting is hot-path optimized. Instead of querying a remote model tokenizer on every keypress or display refresh, the engine uses a 4 characters-per-token heuristic. This allows instant calculations of messages size, tools payloads, and system scopes.</p>
498
+
499
+ <h3 style="margin: 1.5rem 0 0.5rem 0; color:#fff;">Single-Threshold Compaction</h3>
500
+ <p>Auto-compaction resolves in two tiers to avoid calling the model when cheap edits work:</p>
501
+ <ol style="margin-left: 2rem; margin-bottom: 1.5rem; color:var(--text-muted)">
502
+ <li style="margin-bottom:0.5rem;"><strong>Tier 1: Observation and thinking masking (local)</strong>: Clio first scans stale tool results and stale assistant thinking older than <code>excludeLastTurns</code> (default: 6), replaces observation bodies with compact markers, and drops stale thinking while preserving replay structures.</li>
503
+ <li style="margin-bottom:0.5rem;"><strong>Tier 2: LLM Summary (Model)</strong>: If pressure remains above the threshold after local masking, the engine executes a summary compaction call, folding older chat segments into a single compact ledger summary turn.</li>
504
+ </ol>
505
+
506
+ <h3 style="margin: 1.5rem 0 0.5rem 0; color:#fff;">Cache-Divergence Honesty</h3>
507
+ <p>Because compaction rewrites the replayed history buffer, local backend models running prefix-caches will experience cold boots on the next turn. Clio monitors and captures this cache-divergence behaviour inside timing structures to inform the operator.</p>
508
+ </div>
509
+ </main>
510
+
511
+ <footer>
512
+ <p>Clio Coder Context Engine spec &bull; Version 0.3.0</p>
513
+ </footer>
514
+ </div>
515
+
516
+ <script>
517
+ // Tab switching
518
+ function switchTab(tabId) {
519
+ document.querySelectorAll('.tab-btn').forEach(btn => { btn.classList.remove('active'); });
520
+ document.querySelectorAll('.tab-pane').forEach(pane => { pane.classList.remove('active'); });
521
+
522
+ if (tabId === 'interactive') {
523
+ document.querySelector('.tab-btn:nth-child(1)').classList.add('active');
524
+ document.getElementById('pane-interactive').classList.add('active');
525
+ } else {
526
+ document.querySelector('.tab-btn:nth-child(2)').classList.add('active');
527
+ document.getElementById('pane-reference').classList.add('active');
528
+ }
529
+ }
530
+
531
+ function recalculate() {
532
+ const windowSize = parseInt(document.getElementById('windowSize').value);
533
+ const sys = parseInt(document.getElementById('sizeSys').value);
534
+ const msg = parseInt(document.getElementById('sizeMsg').value);
535
+ const tools = parseInt(document.getElementById('sizeTools').value);
536
+ const threshold = parseFloat(document.getElementById('threshold').value);
537
+
538
+ // update text labels
539
+ document.getElementById('txtSys').innerText = sys.toLocaleString();
540
+ document.getElementById('txtMsg').innerText = msg.toLocaleString();
541
+ document.getElementById('txtTools').innerText = tools.toLocaleString();
542
+ document.getElementById('txtThreshold').innerText = threshold.toFixed(2);
543
+
544
+ // clamp sum to windowSize
545
+ const total = sys + msg + tools;
546
+
547
+ const pctSys = (sys / windowSize) * 100;
548
+ const pctMsg = (msg / windowSize) * 100;
549
+ const pctTools = (tools / windowSize) * 100;
550
+ const pctFree = Math.max(0, 100 - (pctSys + pctMsg + pctTools));
551
+
552
+ // update meter widths
553
+ document.getElementById('segSys').style.width = pctSys + '%';
554
+ document.getElementById('segMsg').style.width = pctMsg + '%';
555
+ document.getElementById('segTools').style.width = pctTools + '%';
556
+ document.getElementById('segFree').style.width = pctFree + '%';
557
+
558
+ // update legend labels
559
+ document.getElementById('pctSys').innerText = Math.round(pctSys) + '%';
560
+ document.getElementById('pctMsg').innerText = Math.round(pctMsg) + '%';
561
+ document.getElementById('pctTools').innerText = Math.round(pctTools) + '%';
562
+ document.getElementById('pctFree').innerText = Math.round(pctFree) + '%';
563
+
564
+ // evaluate compaction
565
+ const pressure = total / windowSize;
566
+ const vBox = document.getElementById('verdictBox');
567
+ const vTitle = document.getElementById('verdictTitle');
568
+ const vDesc = document.getElementById('verdictDesc');
569
+ const previewBox = document.getElementById('maskedPreviewBox');
570
+
571
+ if (pressure < threshold) {
572
+ vBox.className = "verdict-box normal";
573
+ vTitle.innerText = "NO COMPACTION REQUIRED";
574
+ vDesc.innerText = `Pressure (${pressure.toFixed(2)}) is below threshold (${threshold.toFixed(2)}). History fits in window.`;
575
+ previewBox.style.display = 'none';
576
+ } else {
577
+ // threshold crossed: simulate local masking first
578
+ const savedByMasking = tools * 0.85; // approximate savings from observation and thinking masking
579
+ const pressureAfterMasking = (total - savedByMasking) / windowSize;
580
+
581
+ if (pressureAfterMasking < threshold) {
582
+ vBox.className = "verdict-box warn";
583
+ vTitle.innerText = "LOCAL MASKING TRIGGERED";
584
+ vDesc.innerText = `Pressure (${pressure.toFixed(2)}) crossed threshold. Masking stale observations and dropping stale thinking recovered ${Math.round(savedByMasking).toLocaleString()} tokens, dropping pressure to ${pressureAfterMasking.toFixed(2)} and avoiding LLM compaction.`;
585
+
586
+ previewBox.style.display = 'block';
587
+ document.getElementById('maskedPreviewText').innerText = `[Observation masked: read output was 320 lines, 12800 chars - contents masked to save context. Re-run tool for current contents.] Preview: export default class ConfigResolver { ... }\n[Stale thinking dropped from assistant replay]`;
588
+ } else {
589
+ vBox.className = "verdict-box error";
590
+ vTitle.innerText = "LLM SUMMARY COMPACTION TRIGGERED";
591
+ vDesc.innerText = `Pressure is too high (${pressure.toFixed(2)}). Masking alone is insufficient (${pressureAfterMasking.toFixed(2)}). Clio will trigger LLM compaction summarization to clear context space.`;
592
+ previewBox.style.display = 'none';
593
+ }
594
+ }
595
+ }
596
+
597
+ // Init
598
+ window.onload = () => {
599
+ recalculate();
600
+ };
601
+ </script>
602
+ </body>
603
+ </html>