feat: add copy & download buttons to web file viewer (#56)

The web demo's file-preview modal now has Copy and Download buttons, so
users can grab a generated doc's contents without manually selecting text.

- Copy uses the async Clipboard API, raced against a 1s timeout and backed by
  a document.execCommand fallback, so it never hangs and degrades gracefully.
- Download saves the previewed content as a Blob named after the file.

While wiring these, found that the modal's existing close button and
click-outside-to-dismiss used inline `onclick` handlers that the server's
Content-Security-Policy (`script-src-attr 'none'`) silently blocked — they
did nothing. Moved ALL modal controls to addEventListener, which both
complies with the CSP and fixes the previously-dead close/dismiss controls.

Tests: templates unit tests assert the buttons, the CSP-safe wiring (no inline
onclick), the clipboard-with-fallback path, and the Blob download. The
Playwright web-ui spec now grants clipboard permission and exercises Copy
(label flips to "Copied!") and Download (asserts the download filename).

Co-authored-by: Arthur742Ramos <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: 3 people

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Web demo file viewer now has **Copy** and **Download** buttons: copy a generated doc's contents to the clipboard (async Clipboard API with a `document.execCommand` fallback and a timeout guard) or download it as a file, directly from the preview modal.
 - `bootcamp completion <bash|zsh|fish>` command to print a shell completion script for tab-completing subcommands, their aliases, and option flags. The completion data is derived from the live CLI definition, so it can never drift from the actual command surface; pipe it to your shell's completion directory (or `source <(bootcamp completion bash)`).
 - `--quiet`/`-q` flag for the main `bootcamp <repo-url>` command: suppresses the banner, run header, detected-stack table, progress spinners, score summary, and file-tree listing, printing only the output directory path on stdout so the command composes cleanly in scripts and CI (`OUT=$(bootcamp <url> --quiet)`). Failures and warnings are still written to stderr. Mutually exclusive with `--verbose`.
 - `bootcamp styles` command (alias `style`) to list the built-in style packs and the documentation sections each one enables, so users can choose a `--style` without reading the source. Prints a per-pack summary (tone, depth, emoji, first-task count, enabled sections) plus a section-coverage matrix, flags the default pack (`oss`), and supports `--json` for scripting.
@@ -46,6 +47,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- Web demo modal controls (close button, click-outside-to-dismiss) were wired with inline `onclick` handlers that the server's Content-Security-Policy (`script-src-attr 'none'`) silently blocked, so they did nothing. All modal controls now use `addEventListener`, restoring close/dismiss behavior and enabling the new Copy/Download buttons under the same CSP.
 - `bootcamp ask`, `docs`, and `diff` now honor options whose flag names collide with the root command. `ask --branch/--model`, `docs --branch`, and `diff --format/--full-clone/--keep-temp` were captured by the root command and silently ignored; they are now read from raw argv (via shared, tested `getFlagValue`/`hasFlag` helpers in `src/utils.ts`).
 - `bootcamp health` now honors `--branch` and `--max-files`. These short flags (`-b`/`-m`) collide with the root command's options, which captured them before the subcommand could; the command now falls back to reading raw argv (matching the `diff --output` approach). The `--json` output also gained a `filesScanned` field.
 - Reused shared prompt helper builders in `src/agent.ts` for standard/fast prompt construction.

README.md

@@ -514,6 +514,8 @@ bootcamp web --port 8080
 # Then open http://localhost:3000 in your browser
 ```
 
+The browser UI streams live progress, then lets you preview each generated file in a modal with one-click **Copy** (to clipboard) and **Download** buttons.
+
 ![Web Dashboard](media/screenshot-web-dashboard.png)
 
 The web interface allows you to analyze repositories interactively through your browser.

src/web/templates.ts

@@ -127,18 +127,35 @@ export function getIndexHtml(): string {
       border-radius: 8px;
       padding: 2rem;
     }
-    .modal-header { 
-      display: flex; 
-      justify-content: space-between; 
+    .modal-header {
+      display: flex;
+      justify-content: space-between;
       align-items: center;
       margin-bottom: 1rem;
+      gap: 1rem;
     }
-    .close { 
-      background: none; 
-      border: none; 
-      color: #888; 
-      font-size: 2rem; 
+    .modal-actions { display: flex; gap: 0.5rem; align-items: center; }
+    .icon-btn {
+      padding: 0.4rem 0.85rem;
+      border: 1px solid #30363d;
+      border-radius: 6px;
+      background: #161b22;
+      color: #e0e0e0;
+      font-size: 0.85rem;
+      font-weight: 600;
+      cursor: pointer;
+      transition: background 0.15s, border-color 0.15s, transform 0.15s;
+    }
+    .icon-btn:hover { background: #21262d; border-color: #00d9ff; transform: none; }
+    .icon-btn:active { transform: scale(0.97); }
+    .icon-btn.copied { border-color: #00ff88; color: #00ff88; }
+    .close {
+      background: none;
+      border: none;
+      color: #888;
+      font-size: 2rem;
       cursor: pointer;
+      line-height: 1;
     }
     .close:hover { color: #fff; }
     pre { 
@@ -179,19 +196,23 @@ export function getIndexHtml(): string {
     role="dialog"
     aria-modal="true"
     aria-labelledby="modalTitle"
-    onclick="if(event.target===this)closeModal()"
   >
     <div class="modal-content">
       <div class="modal-header">
         <h2 id="modalTitle"></h2>
-        <button class="close" type="button" aria-label="Close file preview" onclick="closeModal()">&times;</button>
+        <div class="modal-actions">
+          <button class="icon-btn" type="button" id="copyBtn">Copy</button>
+          <button class="icon-btn" type="button" id="downloadBtn">Download</button>
+          <button class="close" type="button" id="closeBtn" aria-label="Close file preview">&times;</button>
+        </div>
       </div>
       <pre id="modalContent"></pre>
     </div>
   </div>
 
   <script>
     let currentJobId = null;
+    let currentFile = null;
 
     const fileDescriptions = {
       'BOOTCAMP': 'One-page overview',
@@ -342,11 +363,69 @@ export function getIndexHtml(): string {
 
     async function viewFile(filename) {
       const content = await fetch('/api/jobs/' + currentJobId + '/files/' + encodeURIComponent(filename)).then(r => r.text());
+      currentFile = { name: filename, content };
       document.getElementById('modalTitle').textContent = filename;
       document.getElementById('modalContent').textContent = content;
+      const copyBtn = document.getElementById('copyBtn');
+      copyBtn.textContent = 'Copy';
+      copyBtn.classList.remove('copied');
       document.getElementById('modal').classList.add('show');
     }
 
+    function legacyCopy(text) {
+      const ta = document.createElement('textarea');
+      ta.value = text;
+      ta.style.position = 'fixed';
+      ta.style.opacity = '0';
+      document.body.appendChild(ta);
+      ta.select();
+      let ok = false;
+      try { ok = document.execCommand('copy'); } catch (e) { ok = false; }
+      document.body.removeChild(ta);
+      return ok;
+    }
+
+    async function copyFile() {
+      if (!currentFile) return;
+      const btn = document.getElementById('copyBtn');
+      let copied = false;
+      try {
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+          // The async clipboard API can hang or be denied in some browsers;
+          // race it against a short timeout and fall back to execCommand.
+          await Promise.race([
+            navigator.clipboard.writeText(currentFile.content),
+            new Promise((_, reject) => setTimeout(() => reject(new Error('clipboard timeout')), 1000)),
+          ]);
+          copied = true;
+        } else {
+          copied = legacyCopy(currentFile.content);
+        }
+      } catch (err) {
+        copied = legacyCopy(currentFile.content);
+      }
+
+      btn.textContent = copied ? 'Copied!' : 'Copy failed';
+      btn.classList.toggle('copied', copied);
+      setTimeout(() => {
+        btn.textContent = 'Copy';
+        btn.classList.remove('copied');
+      }, 1500);
+    }
+
+    function downloadFile() {
+      if (!currentFile) return;
+      const blob = new Blob([currentFile.content], { type: 'text/plain;charset=utf-8' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = currentFile.name;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    }
+
     function closeModal() {
       document.getElementById('modal').classList.remove('show');
     }
@@ -362,6 +441,15 @@ export function getIndexHtml(): string {
       void analyze();
     });
 
+    // Modal controls are wired here (not via inline onclick) to comply with the
+    // server's Content-Security-Policy, which blocks inline event handlers.
+    document.getElementById('copyBtn').addEventListener('click', () => { void copyFile(); });
+    document.getElementById('downloadBtn').addEventListener('click', downloadFile);
+    document.getElementById('closeBtn').addEventListener('click', closeModal);
+    document.getElementById('modal').addEventListener('click', (event) => {
+      if (event.target === document.getElementById('modal')) closeModal();
+    });
+
     document.addEventListener('keydown', (e) => {
       if (e.key === 'Escape') closeModal();
     });

test/playwright/web-ui.e2e.spec.ts

@@ -182,7 +182,11 @@ test.describe("web UI", () => {
     tempDirs.length = 0;
   });
 
-  test("submits analysis, streams progress, and opens generated files in the browser", async ({ page }) => {
+  test("submits analysis, streams progress, and opens generated files in the browser", async ({ page, context }) => {
+    // The modal Copy button uses navigator.clipboard.writeText; grant the
+    // permission up front so the primary path is exercised (a fallback exists).
+    await context.grantPermissions(["clipboard-read", "clipboard-write"]);
+
     const tempDir = await mkdtemp(join(tmpdir(), "bootcamp-web-ui-e2e-"));
     tempDirs.push(tempDir);
 
@@ -243,6 +247,21 @@ test.describe("web UI", () => {
     await expect(page.locator("#modalTitle")).toHaveText("BOOTCAMP.md");
     await expect(page.locator("#modalContent")).toContainText("fixture-web-ui-repo");
 
+    // Copy button: clicking runs the copy handler and shows transient
+    // confirmation. The "Copied!" label resets after a short timer, so poll for
+    // it (rather than a single check) to avoid racing the reset.
+    await expect(page.locator("#copyBtn")).toHaveText("Copy");
+    await page.locator("#copyBtn").click();
+    await expect(page.locator("#copyBtn")).toHaveText("Copied!");
+    // ...and it returns to the idle label afterwards.
+    await expect(page.locator("#copyBtn")).toHaveText("Copy");
+
+    // Download button: triggers a browser download named after the file.
+    const downloadPromise = page.waitForEvent("download");
+    await page.locator("#downloadBtn").click();
+    const download = await downloadPromise;
+    expect(download.suggestedFilename()).toBe("BOOTCAMP.md");
+
     await page.keyboard.press("Escape");
     await expect(page.locator("#modal")).toBeHidden();
 

test/templates.test.ts

@@ -69,6 +69,23 @@ describe("getIndexHtml", () => {
       expect(html).toContain('id="modalTitle"');
       expect(html).toContain('id="modalContent"');
     });
+
+    it("has copy and download buttons in the modal", () => {
+      const html = getIndexHtml();
+      expect(html).toContain('id="copyBtn"');
+      expect(html).toContain('id="downloadBtn"');
+      expect(html).toContain('id="closeBtn"');
+    });
+
+    it("wires modal controls via addEventListener (no inline onclick, for CSP)", () => {
+      const html = getIndexHtml();
+      // The server sets a CSP that blocks inline event handlers, so the UI must
+      // not rely on onclick attributes anywhere.
+      expect(html).not.toContain("onclick=");
+      expect(html).toContain("getElementById('copyBtn').addEventListener('click'");
+      expect(html).toContain("getElementById('downloadBtn').addEventListener('click'");
+      expect(html).toContain("getElementById('closeBtn').addEventListener('click'");
+    });
   });
 
   describe("inline CSS", () => {
@@ -129,6 +146,32 @@ describe("getIndexHtml", () => {
       expect(html).toContain("function closeModal()");
     });
 
+    it("defines the copyFile and downloadFile functions", () => {
+      const html = getIndexHtml();
+      expect(html).toContain("async function copyFile()");
+      expect(html).toContain("function downloadFile()");
+    });
+
+    it("uses the clipboard API with a fallback for copy", () => {
+      const html = getIndexHtml();
+      expect(html).toContain("navigator.clipboard");
+      expect(html).toContain("function legacyCopy(");
+      expect(html).toContain("document.execCommand('copy')");
+    });
+
+    it("races the async clipboard write against a timeout", () => {
+      const html = getIndexHtml();
+      expect(html).toContain("Promise.race");
+      expect(html).toContain("clipboard timeout");
+    });
+
+    it("creates a Blob download with the file name", () => {
+      const html = getIndexHtml();
+      expect(html).toContain("new Blob(");
+      expect(html).toContain("a.download = currentFile.name");
+      expect(html).toContain("URL.revokeObjectURL");
+    });
+
     it("handles Escape key to close modal", () => {
       const html = getIndexHtml();
       expect(html).toContain("Escape");