@unbrained/pm-web 1.0.0

package/public/src/views/guide.ts

@@ -0,0 +1,162 @@
+// ═══════════════════════════════════════════════════════════════
+// GUIDE VIEW
+// ═══════════════════════════════════════════════════════════════
+import { state } from '../state.js';
+import { getGuide, getGuideTopic } from '../api.js';
+import { escHtml } from '../utils.js';
+import { toast } from '../components/toast.js';
+
+const TOPIC_ICONS: Record<string, string> = {
+  quickstart: '🚀',
+  commands: '⌨️',
+  workflows: '🔄',
+  sdk: '🛠️',
+  extensions: '🧩',
+  skills: '🤖',
+  harnesses: '⚙️',
+  release: '📦',
+};
+
+function topicIcon(id: string): string {
+  return TOPIC_ICONS[id] ?? '📖';
+}
+
+function renderTopicCards(topics: Array<{id: string; title: string; summary?: string; intent?: string}>): string {
+  if (topics.length === 0) {
+    return '<div class="empty-state"><div class="empty-state-text">No guide topics found.</div></div>';
+  }
+  return `<div class="guide-topic-grid">${topics.map(t => `
+    <div class="card guide-topic-card" style="cursor:pointer;margin-bottom:0" onclick="window.__app.renderGuideView('${escHtml(t.id)}')">
+      <div class="guide-topic-icon">${topicIcon(t.id)}</div>
+      <div class="guide-topic-body">
+        <div class="guide-topic-title">${escHtml(t.title)}</div>
+        <div class="guide-topic-summary">${escHtml(t.summary || t.intent || '')}</div>
+      </div>
+    </div>`).join('')}</div>`;
+}
+
+function renderTopicDetail(topic: {
+  id: string;
+  title: string;
+  summary?: string;
+  intent?: string;
+  quick_commands?: string[];
+  commands?: string[];
+  workflows?: Array<{name: string; goal?: string; commands?: string[]}>;
+  related?: string[];
+}): string {
+  const commands: string[] = topic.commands ?? topic.quick_commands ?? [];
+  const related: string[] = topic.related ?? [];
+
+  return `
+    <div style="margin-bottom:16px">
+      <a href="#" class="guide-back-link" onclick="event.preventDefault();window.__app.renderGuideView()"
+        style="font-size:13px;color:var(--accent);text-decoration:none">← Back to topics</a>
+    </div>
+    <div class="page-header">
+      <div>
+        <div class="page-title">${topicIcon(topic.id)} ${escHtml(topic.title)}</div>
+        ${topic.intent ? `<div class="page-subtitle">${escHtml(topic.intent)}</div>` : ''}
+      </div>
+    </div>
+    ${topic.summary ? `
+      <div class="card" style="margin-bottom:16px">
+        <div class="card-body">
+          <div class="item-detail-desc">${escHtml(topic.summary)}</div>
+        </div>
+      </div>` : ''}
+    ${commands.length > 0 ? `
+      <div class="card" style="margin-bottom:16px">
+        <div class="card-header"><div class="card-title">Quick Commands</div></div>
+        <div class="card-body">
+          ${commands.map(cmd => `
+            <div class="guide-cmd-row">
+              <code class="guide-cmd-code">${escHtml(cmd)}</code>
+              <button class="btn btn-ghost btn-sm guide-copy-btn"
+                onclick="navigator.clipboard.writeText('${escHtml(cmd.replace(/'/g, "\\'"))}').then(()=>window.__app.toast('Copied!','success')).catch(()=>{})"
+                title="Copy to clipboard">⎘</button>
+            </div>`).join('')}
+        </div>
+      </div>` : ''}
+    ${topic.workflows && topic.workflows.length > 0 ? `
+      <div class="card" style="margin-bottom:16px">
+        <div class="card-header"><div class="card-title">Workflows</div></div>
+        <div class="card-body">
+          ${topic.workflows.map(wf => `
+            <div style="margin-bottom:16px">
+              <div style="font-weight:600;font-size:14px;margin-bottom:4px">${escHtml(wf.name)}</div>
+              ${wf.goal ? `<div style="font-size:13px;color:var(--text-muted);margin-bottom:8px">${escHtml(wf.goal)}</div>` : ''}
+              ${wf.commands && wf.commands.length > 0 ? wf.commands.map(cmd => `
+                <div class="guide-cmd-row">
+                  <code class="guide-cmd-code">${escHtml(cmd)}</code>
+                  <button class="btn btn-ghost btn-sm guide-copy-btn"
+                    onclick="navigator.clipboard.writeText('${escHtml(cmd.replace(/'/g, "\\'"))}').then(()=>window.__app.toast('Copied!','success')).catch(()=>{})"
+                    title="Copy to clipboard">⎘</button>
+                </div>`).join('') : ''}
+            </div>`).join('')}
+        </div>
+      </div>` : ''}
+    ${related.length > 0 ? `
+      <div class="card">
+        <div class="card-header"><div class="card-title">Related Topics</div></div>
+        <div class="card-body" style="display:flex;flex-wrap:wrap;gap:8px">
+          ${related.map(r => `
+            <a href="#" class="badge badge-secondary"
+              onclick="event.preventDefault();window.__app.renderGuideView('${escHtml(r)}')"
+              style="cursor:pointer;text-decoration:none">${escHtml(r)}</a>`).join('')}
+        </div>
+      </div>` : ''}`;
+}
+
+export async function renderGuideView(topicId?: string): Promise<void> {
+  const el = document.getElementById('content-guide');
+  if (!el) return;
+  if (!state.currentProject) {
+    el.innerHTML = '<div class="empty-state"><div class="empty-state-text">No project selected</div></div>';
+    return;
+  }
+
+  if (topicId) {
+    // Show single topic detail
+    el.innerHTML = `
+      <div style="margin-bottom:16px">
+        <a href="#" onclick="event.preventDefault();window.__app.renderGuideView()"
+          style="font-size:13px;color:var(--accent);text-decoration:none">← Back to topics</a>
+      </div>
+      <div id="guide-content"><div class="loading-state"><div class="loading-spinner"></div></div></div>`;
+
+    try {
+      const data = await getGuideTopic(state.currentProject.id, topicId);
+      const topic = (data as {topic?: unknown}).topic || data;
+      const contentEl = document.getElementById('guide-content');
+      if (contentEl) contentEl.innerHTML = renderTopicDetail(topic as Parameters<typeof renderTopicDetail>[0]);
+    } catch (err: unknown) {
+      const contentEl = document.getElementById('guide-content');
+      if (contentEl) {
+        contentEl.innerHTML = `<div class="empty-state"><div class="empty-state-text">Error: ${escHtml(err instanceof Error ? err.message : String(err))}</div></div>`;
+      }
+      toast(err instanceof Error ? err.message : 'Failed to load topic', 'error');
+    }
+  } else {
+    // Show topic list
+    el.innerHTML = `
+      <div class="page-header">
+        <div><div class="page-title">Guide</div><div class="page-subtitle">${escHtml(state.currentProject.name)}</div></div>
+        <div class="page-actions"><button class="btn btn-secondary btn-sm" onclick="window.__app.renderGuideView()">↺ Refresh</button></div>
+      </div>
+      <div id="guide-content"><div class="loading-state"><div class="loading-spinner"></div></div></div>`;
+
+    try {
+      const data = await getGuide(state.currentProject.id);
+      const topics = (data as {topics?: unknown[]}).topics || [];
+      const contentEl = document.getElementById('guide-content');
+      if (contentEl) contentEl.innerHTML = renderTopicCards(topics as Parameters<typeof renderTopicCards>[0]);
+    } catch (err: unknown) {
+      const contentEl = document.getElementById('guide-content');
+      if (contentEl) {
+        contentEl.innerHTML = `<div class="empty-state"><div class="empty-state-text">Error: ${escHtml(err instanceof Error ? err.message : String(err))}</div></div>`;
+      }
+      toast(err instanceof Error ? err.message : 'Failed to load guide', 'error');
+    }
+  }
+}

