@unson/brainbase-mcp 0.19.0 → 0.20.0

package/dist/local-web-host.js

@@ -693,6 +693,7 @@ export function createGraphWebModule(context) {
             'graph-own-share.js',
             'graph-projects-view.css',
             'project-workspace.js',
+            'project-overview.js',
             'project-workspace.css',
             'project-graph.js',
             'project-graph-entry.js',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unson/brainbase-mcp",
-  "version": "0.19.0",
+  "version": "0.20.0",
   "description": "Local-first Brainbase judgment OS that lets supported AI agents reuse a user's approved goals, priorities, decisions, and judgment criteria.",
   "type": "module",
   "license": "MIT",
@@ -289,6 +289,7 @@
     },
     "./contracts/foundation/graph-history.sql": "./contracts/foundation/graph-history.sql",
     "./ui/project-workspace": "./ui/project-workspace.js",
+    "./ui/project-overview": "./ui/project-overview.js",
     "./ui/project-graph": "./ui/project-graph.js",
     "./ui/project-workspace.css": "./ui/project-workspace.css",
     "./ui/project-graph-vendor.js": "./ui/project-graph-vendor.js"
@@ -363,5 +364,5 @@
   "engines": {
     "node": ">=20"
   },
-  "gitHead": "7cd7be975882fd1cbc797b7992b27a221f9fc02f"
+  "gitHead": "eae9755b000357391dc4f1244537e8b6bfd7925c"
 }

package/ui/project-overview.js

