command-code 0.27.2 → 0.28.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.
- package/dist/index.mjs +29 -29
- package/package.json +3 -3
- package/skills/design/references/report-html.md +235 -116
- package/vsix/commandcode-vscode.vsix +0 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "command-code",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.28.0",
|
|
4
4
|
"description": "Command Code, coding agent that continuously learns your coding taste",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.mjs",
|
|
@@ -40,9 +40,9 @@
|
|
|
40
40
|
"@clack/prompts": "^1.0.1",
|
|
41
41
|
"@crosscopy/clipboard": "^0.2.8",
|
|
42
42
|
"@opentelemetry/api": "^1.9.0",
|
|
43
|
-
"@opentelemetry/exporter-trace-otlp-http": "^0.
|
|
43
|
+
"@opentelemetry/exporter-trace-otlp-http": "^0.218.0",
|
|
44
44
|
"@opentelemetry/resources": "^2.0.0",
|
|
45
|
-
"@opentelemetry/sdk-node": "^0.
|
|
45
|
+
"@opentelemetry/sdk-node": "^0.218.0",
|
|
46
46
|
"@opentelemetry/sdk-trace-node": "^2.0.0",
|
|
47
47
|
"@opentelemetry/semantic-conventions": "^1.30.0",
|
|
48
48
|
"@sindresorhus/slugify": "^2.2.1",
|
|
@@ -1,116 +1,235 @@
|
|
|
1
|
-
#
|
|
2
|
-
|
|
3
|
-
<!-- MODEL-ONLY BOUNDARY:
|
|
4
|
-
This file is
|
|
5
|
-
Do not use this
|
|
6
|
-
|
|
7
|
-
landing pages, dashboards, app screens,
|
|
8
|
-
|
|
9
|
-
Do not copy this comment into generated output.
|
|
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
|
-
</div>
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
1
|
+
# HTML Report Layout
|
|
2
|
+
|
|
3
|
+
<!-- MODEL-ONLY BOUNDARY:
|
|
4
|
+
This file is guidance for the visual layout of generated HTML report
|
|
5
|
+
artifacts for smell, checkup, and review. Do not use this report aesthetic,
|
|
6
|
+
layout, Tailwind classes, borders, score blocks, or metadata treatment as
|
|
7
|
+
inspiration for product UI, landing pages, dashboards, app screens,
|
|
8
|
+
components, or generated interfaces.
|
|
9
|
+
Do not copy this comment into generated output.
|
|
10
|
+
-->
|
|
11
|
+
|
|
12
|
+
The HTML report must be a designed report page, not markdown text placed in an
|
|
13
|
+
HTML file.
|
|
14
|
+
|
|
15
|
+
Use Tailwind CSS to create an authored layout that makes the audit easy to
|
|
16
|
+
scan. The report should feel like a Command Code diagnostic artifact: dark,
|
|
17
|
+
sharp, structured, dense, and readable.
|
|
18
|
+
|
|
19
|
+
## Tailwind Runtime
|
|
20
|
+
|
|
21
|
+
Use Tailwind through the CDN script in the generated HTML report:
|
|
22
|
+
|
|
23
|
+
```html
|
|
24
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
The HTML report is expected to be opened with network access. Offline rendering
|
|
28
|
+
is not guaranteed. If the user explicitly asks for an offline or self-contained
|
|
29
|
+
report, do not use the CDN. Instead, embed the small CSS needed for the exact
|
|
30
|
+
classes and helpers used by the report.
|
|
31
|
+
|
|
32
|
+
Do not reference a local Tailwind build, local package, or project stylesheet.
|
|
33
|
+
The report must not depend on the target app's build pipeline.
|
|
34
|
+
|
|
35
|
+
## Core Requirement
|
|
36
|
+
|
|
37
|
+
Do not output the report as paragraphs only.
|
|
38
|
+
|
|
39
|
+
Every generated report must have visible layout structure:
|
|
40
|
+
|
|
41
|
+
- Page container with max width and responsive padding.
|
|
42
|
+
- Header block with report label, project name, mode, and date.
|
|
43
|
+
- Score or verdict block with a large visual score or status.
|
|
44
|
+
- TL;DR block with concise diagnosis and next action.
|
|
45
|
+
- Section containers with borders and clear headings.
|
|
46
|
+
- Tables for score matrices and comparable heuristics.
|
|
47
|
+
- Issue blocks for priority findings.
|
|
48
|
+
- Lists or rows for positive and negative signals.
|
|
49
|
+
- Footer line with generation metadata.
|
|
50
|
+
|
|
51
|
+
If the content is just a sequence of paragraphs under headings, the report is
|
|
52
|
+
wrong. Convert prose into structured blocks, rows, tables, badges, and grouped
|
|
53
|
+
sections.
|
|
54
|
+
|
|
55
|
+
## Tailwind Rules
|
|
56
|
+
|
|
57
|
+
Use Tailwind utility classes for the report layout.
|
|
58
|
+
|
|
59
|
+
Required:
|
|
60
|
+
|
|
61
|
+
- Load Tailwind with `<script src="https://cdn.tailwindcss.com"></script>`
|
|
62
|
+
unless the user explicitly asks for an offline report.
|
|
63
|
+
- Use `bg-black` or near-black canvas.
|
|
64
|
+
- Use bordered section containers.
|
|
65
|
+
- Use responsive padding such as `p-6 md:p-10`.
|
|
66
|
+
- Use a readable max width such as `max-w-5xl` or `max-w-6xl`.
|
|
67
|
+
- Use `overflow-x-auto` around wide tables.
|
|
68
|
+
- Use `grid`, `flex`, and responsive breakpoints for layout.
|
|
69
|
+
- Use monospace labels for report metadata, section tags, and scores.
|
|
70
|
+
|
|
71
|
+
Allowed:
|
|
72
|
+
|
|
73
|
+
- A small `<style>` block for font family and tiny reusable helpers.
|
|
74
|
+
- Tailwind arbitrary values for exact report colors.
|
|
75
|
+
|
|
76
|
+
Avoid:
|
|
77
|
+
|
|
78
|
+
- Large custom CSS systems.
|
|
79
|
+
- Decorative gradients.
|
|
80
|
+
- Rounded marketing cards.
|
|
81
|
+
- Centered hero-page composition.
|
|
82
|
+
- Floating ornamental backgrounds.
|
|
83
|
+
|
|
84
|
+
## Canonical Scaffold
|
|
85
|
+
|
|
86
|
+
Use this structure as the default report scaffold. Replace bracketed values and
|
|
87
|
+
repeat rows or issue blocks as needed. Keep the class system and section shape
|
|
88
|
+
stable unless the report content truly requires an adjustment.
|
|
89
|
+
|
|
90
|
+
```html
|
|
91
|
+
<!DOCTYPE html>
|
|
92
|
+
<html lang="en">
|
|
93
|
+
<head>
|
|
94
|
+
<meta charset="UTF-8" />
|
|
95
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
96
|
+
<title>[PROJECT] - [MODE] Report</title>
|
|
97
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
98
|
+
<style>
|
|
99
|
+
body { font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
|
|
100
|
+
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
|
|
101
|
+
.report-section { border: 1px solid #222226; background: #0a0a0b; position: relative; }
|
|
102
|
+
.corner-box { position: absolute; width: 20px; height: 20px; border: 1px solid #222226; background: #000; }
|
|
103
|
+
</style>
|
|
104
|
+
</head>
|
|
105
|
+
<body class="bg-black text-[#fafafa]">
|
|
106
|
+
<main class="mx-auto w-full max-w-6xl px-5 py-8 md:px-10 md:py-12">
|
|
107
|
+
<header class="report-section mb-8 p-6 md:p-8">
|
|
108
|
+
<div class="corner-box left-0 top-0 -translate-x-1/2 -translate-y-1/2"></div>
|
|
109
|
+
<div class="corner-box right-0 top-0 translate-x-1/2 -translate-y-1/2"></div>
|
|
110
|
+
<div class="flex flex-col gap-6 md:flex-row md:items-end md:justify-between">
|
|
111
|
+
<div>
|
|
112
|
+
<div class="mono mb-2 text-xs tracking-widest text-[#666]">// [MODE]</div>
|
|
113
|
+
<h1 class="text-4xl font-bold tracking-tight md:text-6xl">[PROJECT]</h1>
|
|
114
|
+
</div>
|
|
115
|
+
<div class="mono text-left text-xs text-[#666] md:text-right">
|
|
116
|
+
<div>COMMANDCODE REPORT</div>
|
|
117
|
+
<div class="text-[#444]">[DATE]</div>
|
|
118
|
+
</div>
|
|
119
|
+
</div>
|
|
120
|
+
</header>
|
|
121
|
+
|
|
122
|
+
<section class="report-section mb-8 p-6 md:p-8">
|
|
123
|
+
<div class="corner-box left-0 top-0 -translate-x-1/2 -translate-y-1/2"></div>
|
|
124
|
+
<div class="corner-box right-0 top-0 translate-x-1/2 -translate-y-1/2"></div>
|
|
125
|
+
<div class="grid gap-8 md:grid-cols-[minmax(0,0.8fr)_minmax(0,1.2fr)]">
|
|
126
|
+
<div>
|
|
127
|
+
<div class="mono mb-2 text-xs tracking-widest text-[#666]">// OVERALL</div>
|
|
128
|
+
<div class="text-6xl font-bold tracking-tight md:text-7xl">[SCORE]</div>
|
|
129
|
+
<div class="mt-1 text-lg text-[#666]">/ [MAX]</div>
|
|
130
|
+
<div class="mt-4 inline-flex border border-[#fbbf24]/30 bg-[#fbbf24]/10 px-3 py-1 text-sm text-[#fbbf24]">[VERDICT]</div>
|
|
131
|
+
</div>
|
|
132
|
+
<div>
|
|
133
|
+
<div class="mono mb-3 text-xs tracking-widest text-[#666]">// TL;DR</div>
|
|
134
|
+
<p class="text-sm leading-6 text-[#a0a0a0]">[SHORT DIAGNOSIS]</p>
|
|
135
|
+
<p class="mt-4 text-sm leading-6 text-[#fbbf24]">[PRIMARY RECOMMENDATION]</p>
|
|
136
|
+
</div>
|
|
137
|
+
</div>
|
|
138
|
+
</section>
|
|
139
|
+
|
|
140
|
+
<section class="report-section mb-8 p-6 md:p-8">
|
|
141
|
+
<div class="mono mb-6 text-xs tracking-widest text-[#666]">// HEURISTIC SCORES</div>
|
|
142
|
+
<div class="overflow-x-auto">
|
|
143
|
+
<table class="w-full min-w-[720px] border-collapse text-sm">
|
|
144
|
+
<thead>
|
|
145
|
+
<tr class="border-b border-[#222226] text-left mono text-xs text-[#666]">
|
|
146
|
+
<th class="py-3 pr-4 font-normal">#</th>
|
|
147
|
+
<th class="py-3 pr-4 font-normal">HEURISTIC</th>
|
|
148
|
+
<th class="py-3 pr-4 font-normal">SCORE</th>
|
|
149
|
+
<th class="py-3 font-normal">KEY FINDING</th>
|
|
150
|
+
</tr>
|
|
151
|
+
</thead>
|
|
152
|
+
<tbody>
|
|
153
|
+
<tr class="border-b border-[#1a1a1e]">
|
|
154
|
+
<td class="py-4 pr-4 text-[#555]">1</td>
|
|
155
|
+
<td class="py-4 pr-4 text-[#fafafa]">[HEURISTIC]</td>
|
|
156
|
+
<td class="py-4 pr-4 text-[#fbbf24]">[SCORE]</td>
|
|
157
|
+
<td class="py-4 text-[#a0a0a0]">[FINDING]</td>
|
|
158
|
+
</tr>
|
|
159
|
+
</tbody>
|
|
160
|
+
</table>
|
|
161
|
+
</div>
|
|
162
|
+
</section>
|
|
163
|
+
|
|
164
|
+
<section class="report-section mb-8 p-6 md:p-8">
|
|
165
|
+
<div class="mono mb-6 text-xs tracking-widest text-[#666]">// COGNITIVE LOAD / RISK</div>
|
|
166
|
+
<div class="grid gap-6 md:grid-cols-2">
|
|
167
|
+
<div>
|
|
168
|
+
<div class="mb-3 text-xl font-semibold">[LEVEL]</div>
|
|
169
|
+
<ul class="space-y-3 text-sm text-[#a0a0a0]">
|
|
170
|
+
<li><span class="mono mr-2 text-[#34d399]">PASS</span>[POSITIVE SIGNAL]</li>
|
|
171
|
+
<li><span class="mono mr-2 text-[#fbbf24]">WATCH</span>[RISK SIGNAL]</li>
|
|
172
|
+
<li><span class="mono mr-2 text-[#ef4444]">FAIL</span>[NEGATIVE SIGNAL]</li>
|
|
173
|
+
</ul>
|
|
174
|
+
</div>
|
|
175
|
+
<div>
|
|
176
|
+
<div class="mono mb-3 text-xs tracking-widest text-[#666]">// NEXT MODES</div>
|
|
177
|
+
<div class="flex flex-wrap gap-2">
|
|
178
|
+
<span class="border border-[#333] px-3 py-1 text-sm text-[#a0a0a0]">/[MODE]</span>
|
|
179
|
+
</div>
|
|
180
|
+
</div>
|
|
181
|
+
</div>
|
|
182
|
+
</section>
|
|
183
|
+
|
|
184
|
+
<section class="report-section mb-8 p-6 md:p-8">
|
|
185
|
+
<div class="mono mb-6 text-xs tracking-widest text-[#666]">// WHAT'S WORKING</div>
|
|
186
|
+
<div class="grid gap-4 md:grid-cols-3">
|
|
187
|
+
<article class="border border-[#1f1f24] p-4">
|
|
188
|
+
<h2 class="mb-2 text-sm font-semibold">[TITLE]</h2>
|
|
189
|
+
<p class="text-sm leading-6 text-[#a0a0a0]">[DESCRIPTION]</p>
|
|
190
|
+
</article>
|
|
191
|
+
</div>
|
|
192
|
+
</section>
|
|
193
|
+
|
|
194
|
+
<section class="report-section mb-8 p-6 md:p-8">
|
|
195
|
+
<div class="mono mb-6 text-xs tracking-widest text-[#666]">// PRIORITY ISSUES</div>
|
|
196
|
+
<div class="space-y-5">
|
|
197
|
+
<article class="border border-[#2a1d22] bg-[#110b0d] p-5">
|
|
198
|
+
<div class="mono mb-2 text-xs text-[#f43f5e]">[P0/P1/P2]</div>
|
|
199
|
+
<h2 class="mb-2 text-lg font-semibold">[ISSUE TITLE]</h2>
|
|
200
|
+
<p class="mb-4 text-sm leading-6 text-[#a0a0a0]">[EVIDENCE]</p>
|
|
201
|
+
<div class="border-l border-[#fbbf24] pl-4 text-sm leading-6 text-[#fbbf24]">FIX: [RECOMMENDATION]</div>
|
|
202
|
+
</article>
|
|
203
|
+
</div>
|
|
204
|
+
</section>
|
|
205
|
+
|
|
206
|
+
<footer class="mono py-8 text-center text-xs tracking-widest text-[#444]">
|
|
207
|
+
Generated with CommandCode - [DATE]
|
|
208
|
+
</footer>
|
|
209
|
+
</main>
|
|
210
|
+
</body>
|
|
211
|
+
</html>
|
|
212
|
+
```
|
|
213
|
+
|
|
214
|
+
## Responsive Requirements
|
|
215
|
+
|
|
216
|
+
The report must work on mobile and desktop:
|
|
217
|
+
|
|
218
|
+
- Stack header and score columns on small screens.
|
|
219
|
+
- Keep tables horizontally scrollable.
|
|
220
|
+
- Use readable text sizes on mobile.
|
|
221
|
+
- Do not rely on hover to reveal essential content.
|
|
222
|
+
- Keep body copy line length readable.
|
|
223
|
+
|
|
224
|
+
## Quality Bar
|
|
225
|
+
|
|
226
|
+
Before finishing the report, check:
|
|
227
|
+
|
|
228
|
+
- Can the user understand the verdict in five seconds?
|
|
229
|
+
- Are the most important issues visually prominent?
|
|
230
|
+
- Are scores presented in a table, not prose?
|
|
231
|
+
- Are fixes attached to the issues they solve?
|
|
232
|
+
- Is the report scannable without reading every paragraph?
|
|
233
|
+
- Does the page still work when opened as a static HTML file?
|
|
234
|
+
|
|
235
|
+
If any answer is no, redesign the report layout before returning it.
|
|
Binary file
|