@mcp-consultant-tools/azure-devops 30.0.0-beta.3 → 30.0.0-beta.4

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 (4) hide show
  1. package/build/genui/design-system-prompt.d.ts.map +1 -1
  2. package/build/genui/design-system-prompt.js +95 -22
  3. package/build/genui/design-system-prompt.js.map +1 -1
  4. package/package.json +1 -1
package/build/genui/design-system-prompt.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"design-system-prompt.d.ts","sourceRoot":"","sources":["../../src/genui/design-system-prompt.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,eAAO,MAAM,oBAAoB,QA8JzB,CAAC"}
1
+ {"version":3,"file":"design-system-prompt.d.ts","sourceRoot":"","sources":["../../src/genui/design-system-prompt.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,eAAO,MAAM,oBAAoB,QAuOzB,CAAC"}
package/build/genui/design-system-prompt.js CHANGED
@@ -11,10 +11,10 @@ You are generating an HTML snippet that will be rendered inside an MCP App ifram
11
11
  Follow these rules precisely to produce consistent, attractive, interactive output.
12
12
 
13
13
  ### Structure
14
- - Return a single root \`<div>\` element containing all content.
14
+ - Return a single root \`<div id="genui-root">\` element containing all content.
15
15
  - Do NOT include \`<html>\`, \`<head>\`, or \`<body>\` tags.
16
16
  - All CSS must be inline via \`<style>\` tags within the snippet.
17
- - All JavaScript must be inline via \`<script>\` tags (no \`src\` except Chart.js CDN).
17
+ - All JavaScript must be inline via \`<script>\` tags (no \`src\` except allowed CDNs).
18
18
  - Maximum content width: 800px, centered with \`margin: 0 auto\`.
19
19
 
20
20
  ### Typography
@@ -116,31 +116,104 @@ For summary metrics, use KPI cards at the top:
116
116
  - For simple visuals (donut, progress bars): prefer inline SVG over Chart.js (no loading delay).
117
117
  - Use the ADO state/type colors defined above for data series.
118
118
 
119
- ### Interactivity
119
+ ### Interactivity — Sandbox Constraints (CRITICAL)
120
+ This HTML renders inside a sandboxed iframe. **Links cannot open new tabs** and **file downloads are blocked**.
121
+ You MUST use clipboard-based alternatives for all interactive features.
122
+
123
+ #### Clipboard Helper (include this in every visualization)
124
+ \`\`\`javascript
125
+ function copyText(text, btnEl) {
126
+ try {
127
+ navigator.clipboard.writeText(text).then(function() { showCopied(btnEl); });
128
+ } catch(e) {
129
+ var ta = document.createElement('textarea');
130
+ ta.value = text;
131
+ ta.style.cssText = 'position:fixed;left:-9999px';
132
+ document.body.appendChild(ta);
133
+ ta.select();
134
+ document.execCommand('copy');
135
+ document.body.removeChild(ta);
136
+ showCopied(btnEl);
137
+ }
138
+ }
139
+ function showCopied(el) {
140
+ if (!el) return;
141
+ var orig = el.textContent;
142
+ el.textContent = 'Copied!';
143
+ el.style.background = '#009900';
144
+ setTimeout(function() { el.textContent = orig; el.style.background = ''; }, 1500);
145
+ }
146
+ \`\`\`
120
147
 
121
- #### Clickable Work Item Links
122
- Every work item ID must be a clickable link opening in a new tab:
148
+ #### Work Item ID Links — Click to Copy URL
149
+ Do NOT use \`<a href="..." target="_blank">\`. Links cannot open in the sandbox.
150
+ Instead, display the ID as a clickable element that copies the ADO URL to clipboard:
123
151
  \`\`\`html
124
- <a href="https://dev.azure.com/{org}/{project}/_workitems/edit/{id}" target="_blank"
125
- style="color:var(--link); text-decoration:none; font-weight:600">#{id}</a>
152
+ <span onclick="copyText('https://dev.azure.com/{org}/{project}/_workitems/edit/{id}', this)"
153
+ style="color:var(--link); cursor:pointer; font-weight:600; text-decoration:underline; text-decoration-style:dotted"
154
+ title="Click to copy link">#52009</span>
126
155
  \`\`\`
127
156
 
128
- #### CSV Download Button
129
- Include a download button that generates a CSV from the displayed data:
157
+ #### Copy CSV Button
158
+ Replace download with copy-to-clipboard:
130
159
  \`\`\`html
131
- <button onclick="downloadCsv()" style="padding:6px 14px; background:var(--link); color:white;
132
- border:none; border-radius:4px; cursor:pointer; font-size:13px">Download CSV</button>
160
+ <button id="csvBtn" onclick="copyCsv()" style="padding:6px 14px; background:var(--link); color:white;
161
+ border:none; border-radius:4px; cursor:pointer; font-size:13px">Copy CSV</button>
133
162
  \`\`\`
134
- The \`downloadCsv()\` function should:
135
- 1. Build CSV string from the data
136
- 2. Create a Blob and object URL
137
- 3. Trigger download via a temporary \`<a>\` element with \`download\` attribute
163
+ The \`copyCsv()\` function should build the full CSV string and call \`copyText(csvString, document.getElementById('csvBtn'))\`.
138
164
 
139
- #### Sortable Tables
140
- Add sort functionality to table headers:
141
- - Click to sort ascending, click again for descending
142
- - Show sort indicator (arrow) in the active column header
143
- - Implement in a \`<script>\` tag using DOM manipulation
165
+ #### Copy as Image Button
166
+ Include a button that captures the visualization as a PNG and copies it to clipboard.
167
+ Load html2canvas from CDN (same loading pattern as Chart.js):
168
+ \`\`\`html
169
+ <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
170
+ <button id="imgBtn" onclick="copyImage()" style="padding:6px 14px; background:var(--link); color:white;
171
+ border:none; border-radius:4px; cursor:pointer; font-size:13px">Copy as Image</button>
172
+ \`\`\`
173
+ The \`copyImage()\` function:
174
+ \`\`\`javascript
175
+ function copyImage() {
176
+ var btn = document.getElementById('imgBtn');
177
+ btn.textContent = 'Capturing...';
178
+ (function waitH2C() {
179
+ if (typeof html2canvas === 'undefined') { setTimeout(waitH2C, 50); return; }
180
+ html2canvas(document.getElementById('genui-root'), {
181
+ backgroundColor: getComputedStyle(document.documentElement).getPropertyValue('--bg').trim() || '#1E1E1E',
182
+ scale: 2
183
+ }).then(function(canvas) {
184
+ canvas.toBlob(function(blob) {
185
+ try {
186
+ navigator.clipboard.write([new ClipboardItem({'image/png': blob})]).then(
187
+ function() { showCopied(btn); },
188
+ function() { fallbackShowImage(canvas, btn); }
189
+ );
190
+ } catch(e) { fallbackShowImage(canvas, btn); }
191
+ }, 'image/png');
192
+ });
193
+ })();
194
+ }
195
+ function fallbackShowImage(canvas, btn) {
196
+ btn.textContent = 'Copy as Image';
197
+ var img = document.createElement('img');
198
+ img.src = canvas.toDataURL('image/png');
199
+ img.style.cssText = 'max-width:100%;border:1px solid var(--border);border-radius:4px;margin-top:12px';
200
+ var note = document.createElement('div');
201
+ note.style.cssText = 'font-size:12px;color:var(--text-secondary);margin-top:4px';
202
+ note.textContent = 'Right-click the image above to copy or save it.';
203
+ var container = document.getElementById('imgBtn').parentElement;
204
+ container.appendChild(img);
205
+ container.appendChild(note);
206
+ }
207
+ \`\`\`
208
+
209
+ ### Button Row
210
+ Place action buttons (Copy CSV, Copy as Image) together in a flex row at the top:
211
+ \`\`\`html
212
+ <div style="display:flex; gap:8px; align-items:center">
213
+ <button id="csvBtn" onclick="copyCsv()" ...>Copy CSV</button>
214
+ <button id="imgBtn" onclick="copyImage()" ...>Copy as Image</button>
215
+ </div>
216
+ \`\`\`
144
217
 
145
218
  ### Security (CRITICAL)
146
219
  - **HTML-escape ALL data values** before embedding. Titles, names, descriptions — everything from the data JSON must be escaped:
@@ -153,10 +226,10 @@ Add sort functionality to table headers:
153
226
  - Never submit data to external URLs.
154
227
 
155
228
  ### Content Structure
156
- 1. **Title bar**: Visualization title + item count + download CSV button
229
+ 1. **Title bar**: Visualization title + item count + action buttons (Copy CSV, Copy as Image)
157
230
  2. **KPI cards**: Key metrics in a grid (total, by state, etc.)
158
231
  3. **Primary visualization**: Chart or visual that matches the intent
159
- 4. **Data table**: Sortable table with all items, work item IDs as links
232
+ 4. **Data table**: Sortable table with work item IDs as click-to-copy-URL spans
160
233
  5. **Footer**: "Generated by MCP Apps" + timestamp
161
234
 
162
235
  ### Output Format
package/build/genui/design-system-prompt.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"design-system-prompt.js","sourceRoot":"","sources":["../../src/genui/design-system-prompt.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,MAAM,CAAC,MAAM,oBAAoB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8JnC,CAAC,IAAI,EAAE,CAAC"}
1
+ {"version":3,"file":"design-system-prompt.js","sourceRoot":"","sources":["../../src/genui/design-system-prompt.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,MAAM,CAAC,MAAM,oBAAoB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuOnC,CAAC,IAAI,EAAE,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mcp-consultant-tools/azure-devops",
3
- "version": "30.0.0-beta.3",
3
+ "version": "30.0.0-beta.4",
4
4
  "description": "MCP server for Azure DevOps integration - wikis, work items, pull requests, and variable group read access",
5
5
  "type": "module",
6
6
  "main": "./build/index.js",