@@ -0,0 +1,263 @@
+/*
+ * Optional host projection for the first project overview surface.
+ *
+ * This module only renders values supplied by an authorized host. It does not
+ * derive relationships, counts, next actions, or material membership from the
+ * shared Graph payload.
+ */
+
+import { formatDateTime, makeElement, textOrNull } from './graph-view-shared.js';
+import { workspaceNotice } from './workspace-kit.js';
+
+const MATERIAL_STATES = new Set(['ok', 'partial', 'unknown', 'failed', 'unavailable', 'loading']);
+const BODY_STATES = new Set(['retrieved', 'unretrieved', 'unavailable', 'failed', 'unknown']);
+
+const MATERIAL_STATE_LABELS = Object.freeze({
+  ok: '取得済み',
+  partial: '一部取得',
+  unknown: '未確認',
+  failed: '読み取り失敗',
+  unavailable: '未接続',
+  loading: '読み込み中',
+});
+
+const BODY_STATE_LABELS = Object.freeze({
+  retrieved: '本文取得済み',
+  unretrieved: '本文未取得',
+  unavailable: '本文未接続',
+  failed: '本文読取失敗',
+  unknown: '本文状態未確認',
+});
+
+function cleanText(value) {
+  return textOrNull(value);
+}
+
+function normalizeTotal(value) {
+  if (Number.isInteger(value) && value >= 0) return value;
+  if (typeof value === 'string' && /^\d+$/u.test(value)) return Number(value);
+  return null;
+}
+
+function normalizeDate(value) {
+  return cleanText(value);
+}
+
+function normalizeMaterialItem(item) {
+  if (!item || typeof item !== 'object' || Array.isArray(item)) return null;
+  const id = cleanText(item.id);
+  const title = cleanText(item.title) ?? (id ? id : '資料名未確認');
+  const relation = cleanText(item.relation);
+  const source = cleanText(item.source);
+  const bodyState = BODY_STATES.has(item.bodyState) ? item.bodyState : 'unknown';
+  const contentAsOf = normalizeDate(item.contentAsOf);
+  const updatedAt = normalizeDate(item.updatedAt);
+  if (!id && !relation && !source && !contentAsOf && !updatedAt && bodyState === 'unknown' && title === '資料名未確認') return null;
+  return { id, title, relation, source, bodyState, contentAsOf, updatedAt };
+}
+
+function normalizeMaterials(value) {
+  const input = value && typeof value === 'object' && !Array.isArray(value) ? value : {};
+  const state = MATERIAL_STATES.has(input.state) ? input.state : 'unknown';
+  return {
+    state,
+    items: Array.isArray(input.items) ? input.items.map(normalizeMaterialItem).filter(Boolean) : [],
+    total: normalizeTotal(input.total),
+    note: cleanText(input.note),
+  };
+}
+
+function normalizeCheck(item) {
+  if (!item || typeof item !== 'object' || Array.isArray(item)) return null;
+  const id = cleanText(item.id);
+  const title = cleanText(item.title) ?? (id ? id : '確認事項未確認');
+  return {
+    id,
+    title,
+    summary: cleanText(item.summary),
+    recordId: cleanText(item.recordId),
+  };
+}
+
+function normalizeAbout(value) {
+  const input = value && typeof value === 'object' && !Array.isArray(value) ? value : {};
+  return {
+    definition: cleanText(input.definition),
+    owner: cleanText(input.owner),
+    finalApprover: cleanText(input.finalApprover),
+    goal: cleanText(input.goal),
+    source: cleanText(input.source),
+    asOf: normalizeDate(input.asOf),
+  };
+}
+
+/**
+ * Normalize the optional host projection without turning malformed or missing
+ * fields into successful empty data.
+ */
+export function normalizeProjectOverview(value) {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) return null;
+  return {
+    about: normalizeAbout(value.about),
+    checks: Array.isArray(value.checks) ? value.checks.map(normalizeCheck).filter(Boolean) : [],
+    directMaterials: normalizeMaterials(value.directMaterials),
+    relatedMaterials: normalizeMaterials(value.relatedMaterials),
+  };
+}
+
+function displayDate(value) {
+  if (!value) return '未確認';
+  return Number.isNaN(Date.parse(value)) ? '日時未確認' : formatDateTime(value);
+}
+
+function stateLabel(state) {
+  return MATERIAL_STATE_LABELS[state] ?? '未確認';
+}
+
+function renderAbout(doc, about) {
+  const section = makeElement(doc, 'section', {
+    className: 'bb-pkw-overview-section bb-pkw-overview-about',
+    attrs: { 'aria-label': 'このプロジェクトについて' },
+  });
+  section.append(makeElement(doc, 'h3', { text: 'このプロジェクトについて' }));
+  const facts = makeElement(doc, 'dl', { className: 'bb-pkw-overview-facts' });
+  for (const [label, value] of [
+    ['何のプロジェクトか', about.definition],
+    ['責任者', about.owner],
+    ['最終決裁', about.finalApprover],
+    ['現在の目標', about.goal],
+  ]) {
+    const row = makeElement(doc, 'div', { className: 'bb-pkw-overview-fact' });
+    row.append(makeElement(doc, 'dt', { text: label }), makeElement(doc, 'dd', { text: value ?? '未確認' }));
+    facts.append(row);
+  }
+  section.append(facts);
+  const metadata = makeElement(doc, 'p', { className: 'bb-pkw-overview-meta' });
+  metadata.append(
+    makeElement(doc, 'span', { text: `出典: ${about.source ?? '未確認'}` }),
+    makeElement(doc, 'span', { text: `読み取った時点: ${displayDate(about.asOf)}` }),
+  );
+  section.append(metadata);
+  return section;
+}
+
+function renderChecks(doc, checks, actions = {}) {
+  const section = makeElement(doc, 'section', {
+    className: 'bb-pkw-overview-section bb-pkw-overview-checks',
+    attrs: { 'aria-label': '次に確認すること' },
+  });
+  section.append(makeElement(doc, 'h3', { text: '次に確認すること' }));
+  if (checks.length === 0) {
+    section.append(makeElement(doc, 'p', { className: 'bb-pkw-muted', text: '確認事項は未確認です。' }));
+    return section;
+  }
+  const list = makeElement(doc, 'ol', { className: 'bb-pkw-overview-check-list' });
+  for (const check of checks) {
+    const item = makeElement(doc, 'li', { className: 'bb-pkw-overview-check' });
+    // `id` identifies the host-side check; it is not necessarily a Graph ID.
+    // Only an explicit canonical recordId may open the existing Graph detail.
+    const targetId = check.recordId;
+    const title = typeof actions.openGraphEntity === 'function' && targetId
+      ? makeElement(doc, 'button', { className: 'bb-pkw-overview-link', text: check.title, attrs: { type: 'button', 'data-record-id': targetId } })
+      : makeElement(doc, 'strong', { text: check.title });
+    if (typeof actions.openGraphEntity === 'function' && targetId) title.addEventListener('click', () => actions.openGraphEntity(targetId));
+    item.append(title);
+    if (check.summary) item.append(makeElement(doc, 'p', { className: 'bb-pkw-muted', text: check.summary }));
+    list.append(item);
+  }
+  section.append(list);
+  return section;
+}
+
+function renderMaterialState(doc, materials) {
+  const state = materials.state;
+  const total = materials.total;
+  let text;
+  if (state === 'ok') {
+    if (total === 0 && materials.items.length === 0) text = '確認済み 0件';
+    else if (total === null) text = materials.items.length > 0 ? `表示 ${materials.items.length}件 · 総数未確認` : '件数未確認';
+    else text = `表示 ${materials.items.length}件 · 総数 ${total}件${total > materials.items.length ? ' · 続き未取得' : ''}`;
+  } else if (total !== null) {
+    text = `表示 ${materials.items.length}件 · 総数 ${total}件 · ${stateLabel(state)}`;
+  } else {
+    text = materials.items.length > 0 ? `表示 ${materials.items.length}件 · 総数未確認 · ${stateLabel(state)}` : stateLabel(state);
+  }
+  return makeElement(doc, 'p', { className: 'bb-pkw-overview-material-state', text });
+}
+
+function materialNotice(doc, materials) {
+  if (materials.state === 'ok') return null;
+  const tone = materials.state === 'failed' ? 'danger' : materials.state === 'unknown' || materials.state === 'partial' ? 'warning' : 'info';
+  return workspaceNotice(doc, {
+    label: stateLabel(materials.state),
+    text: materials.note ?? (materials.state === 'partial' ? '一部の資料だけ取得されています。' : '資料の取得状態を確認できません。'),
+    tone,
+    role: materials.state === 'failed' ? 'alert' : 'status',
+  });
+}
+
+function renderMaterialTable(doc, materials, actions = {}) {
+  const table = makeElement(doc, 'div', {
+    className: 'bb-pkw-overview-material-table',
+    attrs: { role: 'table', 'aria-label': '資料一覧' },
+  });
+  const columns = ['資料', '関係', '出典', '本文', '内容時点', '記録更新'];
+  const header = makeElement(doc, 'div', { className: 'bb-pkw-overview-material-row bb-pkw-overview-material-header', attrs: { role: 'row' } });
+  for (const column of columns) header.append(makeElement(doc, 'span', { text: column, attrs: { role: 'columnheader' } }));
+  table.append(header);
+  if (materials.items.length === 0) {
+    const empty = materials.state === 'ok' && materials.total === 0
+      ? '確認済みの資料はありません。'
+      : '資料の行は未確認です。';
+    table.append(makeElement(doc, 'p', { className: 'bb-pkw-muted bb-pkw-overview-material-empty', text: empty }));
+    return table;
+  }
+  for (const material of materials.items) {
+    const row = makeElement(doc, 'div', { className: 'bb-pkw-overview-material-row', attrs: { role: 'row' } });
+    const title = typeof actions.openGraphEntity === 'function' && material.id
+      ? makeElement(doc, 'button', { className: 'bb-pkw-overview-link', text: material.title, attrs: { type: 'button', 'data-record-id': material.id } })
+      : makeElement(doc, 'strong', { text: material.title });
+    if (typeof actions.openGraphEntity === 'function' && material.id) title.addEventListener('click', () => actions.openGraphEntity(material.id));
+    row.append(
+      makeElement(doc, 'span', { attrs: { role: 'cell' } }),
+      makeElement(doc, 'span', { text: material.relation ?? '関係未確認', attrs: { role: 'cell' } }),
+      makeElement(doc, 'span', { text: material.source ?? '出典未確認', attrs: { role: 'cell' } }),
+      makeElement(doc, 'span', { text: BODY_STATE_LABELS[material.bodyState] ?? BODY_STATE_LABELS.unknown, attrs: { role: 'cell' } }),
+      makeElement(doc, 'time', { text: displayDate(material.contentAsOf), attrs: { role: 'cell', ...(material.contentAsOf ? { datetime: material.contentAsOf } : {}) } }),
+      makeElement(doc, 'time', { text: displayDate(material.updatedAt), attrs: { role: 'cell', ...(material.updatedAt ? { datetime: material.updatedAt } : {}) } }),
+    );
+    row.children[0].append(title);
+    table.append(row);
+  }
+  return table;
+}
+
+function renderMaterials(doc, title, materials, actions = {}) {
+  const section = makeElement(doc, 'section', {
+    className: 'bb-pkw-overview-section bb-pkw-overview-materials',
+    attrs: { 'aria-label': title },
+  });
+  const heading = makeElement(doc, 'div', { className: 'bb-pkw-overview-section-heading' });
+  heading.append(makeElement(doc, 'h3', { text: title }), renderMaterialState(doc, materials));
+  section.append(heading);
+  const notice = materialNotice(doc, materials);
+  if (notice) section.append(notice);
+  if (materials.note && materials.state === 'ok') section.append(makeElement(doc, 'p', { className: 'bb-pkw-muted', text: materials.note }));
+  section.append(renderMaterialTable(doc, materials, actions));
+  return section;
+}
+
+/** Render the host-provided overview in the required cognitive order. */
+export function renderProjectOverview(doc, value, { projectName = 'プロジェクト', actions = {} } = {}) {
+  const overview = normalizeProjectOverview(value);
+  if (!overview) return null;
+  const name = cleanText(projectName) ?? 'プロジェクト';
+  const root = makeElement(doc, 'div', { className: 'bb-pkw-overview-projection', attrs: { 'aria-label': 'プロジェクト概要' } });
+  root.append(
+    renderAbout(doc, overview.about),
+    renderChecks(doc, overview.checks, actions),
+    renderMaterials(doc, `${name}に直接紐づく資料`, overview.directMaterials, actions),
+    renderMaterials(doc, '関連資料', overview.relatedMaterials, actions),
+  );
+  return root;
+}

