@stravica-ai/digital-operator-pa 0.1.7 → 0.1.8

package/dist/engineering-pa-workspace/app/project-detail.html

@@ -66,8 +66,14 @@
   .ws-next-text { color: var(--text); }
   .ws-docs { margin-top: 0.4rem; padding-top: 0.35rem; border-top: 1px solid var(--border); }
   .doc-list { list-style: none; }
-  .doc-item { padding: 0.3rem 0; cursor: pointer; color: var(--accent); font-size: 0.78rem; transition: color 0.12s; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; text-decoration: none; }
+  /* Each row: the document link (flex-grows) + a pop-out-to-new-tab button. */
+  .doc-row { display: flex; align-items: center; gap: 0.4rem; }
+  .doc-item { padding: 0.3rem 0; cursor: pointer; color: var(--accent); font-size: 0.78rem; transition: color 0.12s; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; text-decoration: none; flex: 1 1 auto; min-width: 0; }
   .doc-item:hover { color: var(--text-bright); }
+  /* Open-in-new-tab affordance. Dim until hovered so it doesn't compete with
+   * the label; opens the document in a full browser tab (target=_blank). */
+  .doc-ext { flex: 0 0 auto; color: var(--text-dim); font-size: 0.85rem; line-height: 1; text-decoration: none; padding: 0.2rem 0.3rem; border-radius: 4px; transition: color 0.12s, background 0.12s; }
+  .doc-ext:hover { color: var(--accent); background: var(--bg-highlight); }
   .doc-item .doc-label { color: var(--accent); }
   .doc-item:hover .doc-label { color: var(--text-bright); }
   .doc-item .doc-path { color: var(--text-dim); font-size: 0.68rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
@@ -140,6 +146,10 @@
     document.getElementById('task-modal').classList.remove('open');
   }
   function esc(s) { var el = document.createElement('span'); el.textContent = s; return el.innerHTML; }
+  // Direct-serve URL for a repo-relative doc path — the document's full-page
+  // URL (server renders .md, serves .html as-is, other types raw). Used for
+  // the open-in-new-tab affordance. Segments encoded so spaces/unicode survive.
+  function rawUrl(path) { return '/' + String(path).split('/').map(encodeURIComponent).join('/'); }
   function statusBadgeClass(status) {
     var s = (status || '').toLowerCase();
     if (s === 'active' || s === 'in-progress') return 'badge-active';
@@ -194,12 +204,15 @@
     var docLabel = (typeof doc === 'object' && doc.label) ? doc.label : docPath.split('/').pop();
     var docStatus = (typeof doc === 'object' && doc.status) ? doc.status : null;
     var viewPath = '/core/tools/workspace/app/viewer.html?file=' + encodeURIComponent(docPath);
+    var extPath = rawUrl(docPath);
     var labelMatchesPath = docLabel === docPath || docLabel === docPath.split('/').pop();
-    var html = '<li><a class="doc-item" href="' + viewPath + '" onclick="if(!event.metaKey&&!event.ctrlKey){event.preventDefault();navTo(\'' + viewPath + '\')}" title="' + esc(docPath) + '">';
+    var html = '<li class="doc-row"><a class="doc-item" href="' + viewPath + '" onclick="if(!event.metaKey&&!event.ctrlKey){event.preventDefault();navTo(\'' + viewPath + '\')}" title="' + esc(docPath) + '">';
     html += docStatusBadge(docStatus);
     html += '<span class="doc-label">' + esc(docLabel) + '</span>';
     if (!labelMatchesPath) html += '<span class="doc-path">' + esc(docPath) + '</span>';
-    html += '</a></li>';
+    html += '</a>';
+    html += '<a class="doc-ext" href="' + esc(extPath) + '" target="_blank" rel="noopener" title="Open in a full browser tab">&#8599;</a>';
+    html += '</li>';
     return html;
   }
 

package/dist/engineering-pa-workspace/app/viewer.html

@@ -15,6 +15,18 @@
   .back-btn:hover { border-color: var(--accent); }
   .breadcrumb { color: var(--text-dim); font-size: 0.75rem; }
   .breadcrumb span { color: var(--text); }
