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

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 (5) hide show
  1. package/build/genui/design-system-prompt.d.ts.map +1 -1
  2. package/build/genui/design-system-prompt.js +74 -22
  3. package/build/genui/design-system-prompt.js.map +1 -1
  4. package/build/ui/work-items-app.html +28 -28
  5. 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,QAkNzB,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,83 @@ 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.
120
122
 
121
- #### Clickable Work Item Links
122
- Every work item ID must be a clickable link opening in a new tab:
123
+ #### Pre-defined Functions (DO NOT redefine these)
124
+ The following functions are pre-defined by the MCP App shell. Just call them:
125
+ - \`copyText(text, buttonElement)\` — copies text to clipboard with visual "Copied!" feedback
126
+ - \`showCopied(element)\` — shows brief "Copied!" indicator on an element
127
+ **Do NOT define copyText or showCopied in your \`<script>\` tags.** They already exist on \`window\`.
128
+
129
+ #### Work Item ID Links — Click to Copy URL
130
+ Do NOT use \`<a href="..." target="_blank">\`. Links cannot open in the sandbox.
131
+ Instead, display the ID as a clickable element that copies the ADO URL to clipboard:
123
132
  \`\`\`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>
133
+ <span onclick="copyText('https://dev.azure.com/{org}/{project}/_workitems/edit/{id}', this)"
134
+ style="color:var(--link); cursor:pointer; font-weight:600; text-decoration:underline; text-decoration-style:dotted"
135
+ title="Click to copy link">#52009</span>
126
136
  \`\`\`
127
137
 
128
- #### CSV Download Button
129
- Include a download button that generates a CSV from the displayed data:
138
+ #### Copy CSV Button
130
139
  \`\`\`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>
140
+ <button id="csvBtn" onclick="copyCsv()" style="padding:6px 14px; background:var(--link); color:white;
141
+ border:none; border-radius:4px; cursor:pointer; font-size:13px">Copy CSV</button>
142
+ \`\`\`
143
+ Define \`copyCsv()\` in a \`<script>\` tag — build the CSV string, then call \`copyText(csvString, document.getElementById('csvBtn'))\`.
144
+
145
+ #### Copy as Image Button
146
+ Load html2canvas from CDN and capture the root element as PNG:
147
+ \`\`\`html
148
+ <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
149
+ <button id="imgBtn" onclick="copyImage()" style="padding:6px 14px; background:var(--link); color:white;
150
+ border:none; border-radius:4px; cursor:pointer; font-size:13px">Copy as Image</button>
151
+ \`\`\`
152
+ Define \`copyImage()\` in a \`<script>\` tag:
153
+ \`\`\`javascript
154
+ function copyImage() {
155
+ var btn = document.getElementById('imgBtn');
156
+ btn.textContent = 'Capturing...';
157
+ (function waitH2C() {
158
+ if (typeof html2canvas === 'undefined') { setTimeout(waitH2C, 50); return; }
159
+ html2canvas(document.getElementById('genui-root'), {
160
+ backgroundColor: getComputedStyle(document.documentElement).getPropertyValue('--bg').trim() || '#1E1E1E',
161
+ scale: 2
162
+ }).then(function(canvas) {
163
+ canvas.toBlob(function(blob) {
164
+ try {
165
+ navigator.clipboard.write([new ClipboardItem({'image/png': blob})]).then(
166
+ function() { showCopied(btn); },
167
+ function() { fallbackShowImage(canvas, btn); }
168
+ );
169
+ } catch(e) { fallbackShowImage(canvas, btn); }
170
+ }, 'image/png');
171
+ });
172
+ })();
173
+ }
174
+ function fallbackShowImage(canvas, btn) {
175
+ btn.textContent = 'Copy as Image';
176
+ var img = document.createElement('img');
177
+ img.src = canvas.toDataURL('image/png');
178
+ img.style.cssText = 'max-width:100%;border:1px solid var(--border);border-radius:4px;margin-top:12px';
179
+ var note = document.createElement('div');
180
+ note.style.cssText = 'font-size:12px;color:var(--text-secondary);margin-top:4px';
181
+ note.textContent = 'Right-click the image above to copy or save it.';
182
+ var container = document.getElementById('imgBtn').parentElement;
183
+ container.appendChild(img);
184
+ container.appendChild(note);
185
+ }
133
186
  \`\`\`
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
138
187
 
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
188
+ ### Button Row
189
+ Place action buttons (Copy CSV, Copy as Image) together in a flex row at the top:
190
+ \`\`\`html
191
+ <div style="display:flex; gap:8px; align-items:center">
192
+ <button id="csvBtn" onclick="copyCsv()" ...>Copy CSV</button>
193
+ <button id="imgBtn" onclick="copyImage()" ...>Copy as Image</button>
194
+ </div>
195
+ \`\`\`
144
196
 
145
197
  ### Security (CRITICAL)
146
198
  - **HTML-escape ALL data values** before embedding. Titles, names, descriptions — everything from the data JSON must be escaped:
@@ -153,10 +205,10 @@ Add sort functionality to table headers:
153
205
  - Never submit data to external URLs.
154
206
 
155
207
  ### Content Structure
156
- 1. **Title bar**: Visualization title + item count + download CSV button
208
+ 1. **Title bar**: Visualization title + item count + action buttons (Copy CSV, Copy as Image)
157
209
  2. **KPI cards**: Key metrics in a grid (total, by state, etc.)
158
210
  3. **Primary visualization**: Chart or visual that matches the intent
159
- 4. **Data table**: Sortable table with all items, work item IDs as links
211
+ 4. **Data table**: Sortable table with work item IDs as click-to-copy-URL spans
160
212
  5. **Footer**: "Generated by MCP Apps" + timestamp
161
213
 
162
214
  ### 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkNnC,CAAC,IAAI,EAAE,CAAC"}