@unbrained/pm-web 1.0.0

package/public/src/views/config.ts

@@ -0,0 +1,344 @@
+// ═══════════════════════════════════════════════════════════════
+// CONFIG VIEW — Project configuration editor
+// ═══════════════════════════════════════════════════════════════
+import { state } from '../state.js';
+import { api } from '../api.js';
+import { escHtml } from '../utils.js';
+import { toast } from '../components/toast.js';
+
+interface ConfigKey {
+  key: string;
+  aliases: string[];
+  value_kind: 'string' | 'string_array' | 'enum' | 'object';
+  set_flags: string[];
+  summary: string;
+  value: unknown;
+}
+
+interface ConfigResponse {
+  scope: string;
+  keys: ConfigKey[];
+  count: number;
+  settings_path?: string;
+  changed?: boolean;
+}
+
+export async function renderConfigView(): Promise<void> {
+  const el = document.getElementById('content-config');
+  if (!el) return;
+  if (!state.currentProject) {
+    el.innerHTML = '<div class="empty-state"><div class="empty-state-text">No project selected</div></div>';
+    return;
+  }
+
+  el.innerHTML = `
+    <div class="page-header">
+      <div>
+        <div class="page-title">Project Config</div>
+        <div class="page-subtitle">Configure pm CLI settings for this project</div>
+      </div>
+      <div class="page-actions">
+        <button class="btn btn-secondary btn-sm" onclick="window.__app.renderConfigView()">↺ Refresh</button>
+      </div>
+    </div>
+    <div class="loading-state"><div class="loading-spinner"></div></div>`;
+
+  try {
+    const data = await api('GET', `/projects/${state.currentProject.id}/pm/config`) as ConfigResponse;
+    renderConfigData(el, data);
+  } catch (err: unknown) {
+    el.innerHTML = `
+      <div class="page-header">
+        <div>
+          <div class="page-title">Project Config</div>
+          <div class="page-subtitle">Configure pm CLI settings for this project</div>
+        </div>
+      </div>
+      <div class="empty-state">
+        <div class="empty-state-text">Failed to load config</div>
+        <div class="empty-state-sub">${escHtml(err instanceof Error ? err.message : String(err))}</div>
+      </div>`;
+  }
+}
+
+function renderConfigData(el: HTMLElement, data: ConfigResponse): void {
+  const { keys } = data;
+
+  // Group keys into categories
+  const simpleKeys = keys.filter(k => k.value_kind === 'string' || k.value_kind === 'enum');
+  const arrayKeys = keys.filter(k => k.value_kind === 'string_array');
+  const objectKeys = keys.filter(k => k.value_kind === 'object');
+
+  function renderArrayField(k: ConfigKey): string {
+    const arr = Array.isArray(k.value) ? k.value as string[] : [];
+    const items = arr.map((item, i) => `
+      <div class="config-array-item" id="config-arr-${escHtml(k.key)}-${i}" style="display:flex;align-items:center;gap:8px;margin-bottom:6px">
+        <input class="form-input" style="flex:1" type="text" value="${escHtml(item)}" data-key="${escHtml(k.key)}" data-idx="${i}">
+        <button class="btn btn-danger btn-sm" style="padding:4px 8px;flex-shrink:0" onclick="window.__app.configRemoveArrayItem('${escHtml(k.key)}',${i})">✕</button>
+      </div>`).join('');
+    return `
+      <div class="card" style="margin-bottom:16px">
+        <div class="card-header">
+          <div class="card-title">${escHtml(k.key.replace(/_/g,' '))}</div>
+          <div style="font-size:11px;color:var(--text-muted)">${escHtml(k.summary)}</div>
+        </div>
+        <div class="card-body">
+          <div id="config-arr-${escHtml(k.key)}-container">${items || '<div style="color:var(--text-muted);font-size:13px;margin-bottom:8px">No items yet</div>'}</div>
+          <div style="display:flex;gap:8px;margin-top:8px">
+            <input class="form-input" id="config-arr-${escHtml(k.key)}-new" type="text" placeholder="Add item…" style="flex:1"
+              onkeydown="if(event.key==='Enter'){event.preventDefault();window.__app.configAddArrayItem('${escHtml(k.key)}');}">
+            <button class="btn btn-secondary btn-sm" onclick="window.__app.configAddArrayItem('${escHtml(k.key)}')">Add</button>
+            <button class="btn btn-primary btn-sm" onclick="window.__app.configSaveArray('${escHtml(k.key)}')">Save</button>
+          </div>
+        </div>
+      </div>`;
+  }
+
+  function renderSimpleField(k: ConfigKey): string {
+    const val = k.value !== null && k.value !== undefined ? String(k.value) : '';
+    return `
+      <div class="form-group">
+        <label class="form-label" title="${escHtml(k.summary)}">${escHtml(k.key.replace(/_/g,' '))}</label>
+        <div style="display:flex;gap:8px;align-items:center">
+          <input class="form-input" id="config-field-${escHtml(k.key)}" type="text" value="${escHtml(val)}"
+            placeholder="${escHtml(k.summary)}" style="flex:1"
+            onkeydown="if(event.key==='Enter'){event.preventDefault();window.__app.configSaveSimple('${escHtml(k.key)}');}">
+          <button class="btn btn-primary btn-sm" onclick="window.__app.configSaveSimple('${escHtml(k.key)}')">Save</button>
+        </div>
+        <div style="font-size:11px;color:var(--text-muted);margin-top:3px">${escHtml(k.summary)}</div>
+      </div>`;
+  }
+
+  function renderObjectField(k: ConfigKey): string {
+    const val = k.value !== null && k.value !== undefined ? JSON.stringify(k.value, null, 2) : '{}';
+    return `
+      <div class="form-group">
+        <label class="form-label">${escHtml(k.key.replace(/_/g,' '))}</label>
+        <div style="font-size:11px;color:var(--text-muted);margin-bottom:4px">${escHtml(k.summary)}</div>
+        <textarea class="form-input" id="config-field-${escHtml(k.key)}" style="font-family:monospace;font-size:12px;min-height:120px;resize:vertical">${escHtml(val)}</textarea>
+        <div style="margin-top:6px">
+          <button class="btn btn-primary btn-sm" onclick="window.__app.configSaveObject('${escHtml(k.key)}')">Save</button>
+        </div>
+      </div>`;
+  }
+
+  el.innerHTML = `
+    <div class="page-header">
+      <div>
+        <div class="page-title">Project Config</div>
+        <div class="page-subtitle">Configure pm CLI settings for ${escHtml(state.currentProject?.name || '')}</div>
+      </div>
+      <div class="page-actions">
+        <button class="btn btn-secondary btn-sm" onclick="window.__app.renderConfigView()">↺ Refresh</button>
+      </div>
+    </div>
+
+    ${arrayKeys.length > 0 ? `
+    <div style="margin-bottom:24px">
+      <div style="font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px">List Settings</div>
+      ${arrayKeys.map(renderArrayField).join('')}
+    </div>` : ''}
+
+    ${simpleKeys.length > 0 ? `
+    <div class="card" style="margin-bottom:24px">
+      <div class="card-header"><div class="card-title">Simple Settings</div></div>
+      <div class="card-body">
+        ${simpleKeys.map(renderSimpleField).join('')}
+      </div>
+    </div>` : ''}
+
+    ${objectKeys.length > 0 ? `
+    <div class="card" style="margin-bottom:24px">
+      <div class="card-header"><div class="card-title">Object Settings</div></div>
+      <div class="card-body">
+        ${objectKeys.map(renderObjectField).join('')}
+      </div>
+    </div>` : ''}
+
+    ${data.settings_path ? `<div style="font-size:11px;color:var(--text-muted);margin-top:8px">Settings path: <code style="font-family:monospace;background:var(--bg-input);padding:1px 4px;border-radius:3px">${escHtml(data.settings_path)}</code></div>` : ''}
+
+    <div class="card" style="margin-top:24px">
+      <div class="card-header">
+        <div class="card-title">Custom Schema Types</div>
+        <div style="font-size:11px;color:var(--text-muted)">Add a new item type using <code style="font-family:monospace">pm schema add-type</code></div>
+      </div>
+      <div class="card-body">
+        <div class="two-col">
+          <div class="form-group">
+            <label class="form-label">Type Name *</label>
+            <input class="form-input" id="schema-type-name" type="text" placeholder="e.g. Bug, Story, Spike">
+          </div>
+          <div class="form-group">
+            <label class="form-label">Default Status</label>
+            <input class="form-input" id="schema-type-default-status" type="text" placeholder="e.g. open">
+          </div>
+        </div>
+        <div class="form-group">
+          <label class="form-label">Description</label>
+          <input class="form-input" id="schema-type-description" type="text" placeholder="What is this type for?">
+        </div>
+        <div class="two-col">
+          <div class="form-group">
+            <label class="form-label">Folder</label>
+            <input class="form-input" id="schema-type-folder" type="text" placeholder="Subfolder for this type (optional)">
+          </div>
+          <div class="form-group">
+            <label class="form-label">Aliases (comma-separated)</label>
+            <input class="form-input" id="schema-type-aliases" type="text" placeholder="e.g. b, defect">
+          </div>
+        </div>
+        <div id="schema-type-error" style="display:none;color:var(--status-blocked);font-size:13px;margin-bottom:8px"></div>
+        <button class="btn btn-primary btn-sm" onclick="window.__app.addSchemaType()">Add Custom Type</button>
+      </div>
+    </div>
+  `;
+
+  // Store the current keys in DOM for mutation use
+  (el as any).__configKeys = keys;
+}
+
+// ─── Array field helpers ───────────────────────────────────────
+
+export function configAddArrayItem(key: string): void {
+  const inputEl = document.getElementById(`config-arr-${key}-new`) as HTMLInputElement | null;
+  const val = inputEl?.value?.trim();
+  if (!val) return;
+
+  const container = document.getElementById(`config-arr-${key}-container`);
+  if (!container) return;
+
+  // Count existing items
+  const existing = container.querySelectorAll('[data-key]');
+  const idx = existing.length;
+
+  // Remove "no items" message if present
+  const noItems = container.querySelector('div');
+  if (noItems && noItems.textContent?.includes('No items yet')) noItems.remove();
+
+  const div = document.createElement('div');
+  div.className = 'config-array-item';
+  div.id = `config-arr-${key}-${idx}`;
+  div.style.cssText = 'display:flex;align-items:center;gap:8px;margin-bottom:6px';
+  div.innerHTML = `
+    <input class="form-input" style="flex:1" type="text" value="${escHtml(val)}" data-key="${escHtml(key)}" data-idx="${idx}">
+    <button class="btn btn-danger btn-sm" style="padding:4px 8px;flex-shrink:0" onclick="window.__app.configRemoveArrayItem('${escHtml(key)}',${idx})">✕</button>
+  `;
+  container.appendChild(div);
+  if (inputEl) inputEl.value = '';
+}
+
+export function configRemoveArrayItem(key: string, idx: number): void {
+  const container = document.getElementById(`config-arr-${key}-container`);
+  if (!container) return;
+
+  const items = container.querySelectorAll('[data-key]');
+  if (items[idx]) {
+    (items[idx] as HTMLElement).closest('.config-array-item')?.remove();
+  }
+
+  // Show "no items" if empty
+  if (container.querySelectorAll('[data-key]').length === 0) {
+    container.innerHTML = '<div style="color:var(--text-muted);font-size:13px;margin-bottom:8px">No items yet</div>';
+  }
+}
+
+export async function configSaveArray(key: string): Promise<void> {
+  const pid = state.currentProject?.id;
+  if (!pid) return;
+
+  const container = document.getElementById(`config-arr-${key}-container`);
+  if (!container) return;
+
+  const inputs = container.querySelectorAll('input[data-key]');
+  const values = Array.from(inputs).map(inp => (inp as HTMLInputElement).value.trim()).filter(Boolean);
+
+  try {
+    await api('PATCH', `/projects/${pid}/pm/config/${encodeURIComponent(key)}`, { value: values });
+    toast(`Saved ${key.replace(/_/g, ' ')}`, 'success');
+  } catch (err: unknown) {
+    toast(`Error: ${err instanceof Error ? err.message : String(err)}`, 'error');
+  }
+}
+
+export async function configSaveSimple(key: string): Promise<void> {
+  const pid = state.currentProject?.id;
+  if (!pid) return;
+
+  const inputEl = document.getElementById(`config-field-${key}`) as HTMLInputElement | null;
+  const value = inputEl?.value?.trim() ?? '';
+
+  try {
+    await api('PATCH', `/projects/${pid}/pm/config/${encodeURIComponent(key)}`, { value });
+    toast(`Saved ${key.replace(/_/g, ' ')}`, 'success');
+  } catch (err: unknown) {
+    toast(`Error: ${err instanceof Error ? err.message : String(err)}`, 'error');
+  }
+}
+
+export async function addSchemaType(): Promise<void> {
+  const pid = state.currentProject?.id;
+  if (!pid) return;
+
+  const nameEl = document.getElementById('schema-type-name') as HTMLInputElement | null;
+  const descEl = document.getElementById('schema-type-description') as HTMLInputElement | null;
+  const defaultStatusEl = document.getElementById('schema-type-default-status') as HTMLInputElement | null;
+  const folderEl = document.getElementById('schema-type-folder') as HTMLInputElement | null;
+  const aliasesEl = document.getElementById('schema-type-aliases') as HTMLInputElement | null;
+  const errEl = document.getElementById('schema-type-error') as HTMLElement | null;
+
+  const name = nameEl?.value?.trim() ?? '';
+  if (!name) {
+    if (errEl) { errEl.textContent = 'Type name is required'; errEl.style.display = 'block'; }
+    return;
+  }
+  if (errEl) errEl.style.display = 'none';
+
+  const description = descEl?.value?.trim() ?? '';
+  const defaultStatus = defaultStatusEl?.value?.trim() ?? '';
+  const folder = folderEl?.value?.trim() ?? '';
+  const aliasesRaw = aliasesEl?.value?.trim() ?? '';
+  const aliases = aliasesRaw ? aliasesRaw.split(',').map(a => a.trim()).filter(Boolean) : [];
+
+  try {
+    await api('POST', `/projects/${pid}/pm/schema/add-type`, {
+      name,
+      ...(description ? { description } : {}),
+      ...(defaultStatus ? { defaultStatus } : {}),
+      ...(folder ? { folder } : {}),
+      ...(aliases.length ? { aliases } : {}),
+    });
+    toast(`Custom type "${name}" added`, 'success');
+    if (nameEl) nameEl.value = '';
+    if (descEl) descEl.value = '';
+    if (defaultStatusEl) defaultStatusEl.value = '';
+    if (folderEl) folderEl.value = '';
+    if (aliasesEl) aliasesEl.value = '';
+  } catch (err: unknown) {
+    const msg = err instanceof Error ? err.message : String(err);
+    if (errEl) { errEl.textContent = msg; errEl.style.display = 'block'; }
+    toast(`Error: ${msg}`, 'error');
+  }
+}
+
+export async function configSaveObject(key: string): Promise<void> {
+  const pid = state.currentProject?.id;
+  if (!pid) return;
+
+  const textEl = document.getElementById(`config-field-${key}`) as HTMLTextAreaElement | null;
+  const raw = textEl?.value?.trim() ?? '';
+
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(raw);
+  } catch {
+    toast('Invalid JSON — please check the format', 'error');
+    return;
+  }
+
+  try {
+    await api('PATCH', `/projects/${pid}/pm/config/${encodeURIComponent(key)}`, { value: parsed });
+    toast(`Saved ${key.replace(/_/g, ' ')}`, 'success');
+  } catch (err: unknown) {
+    toast(`Error: ${err instanceof Error ? err.message : String(err)}`, 'error');
+  }
+}