package/ui/project-workspace.css

@@ -1187,3 +1187,178 @@ button.bb-pkw-context-task-title:focus-visible { outline: 3px solid var(--bb-col
   border-radius: 0;
   padding: 14px 16px;
 }
+
+/* Optional host projection: context first, then the evidence ledgers. */
+.bb-pkw-overview-projection {
+  display: grid;
+  gap: var(--bb-space-5);
+  min-width: 0;
+}
+
+.bb-pkw-overview-section {
+  display: grid;
+  gap: var(--bb-space-3);
+  min-width: 0;
+  border-top: 1px solid var(--bb-color-border-strong);
+  padding-top: var(--bb-space-4);
+}
+
+.bb-pkw-overview-section h3 {
+  margin: 0;
+  color: var(--bb-color-ink);
+  font-size: 16px;
+  font-weight: 760;
+  letter-spacing: -.02em;
+}
+
+.bb-pkw-overview-facts {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: var(--bb-space-3);
+  margin: 0;
+}
+
+.bb-pkw-overview-fact {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+}
+
+.bb-pkw-overview-fact dt,
+.bb-pkw-overview-fact dd {
+  margin: 0;
+}
+
+.bb-pkw-overview-fact dt {
+  color: var(--bb-color-muted);
+  font-size: 11px;
+  font-weight: 720;
+}
+
+.bb-pkw-overview-fact dd {
+  overflow-wrap: anywhere;
+  color: var(--bb-color-ink);
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.bb-pkw-overview-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px var(--bb-space-4);
+  margin: 0;
+  color: var(--bb-color-muted);
+  font-size: 11px;
+}
+
+.bb-pkw-overview-check-list {
+  display: grid;
+  gap: 0;
+  margin: 0;
+  padding: 0 0 0 20px;
+}
+
+.bb-pkw-overview-check {
+  min-width: 0;
+  border-bottom: 1px solid var(--bb-color-border);
+  padding: var(--bb-space-3) 0;
+}
+
+.bb-pkw-overview-check:first-child { padding-top: 0; }
+.bb-pkw-overview-check:last-child { border-bottom: 0; padding-bottom: 0; }
+
+.bb-pkw-overview-check p {
+  margin: 4px 0 0;
+}
+
+.bb-pkw-overview-link {
+  max-width: 100%;
+  overflow-wrap: anywhere;
+  border: 0;
+  padding: 0;
+  color: var(--bb-color-accent-strong);
+  background: transparent;
+  font: inherit;
+  font-weight: 720;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.bb-pkw-overview-link:hover {
+  color: var(--bb-color-accent);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.bb-pkw-overview-link:focus-visible {
+  outline: 3px solid color-mix(in srgb, var(--bb-color-focus) 45%, var(--bb-color-panel));
+  outline-offset: 2px;
+}
+
+.bb-pkw-overview-section-heading {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--bb-space-2);
+  align-items: baseline;
+  justify-content: space-between;
+  min-width: 0;
+}
+
+.bb-pkw-overview-material-state {
+  margin: 0;
+  color: var(--bb-color-muted);
+  font-size: 11px;
+}
+
+.bb-pkw-overview-material-table {
+  min-width: 0;
+  overflow-x: auto;
+  border-top: 1px solid var(--bb-color-border-strong);
+}
+
+.bb-pkw-overview-material-row {
+  display: grid;
+  grid-template-columns: minmax(220px, 2fr) minmax(110px, 1fr) minmax(130px, 1.15fr) minmax(120px, 1fr) minmax(135px, 1fr) minmax(135px, 1fr);
+  gap: var(--bb-space-2);
+  align-items: center;
+  min-width: 900px;
+  border-bottom: 1px solid var(--bb-color-border);
+  padding: var(--bb-space-3) 0;
+  color: var(--bb-color-muted);
+  font-size: 11px;
+}
+
+.bb-pkw-overview-material-header {
+  border-bottom-color: var(--bb-color-border-strong);
+  padding-block: var(--bb-space-2);
+  font-weight: 720;
+}
+
+.bb-pkw-overview-material-row > span,
+.bb-pkw-overview-material-row > time {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.bb-pkw-overview-material-row > span:first-child {
+  color: var(--bb-color-ink);
+}
+
+.bb-pkw-overview-material-row:last-child { border-bottom: 0; }
+
+.bb-pkw-overview-material-empty {
+  margin: 0;
+  padding: var(--bb-space-3) 0;
+}
+
+@media (max-width: 760px) {
+  .bb-pkw-overview-facts {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .bb-pkw-overview-section-heading {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}

package/ui/project-workspace.js

@@ -25,6 +25,7 @@ import {
   validityText,
 } from './graph-view-shared.js';
 import { workspaceDefinition, workspaceNotice } from './workspace-kit.js';
+import { normalizeProjectOverview, renderProjectOverview } from './project-overview.js';
 
 export const PROJECT_WORKSPACE_CONTRACT_VERSION = 'brainbase.project-workspace.v1';
 
@@ -243,6 +244,31 @@ function graphEvidenceEdges(detail) {
   return projectKnowledgeEdges(detail);
 }
 
+/**
+ * Keep overview-only canonical IDs available for the existing detail action.
+ * These are loading placeholders, not Graph entities or inferred relations;
+ * the host must still provide readEntity before a projection-only ID can be
+ * selected.
+ */
+function projectOverviewProjectionRecords(overview) {
+  const records = new Map();
+  if (!overview) return records;
+  const add = (id, title) => {
+    const target = cleanId(id);
+    if (!target || records.has(target)) return;
+    records.set(target, {
+      id: target,
+      type: 'unknown',
+      name: cleanName(title, target),
+    });
+  };
+  for (const check of overview.checks) add(check.recordId, check.title);
+  for (const material of [...overview.directMaterials.items, ...overview.relatedMaterials.items]) {
+    add(material.id, material.title);
+  }
+  return records;
+}
+
 function resultEntity(result) {
   if (!isRecord(result)) return null;
   const payload = result.state === 'ok' && isRecord(result.payload) ? result.payload : result;
@@ -966,6 +992,12 @@ function renderOverview(doc, detail, context, entities, actions = {}) {
   const payload = projectDetailPayload(detail);
   const project = payload?.project;
   const panel = makeElement(doc, 'div', { className: 'bb-pkw-panel bb-pkw-overview', attrs: { role: 'tabpanel', 'aria-label': '概要' } });
+  const overview = normalizeProjectOverview(payload?.overview);
+  if (overview) {
+    panel.append(renderProjectOverview(doc, overview, { projectName: project?.name, actions }));
+    panel.append(renderContextDirectory(doc, context, actions));
+    return panel;
+  }
   panel.append(renderDenseOverview(doc, detail, context, entities, actions));
   panel.append(renderContextDirectory(doc, context, actions));
   const summary = makeElement(doc, 'section', { className: 'bb-pkw-section', attrs: { 'aria-label': '目的と現在地' } });
@@ -1011,6 +1043,7 @@ export function createProjectKnowledgeWorkspace({
   // but those records are not evidence that they belong to this project.
   const overviewEntities = graphEntityMap(payload);
   const overviewEdges = graphEvidenceEdges(payload);
+  const overviewProjectionRecords = projectOverviewProjectionRecords(normalizeProjectOverview(payload?.overview));
   const entities = new Map(overviewEntities);
   const edges = [...overviewEdges];
   let destroyed = false;
@@ -1137,7 +1170,8 @@ export function createProjectKnowledgeWorkspace({
 
   function select(id, { fromGraph = false } = {}) {
     const target = cleanId(id);
-    if (!target || !entities.has(target) || destroyed) return;
+    const canReadOverviewProjection = overviewProjectionRecords.has(target) && typeof readEntity === 'function';
+    if (!target || (!entities.has(target) && !canReadOverviewProjection) || destroyed) return;
     // A list click synchronizes Sigma by calling its `select`, which notifies
     // this workspace again. Keep the second notification from starting a
     // duplicate entity read (or resetting a completed detail read).
@@ -1155,7 +1189,8 @@ export function createProjectKnowledgeWorkspace({
 
   function selectAndExplore(id) {
     const target = cleanId(id);
-    if (!target || !entities.has(target) || destroyed) return;
+    const canReadOverviewProjection = overviewProjectionRecords.has(target) && typeof readEntity === 'function';
+    if (!target || (!entities.has(target) && !canReadOverviewProjection) || destroyed) return;
     activeTab = 'graph';
     select(target);
     render();
@@ -1201,7 +1236,7 @@ export function createProjectKnowledgeWorkspace({
     const panel = root.querySelector?.('.bb-pkw-selection') ?? selectedPanel;
     if (!panel) return;
     panel.replaceChildren();
-    const entity = entities.get(selectedId);
+    const entity = entities.get(selectedId) ?? overviewProjectionRecords.get(selectedId);
     if (!entity) return;
     const read = entityRead?.id === selectedId ? entityRead : null;
     const fetched = selectedId === project.id ? { entity: project, incoming: [], outgoing: [] } : read?.entity ? read : null;