@stravica-ai/digital-operator-pa 0.1.0

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

@@ -0,0 +1,243 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Profile</title>
+<script>(function(){try{var t=localStorage.getItem('dave.theme');document.documentElement.dataset.theme=(t==='light'||t==='dark')?t:'dark';}catch(_){document.documentElement.dataset.theme='dark';}})();</script>
+<link rel="stylesheet" href="/core/tools/workspace/app/assets/theme.css">
+<script src="/core/tools/workspace/app/assets/theme.js" defer></script>
+<style>
+* { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    font-family: 'SF Mono', 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
+    background: var(--bg); color: var(--text); padding: 2rem; line-height: 1.6;
+  }
+  .profile-header { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 2rem; }
+  .avatar {
+    width: 72px; height: 72px; border-radius: 12px; background: var(--accent);
+    display: flex; align-items: center; justify-content: center;
+    font-size: 2rem; font-weight: 700; color: var(--bg); flex-shrink: 0;
+  }
+  .header-info h1 { color: var(--text-bright); font-size: 1.5rem; margin-bottom: 0.15rem; }
+  .header-info .role { color: var(--purple); font-size: 0.85rem; }
+  .card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; padding: 1.25rem; margin-bottom: 1rem; }
+  .card-title { color: var(--text-dim); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.75rem; }
+
+  /* ── Markdown rendered content ── */
+  .md-body { color: var(--text); font-size: 0.85rem; line-height: 1.75; }
+  .md-body h1 { color: var(--text-bright); font-size: 1.1rem; margin: 1rem 0 0.4rem; }
+  .md-body h2 { color: var(--text-bright); font-size: 0.95rem; margin: 0.9rem 0 0.35rem; border-bottom: 1px solid var(--border); padding-bottom: 0.2rem; }
+  .md-body h3 { color: var(--purple); font-size: 0.85rem; margin: 0.75rem 0 0.25rem; }
+  .md-body p { margin-bottom: 0.6rem; }
+  .md-body strong { color: var(--text-bright); font-weight: 600; }
+  .md-body em { color: var(--yellow); font-style: italic; }
+  .md-body code { background: var(--bg-highlight); border: 1px solid var(--border); border-radius: 3px; padding: 0.05rem 0.35rem; font-size: 0.8em; color: var(--cyan); }
+  .md-body pre { background: var(--bg-highlight); border: 1px solid var(--border); border-radius: 5px; padding: 0.75rem; margin: 0.5rem 0; overflow-x: auto; }
+  .md-body pre code { background: none; border: none; padding: 0; color: var(--text); font-size: 0.82em; }
+  .md-body ul, .md-body ol { padding-left: 1.5rem; margin-bottom: 0.6rem; }
+  .md-body li { margin-bottom: 0.15rem; }
+  .md-body a { color: var(--accent); text-decoration: none; }
+  .md-body a:hover { text-decoration: underline; }
+  .md-body blockquote { border-left: 3px solid var(--accent); padding-left: 0.8rem; color: var(--text-dim); margin: 0.5rem 0; }
+
+  /* ── File lists (observations / slices) ── */
+  .file-list { list-style: none; }
+  .file-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.6rem; border: 1px solid var(--border); border-radius: 4px; margin-bottom: 0.3rem; cursor: pointer; font-size: 0.78rem; color: var(--accent); transition: border-color 0.1s; }
+  .file-item:hover { border-color: var(--accent); background: var(--bg-highlight); }
+  .file-icon { color: var(--text-dim); font-size: 0.7rem; flex-shrink: 0; }
+
+  /* ── Empty / error ── */
+  .empty-state {
+    color: var(--text-dim); font-size: 0.85rem; padding: 3rem; text-align: center;
+    background: var(--bg-surface); border: 1px dashed var(--border); border-radius: 8px;
+  }
+  .empty-state .empty-title { color: var(--text-bright); font-size: 1rem; margin-bottom: 0.5rem; font-weight: 600; }
+  .empty-state p { margin-bottom: 0.5rem; }
+  .empty-state .cta { display: inline-block; margin-top: 0.75rem; color: var(--accent); text-decoration: none; border: 1px solid var(--border); border-radius: 4px; padding: 0.4rem 0.9rem; font-size: 0.8rem; }
+  .empty-state .cta:hover { border-color: var(--accent); background: var(--bg-highlight); }
+  .empty-state details { margin-top: 1rem; font-size: 0.75rem; color: var(--text-dim); }
+  .empty-state details summary { cursor: pointer; display: inline-block; color: var(--text-dim); }
+  .empty-state details summary:hover { color: var(--text); }
+  .empty-state details code { background: var(--bg-highlight); border: 1px solid var(--border); border-radius: 3px; padding: 0.05rem 0.3rem; color: var(--cyan); font-size: 0.75rem; }
+
+  /* ── Modal ── */
+  .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 200; align-items: center; justify-content: center; }
+  .modal-overlay.open { display: flex; }
+  .modal { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; max-width: 680px; width: 92%; max-height: 82vh; overflow-y: auto; padding: 1.5rem; position: relative; }
+  .modal-close { position: absolute; top: 0.75rem; right: 0.75rem; background: var(--bg-highlight); border: 1px solid var(--border); border-radius: 4px; color: var(--text-dim); font-size: 0.75rem; padding: 0.2rem 0.55rem; cursor: pointer; font-family: inherit; }
+  .modal-close:hover { color: var(--text-bright); border-color: var(--accent); }
+  .modal-title { color: var(--text-bright); font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; padding-right: 2.5rem; }
+  .modal-pre { color: var(--text); font-size: 0.8rem; background: var(--bg-highlight); border: 1px solid var(--border); border-radius: 5px; padding: 0.75rem; line-height: 1.55; white-space: pre-wrap; overflow-x: auto; }
+  .modal-code { color: var(--cyan); font-size: 0.78rem; background: var(--bg-highlight); border: 1px solid var(--border); border-radius: 5px; padding: 0.75rem; line-height: 1.55; white-space: pre; overflow-x: auto; font-family: 'SF Mono','JetBrains Mono','Fira Code',monospace; }
+</style>
+<script src="/banner.js" defer></script>
+</head>
+<body>
+<div id="global-banner"></div>
+<div id="profile-content">
+  <div class="empty-state">Loading profile…</div>
+</div>
+
+<!-- Modal for observations/slices -->
+<div class="modal-overlay" id="modal" onclick="closeModal(event)">
+  <div class="modal" onclick="event.stopPropagation()">
+    <button class="modal-close" onclick="closeModal()">Close ✕</button>
+    <div id="modal-content"></div>
+  </div>
+</div>
+
+<script src="/core/tools/workspace/app/assets/md.js"></script>
+<script>
+  function esc(s) {
+    var el = document.createElement('span');
+    el.textContent = s == null ? '' : String(s);
+    return el.innerHTML;
+  }
+
+  function initials(name) {
+    return (name || '?').split(' ').map(function(w) { return w[0] || ''; }).join('').toUpperCase().slice(0, 2) || '?';
+  }
+
+  // ── File content modal ──
+  function openFileModal(path, name) {
+    var modal = document.getElementById('modal');
+    var content = document.getElementById('modal-content');
+    content.innerHTML = '<div class="modal-title">' + esc(name) + '</div><div id="modal-body">Loading…</div>';
+    modal.classList.add('open');
+
+    fetch('/__api/file?path=' + encodeURIComponent(path), { cache: 'no-store' })
+      .then(function(r) { return r.json(); })
+      .then(function(data) {
+        var text = data.content || '';
+        var el = document.getElementById('modal-body');
+        if (!el) return;
+        if (path.endsWith('.md')) {
+          el.innerHTML = '<div class="md-body">' + renderMd(text) + '</div>';
+        } else if (path.endsWith('.json')) {
+          try {
+            var pretty = JSON.stringify(JSON.parse(text), null, 2);
+            el.innerHTML = '<pre class="modal-code">' + esc(pretty) + '</pre>';
+          } catch(e) {
+            el.innerHTML = '<pre class="modal-pre">' + esc(text) + '</pre>';
+          }
+        } else {
+          el.innerHTML = '<pre class="modal-pre">' + esc(text) + '</pre>';
+        }
+      })
+      .catch(function() {
+        var el = document.getElementById('modal-body');
+        if (el) el.innerHTML = '<div style="color:var(--red);font-size:0.8rem">Could not load content.</div>';
+      });
+  }
+
+  function closeModal(e) {
+    if (e && e.target !== document.getElementById('modal')) return;
+    document.getElementById('modal').classList.remove('open');
+  }
+
+  document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape') document.getElementById('modal').classList.remove('open');
+  });
+
+  // ── Render profile ──
+  function renderProfile(cfg, profileData) {
+    var name = (cfg.operator && cfg.operator.name) || 'Operator';
+    var role = (cfg.operator && cfg.operator.role) || '';
+    var profileMd = profileData.profile || '';
+    var observations = profileData.observations || [];
+    var slices = profileData.slices || [];
+
+    // Cold-start / fresh-install path: no profile content yet.
+    // Show the onboarding cue rather than a header over an empty card.
+    if (!profileMd && observations.length === 0 && slices.length === 0) {
+      renderEmpty();
+      return;
+    }
+
+    var html = '';
+
+    // Header
+    html += '<div class="profile-header">';
+    html += '<div class="avatar">' + esc(initials(name)) + '</div>';
+    html += '<div class="header-info">';
+    html += '<h1>' + esc(name) + '</h1>';
+    if (role) html += '<div class="role">' + esc(role) + '</div>';
+    html += '</div></div>';
+
+    // Profile markdown
+    html += '<div class="card">';
+    html += '<div class="card-title">Profile</div>';
+    if (profileMd) {
+      html += '<div class="md-body">' + renderMd(profileMd) + '</div>';
+    } else {
+      // Populated observations/slices but no profile.md yet — partial state.
+      html += '<div style="color:var(--text-dim);font-size:0.82rem">';
+      html += 'No profile content yet. As you work with your PA, a profile will be built from observations.';
+      html += '<details style="margin-top:0.5rem"><summary style="cursor:pointer">Details</summary>';
+      html += '<div style="margin-top:0.35rem">Expected at <code>operator/profile/profile.md</code>.</div>';
+      html += '</details></div>';
+    }
+    html += '</div>';
+
+    // Observations
+    if (observations.length > 0) {
+      html += '<div class="card">';
+      html += '<div class="card-title">Observations (' + observations.length + ')</div>';
+      html += '<ul class="file-list">';
+      observations.forEach(function(obs) {
+        html += '<li class="file-item" onclick="openFileModal(\'' + esc(obs.path) + '\',\'' + esc(obs.name) + '\')">';
+        html += '<span class="file-icon">◦</span>' + esc(obs.name);
+        html += '</li>';
+      });
+      html += '</ul></div>';
+    }
+
+    // Slices
+    if (slices.length > 0) {
+      html += '<div class="card">';
+      html += '<div class="card-title">Slices (' + slices.length + ')</div>';
+      html += '<ul class="file-list">';
+      slices.forEach(function(sl) {
+        html += '<li class="file-item" onclick="openFileModal(\'' + esc(sl.path) + '\',\'' + esc(sl.name) + '\')">';
+        html += '<span class="file-icon">◦</span>' + esc(sl.name);
+        html += '</li>';
+      });
+      html += '</ul></div>';
+    }
+
+    document.getElementById('profile-content').innerHTML = html;
+  }
+
+  // Friendly onboarding-style empty state: shown when the operator tree has
+  // no profile content yet (fresh install or freshly-cloned Dex). The raw
+  // path is tucked into a collapsed details element for operators who want
+  // the technical detail, matching the feedback that dev-speak should not
+  // be the primary message on a cold-start path.
+  function renderEmpty() {
+    var html = '<div class="empty-state">';
+    html += '<div class="empty-title">No profile yet</div>';
+    html += '<p>Your PA learns who you are over time. Run onboarding to set the basics, then the profile fills in as you work together.</p>';
+    html += '<a class="cta" href="/onboarding.html" target="_top">Open onboarding</a>';
+    html += '<details><summary>Details</summary>';
+    html += '<div style="margin-top:0.35rem">Expected at <code>operator/profile/profile.md</code>. Observations live under <code>operator/profile/observations/</code>.</div>';
+    html += '</details>';
+    html += '</div>';
+    document.getElementById('profile-content').innerHTML = html;
+  }
+
+  function renderError() { renderEmpty(); }
+
+  // ── Load ──
+  Promise.all([
+    fetch('/__api/config', { cache: 'no-store' }).then(function(r) { return r.json(); }).catch(function() { return {}; }),
+    fetch('/__api/profile', { cache: 'no-store' }).then(function(r) { return r.json(); }),
+  ]).then(function(results) {
+    var cfg = results[0];
+    var profileData = results[1];
+    if (profileData.error) { renderError(); return; }
+    renderProfile(cfg, profileData);
+  }).catch(function() { renderError(); });
+</script>
+</body>
+</html>