@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
@@ -0,0 +1,794 @@
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 Commands &amp; Modes 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
+ /* Interactive Terminal console */
262
+ .tui-console {
263
+ background: #020408;
264
+ border: 1px solid var(--border-card);
265
+ border-radius: 12px;
266
+ padding: 1.25rem;
267
+ font-family: var(--font-mono);
268
+ font-size: 0.875rem;
269
+ position: relative;
270
+ min-height: 200px;
271
+ }
272
+
273
+ .tui-line {
274
+ display: flex;
275
+ align-items: center;
276
+ gap: 0.5rem;
277
+ color: #fff;
278
+ }
279
+
280
+ .tui-prompt {
281
+ color: var(--color-cyan);
282
+ font-weight: 700;
283
+ }
284
+
285
+ .tui-input {
286
+ background: transparent;
287
+ border: none;
288
+ color: #fff;
289
+ font-family: var(--font-mono);
290
+ outline: none;
291
+ width: 100%;
292
+ }
293
+
294
+ /* Autocomplete overlay */
295
+ .autocomplete-popover {
296
+ position: absolute;
297
+ top: 3.5rem;
298
+ left: 1.25rem;
299
+ right: 1.25rem;
300
+ background: rgba(13, 20, 38, 0.95);
301
+ border: 1px solid var(--color-cyan);
302
+ border-radius: 8px;
303
+ box-shadow: var(--shadow-glow);
304
+ z-index: 10;
305
+ max-height: 180px;
306
+ overflow-y: auto;
307
+ display: none;
308
+ }
309
+
310
+ .autocomplete-item {
311
+ padding: 0.5rem 0.75rem;
312
+ cursor: pointer;
313
+ display: flex;
314
+ justify-content: space-between;
315
+ color: var(--text-muted);
316
+ }
317
+
318
+ .autocomplete-item:hover, .autocomplete-item.selected {
319
+ background: rgba(0, 240, 255, 0.15);
320
+ color: #fff;
321
+ }
322
+
323
+ .autocomplete-item strong {
324
+ color: var(--color-cyan);
325
+ }
326
+
327
+ .tui-details {
328
+ margin-top: 1rem;
329
+ padding: 0.75rem;
330
+ background: rgba(255, 255, 255, 0.02);
331
+ border-radius: 6px;
332
+ border-left: 2.5px solid var(--color-cyan);
333
+ display: none;
334
+ }
335
+
336
+ /* Notice level simulator */
337
+ .logs-wrapper {
338
+ background: #020408;
339
+ border: 1px solid var(--border-card);
340
+ border-radius: 8px;
341
+ padding: 1rem;
342
+ font-family: var(--font-mono);
343
+ font-size: 0.8rem;
344
+ height: 150px;
345
+ overflow-y: auto;
346
+ margin-top: 1rem;
347
+ }
348
+
349
+ .btn-row {
350
+ display: flex;
351
+ gap: 0.5rem;
352
+ margin-top: 0.75rem;
353
+ }
354
+
355
+ .log-btn {
356
+ flex: 1;
357
+ padding: 0.4rem;
358
+ cursor: pointer;
359
+ background: rgba(255,255,255,0.03);
360
+ border: 1px solid var(--border-card);
361
+ border-radius: 6px;
362
+ font-size: 0.75rem;
363
+ font-weight: 600;
364
+ color: #fff;
365
+ }
366
+
367
+ .log-btn:hover {
368
+ background: rgba(255,255,255,0.08);
369
+ }
370
+
371
+ .log-line {
372
+ display: flex;
373
+ gap: 0.5rem;
374
+ margin-bottom: 0.25rem;
375
+ }
376
+
377
+ .log-line.info { color: var(--text-muted); }
378
+ .log-line.success { color: var(--color-emerald); }
379
+ .log-line.warn { color: var(--color-amber); }
380
+ .log-line.error { color: var(--color-rose); }
381
+
382
+ /* Keybindings Visual Grid */
383
+ .key-grid {
384
+ display: grid;
385
+ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
386
+ gap: 1rem;
387
+ }
388
+
389
+ .key-card {
390
+ background: rgba(0,0,0,0.15);
391
+ border: 1px solid var(--border-card);
392
+ border-radius: 8px;
393
+ padding: 0.85rem;
394
+ display: flex;
395
+ align-items: center;
396
+ justify-content: space-between;
397
+ }
398
+
399
+ .kbd-tag {
400
+ background: rgba(255, 255, 255, 0.05);
401
+ border: 1.5px solid rgba(255, 255, 255, 0.15);
402
+ border-bottom-width: 3px;
403
+ padding: 0.2rem 0.5rem;
404
+ border-radius: 5px;
405
+ font-family: var(--font-mono);
406
+ font-size: 0.75rem;
407
+ font-weight: 700;
408
+ color: #fff;
409
+ }
410
+
411
+ /* Ref table */
412
+ .ref-table {
413
+ width: 100%;
414
+ border-collapse: collapse;
415
+ margin: 1.5rem 0;
416
+ font-size: 0.9rem;
417
+ }
418
+
419
+ .ref-table th, .ref-table td {
420
+ padding: 0.65rem 0.85rem;
421
+ border: 1px solid var(--border-card);
422
+ text-align: left;
423
+ }
424
+
425
+ .ref-table th {
426
+ background: rgba(255,255,255,0.03);
427
+ }
428
+
429
+ /* Footer */
430
+ footer {
431
+ text-align: center;
432
+ margin-top: 4rem;
433
+ padding-top: 2rem;
434
+ border-top: 1px solid rgba(255, 255, 255, 0.05);
435
+ color: var(--text-dim);
436
+ font-size: 0.875rem;
437
+ }
438
+ </style>
439
+ </head>
440
+ <body>
441
+ <div class="container">
442
+ <header>
443
+ <div class="header-left">
444
+ <div class="header-logo">
445
+ <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>
446
+ <polyline points="4 17 10 11 4 5"></polyline>
447
+ <line x1="12" y1="19" x2="20" y2="19"></line>
448
+ </svg>
449
+ </div>
450
+ <div class="header-title-wrapper">
451
+ <h1>Clio Coder Commands &amp; Modes</h1>
452
+ <p>CLI syntax rules, TUI slash commands, notice channels, and hotkey bindings</p>
453
+ </div>
454
+ </div>
455
+ <div class="header-right">
456
+ <span class="version-badge">Clio Coder v0.3.0</span>
457
+ <a href="index.html" class="back-btn">
458
+ <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>
459
+ Dashboard Hub
460
+ </a>
461
+ </div>
462
+ </header>
463
+
464
+ <div class="tabs-nav">
465
+ <button type="button" class="tab-btn active" onclick="switchTab('interactive')">
466
+ <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>
467
+ Interactive Console Simulator
468
+ </button>
469
+ <button type="button" class="tab-btn" onclick="switchTab('reference')">
470
+ <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>
471
+ Full Technical Reference
472
+ </button>
473
+ </div>
474
+
475
+ <!-- TAB 1: INTERACTIVE -->
476
+ <main class="tab-pane active" id="pane-interactive">
477
+ <div class="blueprint-layout">
478
+
479
+ <!-- Left: Console simulator -->
480
+ <div class="specs-col">
481
+ <div class="glass-card">
482
+ <h2>
483
+ <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><title>Icon</title><polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line></svg>
484
+ TUI Slash Command Console
485
+ </h2>
486
+ <p>Type a slash command (e.g. <code>/settings</code>, <code>/run</code>, <code>/targets</code>, <code>/help</code>) to test Clio's autocomplete and ListOverlay detail pane.</p>
487
+
488
+ <div class="tui-console">
489
+ <div class="tui-line">
490
+ <span class="tui-prompt">clio-coder &gt;</span>
491
+ <input type="text" id="consoleInput" class="tui-input" placeholder="Type / to trigger autocomplete..." oninput="onInputChanged()" onkeydown="onConsoleKeyDown(event)">
492
+ </div>
493
+
494
+ <!-- Autocomplete popover -->
495
+ <div class="autocomplete-popover" id="autocompletePopover">
496
+ <!-- items injected via script -->
497
+ </div>
498
+ </div>
499
+
500
+ <!-- Detail overlay mock -->
501
+ <div class="tui-details" id="commandDetails">
502
+ <strong id="detailTitle" style="color:var(--color-cyan)">/run</strong>
503
+ <p id="detailUsage" style="font-family:var(--font-mono); font-size:0.75rem; margin-top:0.25rem; color:#fff;">Usage: /run &lt;agent&gt; &lt;task&gt;</p>
504
+ <p id="detailDesc" style="font-size:0.875rem; color:var(--text-muted); margin-top:0.5rem;">Dispatches a fleet agent worker with specific rules.</p>
505
+ </div>
506
+ </div>
507
+ </div>
508
+
509
+ <!-- Right: Notice channels tester -->
510
+ <div class="specs-col">
511
+ <div class="glass-card">
512
+ <h2>
513
+ <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><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
514
+ Notice Channels Logger
515
+ </h2>
516
+ <p>Clio TUI displays colored logs utilizing specific notice channel glyphs. Click below to simulate lines:</p>
517
+
518
+ <div class="logs-wrapper" id="simLogs">
519
+ <div class="log-line info">· System initialized. Autonomy level set to auto-edit.</div>
520
+ </div>
521
+
522
+ <div class="btn-row">
523
+ <button type="button" class="log-btn" style="border-left: 3px solid var(--text-dim)" onclick="logNotice('info')">Log Info</button>
524
+ <button type="button" class="log-btn" style="border-left: 3px solid var(--color-emerald)" onclick="logNotice('success')">Log Success</button>
525
+ <button type="button" class="log-btn" style="border-left: 3px solid var(--color-amber)" onclick="logNotice('warn')">Log Warn</button>
526
+ <button type="button" class="log-btn" style="border-left: 3px solid var(--color-rose)" onclick="logNotice('error')">Log Error</button>
527
+ </div>
528
+ </div>
529
+ </div>
530
+
531
+ </div>
532
+ </main>
533
+
534
+ <!-- TAB 2: TECHNICAL REFERENCE -->
535
+ <main class="tab-pane" id="pane-reference">
536
+ <div class="glass-card">
537
+ <h2>Clio Coder Keybindings &amp; Command List</h2>
538
+
539
+ <h3 style="margin: 1.5rem 0 0.5rem 0; color:#fff;">App Keybindings</h3>
540
+ <p>Alt bindings represent the main navigation channel. In macOS terminals, ensure Meta is set to Option.</p>
541
+
542
+ <div class="key-grid">
543
+ <div class="key-card">
544
+ <span>Cycle thinking levels</span>
545
+ <span class="kbd-tag">Shift+Tab</span>
546
+ </div>
547
+ <div class="key-card">
548
+ <span>Open Session Tree Navigator</span>
549
+ <span class="kbd-tag">Alt+T</span>
550
+ </div>
551
+ <div class="key-card">
552
+ <span>Toggle Footer Dashboard size</span>
553
+ <span class="kbd-tag">Alt+U</span>
554
+ </div>
555
+ <div class="key-card">
556
+ <span>Open Model/Target Selector</span>
557
+ <span class="kbd-tag">Alt+L</span>
558
+ </div>
559
+ <div class="key-card">
560
+ <span>Cycle through scoped models</span>
561
+ <span class="kbd-tag">Alt+J / Alt+K</span>
562
+ </div>
563
+ <div class="key-card">
564
+ <span>Toggle Dispatch Board overlay</span>
565
+ <span class="kbd-tag">Alt+W</span>
566
+ </div>
567
+ <div class="key-card">
568
+ <span>Steer active stream from editor</span>
569
+ <span class="kbd-tag">Enter</span>
570
+ </div>
571
+ <div class="key-card">
572
+ <span>Queue after-run follow-up</span>
573
+ <span class="kbd-tag">Alt+Enter</span>
574
+ </div>
575
+ </div>
576
+
577
+ <h3 style="margin: 2rem 0 0.5rem 0; color:#fff;">TUI Slash Commands</h3>
578
+ <table class="ref-table">
579
+ <thead>
580
+ <tr>
581
+ <th>Command</th>
582
+ <th>Usage</th>
583
+ <th>Purpose</th>
584
+ </tr>
585
+ </thead>
586
+ <tbody>
587
+ <tr>
588
+ <td><code>/quit</code></td>
589
+ <td><code>/quit</code></td>
590
+ <td>Exit Clio Coder</td>
591
+ </tr>
592
+ <tr>
593
+ <td><code>/help</code></td>
594
+ <td><code>/help [query]</code></td>
595
+ <td>Open interactive help center and key reference</td>
596
+ </tr>
597
+ <tr>
598
+ <td><code>/settings</code></td>
599
+ <td><code>/settings</code></td>
600
+ <td>Open interactive full-screen Settings Center</td>
601
+ </tr>
602
+ <tr>
603
+ <td><code>/targets</code></td>
604
+ <td><code>/targets</code></td>
605
+ <td>Manage target connections, health check, and live probes</td>
606
+ </tr>
607
+ <tr>
608
+ <td><code>/model</code></td>
609
+ <td><code>/model [pattern]</code></td>
610
+ <td>Open model selector or set a model from the live/catalog list</td>
611
+ </tr>
612
+ <tr>
613
+ <td><code>/skill</code></td>
614
+ <td><code>/skill [name] [task]</code></td>
615
+ <td>Open the Skills Hub or invoke a skill</td>
616
+ </tr>
617
+ <tr>
618
+ <td><code>/view</code></td>
619
+ <td><code>/view [filter] | /view verify &lt;runId&gt;</code></td>
620
+ <td>Browse artifacts and verify receipts</td>
621
+ </tr>
622
+ <tr>
623
+ <td><code>/run</code></td>
624
+ <td><code>/run &lt;agent&gt; &lt;task&gt;</code></td>
625
+ <td>Deploy worker agent locally</td>
626
+ </tr>
627
+ <tr>
628
+ <td><code>/context</code></td>
629
+ <td><code>/context [compact|init|refresh|reset]</code></td>
630
+ <td>Context hub: window ledger overlay plus compact, init, refresh, and reset</td>
631
+ </tr>
632
+ <tr>
633
+ <td><code>/resume</code></td>
634
+ <td><code>/resume</code></td>
635
+ <td>Resume a past session from history ledger</td>
636
+ </tr>
637
+ </tbody>
638
+ </table>
639
+ </div>
640
+ </main>
641
+
642
+ <footer>
643
+ <p>Clio Coder UI Command specs &bull; Version 0.3.0</p>
644
+ </footer>
645
+ </div>
646
+
647
+ <script>
648
+ // Tab switching
649
+ function switchTab(tabId) {
650
+ document.querySelectorAll('.tab-btn').forEach(btn => { btn.classList.remove('active'); });
651
+ document.querySelectorAll('.tab-pane').forEach(pane => { pane.classList.remove('active'); });
652
+
653
+ if (tabId === 'interactive') {
654
+ document.querySelector('.tab-btn:nth-child(1)').classList.add('active');
655
+ document.getElementById('pane-interactive').classList.add('active');
656
+ } else {
657
+ document.querySelector('.tab-btn:nth-child(2)').classList.add('active');
658
+ document.getElementById('pane-reference').classList.add('active');
659
+ }
660
+ }
661
+
662
+ // Command registry
663
+ const commandsList = [
664
+ { cmd: "/settings", usage: "/settings", desc: "Opens the TUI settings screen to modify autonomy level, worker permission modes, thinking levels, compaction thresholds, and retries." },
665
+ { cmd: "/targets", usage: "/targets", desc: "Inspects live target probes, switches the default orchestrator (key 'u'), connects credentials (key 'c'), or probes targets." },
666
+ { cmd: "/run", usage: "/run <agent> <task>", desc: "Spawns a fleet agent locally to implement changes, verify code, debug unit errors, or update developer docs." },
667
+ { cmd: "/model", usage: "/model [pattern]", desc: "Opens the model selector or sets a model from live and configured catalog rows." },
668
+ { cmd: "/skill", usage: "/skill [name] [task]", desc: "Opens the Skills Hub or invokes a selected skill." },
669
+ { cmd: "/view", usage: "/view [filter] | /view verify <runId>", desc: "Browses receipts, dispatch outputs, durable tool output, and compaction summaries." },
670
+ { cmd: "/context", usage: "/context", desc: "Visualizes token sliding window and compaction breakdown." },
671
+ { cmd: "/help", usage: "/help [query]", desc: "Searches available shortcuts and operating posture documentation." },
672
+ { cmd: "/quit", usage: "/quit", desc: "Exits clio-coder process cleanly." },
673
+ { cmd: "/context init", usage: "/context init [flags]", desc: "Explore the repo and bootstrap project context: CLIO-CODER.md and codewiki." },
674
+ { cmd: "/context refresh", usage: "/context refresh", desc: "Re-index the codewiki and restamp the CLIO-CODER.md fingerprint footer." },
675
+ { cmd: "/context reset", usage: "/context reset [--all]", desc: "Clear accumulated project context artifacts (CLIO-CODER.md preserved without --all)." },
676
+ { cmd: "/prompts", usage: "/prompts", desc: "List prompt templates." },
677
+ { cmd: "/extensions", usage: "/extensions", desc: "List installed extensions." },
678
+ { cmd: "/share", usage: "/share export <path> | /share import <path>", desc: "Export or import Clio archives." },
679
+ { cmd: "/delegate", usage: "/delegate <agent-id> <task>", desc: "Run an ACP delegation agent." },
680
+ { cmd: "/agents", usage: "/agents", desc: "List Clio agents and ACP delegation agents." },
681
+ { cmd: "/cost", usage: "/cost", desc: "Show session token and cost totals." },
682
+ { cmd: "/fleet", usage: "/fleet", desc: "Show in-process dispatch running/retry status." },
683
+ { cmd: "/thinking", usage: "/thinking", desc: "Open thinking-level selector." },
684
+ { cmd: "/scoped-models", usage: "/scoped-models", desc: "Edit the Alt+J / Alt+K model cycle set." },
685
+ { cmd: "/resume", usage: "/resume", desc: "Resume a past session." },
686
+ { cmd: "/new", usage: "/new", desc: "Start a fresh session." },
687
+ { cmd: "/tree", usage: "/tree", desc: "Open session tree navigator." },
688
+ { cmd: "/fork", usage: "/fork", desc: "Fork from an assistant turn." },
689
+ { cmd: "/context compact", usage: "/context compact [instructions]", desc: "Compact earlier context." },
690
+ { cmd: "/tasks", usage: "/tasks", desc: "Read-only overlay of the session task board with per-task receipts." },
691
+ { cmd: "/export", usage: "/export [path]", desc: "Write the session transcript to Markdown with tool segments expanded." }
692
+ ];
693
+
694
+ let selectedIndex = 0;
695
+ let filteredCmds = [...commandsList];
696
+
697
+ function onInputChanged() {
698
+ const val = document.getElementById('consoleInput').value;
699
+ const popover = document.getElementById('autocompletePopover');
700
+
701
+ if (val.startsWith('/')) {
702
+ const query = val.toLowerCase();
703
+ filteredCmds = commandsList.filter(c => c.cmd.toLowerCase().startsWith(query));
704
+ selectedIndex = 0;
705
+
706
+ if (filteredCmds.length > 0) {
707
+ renderAutocomplete();
708
+ popover.style.display = 'block';
709
+ } else {
710
+ popover.style.display = 'none';
711
+ }
712
+ } else {
713
+ popover.style.display = 'none';
714
+ }
715
+ }
716
+
717
+ function renderAutocomplete() {
718
+ const popover = document.getElementById('autocompletePopover');
719
+ popover.innerHTML = '';
720
+
721
+ filteredCmds.forEach((c, idx) => {
722
+ const item = document.createElement('div');
723
+ item.className = `autocomplete-item ${idx === selectedIndex ? 'selected' : ''}`;
724
+ item.innerHTML = `<strong>${c.cmd}</strong> <span>${c.usage}</span>`;
725
+ item.onclick = () => {
726
+ selectCommand(c);
727
+ };
728
+ popover.appendChild(item);
729
+ });
730
+ }
731
+
732
+ function selectCommand(c) {
733
+ document.getElementById('consoleInput').value = c.cmd;
734
+ document.getElementById('autocompletePopover').style.display = 'none';
735
+
736
+ // Show details
737
+ document.getElementById('commandDetails').style.display = 'block';
738
+ document.getElementById('detailTitle').innerText = c.cmd;
739
+ document.getElementById('detailUsage').innerText = `Usage: ${c.usage}`;
740
+ document.getElementById('detailDesc').innerText = c.desc;
741
+ }
742
+
743
+ function onConsoleKeyDown(e) {
744
+ const popover = document.getElementById('autocompletePopover');
745
+ if (popover.style.display === 'block') {
746
+ if (e.key === 'ArrowDown') {
747
+ e.preventDefault();
748
+ selectedIndex = (selectedIndex + 1) % filteredCmds.length;
749
+ renderAutocomplete();
750
+ } else if (e.key === 'ArrowUp') {
751
+ e.preventDefault();
752
+ selectedIndex = (selectedIndex - 1 + filteredCmds.length) % filteredCmds.length;
753
+ renderAutocomplete();
754
+ } else if (e.key === 'Enter') {
755
+ e.preventDefault();
756
+ if (filteredCmds[selectedIndex]) {
757
+ selectCommand(filteredCmds[selectedIndex]);
758
+ }
759
+ } else if (e.key === 'Escape') {
760
+ e.preventDefault();
761
+ popover.style.display = 'none';
762
+ }
763
+ }
764
+ }
765
+
766
+ // Logs simulator
767
+ function logNotice(level) {
768
+ const logs = document.getElementById('simLogs');
769
+ let glyph = '·';
770
+ let msg = '';
771
+ if (level === 'info') {
772
+ glyph = '·';
773
+ msg = 'Settings hot-reloaded: autonomy level is auto-edit.';
774
+ } else if (level === 'success') {
775
+ glyph = '✓';
776
+ msg = 'Connection established successfully with target "local-ollama".';
777
+ } else if (level === 'warn') {
778
+ glyph = '!';
779
+ msg = '[safety-net] Unrecognized bash command sequencing. Will ask operator.';
780
+ } else {
781
+ glyph = '✗';
782
+ msg = 'Fatal: API Key credentials missing for Anthropic Cloud runtime.';
783
+ }
784
+
785
+ const logLine = document.createElement('div');
786
+ logLine.className = `log-line ${level}`;
787
+ logLine.innerHTML = `<span>${glyph}</span> <span>${msg}</span>`;
788
+
789
+ logs.appendChild(logLine);
790
+ logs.scrollTop = logs.scrollHeight;
791
+ }
792
+ </script>
793
+ </body>
794
+ </html>