+  /* Pop the current document out to a full browser tab (escapes the workspace
+   * shell iframe). Pushed to the right of the toolbar. Hidden until a file is
+   * resolved. Styled like .back-btn — it's toolbar chrome. */
+  .open-ext { margin-left: auto; background: var(--bg-highlight); border: 1px solid var(--border); border-radius: 4px; padding: 0.3rem 0.7rem; color: var(--accent); font-family: inherit; font-size: 0.8rem; cursor: pointer; text-decoration: none; transition: border-color 0.12s; white-space: nowrap; }
+  .open-ext:hover { border-color: var(--accent); }
+  /* HTML documents (e.g. infographics) render as the actual page inside a
+   * full-bleed frame rather than as escaped source. Height fills the viewport
+   * below the sticky toolbar. */
+  .html-frame { display: block; width: 100%; height: calc(100vh - 2.9rem); border: 0; background: var(--bg); }
+  /* When the content area hosts a full-bleed HTML frame, drop the prose
+   * column constraints so the page uses the full width. */
+  .content.is-frame { max-width: none; margin: 0; padding: 0; }
   /* Prose surface: humanist sans for long-form reading. The toolbar keeps
    * the inherited monospace (it's chrome, not content), and code / pre /
    * plain-text within .content explicitly opt back to monospace below.
@@ -64,6 +76,7 @@
 <div class="toolbar">
   <a class="back-btn" id="back-btn" onclick="goBack()">Back</a>
   <div class="breadcrumb" id="breadcrumb">No document selected.</div>
+  <a class="open-ext" id="open-ext" target="_blank" rel="noopener" style="display:none" title="Open in a full browser tab">Open in new tab &#8599;</a>
 </div>
 <div class="content" id="content"><div class="empty-state">No document selected.</div></div>
 <noscript><div style="padding:2rem; color:#a1a1aa; text-align:center;">Enable JavaScript to view documents.</div></noscript>
@@ -88,6 +101,13 @@
     window.history.back();
   }
   function esc(s) { var el = document.createElement('span'); el.textContent = s; return el.innerHTML; }
+  // Direct-serve URL for a repo-relative path. The workspace server serves any
+  // repo file at its own path (.md is rendered to HTML, .html served as-is,
+  // everything else raw) — so this is the canonical "full page" URL for a
+  // document. Each segment is encoded so spaces / unicode survive.
+  function rawUrl(path) {
+    return '/' + String(path).split('/').map(encodeURIComponent).join('/');
+  }
   var params = new URLSearchParams(window.location.search);
   var filePath = params.get('file');
   if (filePath) {
@@ -95,21 +115,42 @@
     var breadHtml = parts.map(function(p, i) { return i === parts.length - 1 ? '<span>' + esc(p) + '</span>' : esc(p); }).join(' / ');
     document.getElementById('breadcrumb').innerHTML = breadHtml;
     document.title = parts[parts.length - 1] || 'Document Viewer';
+    // Wire the "Open in new tab" button to the document's full-page URL for
+    // every file type (md rendered, html raw, other raw).
+    var docUrl = rawUrl(filePath);
+    var openExt = document.getElementById('open-ext');
+    openExt.href = docUrl;
+    openExt.style.display = '';
     var contentEl = document.getElementById('content');
-    contentEl.innerHTML = '<div class="empty-state">Loading...</div>';
     var isMarkdown = /\.(md|markdown)$/i.test(filePath);
-    fetch('/__api/file?path=' + encodeURIComponent(filePath)).then(function(r) {
-      if (!r.ok) throw new Error('File not found');
-      return r.text();
-    }).then(function(text) {
-      var body = text;
-      try { var j = JSON.parse(text); if (typeof j.content === 'string') body = j.content; } catch (e) { /* raw text */ }
-      if (isMarkdown && typeof window.renderMd === 'function') {
-        contentEl.innerHTML = renderMd(body);
-      } else {
-        contentEl.innerHTML = '<div class="plain-text">' + esc(body) + '</div>';
-      }
-    }).catch(function(err) { contentEl.innerHTML = '<div class="empty-state">Could not load document: ' + esc(err.message) + '</div>'; });
+    var isHtml = /\.(html?|htm)$/i.test(filePath);
+    if (isHtml) {
+      // Render the HTML document as the actual page inside a full-bleed frame,
+      // not as escaped source. src points at the server's direct-serve route.
+      // Sandboxed: scripts run (infographics animate) and popups/same-origin
+      // are permitted for the operator's own repo content; no top-navigation.
+      var frame = document.createElement('iframe');
+      frame.className = 'html-frame';
+      frame.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-popups');
+      frame.src = docUrl;
+      contentEl.classList.add('is-frame');
+      contentEl.innerHTML = '';
+      contentEl.appendChild(frame);
+    } else {
+      contentEl.innerHTML = '<div class="empty-state">Loading...</div>';
+      fetch('/__api/file?path=' + encodeURIComponent(filePath)).then(function(r) {
+        if (!r.ok) throw new Error('File not found');
+        return r.text();
+      }).then(function(text) {
+        var body = text;
+        try { var j = JSON.parse(text); if (typeof j.content === 'string') body = j.content; } catch (e) { /* raw text */ }
+        if (isMarkdown && typeof window.renderMd === 'function') {
+          contentEl.innerHTML = renderMd(body);
+        } else {
+          contentEl.innerHTML = '<div class="plain-text">' + esc(body) + '</div>';
+        }
+      }).catch(function(err) { contentEl.innerHTML = '<div class="empty-state">Could not load document: ' + esc(err.message) + '</div>'; });
+    }
   }
 </script>
 </body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stravica-ai/digital-operator-pa",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Digital Operator PA — single-bundled public package surface (bins + library) for the platform.",
   "type": "module",
   "main": "./index.mjs",