package/public/src/views/health.js

@@ -0,0 +1,105 @@
+// ═══════════════════════════════════════════════════════════════
+// HEALTH VIEW
+// ═══════════════════════════════════════════════════════════════
+import { state } from '../state.js';
+import { api } from '../api.js';
+import { escHtml } from '../utils.js';
+import { toast } from '../components/toast.js';
+// Detect item IDs mentioned in a history-drift issue message.
+function extractItemIdFromIssue(msg) {
+    // Common patterns: "history drift for ABC-123", "ABC-123 has history drift", etc.
+    const match = msg.match(/\b([A-Z][A-Z0-9]+-\d+)\b/);
+    return match ? match[1] : null;
+}
+function isHistoryDriftIssue(issue) {
+    const msg = (issue.message || issue.description || issue.type || '').toLowerCase();
+    return msg.includes('history') && (msg.includes('drift') || msg.includes('repair') || msg.includes('mismatch'));
+}
+function renderIssueRow(issue, projectId) {
+    const msg = escHtml(issue.message || issue.description || String(issue));
+    if (isHistoryDriftIssue(issue)) {
+        const itemId = extractItemIdFromIssue(issue.message || issue.description || '');
+        const repairBtn = itemId
+            ? `<button class="btn btn-secondary btn-sm" style="margin-left:8px;flex-shrink:0" onclick="window.__app.repairItemHistory('${escHtml(projectId)}','${escHtml(itemId)}',false)">Repair</button>
+         <button class="btn btn-ghost btn-sm" style="flex-shrink:0" onclick="window.__app.repairItemHistory('${escHtml(projectId)}','${escHtml(itemId)}',true)" title="Preview without applying">Dry Run</button>`
+            : '';
+        return `<div class="health-issue-item" style="display:flex;align-items:center;gap:4px;flex-wrap:wrap">
+      <span style="flex:1">⚠ ${msg}</span>${repairBtn}</div>`;
+    }
+    return `<div class="health-issue-item">⚠ ${msg}</div>`;
+}
+export async function repairItemHistory(projectId, itemId, dryRun) {
+    try {
+        const data = await api('POST', `/projects/${projectId}/pm/items/${encodeURIComponent(itemId)}/history-repair`, { dryRun });
+        if (dryRun) {
+            toast(`Dry run for ${itemId}: ${data.message || JSON.stringify(data)}`, 'info');
+        }
+        else {
+            toast(`History repaired for ${itemId}`, 'success');
+        }
+    }
+    catch (err) {
+        toast(`Repair failed: ${err instanceof Error ? err.message : String(err)}`, 'error');
+    }
+}
+export async function renderHealthView() {
+    const el = document.getElementById('content-health');
+    if (!el)
+        return;
+    if (!state.currentProject) {
+        el.innerHTML = '<div class="empty-state"><div class="empty-state-text">No project selected</div></div>';
+        return;
+    }
+    const projectId = state.currentProject.id;
+    el.innerHTML = `
+    <div class="page-header">
+      <div><div class="page-title">Project Health</div><div class="page-subtitle">${escHtml(state.currentProject.name)}</div></div>
+      <div class="page-actions"><button class="btn btn-secondary btn-sm" onclick="window.__app.renderHealthView()">↺ Refresh</button></div>
+    </div>
+    <div id="health-content"><div class="loading-state"><div class="loading-spinner"></div></div></div>`;
+    try {
+        const data = await api('GET', `/projects/${projectId}/pm/health`);
+        const health = data.health || data;
+        const score = health.score !== undefined ? health.score : null;
+        const issues = health.issues || [];
+        let scoreColor = '#4ade80';
+        if (score !== null) {
+            if (score < 50)
+                scoreColor = '#f87171';
+            else if (score < 80)
+                scoreColor = '#facc15';
+        }
+        const contentEl = document.getElementById('health-content');
+        if (!contentEl)
+            return;
+        contentEl.innerHTML = `
+      ${score !== null ? `
+        <div class="card" style="margin-bottom:16px">
+          <div class="health-score-display">
+            <div class="health-score-number" style="color:${scoreColor}">${score}</div>
+            <div class="health-score-label">Health Score / 100</div>
+          </div>
+        </div>` : ''}
+      <div class="card">
+        <div class="card-header">
+          <div class="card-title">Issues ${issues.length > 0 ? `(${issues.length})` : ''}</div>
+        </div>
+        <div class="card-body">
+          ${issues.length === 0
+            ? '<div style="color:var(--status-closed);font-size:13px">✓ No issues found — project looks healthy!</div>'
+            : issues.map((i) => renderIssueRow(i, projectId)).join('')}
+        </div>
+      </div>
+      ${health.summary ? `
+        <div class="card" style="margin-top:16px">
+          <div class="card-header"><div class="card-title">Summary</div></div>
+          <div class="card-body"><div class="item-detail-desc">${escHtml(health.summary)}</div></div>
+        </div>` : ''}`;
+    }
+    catch (err) {
+        const contentEl = document.getElementById('health-content');
+        if (contentEl)
+            contentEl.innerHTML = `<div class="empty-state"><div class="empty-state-text">Error: ${escHtml(err instanceof Error ? err.message : String(err))}</div></div>`;
+    }
+}
+//# sourceMappingURL=health.js.map