package/public/src/views/context.js

@@ -0,0 +1,98 @@
+// ═══════════════════════════════════════════════════════════════
+// CONTEXT VIEW
+// ═══════════════════════════════════════════════════════════════
+import { state } from '../state.js';
+import { api } from '../api.js';
+import { escHtml, relTime, typeIcon, statusBadge } from '../utils.js';
+import { TYPE_ICONS } from '../constants.js';
+export async function renderContextView() {
+    const el = document.getElementById('content-context');
+    if (!el)
+        return;
+    if (!state.currentProject) {
+        el.innerHTML = '<div class="empty-state"><div class="empty-state-text">No project selected</div></div>';
+        return;
+    }
+    el.innerHTML = `
+    <div class="page-header">
+      <div><div class="page-title">Context</div><div class="page-subtitle">Project snapshot for ${escHtml(state.currentProject.name)}</div></div>
+      <div class="page-actions"><button class="btn btn-secondary btn-sm" onclick="window.__app.renderContextView()">↺ Refresh</button></div>
+    </div>
+    <div id="context-content"><div class="loading-state"><div class="loading-spinner"></div></div></div>`;
+    try {
+        const data = await api('GET', `/projects/${state.currentProject.id}/pm/context`);
+        const ctx = data.context || data;
+        const contentEl = document.getElementById('context-content');
+        if (contentEl)
+            contentEl.innerHTML = renderContextData(ctx);
+    }
+    catch (err) {
+        const contentEl = document.getElementById('context-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>`;
+    }
+}
+function renderContextData(ctx) {
+    if (!ctx || typeof ctx !== 'object') {
+        return `<div class="card"><div class="card-body"><div class="context-block">${escHtml(JSON.stringify(ctx, null, 2))}</div></div></div>`;
+    }
+    const sections = [];
+    if (ctx.summary || ctx.description) {
+        sections.push(`<div class="context-section">
+      <div class="context-section-title">◈ Summary</div>
+      <div class="item-detail-desc">${escHtml(ctx.summary || ctx.description)}</div>
+    </div>`);
+    }
+    const activeItems = ctx.activeItems || ctx.inProgress || ctx.open || [];
+    if (activeItems.length > 0) {
+        sections.push(`<div class="context-section">
+      <div class="context-section-title">⚡ Active Items (${activeItems.length})</div>
+      <div class="card"><div class="card-body">
+        ${activeItems.map((item) => `
+          <div class="context-item-row">
+            ${typeIcon(item.type)} <span class="mono" style="font-size:11px;color:var(--text-muted)">${escHtml(item.id || '')}</span>
+            <span style="flex:1">${escHtml(item.title || '')}</span>
+            ${statusBadge(item.status || 'open')}
+          </div>`).join('')}
+      </div></div>
+    </div>`);
+    }
+    const blockedItems = ctx.blockedItems || ctx.blocked || [];
+    if (blockedItems.length > 0) {
+        sections.push(`<div class="context-section">
+      <div class="context-section-title" style="color:var(--status-blocked)">⛔ Blocked (${blockedItems.length})</div>
+      <div class="card"><div class="card-body">
+        ${blockedItems.map((item) => `
+          <div class="context-item-row">
+            ${typeIcon(item.type)} <span class="mono" style="font-size:11px;color:var(--text-muted)">${escHtml(item.id || '')}</span>
+            <span style="flex:1">${escHtml(item.title || '')}</span>
+            ${statusBadge('blocked')}
+          </div>`).join('')}
+      </div></div>
+    </div>`);
+    }
+    const recentActivity = ctx.recentActivity || ctx.activity || [];
+    if (recentActivity.length > 0) {
+        sections.push(`<div class="context-section">
+      <div class="context-section-title">◎ Recent Activity</div>
+      <div class="card"><div class="card-body">
+        ${recentActivity.slice(0, 10).map((a) => `
+          <div class="activity-item">
+            <div class="activity-icon">${TYPE_ICONS[a.type] || '◎'}</div>
+            <div class="activity-body">
+              <div class="activity-desc">${escHtml(a.message || a.title || a.action || '')}</div>
+              <div class="activity-time">${relTime(a.timestamp || a.created_at)}</div>
+            </div>
+          </div>`).join('')}
+      </div></div>
+    </div>`);
+    }
+    if (sections.length === 0) {
+        sections.push(`<div class="card"><div class="card-body">
+      <div class="context-section-title">Raw Context</div>
+      <div class="context-block">${escHtml(JSON.stringify(ctx, null, 2))}</div>
+    </div></div>`);
+    }
+    return sections.join('');
+}
+//# sourceMappingURL=context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["context.ts"],"names":[],"mappings":"AAAA,kEAAkE;AAClE,eAAe;AACf,kEAAkE;AAClE,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AACtE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,MAAM,CAAC,KAAK,UAAU,iBAAiB;IACrC,MAAM,EAAE,GAAG,QAAQ,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC;IACtD,IAAI,CAAC,EAAE;QAAE,OAAO;IAChB,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;QAAC,EAAE,CAAC,SAAS,GAAG,wFAAwF,CAAC;QAAC,OAAO;IAAC,CAAC;IAC/I,EAAE,CAAC,SAAS,GAAG;;kGAEiF,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC;;;yGAG3B,CAAC;IAExG,IAAI,CAAC;QACH,MAAM,IAAI,GAAG,MAAM,GAAG,CAAC,KAAK,EAAC,aAAa,KAAK,CAAC,cAAc,CAAC,EAAE,aAAa,CAAC,CAAC;QAChF,MAAM,GAAG,GAAI,IAAY,CAAC,OAAO,IAAI,IAAI,CAAC;QAC1C,MAAM,SAAS,GAAG,QAAQ,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC;QAC7D,IAAI,SAAS;YAAE,SAAS,CAAC,SAAS,GAAG,iBAAiB,CAAC,GAAG,CAAC,CAAC;IAC9D,CAAC;IAAC,OAAM,GAAY,EAAE,CAAC;QACrB,MAAM,SAAS,GAAG,QAAQ,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC;QAC7D,IAAI,SAAS;YAAE,SAAS,CAAC,SAAS,GAAG,iEAAiE,OAAO,CAAC,GAAG,YAAY,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,cAAc,CAAC;IAChL,CAAC;AACH,CAAC;AAED,SAAS,iBAAiB,CAAC,GAAQ;IACjC,IAAI,CAAC,GAAG,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;QACpC,OAAO,uEAAuE,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,EAAC,IAAI,EAAC,CAAC,CAAC,CAAC,oBAAoB,CAAC;IACxI,CAAC;IAED,MAAM,QAAQ,GAAa,EAAE,CAAC;IAE9B,IAAI,GAAG,CAAC,OAAO,IAAI,GAAG,CAAC,WAAW,EAAE,CAAC;QACnC,QAAQ,CAAC,IAAI,CAAC;;sCAEoB,OAAO,CAAC,GAAG,CAAC,OAAO,IAAE,GAAG,CAAC,WAAW,CAAC;WAChE,CAAC,CAAC;IACX,CAAC;IAED,MAAM,WAAW,GAAG,GAAG,CAAC,WAAW,IAAI,GAAG,CAAC,UAAU,IAAI,GAAG,CAAC,IAAI,IAAI,EAAE,CAAC;IACxE,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QAC3B,QAAQ,CAAC,IAAI,CAAC;2DACyC,WAAW,CAAC,MAAM;;UAEnE,WAAW,CAAC,GAAG,CAAC,CAAC,IAAS,EAAC,EAAE,CAAA;;cAEzB,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,sEAAsE,OAAO,CAAC,IAAI,CAAC,EAAE,IAAE,EAAE,CAAC;mCACxF,OAAO,CAAC,IAAI,CAAC,KAAK,IAAE,EAAE,CAAC;cAC5C,WAAW,CAAC,IAAI,CAAC,MAAM,IAAE,MAAM,CAAC;iBAC7B,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;;WAEhB,CAAC,CAAC;IACX,CAAC;IAED,MAAM,YAAY,GAAG,GAAG,CAAC,YAAY,IAAI,GAAG,CAAC,OAAO,IAAI,EAAE,CAAC;IAC3D,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QAC5B,QAAQ,CAAC,IAAI,CAAC;0FACwE,YAAY,CAAC,MAAM;;UAEnG,YAAY,CAAC,GAAG,CAAC,CAAC,IAAS,EAAC,EAAE,CAAA;;cAE1B,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,sEAAsE,OAAO,CAAC,IAAI,CAAC,EAAE,IAAE,EAAE,CAAC;mCACxF,OAAO,CAAC,IAAI,CAAC,KAAK,IAAE,EAAE,CAAC;cAC5C,WAAW,CAAC,SAAS,CAAC;iBACnB,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;;WAEhB,CAAC,CAAC;IACX,CAAC;IAED,MAAM,cAAc,GAAG,GAAG,CAAC,cAAc,IAAI,GAAG,CAAC,QAAQ,IAAI,EAAE,CAAC;IAChE,IAAI,cAAc,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QAC9B,QAAQ,CAAC,IAAI,CAAC;;;UAGR,cAAc,CAAC,KAAK,CAAC,CAAC,EAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAM,EAAC,EAAE,CAAA;;yCAEV,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,IAAE,GAAG;;2CAErB,OAAO,CAAC,CAAC,CAAC,OAAO,IAAE,CAAC,CAAC,KAAK,IAAE,CAAC,CAAC,MAAM,IAAE,EAAE,CAAC;2CACzC,OAAO,CAAC,CAAC,CAAC,SAAS,IAAE,CAAC,CAAC,UAAU,CAAC;;iBAE5D,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;;WAEhB,CAAC,CAAC;IACX,CAAC;IAED,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC1B,QAAQ,CAAC,IAAI,CAAC;;mCAEiB,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,EAAC,IAAI,EAAC,CAAC,CAAC,CAAC;iBACrD,CAAC,CAAC;IACjB,CAAC;IAED,OAAO,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3B,CAAC"}

package/public/src/views/context.ts

@@ -0,0 +1,100 @@
+// ═══════════════════════════════════════════════════════════════
+// CONTEXT VIEW
+// ═══════════════════════════════════════════════════════════════
+import { state } from '../state.js';
+import { api } from '../api.js';
+import { escHtml, relTime, typeIcon, statusBadge } from '../utils.js';
+import { TYPE_ICONS } from '../constants.js';
+
+export async function renderContextView(): Promise<void> {
+  const el = document.getElementById('content-context');
+  if (!el) return;
+  if (!state.currentProject) { el.innerHTML = '<div class="empty-state"><div class="empty-state-text">No project selected</div></div>'; return; }
+  el.innerHTML = `
+    <div class="page-header">
+      <div><div class="page-title">Context</div><div class="page-subtitle">Project snapshot for ${escHtml(state.currentProject.name)}</div></div>
+      <div class="page-actions"><button class="btn btn-secondary btn-sm" onclick="window.__app.renderContextView()">↺ Refresh</button></div>
+    </div>
+    <div id="context-content"><div class="loading-state"><div class="loading-spinner"></div></div></div>`;
+
+  try {
+    const data = await api('GET',`/projects/${state.currentProject.id}/pm/context`);
+    const ctx = (data as any).context || data;
+    const contentEl = document.getElementById('context-content');
+    if (contentEl) contentEl.innerHTML = renderContextData(ctx);
+  } catch(err: unknown) {
+    const contentEl = document.getElementById('context-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>`;
+  }
+}
+
+function renderContextData(ctx: any): string {
+  if (!ctx || typeof ctx !== 'object') {
+    return `<div class="card"><div class="card-body"><div class="context-block">${escHtml(JSON.stringify(ctx,null,2))}</div></div></div>`;
+  }
+
+  const sections: string[] = [];
+
+  if (ctx.summary || ctx.description) {
+    sections.push(`<div class="context-section">
+      <div class="context-section-title">◈ Summary</div>
+      <div class="item-detail-desc">${escHtml(ctx.summary||ctx.description)}</div>
+    </div>`);
+  }
+
+  const activeItems = ctx.activeItems || ctx.inProgress || ctx.open || [];
+  if (activeItems.length > 0) {
+    sections.push(`<div class="context-section">
+      <div class="context-section-title">⚡ Active Items (${activeItems.length})</div>
+      <div class="card"><div class="card-body">
+        ${activeItems.map((item: any)=>`
+          <div class="context-item-row">
+            ${typeIcon(item.type)} <span class="mono" style="font-size:11px;color:var(--text-muted)">${escHtml(item.id||'')}</span>
+            <span style="flex:1">${escHtml(item.title||'')}</span>
+            ${statusBadge(item.status||'open')}
+          </div>`).join('')}
+      </div></div>
+    </div>`);
+  }
+
+  const blockedItems = ctx.blockedItems || ctx.blocked || [];
+  if (blockedItems.length > 0) {
+    sections.push(`<div class="context-section">
+      <div class="context-section-title" style="color:var(--status-blocked)">⛔ Blocked (${blockedItems.length})</div>
+      <div class="card"><div class="card-body">
+        ${blockedItems.map((item: any)=>`
+          <div class="context-item-row">
+            ${typeIcon(item.type)} <span class="mono" style="font-size:11px;color:var(--text-muted)">${escHtml(item.id||'')}</span>
+            <span style="flex:1">${escHtml(item.title||'')}</span>
+            ${statusBadge('blocked')}
+          </div>`).join('')}
+      </div></div>
+    </div>`);
+  }
+
+  const recentActivity = ctx.recentActivity || ctx.activity || [];
+  if (recentActivity.length > 0) {
+    sections.push(`<div class="context-section">
+      <div class="context-section-title">◎ Recent Activity</div>
+      <div class="card"><div class="card-body">
+        ${recentActivity.slice(0,10).map((a: any)=>`
+          <div class="activity-item">
+            <div class="activity-icon">${TYPE_ICONS[a.type]||'◎'}</div>
+            <div class="activity-body">
+              <div class="activity-desc">${escHtml(a.message||a.title||a.action||'')}</div>
+              <div class="activity-time">${relTime(a.timestamp||a.created_at)}</div>
+            </div>
+          </div>`).join('')}
+      </div></div>
+    </div>`);
+  }
+
+  if (sections.length === 0) {
+    sections.push(`<div class="card"><div class="card-body">
+      <div class="context-section-title">Raw Context</div>
+      <div class="context-block">${escHtml(JSON.stringify(ctx,null,2))}</div>
+    </div></div>`);
+  }
+
+  return sections.join('');
+}