@unson/brainbase-mcp 0.10.2 → 0.10.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unson/brainbase-mcp",
-  "version": "0.10.2",
+  "version": "0.10.4",
   "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",
@@ -336,5 +336,5 @@
   "engines": {
     "node": ">=20"
   },
-  "gitHead": "d8334b5e94cdc643f5de90ccfc883a5e67fdd9af"
+  "gitHead": "84863f09b8274b738b16e15d2550ece19ac51124"
 }

package/ui/graph-projects-view.js

@@ -54,7 +54,12 @@ import {
   graphHostEmptyNotice,
 } from './graph-view-shared.js';
 import { graphOwnShareSource, ownProjectDetail, ownShareSection, ownShareStateNotice } from './graph-own-share.js';
-import { createProjectKnowledgeWorkspace, normalizeProjectContext } from './project-workspace.js';
+import {
+  createProjectKnowledgeWorkspace,
+  normalizeProjectContext,
+  renderProjectContext,
+  renderProjectKnowledgeSkeleton,
+} from './project-workspace.js';
 import { mountProjectGraph as defaultMountProjectGraph } from './project-graph.js';
 import {
   workspaceActions,
@@ -211,9 +216,11 @@ function normalizeProjectSummary(value) {
  *   labelled 「引き継いだ自分の分（組織には未反映）」 unless `label` says otherwise.  They are never
  *   added to the ledger, the metrics or the rail, and a failed read shows only in that section.
  *   Without it nothing of the kind is drawn or read.
- * @param {(projectId: string) => Promise<object>} [options.loadProjectContext]
- *   Optional read-only supplementary sections (tasks/knowledge).  A failed
- *   context read is kept separate from the Graph detail read.
+ * @param {(projectId: string, options?: { onProgress?: (snapshot: object) => void }) => Promise<object>} [options.loadProjectContext]
+ *   Optional read-only supplementary sections (tasks/knowledge). The host may
+ *   call `onProgress` with a complete `{ sections: [...] }` snapshot as each
+ *   section resolves; a failed context read is kept separate from the Graph
+ *   detail read.
  * @param {Array<{ id: string, name?: string }> | (() => Array<{ id: string, name?: string }>)} [options.projectSummaries]
  *   Optional host-known project identities.  These are used only to draw the
  *   selected project's early loading shell before the Graph list is read.
@@ -330,7 +337,10 @@ export function createGraphProjectsView({
     const project = projectSummaryFor(target);
     const loading = makeElement(doc, 'section', {
       className: 'bb-pkw bb-pkw-loading',
-      attrs: { 'aria-label': 'プロジェクトの知識', 'data-project-id': target },
+      attrs: {
+        'aria-label': 'プロジェクトの知識',
+        'data-project-id': target,
+      },
     });
     loading.append(makeElement(doc, 'div', { className: 'bb-pkw-kicker', text: 'プロジェクトの記録' }));
     const header = makeElement(doc, 'header', { className: 'bb-pkw-header' });
@@ -344,6 +354,12 @@ export function createGraphProjectsView({
       loadingText: 'プロジェクトの記録を読み込んでいます。',
     });
     if (notice) loading.append(notice);
+    if (readState?.state === 'loading') {
+      loading.append(renderProjectKnowledgeSkeleton(doc, { context: state.context?.projectId === target ? state.context : null }));
+    } else if (state.context?.projectId === target) {
+      const contextBlock = renderProjectContext(doc, state.context);
+      if (contextBlock) loading.append(contextBlock);
+    }
     return loading;
   }
 
@@ -403,16 +419,27 @@ export function createGraphProjectsView({
     const request = ++contextRequest;
     state.context = normalizeProjectContext(id, { state: 'loading' });
     controller.render();
+    const applyContext = (snapshot) => {
+      const normalized = normalizeProjectContext(id, snapshot);
+      if (viewDestroyed || request !== contextRequest || state.selectedId !== id) return false;
+      state.context = normalized;
+      // Context progress must not rebuild the workspace: rebuilding destroys
+      // Sigma's viewport and resets the user's active tab/selection. Detail
+      // loading still uses the shell render so the project name is immediate.
+      if (knowledgeWorkspace && state.detail?.id === id && state.detail.state === 'ok') {
+        knowledgeWorkspace.setContext?.(normalized);
+      } else {
+        controller.render();
+      }
+      return true;
+    };
     let result;
     try {
-      result = await loadProjectContext(id);
+      result = await loadProjectContext(id, { onProgress: (snapshot) => { applyContext(snapshot); } });
     } catch (error) {
       result = { state: 'failed', message: `補足情報を読み取れませんでした（${failureText(error)}）。` };
     }
-    const normalized = normalizeProjectContext(id, result);
-    if (viewDestroyed || request !== contextRequest || state.selectedId !== id) return state.context;
-    state.context = normalized;
-    controller.render();
+    applyContext(result);
     return state.context;
   }
 

package/ui/project-workspace.css

@@ -267,6 +267,44 @@
   padding-top: var(--bb-space-3);
 }
 
+.bb-pkw-skeleton-section {
+  min-height: 118px;
+}
+
+.bb-pkw-skeleton-stack {
+  display: grid;
+  gap: var(--bb-space-2);
+  width: min(100%, 360px);
+}
+
+.bb-pkw-skeleton-bar {
+  display: block;
+  width: 100%;
+  height: 10px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--bb-color-border-strong) 65%, var(--bb-color-panel));
+  animation: bb-pkw-skeleton-pulse 1.35s ease-in-out infinite;
+}
+
+.bb-pkw-skeleton-bar-1 { width: 92%; }
+.bb-pkw-skeleton-bar-2 { width: 68%; }
+.bb-pkw-skeleton-bar-3 { width: 82%; }
+
+.bb-pkw-context-group-loading {
+  min-height: 72px;
+}
+
+@keyframes bb-pkw-skeleton-pulse {
+  0%, 100% { opacity: .48; }
+  50% { opacity: 1; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bb-pkw-skeleton-bar {
+    animation: none;
+  }
+}
+
 .bb-pkw-context-heading,
 .bb-pkw-graph-intro,
 .bb-pkw-selected-head,

package/ui/project-workspace.js

@@ -95,7 +95,18 @@ export function normalizeProjectContext(projectId, result) {
   if (result?.state === 'failed' || result?.state === 'error') {
     return { projectId: id, state: 'failed', message: firstText(result.message, result.reason) ?? '補足情報を読み取れませんでした。', sections: [] };
   }
-  if (result?.state === 'loading') return { projectId: id, state: 'loading', sections: [] };
+  if (result?.state === 'loading') {
+    const partial = result?.payload && isRecord(result.payload) ? result.payload : result;
+    const rawSections = Array.isArray(partial.sections) ? partial.sections : [];
+    const normalized = {
+      projectId: id,
+      state: 'loading',
+      sections: rawSections.map(normalizeContextSection).filter(Boolean),
+    };
+    const message = firstText(result.message, result.reason);
+    if (message) normalized.message = message;
+    return normalized;
+  }
   if (result?.state === 'unavailable') {
     return { projectId: id, state: 'unavailable', message: firstText(result.message, result.reason) ?? '補足情報は接続されていません。', sections: [] };
   }
@@ -107,7 +118,7 @@ export function normalizeProjectContext(projectId, result) {
   if (sections.length === 0 && payload.sections.length > 0) {
     return { projectId: id, state: 'unavailable', message: '補足情報の形式を確認できません。', sections: [] };
   }
-  return { projectId: id, state: 'ok', sections };
+  return { projectId: id, state: sections.some((section) => section.state === 'loading') ? 'loading' : 'ok', sections };
 }
 
 function addEntity(map, candidate) {
@@ -292,49 +303,131 @@ function renderEntityRelations(doc, edges, direction, entity, asOf, onSelect) {
   return list.children.length > 0 ? list : null;
 }
 
-function renderContext(doc, context) {
-  if (!context) return null;
-  const section = makeElement(doc, 'section', { className: 'bb-pkw-section bb-pkw-context', attrs: { 'aria-label': '補足情報' } });
-  section.append(makeElement(doc, 'h3', { text: '補足情報' }));
-  if (context.state === 'loading') {
-    section.append(workspaceNotice(doc, { label: '読み込み中', text: 'タスクや知識の補足情報を読み込んでいます。', tone: 'info', role: 'status' }));
-    return section;
+function skeletonBars(doc, count = 3) {
+  const stack = makeElement(doc, 'div', { className: 'bb-pkw-skeleton-stack', attrs: { 'aria-hidden': 'true' } });
+  for (let index = 0; index < count; index += 1) {
+    stack.append(makeElement(doc, 'span', {
+      className: `bb-pkw-skeleton-bar bb-pkw-skeleton-bar-${(index % 3) + 1}`,
+      attrs: { 'aria-hidden': 'true' },
+    }));
   }
-  if (context.state !== 'ok') {
-    section.append(workspaceNotice(doc, { label: context.state === 'failed' ? '読み取り失敗' : '未接続', text: context.message ?? '補足情報を確認できません。', tone: context.state === 'failed' ? 'danger' : 'warning' }));
-    return section;
+  return stack;
+}
+
+function contextSectionSkeleton(doc, { title = null, message = null } = {}) {
+  const group = makeElement(doc, 'section', {
+    className: 'bb-pkw-context-group bb-pkw-context-group-loading',
+    attrs: { 'aria-label': title ?? '補足情報', 'aria-busy': 'true' },
+  });
+  if (title) group.append(makeElement(doc, 'h4', { text: title }));
+  if (message) group.append(makeElement(doc, 'p', { className: 'bb-pkw-muted', text: message }));
+  group.append(skeletonBars(doc));
+  return group;
+}
+
+function renderProjectContextGroup(doc, item) {
+  const group = makeElement(doc, 'section', {
+    className: `bb-pkw-context-group${item.state === 'loading' ? ' bb-pkw-context-group-loading' : ''}`,
+    attrs: { 'aria-label': item.title, ...(item.state === 'loading' ? { 'aria-busy': 'true' } : {}) },
+  });
+  const heading = makeElement(doc, 'div', { className: 'bb-pkw-context-heading' });
+  heading.append(makeElement(doc, 'h4', { text: item.title }), badge(doc, item.state === 'ok' ? '利用可能' : item.state === 'loading' ? '読み込み中' : item.state === 'failed' ? '読み取り失敗' : '未接続', item.state === 'ok' ? 'success' : item.state === 'failed' ? 'danger' : 'muted'));
+  group.append(heading);
+  if (item.message && !['failed', 'unavailable'].includes(item.state)) group.append(makeElement(doc, 'p', { className: 'bb-pkw-muted', text: item.message }));
+  if (item.asOf) group.append(makeElement(doc, 'small', { className: 'bb-pkw-muted', text: `読み取った時点: ${formatDateTime(item.asOf)}` }));
+  if (item.state === 'loading') {
+    group.append(skeletonBars(doc));
+  } else if (item.state === 'failed') {
+    group.append(workspaceNotice(doc, { label: '読み取り失敗', text: item.message ?? 'このセクションを読み取れませんでした。', tone: 'danger', role: 'alert' }));
+  } else if (item.state === 'unavailable') {
+    group.append(workspaceNotice(doc, { label: '未接続', text: item.message ?? 'このセクションは接続されていません。', tone: 'warning' }));
+  } else if (item.items.length > 0) {
+    const list = makeElement(doc, 'ul', { className: 'bb-pkw-context-list' });
+    for (const entry of item.items) {
+      const row = makeElement(doc, 'li');
+      row.append(makeElement(doc, 'strong', { text: entry.title }));
+      if (entry.status) row.append(badge(doc, entry.status, 'muted'));
+      const facts = [entry.summary, entry.owner ? `担当: ${entry.owner}` : null, entry.dueAt ? `期限: ${entry.dueAt}` : null, entry.updatedAt ? `更新: ${entry.updatedAt}` : null, entry.source ? `出典: ${entry.source}` : null].filter(Boolean);
+      if (facts.length > 0) row.append(makeElement(doc, 'p', { className: 'bb-pkw-muted', text: facts.join(' · ') }));
+      list.append(row);
+    }
+    group.append(list);
+  } else if (item.state === 'ok') {
+    group.append(makeElement(doc, 'p', { className: 'bb-pkw-muted', text: 'このセクションに表示できる記録はありません。' }));
+  }
+  return group;
+}
+
+function projectContextInsertionAnchor(doc) {
+  return makeElement(doc, 'span', {
+    className: 'bb-pkw-context-anchor',
+    attrs: { 'aria-hidden': 'true', hidden: 'true' },
+  });
+}
+
+/** Renders supplementary context while preserving each section's own state. */
+export function renderProjectContext(doc, context, {
+  sections: selectedSections = null,
+  includeStatus = true,
+  includeHeading = true,
+} = {}) {
+  if (!context) return null;
+  const sections = Array.isArray(selectedSections)
+    ? selectedSections
+    : Array.isArray(context.sections) ? context.sections : [];
+  const section = makeElement(doc, 'section', {
+    className: 'bb-pkw-section bb-pkw-context',
+    attrs: { 'aria-label': '補足情報' },
+  });
+  if (includeHeading) section.append(makeElement(doc, 'h3', { text: '補足情報' }));
+  if (includeStatus && context.state !== 'ok') {
+    if (context.state === 'loading') {
+      section.append(workspaceNotice(doc, { label: '読み込み中', text: context.message ?? '補足情報を読み込んでいます。', tone: 'info', role: 'status' }));
+      if (sections.length === 0) section.append(contextSectionSkeleton(doc));
+    } else {
+      section.append(workspaceNotice(doc, { label: context.state === 'failed' ? '読み取り失敗' : '未接続', text: context.message ?? '補足情報を確認できません。', tone: context.state === 'failed' ? 'danger' : 'warning' }));
+    }
   }
-  if (context.sections.length === 0) {
+  if (includeStatus && context.state === 'ok' && sections.length === 0) {
     section.append(makeElement(doc, 'p', { className: 'bb-pkw-muted', text: '補足情報のセクションはありません。' }));
     return section;
   }
-  for (const item of context.sections) {
-    const group = makeElement(doc, 'section', { className: 'bb-pkw-context-group', attrs: { 'aria-label': item.title } });
-    const heading = makeElement(doc, 'div', { className: 'bb-pkw-context-heading' });
-    heading.append(makeElement(doc, 'h4', { text: item.title }), badge(doc, item.state === 'ok' ? '利用可能' : item.state === 'loading' ? '読み込み中' : item.state === 'failed' ? '読み取り失敗' : '未接続', item.state === 'ok' ? 'success' : item.state === 'failed' ? 'danger' : 'muted'));
-    group.append(heading);
-    if (item.message) group.append(makeElement(doc, 'p', { className: 'bb-pkw-muted', text: item.message }));
-    if (item.asOf) group.append(makeElement(doc, 'small', { className: 'bb-pkw-muted', text: `読み取った時点: ${formatDateTime(item.asOf)}` }));
-    if (item.items.length > 0) {
-      const list = makeElement(doc, 'ul', { className: 'bb-pkw-context-list' });
-      for (const entry of item.items) {
-        const row = makeElement(doc, 'li');
-        row.append(makeElement(doc, 'strong', { text: entry.title }));
-        if (entry.status) row.append(badge(doc, entry.status, 'muted'));
-        const facts = [entry.summary, entry.owner ? `担当: ${entry.owner}` : null, entry.dueAt ? `期限: ${entry.dueAt}` : null, entry.updatedAt ? `更新: ${entry.updatedAt}` : null, entry.source ? `出典: ${entry.source}` : null].filter(Boolean);
-        if (facts.length > 0) row.append(makeElement(doc, 'p', { className: 'bb-pkw-muted', text: facts.join(' · ') }));
-        list.append(row);
-      }
-      group.append(list);
-    } else if (item.state === 'ok') {
-      group.append(makeElement(doc, 'p', { className: 'bb-pkw-muted', text: 'このセクションに表示できる記録はありません。' }));
-    }
-    section.append(group);
-  }
+  for (const item of sections) section.append(renderProjectContextGroup(doc, item));
   return section;
 }
 
-function renderOverview(doc, detail, context, edges, entities, onSelect) {
+/** Structural shell used while the Graph detail is loading; it contains no inferred values. */
+export function renderProjectKnowledgeSkeleton(doc, { context = null } = {}) {
+  const panel = makeElement(doc, 'div', {
+    className: 'bb-pkw-panel bb-pkw-overview bb-pkw-overview-loading',
+    attrs: { 'aria-label': '概要' },
+  });
+  const contextSections = Array.isArray(context?.sections) ? context.sections : [];
+  const readySections = contextSections.filter((item) => item?.state === 'ok' && Array.isArray(item.items) && item.items.length > 0);
+  const deferredSections = contextSections.filter((item) => !readySections.includes(item));
+  if (readySections.length > 0) {
+    panel.append(renderProjectContext(doc, context, { sections: readySections, includeStatus: false }));
+  }
+  const columns = makeElement(doc, 'div', { className: 'bb-pkw-columns' });
+  for (const title of ['目的と現在地', '関係者と役割']) {
+    const item = makeElement(doc, 'section', { className: 'bb-pkw-section bb-pkw-skeleton-section', attrs: { 'aria-label': title, 'aria-busy': 'true' } });
+    item.append(makeElement(doc, 'h3', { text: title }), skeletonBars(doc));
+    columns.append(item);
+  }
+  panel.append(columns);
+  for (const title of ['記録された判断', '関連する情報']) {
+    const item = makeElement(doc, 'section', { className: 'bb-pkw-section bb-pkw-skeleton-section', attrs: { 'aria-label': title, 'aria-busy': 'true' } });
+    item.append(makeElement(doc, 'h3', { text: title }), skeletonBars(doc, 2));
+    panel.append(item);
+  }
+  const contextBlock = readySections.length > 0
+    ? (deferredSections.length > 0 ? renderProjectContext(doc, context, { sections: deferredSections, includeHeading: false }) : null)
+    : renderProjectContext(doc, context ?? { state: 'loading', sections: [] });
+  if (contextBlock) panel.append(contextBlock);
+  return panel;
+}
+
+function renderOverview(doc, detail, context, edges, entities, onSelect, onContext) {
   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': '概要' } });
@@ -369,6 +462,16 @@ function renderOverview(doc, detail, context, edges, entities, onSelect) {
   columns.append(people);
   panel.append(columns);
 
+  const contextBlock = renderProjectContext(doc, context);
+  if (contextBlock) {
+    panel.append(contextBlock);
+    if (typeof onContext === 'function') onContext(contextBlock, null);
+  } else {
+    const contextAnchor = projectContextInsertionAnchor(doc);
+    panel.append(contextAnchor);
+    if (typeof onContext === 'function') onContext(null, contextAnchor);
+  }
+
   const decisions = makeElement(doc, 'section', { className: 'bb-pkw-section', attrs: { 'aria-label': '記録された判断' } });
   decisions.append(makeElement(doc, 'h3', { text: '記録された判断' }));
   const decisionEdges = edges.filter((edge) => entities.get(edge.source)?.type === 'decision' || entities.get(edge.target)?.type === 'decision');
@@ -423,8 +526,6 @@ function renderOverview(doc, detail, context, edges, entities, onSelect) {
     missing.append(list);
     panel.append(missing);
   }
-  const contextBlock = renderContext(doc, context);
-  if (contextBlock) panel.append(contextBlock);
   return panel;
 }
 
@@ -463,12 +564,23 @@ export function createProjectKnowledgeWorkspace({
   let entityReadRequest = 0;
   let graphSearch = '';
   let graphType = '';
+  let currentContext = context;
   // Keep direct references as well as the DOM lookup.  The local test harness
   // intentionally has no querySelector implementation, and a host can replace
   // the panel while a detail read is still in flight.
   let selectedPanel = null;
-
-  const root = makeElement(doc, 'section', { className: 'bb-pkw', attrs: { 'data-contract-version': PROJECT_WORKSPACE_CONTRACT_VERSION, 'aria-label': 'プロジェクトの知識' } });
+  let overviewPanel = null;
+  let contextBlock = null;
+  let contextAnchor = null;
+
+  const root = makeElement(doc, 'section', {
+    className: 'bb-pkw',
+    attrs: {
+      'data-contract-version': PROJECT_WORKSPACE_CONTRACT_VERSION,
+      'data-project-id': cleanId(project.id),
+      'aria-label': 'プロジェクトの知識',
+    },
+  });
   const body = makeElement(doc, 'div', { className: 'bb-pkw-body' });
   const tabs = makeElement(doc, 'div', { className: 'bb-pkw-tabs', attrs: { role: 'tablist', 'aria-label': 'プロジェクト情報の表示' } });
   const panels = makeElement(doc, 'div', { className: 'bb-pkw-panels' });
@@ -698,15 +810,55 @@ export function createProjectKnowledgeWorkspace({
     graphHandle = null;
   }
 
+  function replaceContextBlock(nextContext) {
+    currentContext = nextContext;
+    if (destroyed) return;
+    const nextBlock = renderProjectContext(doc, currentContext);
+    if (!nextBlock) {
+      if (contextBlock?.parentNode && typeof contextBlock.parentNode.replaceChild === 'function') {
+        const nextAnchor = projectContextInsertionAnchor(doc);
+        contextBlock.parentNode.replaceChild(nextAnchor, contextBlock);
+        contextBlock = null;
+        contextAnchor = nextAnchor;
+      } else if (contextBlock?.parentNode?.removeChild) {
+        contextBlock.parentNode.removeChild(contextBlock);
+        contextBlock = null;
+      }
+      return;
+    }
+    if (contextBlock?.parentNode && typeof contextBlock.parentNode.replaceChild === 'function') {
+      contextBlock.parentNode.replaceChild(nextBlock, contextBlock);
+      contextBlock = nextBlock;
+      return;
+    }
+    if (contextAnchor?.parentNode && typeof contextAnchor.parentNode.replaceChild === 'function') {
+      contextAnchor.parentNode.replaceChild(nextBlock, contextAnchor);
+      contextBlock = nextBlock;
+      contextAnchor = null;
+      return;
+    }
+    if (contextBlock?.replaceWith) {
+      contextBlock.replaceWith(nextBlock);
+      contextBlock = nextBlock;
+      return;
+    }
+  }
+
   function render() {
     if (destroyed) return;
     if (typeof onTabChange === 'function') onTabChange(activeTab);
     teardownGraph();
     tabs.replaceChildren(tabButton('概要', 'overview'), tabButton('情報を探す', 'graph'));
     panels.replaceChildren();
-    const overview = renderOverview(doc, payload, context, overviewEdges, overviewEntities, selectAndExplore);
+    contextBlock = null;
+    contextAnchor = null;
+    const overview = renderOverview(doc, payload, currentContext, overviewEdges, overviewEntities, selectAndExplore, (node, anchor) => {
+      contextBlock = node;
+      contextAnchor = anchor;
+    });
     overview.id = 'bb-pkw-panel-overview';
     overview.hidden = activeTab !== 'overview';
+    overviewPanel = overview;
     panels.append(overview);
     const graph = renderGraphPanel();
     graph.hidden = activeTab !== 'graph';
@@ -721,7 +873,7 @@ export function createProjectKnowledgeWorkspace({
   }
 
   render();
-  return Object.freeze({ element: root, destroy, select, setTab });
+  return Object.freeze({ element: root, destroy, select, setTab, setContext: replaceContextBlock });
 }
 
 export default createProjectKnowledgeWorkspace;