package/public/src/views/health.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"health.js","sourceRoot":"","sources":["health.ts"],"names":[],"mappings":"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"}

package/public/src/views/health.ts

@@ -0,0 +1,102 @@
+// ═══════════════════════════════════════════════════════════════
+// HEALTH VIEW
+// ═══════════════════════════════════════════════════════════════
+import { state } from '../state.js';
+import { api } from '../api.js';
+import { escHtml } from '../utils.js';
+import { toast } from '../components/toast.js';
+
+// Detect item IDs mentioned in a history-drift issue message.
+function extractItemIdFromIssue(msg: string): string | null {
+  // Common patterns: "history drift for ABC-123", "ABC-123 has history drift", etc.
+  const match = msg.match(/\b([A-Z][A-Z0-9]+-\d+)\b/);
+  return match ? match[1] : null;
+}
+
+function isHistoryDriftIssue(issue: any): boolean {
+  const msg: string = (issue.message || issue.description || issue.type || '').toLowerCase();
+  return msg.includes('history') && (msg.includes('drift') || msg.includes('repair') || msg.includes('mismatch'));
+}
+
+function renderIssueRow(issue: any, projectId: string): string {
+  const msg = escHtml(issue.message || issue.description || String(issue));
+  if (isHistoryDriftIssue(issue)) {
+    const itemId = extractItemIdFromIssue(issue.message || issue.description || '');
+    const repairBtn = itemId
+      ? `<button class="btn btn-secondary btn-sm" style="margin-left:8px;flex-shrink:0" onclick="window.__app.repairItemHistory('${escHtml(projectId)}','${escHtml(itemId)}',false)">Repair</button>
+         <button class="btn btn-ghost btn-sm" style="flex-shrink:0" onclick="window.__app.repairItemHistory('${escHtml(projectId)}','${escHtml(itemId)}',true)" title="Preview without applying">Dry Run</button>`
+      : '';
+    return `<div class="health-issue-item" style="display:flex;align-items:center;gap:4px;flex-wrap:wrap">
+      <span style="flex:1">⚠ ${msg}</span>${repairBtn}</div>`;
+  }
+  return `<div class="health-issue-item">⚠ ${msg}</div>`;
+}
+
+export async function repairItemHistory(projectId: string, itemId: string, dryRun: boolean): Promise<void> {
+  try {
+    const data = await api('POST', `/projects/${projectId}/pm/items/${encodeURIComponent(itemId)}/history-repair`, { dryRun });
+    if (dryRun) {
+      toast(`Dry run for ${itemId}: ${(data as any).message || JSON.stringify(data)}`, 'info');
+    } else {
+      toast(`History repaired for ${itemId}`, 'success');
+    }
+  } catch(err: unknown) {
+    toast(`Repair failed: ${err instanceof Error ? err.message : String(err)}`, 'error');
+  }
+}
+
+export async function renderHealthView(): Promise<void> {
+  const el = document.getElementById('content-health');
+  if (!el) return;
+  if (!state.currentProject) { el.innerHTML = '<div class="empty-state"><div class="empty-state-text">No project selected</div></div>'; return; }
+  const projectId = state.currentProject.id;
+  el.innerHTML = `
+    <div class="page-header">
+      <div><div class="page-title">Project Health</div><div class="page-subtitle">${escHtml(state.currentProject.name)}</div></div>
+      <div class="page-actions"><button class="btn btn-secondary btn-sm" onclick="window.__app.renderHealthView()">↺ Refresh</button></div>
+    </div>
+    <div id="health-content"><div class="loading-state"><div class="loading-spinner"></div></div></div>`;
+
+  try {
+    const data = await api('GET',`/projects/${projectId}/pm/health`);
+    const health = (data as any).health || data;
+    const score = health.score !== undefined ? health.score : null;
+    const issues = health.issues || [];
+
+    let scoreColor = '#4ade80';
+    if (score !== null) {
+      if (score < 50) scoreColor = '#f87171';
+      else if (score < 80) scoreColor = '#facc15';
+    }
+
+    const contentEl = document.getElementById('health-content');
+    if (!contentEl) return;
+    contentEl.innerHTML = `
+      ${score !== null ? `
+        <div class="card" style="margin-bottom:16px">
+          <div class="health-score-display">
+            <div class="health-score-number" style="color:${scoreColor}">${score}</div>
+            <div class="health-score-label">Health Score / 100</div>
+          </div>
+        </div>` : ''}
+      <div class="card">
+        <div class="card-header">
+          <div class="card-title">Issues ${issues.length > 0 ? `(${issues.length})` : ''}</div>
+        </div>
+        <div class="card-body">
+          ${issues.length === 0
+            ? '<div style="color:var(--status-closed);font-size:13px">✓ No issues found — project looks healthy!</div>'
+            : issues.map((i: any) => renderIssueRow(i, projectId)).join('')
+          }
+        </div>
+      </div>
+      ${health.summary ? `
+        <div class="card" style="margin-top:16px">
+          <div class="card-header"><div class="card-title">Summary</div></div>
+          <div class="card-body"><div class="item-detail-desc">${escHtml(health.summary)}</div></div>
+        </div>` : ''}`;
+  } catch(err: unknown) {
+    const contentEl = document.getElementById('health-content');
+    if (contentEl) contentEl.innerHTML = `<div class="empty-state"><div class="empty-state-text">Error: ${escHtml(err instanceof Error ? err.message : String(err))}</div></div>`;
+  }
+}