@stravica-ai/digital-operator-pa 0.1.0

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

@@ -0,0 +1,297 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Projects — Dave</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',monospace; background: var(--bg); color: var(--text); padding: 1.5rem; line-height: 1.6; }
+  h1 { color: var(--text-bright); font-size: 1.2rem; margin-bottom: 1rem; }
+
+  /* ── Toolbar ── */
+  .toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; align-items: center; }
+  .chip { display: inline-block; padding: 0.2rem 0.6rem; border: 1px solid var(--border); border-radius: 4px; font-size: 0.72rem; cursor: pointer; background: var(--bg-surface); color: var(--text-dim); transition: all 0.1s; white-space: nowrap; font-family: inherit; }
+  .chip:hover { border-color: var(--accent); color: var(--text); }
+  .chip.active { background: var(--accent); color: var(--bg); border-color: var(--accent); font-weight: 600; }
+  .sep { width: 1px; height: 1.2rem; background: var(--border); margin: 0 0.25rem; }
+  select.chip { appearance: none; padding-right: 1.4rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23565f89'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.4rem center; }
+
+  .view-toggle { display: flex; gap: 0; margin-left: auto; }
+  .view-btn { padding: 0.2rem 0.55rem; border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-dim); font-size: 0.72rem; cursor: pointer; font-family: inherit; transition: all 0.1s; }
+  .view-btn:first-child { border-radius: 4px 0 0 4px; }
+  .view-btn:last-child { border-radius: 0 4px 4px 0; border-left: none; }
+  .view-btn.active { background: var(--bg-highlight); color: var(--text-bright); border-color: var(--accent); }
+
+  /* ── Card grid ── */
+  .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.85rem; }
+  .proj-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 7px; padding: 1.1rem; cursor: pointer; transition: border-color 0.1s; }
+  .proj-card:hover { border-color: var(--accent); }
+  .proj-name { color: var(--text-bright); font-size: 0.9rem; font-weight: 600; margin-bottom: 0.3rem; }
+  .proj-id { font-size: 0.62rem; color: var(--text-dim); margin-bottom: 0.5rem; cursor: copy; }
+  .proj-id:hover { color: var(--cyan); }
+  .proj-summary { color: var(--text-dim); font-size: 0.75rem; margin-bottom: 0.6rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+  .proj-footer { display: flex; flex-wrap: wrap; gap: 0.3rem; }
+
+  /* ── List view ── */
+  .proj-list-row { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.55rem 0.75rem; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 5px; margin-bottom: 0.3rem; cursor: pointer; transition: border-color 0.1s; }
+  .proj-list-row:hover { border-color: var(--accent); }
+  .proj-list-body { flex: 1; min-width: 0; }
+  .proj-list-name { color: var(--text-bright); font-size: 0.85rem; font-weight: 600; }
+  .proj-list-summary { color: var(--text-dim); font-size: 0.73rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0.1rem; }
+  .proj-list-meta { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.2rem; }
+  .proj-list-id { font-size: 0.6rem; color: var(--text-dim); flex: 0 0 130px; margin-top: 0.2rem; cursor: copy; font-family: 'SF Mono',monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .proj-list-id:hover { color: var(--cyan); }
+
+  /* ── Badges ── */
+  .badge { display: inline-block; padding: 0.08rem 0.35rem; border-radius: 3px; font-size: 0.62rem; font-weight: 600; white-space: nowrap; }
+  .b-ip   { background: rgba(126,212,100,0.15); color: var(--green); }
+  .b-pl   { background: rgba(224,175,104,0.15); color: var(--yellow); }
+  .b-dn   { background: rgba(86,95,137,0.15); color: var(--text-dim); }
+  .b-dr   { background: rgba(86,95,137,0.25); color: var(--text-dim); }
+  .b-bl   { background: rgba(247,118,142,0.15); color: var(--red); }
+  .b-other { background: var(--bg-highlight); color: var(--text-dim); }
+
+  /* ── Empty ── */
+  .empty { color: var(--text-dim); font-size: 0.8rem; padding: 2rem; text-align: center; background: var(--bg-surface); border: 1px dashed var(--border); border-radius: 6px; }
+
+  /* ── 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: 580px; 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: 1.05rem; font-weight: 600; margin-bottom: 0.35rem; padding-right: 2.5rem; }
+  .modal-id { font-size: 0.7rem; color: var(--text-dim); font-family: 'SF Mono',monospace; margin-bottom: 0.75rem; cursor: copy; display: inline-block; padding: 0.15rem 0.4rem; background: var(--bg-highlight); border-radius: 3px; }
+  .modal-id:hover { color: var(--cyan); }
+  .modal-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 1rem; }
+  .modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; margin-bottom: 0.75rem; }
+  .modal-label { color: var(--text-dim); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.2rem; }
+  .modal-value { color: var(--text); font-size: 0.8rem; }
+  .modal-summary { color: var(--text); font-size: 0.8rem; background: var(--bg-highlight); border: 1px solid var(--border); border-radius: 5px; padding: 0.7rem; line-height: 1.55; white-space: pre-wrap; }
+  .modal-link { color: var(--accent); cursor: pointer; text-decoration: none; font-size: 0.8rem; }
+  .modal-link:hover { text-decoration: underline; }
+</style>
+<script src="/banner.js" defer></script>
+</head>
+<body>
+<div id="global-banner"></div>
+<h1>Projects</h1>
+
+<div class="toolbar">
+  <!-- Status filters (default: planned + in-progress) -->
+  <button class="chip active" id="f-ip" onclick="toggleStatus('in-progress')">In Progress</button>
+  <button class="chip active" id="f-pl" onclick="toggleStatus('planned')">Planned</button>
+  <button class="chip" id="f-dr" onclick="toggleStatus('draft')">Draft</button>
+  <button class="chip" id="f-bl" onclick="toggleStatus('blocked')">Blocked</button>
+  <button class="chip" id="f-dn" onclick="toggleStatus('done')">Done</button>
+  <div class="sep"></div>
+  <select class="chip" id="f-cat" onchange="render()"><option value="">All categories</option></select>
+  <select class="chip" id="f-prio" onchange="render()">
+    <option value="">All priorities</option>
+    <option value="1">P1</option><option value="2">P2</option>
+    <option value="3">P3</option><option value="4">P4</option>
+  </select>
+  <div class="sep"></div>
+  <div class="view-toggle">
+    <button class="view-btn active" id="btn-card" onclick="setView('card')">Cards</button>
+    <button class="view-btn" id="btn-list" onclick="setView('list')">List</button>
+  </div>
+</div>
+
+<div id="container"><div class="empty">Loading…</div></div>
+
+<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>
+
+<noscript><div style="padding:2rem;color:var(--text-dim);text-align:center;">Enable JavaScript to view projects.</div></noscript>
+<script>
+  var allProjects = [];
+  var statusFilter = { 'in-progress': true, 'planned': true };
+
+  // ── localStorage helpers ──
+  function storageGet(key, fallback) {
+    try { var v = localStorage.getItem(key); return v !== null ? v : fallback; } catch(e) { return fallback; }
+  }
+  function storageSet(key, val) {
+    try { localStorage.setItem(key, val); } catch(e) {}
+  }
+
+  var view = storageGet('workspace.projects.view', 'card');
+
+  function esc(s) {
+    var el = document.createElement('span');
+    el.textContent = s == null ? '' : String(s);
+    return el.innerHTML;
+  }
+
+  function navTo(path) {
+    if (window.parent && window.parent.navigate) window.parent.navigate(path);
+    else window.location.href = path;
+  }
+
+  var STATUS_CLASSES = {
+    'in-progress': 'b-ip', 'planned': 'b-pl', 'done': 'b-dn',
+    'archived': 'b-dn', 'draft': 'b-dr', 'blocked': 'b-bl',
+  };
+
+  function statusBadge(s) {
+    return '<span class="badge ' + (STATUS_CLASSES[s] || 'b-other') + '">' + esc(s || 'draft') + '</span>';
+  }
+
+  function copyText(text, el) {
+    if (navigator.clipboard) navigator.clipboard.writeText(text).catch(function() {});
+    var orig = el.textContent;
+    el.textContent = 'copied!';
+    setTimeout(function() { el.textContent = orig; }, 1200);
+  }
+
+  function openModal(idx) {
+    var p = allProjects[idx]; if (!p) return;
+    var id = p.id || '';
+    var html = '<div class="modal-title">' + esc(p.name || id) + '</div>';
+    html += '<div class="modal-id" onclick="copyText(\'' + esc(id) + '\', this)">' + esc(id) + '</div>';
+    html += '<div class="modal-badges">' + statusBadge(p.status);
+    if (p.category) html += '<span class="badge b-other">' + esc(p.category) + '</span>';
+    if (p.priority != null) html += '<span class="badge b-other">P' + esc(String(p.priority)) + '</span>';
+    html += '</div>';
+    if (p.summary) {
+      html += '<div style="margin-bottom:0.75rem"><div class="modal-label">Summary</div>';
+      html += '<div class="modal-summary">' + esc(p.summary) + '</div></div>';
+    }
+    html += '<div class="modal-grid">';
+    if (p.owner) html += '<div><div class="modal-label">Owner</div><div class="modal-value">' + esc(p.owner) + '</div></div>';
+    if (p.created) html += '<div><div class="modal-label">Created</div><div class="modal-value">' + esc(p.created) + '</div></div>';
+    if (p.updated) html += '<div><div class="modal-label">Updated</div><div class="modal-value">' + esc(p.updated || '—') + '</div></div>';
+    if (p.shipped) html += '<div><div class="modal-label">Shipped</div><div class="modal-value">' + esc(p.shipped) + '</div></div>';
+    html += '</div>';
+    html += '<a class="modal-link" onclick="closeModal(); navTo(\'/core/tools/workspace/app/project-detail.html?id=' + encodeURIComponent(id) + '\')">View full detail →</a>';
+    document.getElementById('modal-content').innerHTML = html;
+    document.getElementById('modal').classList.add('open');
+  }
+
+  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');
+  });
+
+  function setView(v) {
+    view = v;
+    storageSet('workspace.projects.view', v);
+    document.getElementById('btn-card').classList.toggle('active', v === 'card');
+    document.getElementById('btn-list').classList.toggle('active', v === 'list');
+    render();
+  }
+
+  function toggleStatus(s) {
+    statusFilter[s] = !statusFilter[s];
+    var ids = {'in-progress':'f-ip','planned':'f-pl','draft':'f-dr','blocked':'f-bl','done':'f-dn'};
+    if (ids[s]) document.getElementById(ids[s]).classList.toggle('active', !!statusFilter[s]);
+    render();
+  }
+
+  function applyFilters(items) {
+    var fc = document.getElementById('f-cat').value;
+    var fp = document.getElementById('f-prio').value;
+    var activeStatus = Object.keys(statusFilter).filter(function(k) { return statusFilter[k]; });
+    return items.filter(function(p) {
+      var s = p.status || 'draft';
+      if (activeStatus.length > 0 && activeStatus.indexOf(s) === -1) return false;
+      if (fc && (p.category || '') !== fc) return false;
+      if (fp && String(p.priority || '') !== fp) return false;
+      return true;
+    });
+  }
+
+  function render() {
+    var filtered = applyFilters(allProjects);
+    var container = document.getElementById('container');
+    if (filtered.length === 0) {
+      container.innerHTML = '<div class="empty">No projects match the current filters.</div>';
+      return;
+    }
+    if (view === 'list') renderList(filtered, container);
+    else renderCards(filtered, container);
+  }
+
+  function renderCards(items, container) {
+    var html = '<div class="card-grid">';
+    items.forEach(function(p) {
+      var idx = allProjects.indexOf(p);
+      var id = p.id || '';
+      html += '<div class="proj-card" onclick="openModal(' + idx + ')">';
+      html += '<div class="proj-name">' + esc(p.name || id) + '</div>';
+      html += '<div class="proj-id" onclick="event.stopPropagation();copyText(\'' + esc(id) + '\',this)">' + esc(id) + '</div>';
+      if (p.summary) html += '<div class="proj-summary">' + esc(p.summary) + '</div>';
+      html += '<div class="proj-footer">' + statusBadge(p.status);
+      if (p.category) html += '<span class="badge b-other">' + esc(p.category) + '</span>';
+      if (p.priority != null) html += '<span class="badge b-other">P' + esc(String(p.priority)) + '</span>';
+      if (p.owner) html += '<span class="badge b-other">' + esc(p.owner) + '</span>';
+      html += '</div></div>';
+    });
+    html += '</div>';
+    container.innerHTML = html;
+  }
+
+  function renderList(items, container) {
+    var html = '';
+    items.forEach(function(p) {
+      var idx = allProjects.indexOf(p);
+      var id = p.id || '';
+      html += '<div class="proj-list-row" onclick="openModal(' + idx + ')">';
+      html += '<div class="proj-list-id" onclick="event.stopPropagation();copyText(\'' + esc(id) + '\',this)">' + esc(id) + '</div>';
+      html += '<div class="proj-list-body">';
+      html += '<div class="proj-list-name">' + esc(p.name || id) + '</div>';
+      if (p.summary) html += '<div class="proj-list-summary">' + esc(p.summary) + '</div>';
+      html += '<div class="proj-list-meta">' + statusBadge(p.status);
+      if (p.category) html += '<span class="badge b-other">' + esc(p.category) + '</span>';
+      if (p.priority != null) html += '<span class="badge b-other">P' + esc(String(p.priority)) + '</span>';
+      if (p.owner) html += '<span class="badge b-other">' + esc(p.owner) + '</span>';
+      html += '</div></div></div>';
+    });
+    container.innerHTML = html || '<div class="empty">No projects match the current filters.</div>';
+  }
+
+  function load() {
+    fetch('/__api/projects', { cache: 'no-store' }).then(function(r) { return r.json(); }).then(function(data) {
+      allProjects = (data.projects || []).slice().sort(function(a, b) {
+        var order = { 'in-progress': 0, 'blocked': 1, 'planned': 2, 'draft': 3, 'done': 4, 'archived': 5 };
+        var sa = order[a.status] != null ? order[a.status] : 3;
+        var sb = order[b.status] != null ? order[b.status] : 3;
+        if (sa !== sb) return sa - sb;
+        return (a.priority == null ? 99 : a.priority) - (b.priority == null ? 99 : b.priority);
+      });
+
+      // Populate category filter
+      var cats = {};
+      allProjects.forEach(function(p) { if (p.category) cats[p.category] = true; });
+      var sel = document.getElementById('f-cat');
+      Object.keys(cats).sort().forEach(function(c) {
+        var opt = document.createElement('option'); opt.value = c; opt.textContent = c; sel.appendChild(opt);
+      });
+
+      render();
+    }).catch(function(err) {
+      document.getElementById('container').innerHTML = '<div class="empty">Failed to load: ' + esc(err.message) + '</div>';
+    });
+  }
+
+  // Sync button states to stored view on init
+  document.getElementById('btn-card').classList.toggle('active', view === 'card');
+  document.getElementById('btn-list').classList.toggle('active', view === 'list');
+
+  load();
+</script>
+</body>
+</html>