@unson/brainbase-mcp 0.41.2 → 0.41.3

package/README.md

@@ -265,3 +265,12 @@ After the workflow succeeds, verify npm `gitHead`, `dist.integrity`, and dist-ta
 - [Judgment DAG milestones](docs/management/judgment-dag-milestones.md)
 
 MIT License
+
+
+### Shared purpose overview presentation
+
+The read-only foundation overview uses a four-column ledger (purpose, recorded state, outstanding checks and check date). A row opens the shared native detail dialog. Philosophy starts expanded; world models start folded. Hosts can receive failure and partial-coverage notification descriptors through `onNotice` without replacing authenticated readers or catalog validation. Owner-private objectives support an optional compact view and preserve bundle provenance.
+
+Load `ui/native-scrollbars.css` and initialize `installNativeScrollbars(document)` from `ui/native-scrollbars.js` for native scrollbars that appear during scrolling and fade after inactivity. Dispose the returned callback when the host is destroyed. The local Web host serves and initializes this shared module.
+
+See [the presentation contract](docs/specs/story-foundation-overview-readability.md) for acceptance conditions. Display fixtures belong in tests and local previews; they are never inserted into canonical records.

package/contracts/judgment-dag/digest.json

@@ -25,8 +25,8 @@
     },
     {
       "path": "README.md",
-      "sha256": "c36fd404cbc6e9c2262e82b5d921ccbcef6617774f969dd1e0252cd9e7101af8"
+      "sha256": "55fc2b9c7945b81cfe3b7971bc1d067f8cd45d057fbf23dcf3dfae175838d1d3"
     }
   ],
-  "digest": "1beccdf5679b9b7f42375a498a76a661d87ba665f66657c93827dd8d6a938c28"
+  "digest": "89b20a5aa122e73e9d2f7c99e1b029cb12b101b95574ee4560ce023ec3197304"
 }

package/dist/local-web-host.js

@@ -52,7 +52,7 @@ export const LOCAL_WEB_JUDGMENT_HISTORY_PREFIX = JUDGMENT_HISTORY_HTTP_PREFIX;
 export const LOCAL_WEB_FOUNDATION_BODY_LIMIT_BYTES = 64 * 1024;
 export const LOCAL_WEB_PROVENANCE_SOURCE_ID = 'brainbase-local-web';
 const CANONICAL_FILES = ['graph.json', 'relationships.json', 'personal-kg.jsonl', 'decisions.jsonl'];
-const BASE_UI_FILES = ['brainbase-tokens.css', 'local-web-shell.js', 'local-web-shell.css', 'workspace-kit.js', 'workspace-kit.css'];
+const BASE_UI_FILES = ['brainbase-tokens.css', 'local-web-shell.js', 'local-web-shell.css', 'workspace-kit.js', 'workspace-kit.css', 'native-scrollbars.js', 'native-scrollbars.css'];
 const CONTENT_TYPES = Object.freeze({
     '.js': 'text/javascript; charset=utf-8',
     '.css': 'text/css; charset=utf-8'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unson/brainbase-mcp",
-  "version": "0.41.2",
+  "version": "0.41.3",
   "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",
@@ -409,7 +409,9 @@
     "./private-philosophy-graph": {
       "types": "./dist/private-philosophy-graph.d.ts",
       "import": "./dist/private-philosophy-graph.js"
-    }
+    },
+    "./ui/native-scrollbars": "./ui/native-scrollbars.js",
+    "./ui/native-scrollbars.css": "./ui/native-scrollbars.css"
   },
   "bin": {
     "brainbase-mcp": "dist/index.js",
@@ -481,5 +483,5 @@
   "engines": {
     "node": ">=20"
   },
-  "gitHead": "193d1d1fea9d177b04a3c6b01069aef202979526"
+  "gitHead": "19cc7821541c7e563e4d08fd4b2b09936e80a701"
 }

package/ui/brainbase-tokens.css

@@ -50,6 +50,23 @@
   --bb-color-rail-active: #efedff;
   --bb-color-rail-strong: #202124;
   --bb-color-overlay: rgb(32 33 36 / 40%);
+  --bb-color-notice-border: #ffffff20;
+  --bb-color-notice-danger: #e29494;
+  --bb-color-notice-warning: #d9a441;
+  --bb-color-notice-background: linear-gradient(110deg,rgb(13 25 46 / 88%),rgb(36 50 75 / 72%));
+  --bb-color-notice-text: #ffffff;
+  --bb-color-notice-danger-symbol-border: #e2949470;
+  --bb-color-notice-danger-text: #f2bbbb;
+  --bb-color-notice-warning-text: #f4d68a;
+  --bb-color-notice-warning-symbol-border: #d9a44180;
+  --bb-color-notice-control-border: #ffffff45;
+  --bb-color-inline-error: #9b3d3d;
+  --bb-color-record-missing: #80601c;
+  --bb-color-dialog-overlay: #0d192e66;
+  --bb-color-scrollbar-rgb: 36,50,75;
+  --bb-color-scrollbar-dark-rgb: 203,212,225;
+  --bb-shadow-help: 0 6px 24px #0d192e20;
+  --bb-font-help: Georgia,serif;
   --bb-shadow: 0 16px 42px rgb(32 33 36 / 10%);
   --bb-font-sans: Geist, "Noto Sans JP", "Hiragino Sans", system-ui, sans-serif;
   --bb-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

package/ui/foundation-overview.css

@@ -237,3 +237,21 @@
 
 /* Catalog provenance is secondary to the topic, but remains visible on every card. */
 .bb-fov-source { display: inline-block; margin: 0 0 12px; padding: 4px 10px; border-radius: 999px; background: var(--bb-surface-subtle, #f4f4f8); color: var(--bb-text-muted, #62626e); font-size: 12px; overflow-wrap: anywhere; }
+
+.bb-fov-objective-ledger .bb-ws-ledger-row { grid-template-columns: minmax(180px,1.2fr) minmax(200px,1.3fr) minmax(150px,1fr) 110px; }
+.bb-fov-objective-ledger .bb-ws-ledger-row > span { white-space: normal; line-height: 1.7; }
+.bb-fov-objective-ledger .bb-ws-ledger-row:is(.is-selected,:hover) { background: var(--bb-color-accent-soft); box-shadow: inset 3px 0 var(--bb-color-accent); }
+.bb-fov .bb-ws-section-title { display: flex; align-items: center; gap: 8px; }
+.bb-fov-philosophy-grid { grid-template-columns: minmax(0,1fr); }
+.bb-fov-philosophy-card { border-top: 0; width: 100%; box-sizing: border-box; }
+.bb-fov-reading { display: grid; gap: 26px; }
+.bb-fov-reading > section > h3 { margin: 0 0 10px; color: var(--bb-color-muted); font-size: 12px; font-weight: 600; line-height: 1.5; }
+.bb-fov-reading .bb-ws-definition { margin: 0; grid-template-columns: 100px minmax(0,1fr); gap: 10px 20px; font-size: 14px; line-height: 1.8; }
+.bb-fov-reading .bb-fov-current-state { padding: 16px; border: 1px solid var(--bb-color-border); border-radius: 10px; background: var(--bb-color-canvas); gap: 12px; }
+.bb-fov-original { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--bb-color-border); font-size: 12px; color: var(--bb-color-muted); }
+.bb-fov-original > summary { cursor: pointer; }
+.bb-fov-missing { color: var(--bb-color-record-missing); }
+@media (max-width: 760px) { .bb-fov-objective-ledger { overflow-x: auto; } .bb-fov-objective-ledger .bb-ws-ledger-row { min-width: 760px; } }
+@media (max-width: 480px) { .bb-fov-reading .bb-ws-definition { grid-template-columns: 1fr; gap: 4px; } .bb-fov-reading dd { margin-bottom: 12px; } }
+.bb-fov-philosophy-card .bb-fov-original { border-top: 0; padding-top: 0; }
+.bb-fov-objective-ledger .bb-ws-ledger-row:focus-visible { outline: 2px solid var(--bb-color-focus); outline-offset: 2px; }

package/ui/foundation-overview.js

@@ -14,6 +14,7 @@ import {
   workspaceNotice,
   workspacePageHeader,
   workspaceSectionTitle,
+  workspaceHelp, workspaceDialog, workspaceDisclosure, workspaceErrorCard,
 } from './workspace-kit.js';
 
 export const FOUNDATION_OVERVIEW_CONTRACT_VERSION = 'foundation-overview.v1';
@@ -429,59 +430,66 @@ function objectiveCard(doc, record, variableMap) {
   return card;
 }
 
+function objectiveReading(doc, record, variableMap, recordContexts) {
+  const definition = recordDefinition(record), details = detailsFor(record);
+  const body = makeElement(doc, 'div', { className: 'bb-fov-reading' });
+  const section = (title, content) => {
+    const part = makeElement(doc, 'section');
+    part.append(makeElement(doc, 'h3', { text: title }), content); body.append(part);
+  };
+  section('達成条件', workspaceDefinition(doc, [
+    ['目指す状態', formatAny(definition.desiredState)],
+    ['評価基準', criteriaElement(doc, definition, details, variableMap)],
+    ['評価期間', formatAny(firstValue(details, 'evaluation_period_note', 'evaluationPeriodNote')) ?? formatPeriod(definition.evaluationPeriod)],
+  ]));
+  section('確認の根拠', recordedStateElement(doc, record));
+  const provenance = Array.isArray(definition.provenance) ? definition.provenance : [];
+  section('出典', workspaceDefinition(doc, [
+    ['記録元', recordContexts?.get(record)?.label ?? formatAny(record.source) ?? '未記録'],
+    ['根拠', provenance.length ? formatStructuredValue(provenance) : '未記録'],
+  ]));
+  const original = makeElement(doc, 'details', { className: 'bb-fov-original' });
+  original.append(makeElement(doc, 'summary', { text: '記録の詳細・参照・原文' }), objectiveCard(doc, record, variableMap),
+    workspaceDefinition(doc, [['目的ID', definition.id], ['版', definition.revision], ['digest', record.digest]]));
+  body.append(original); return body;
+}
+
+function topicTitle(doc, title, text) {
+  const head = workspaceSectionTitle(doc, { title });
+  head.append(workspaceHelp(doc, { label: title, text })); return head;
+}
+
 function renderObjectives(doc, catalog, viewState, callbacks, recordContexts) {
   const section = makeElement(doc, 'section', { className: 'bb-fov-section', attrs: { 'aria-label': '目的' } });
-  section.append(workspaceSectionTitle(doc, {
-    title: '目的',
-    lead: '目指す状態、評価の定義、記録上の現状を分けて確認します。',
-  }));
+  section.append(topicTitle(doc, '目的', '目指す状態、評価の定義、記録上の現状を分けて確認します。'));
   if (catalog.objectives.length === 0) {
     section.append(workspaceNotice(doc, { label: '目的', text: 'この対象範囲には登録された目的がありません。' }));
     return section;
   }
-  const variableMap = new Map(catalog.variables.map((record) => [foundationKey(recordDefinition(record)), record]));
-  const rows = catalog.objectives.map((record) => {
-    const definition = recordDefinition(record);
-    const details = detailsFor(record);
+  const variableMap = new Map(catalog.variables.map(record => [foundationKey(recordDefinition(record)), record]));
+  const rows = catalog.objectives.map(record => {
+    const definition = recordDefinition(record), details = detailsFor(record), current = currentStateFor(record);
     const key = recordContexts?.get(record)?.key ?? `${definition.id}@${definition.revision}`;
     return {
-      key,
-      selected: key === viewState.objectiveKey,
+      key, selected: key === viewState.objectiveKey,
       onSelect: () => {
         viewState.objectiveKey = key;
-        callbacks.render?.();
+        const opener = doc.activeElement;
+        viewState.dialog?.close();
+        viewState.dialog = workspaceDialog(doc, {
+          title: formatAny(details.title) ?? formatAny(definition.meaning) ?? definition.id, opener,
+          content: objectiveReading(doc, record, recordContexts?.get(record)?.variableMap ?? variableMap, recordContexts),
+        });
       },
       cells: [
-        { primary: formatAny(firstValue(details, 'title')) ?? formatAny(definition.meaning) ?? definition.id, secondary: recordContexts?.get(record)?.label ?? `${definition.id}@${definition.revision}` },
-        formatAny(definition.desiredState) ?? '目指す状態: 未記録',
-        formatAny(definition.adoptionState) ? (ADOPTION_LABELS[definition.adoptionState] ?? definition.adoptionState) : '状態未確認',
+        { primary: formatAny(details.title) ?? formatAny(definition.meaning) ?? definition.id },
+        current.text ?? current.status ?? '未記録',
+        { text: current.missing.length ? current.missing.join('・') : missingObjectiveFields(record).join('・') || '記録なし', className: 'bb-fov-missing' },
+        formatDate(current.asOf),
       ],
     };
   });
-  section.append(workspaceLedger(doc, {
-    className: 'bb-fov-objective-ledger',
-    ariaLabel: '登録された目的',
-    columns: ['目的', '目指す状態', '登録状態'],
-    rows,
-  }));
-  const selected = catalog.objectives.find((record) => {
-    const definition = recordDefinition(record);
-    return (recordContexts?.get(record)?.key ?? `${definition.id}@${definition.revision}`) === viewState.objectiveKey;
-  }) ?? (recordContexts ? null : catalog.objectives[0]);
-  if (!selected && recordContexts) section.append(makeElement(doc, 'p', { className: 'bb-fov-recorded-notice', text: '目的の行を選ぶと、評価基準と記録上の現状を確認できます。' }));
-  if (selected) {
-    const selectedDefinition = recordDefinition(selected);
-    viewState.objectiveKey = recordContexts?.get(selected)?.key ?? `${selectedDefinition.id}@${selectedDefinition.revision}`;
-    if (catalog.objectives.length > 1) {
-      section.append(workspaceNotice(doc, {
-        label: '詳細表示',
-        text: `目的${catalog.objectives.length}件のうち1件を選択して詳細を表示しています。`,
-      }));
-    }
-    const card = objectiveCard(doc, selected, recordContexts?.get(selected)?.variableMap ?? variableMap);
-    appendRecordSource(doc, card, selected, recordContexts);
-    section.append(card);
-  }
+  section.append(workspaceLedger(doc, { className: 'bb-fov-objective-ledger', ariaLabel: '登録された目的', columns: ['目的', '現状', '確認待ち', '確認日'], rows }));
   return section;
 }
 
@@ -506,9 +514,7 @@ function philosophyCard(doc, record) {
   const card = makeElement(doc, 'article', { className: 'bb-fov-philosophy-card' });
   const title = formatAny(payload.title) ?? record.id;
   card.append(makeElement(doc, 'h3', { text: title }));
-  const rawStatus = formatAny(payload.status);
-  const status = rawStatus ? (PHILOSOPHY_STATUS_LABELS[rawStatus] ?? `未確認（${rawStatus}）`) : '状態未確認';
-  card.append(makeElement(doc, 'p', { className: 'bb-fov-status', text: `状態: ${status} ／ 版: ${record.revision}` }));
+
   if (formatAny(payload.statement)) card.append(makeElement(doc, 'p', { className: 'bb-fov-philosophy-statement', text: formatAny(payload.statement) }));
   if (formatAny(payload.summary)) card.append(makeElement(doc, 'p', { text: formatAny(payload.summary) }));
   const applicability = record.applicability?.scope
@@ -523,10 +529,7 @@ function philosophyCard(doc, record) {
 
 function renderPhilosophies(doc, catalog, recordContexts) {
   const section = makeElement(doc, 'section', { className: 'bb-fov-section', attrs: { 'aria-label': '哲学' } });
-  section.append(workspaceSectionTitle(doc, {
-    title: '哲学',
-    lead: '判断の前提となる考え方です。登録された本文と、判断への適用範囲を分けて表示します。',
-  }));
+
   if (catalog.philosophies.length === 0) {
     section.append(workspaceNotice(doc, { label: '哲学', text: 'この対象範囲には登録された哲学がありません。' }));
     return section;
@@ -534,8 +537,9 @@ function renderPhilosophies(doc, catalog, recordContexts) {
   const grid = makeElement(doc, 'div', { className: 'bb-fov-philosophy-grid' });
   for (const record of catalog.philosophies) {
     const card = philosophyCard(doc, record);
-    appendRecordSource(doc, card, record, recordContexts);
-    grid.append(card);
+    const refs = makeElement(doc, 'details', { className: 'bb-fov-original' });
+    refs.append(makeElement(doc, 'summary', { text: '記録の詳細' }), workspaceDefinition(doc, [['出典', recordContexts?.get(record)?.label ?? '未記録'], ['状態', record.payload.status], ['版', record.revision], ['記録ID', record.id], ['digest', record.digest]]));
+    card.append(refs); grid.append(card);
   }
   section.append(grid);
   return section;
@@ -592,10 +596,7 @@ function modelCard(doc, record, variableMap) {
 
 function renderModels(doc, catalog, viewState, callbacks, recordContexts) {
   const section = makeElement(doc, 'section', { className: 'bb-fov-section', attrs: { 'aria-label': '世界モデル' } });
-  section.append(workspaceSectionTitle(doc, {
-    title: '世界モデル',
-    lead: '変数の関係として登録された見方です。仮説・未検証・許可用途を、それぞれの状態として表示します。',
-  }));
+
   const searchWrap = makeElement(doc, 'div', { className: 'bb-fov-model-search' });
   const label = makeElement(doc, 'label', { text: 'モデルを検索', attrs: { for: 'bb-fov-model-search' } });
   const input = makeElement(doc, 'input', {
@@ -682,6 +683,7 @@ export function renderFoundationOverview(root, state, {
   showHeader = true,
   recordContexts,
   partial = false,
+  onNotice,
 } = {}) {
   if (!root) throw new TypeError('root is required');
   const doc = getDocument(explicitDocument);
@@ -698,28 +700,26 @@ export function renderFoundationOverview(root, state, {
       source: `正本: ${scopeId}`,
     }));
   }
-  if (!recordContexts) surface.append(workspaceNotice(doc, {
-    label: '対象範囲',
-    text: scopeId,
-  }));
+  const notify = notice => {
+    if (onNotice) onNotice(notice);
+    else surface.append(workspaceErrorCard(doc, notice));
+  };
   if (state.status === 'loading') {
-    surface.append(renderLoading(doc, state, callbacks));
-    root.append(surface);
-    return surface;
+    surface.append(renderLoading(doc, state, callbacks)); root.append(surface); return surface;
   }
   if (state.status !== 'ready') {
-    surface.append(renderFailure(doc, state, callbacks));
-    root.append(surface);
-    return surface;
+    notify({ title: '取得失敗', message: `${state.error?.message ?? '目的・哲学・世界モデルを確認できません。'} 登録なし・0件として表示していません。`, onRetry: callbacks.load });
+    root.append(surface); return surface;
   }
   const catalog = state.catalog;
-  if (partial) surface.append(workspaceNotice(doc, { label: '取得済みの範囲', text: '以下の件数・登録なし・検索結果は、取得できた記録だけを対象にしています。全体は未確認です。' }));
-  surface.append(recordContexts
-    ? makeElement(doc, 'p', { className: 'bb-fov-recorded-notice', text: '記録上の現状は保存時点の記述です。登録状態と検証状態を分けて読みます。' })
-    : workspaceNotice(doc, { label: '読み方', text: '登録は達成・採用・検証済みを意味しません。記録上の現状は保存時点の記述です。' }));
+  if (partial) notify({ title: '取得済みの範囲', tone: 'warning', message: '以下の登録なし・検索結果は取得できた記録だけが対象です。全体は未確認です。' });
   surface.append(renderObjectives(doc, catalog, viewState, callbacks, recordContexts));
-  surface.append(renderPhilosophies(doc, catalog, recordContexts));
-  surface.append(renderModels(doc, catalog, viewState, callbacks, recordContexts));
+  const fold = (title, help, content, initialOpen) => {
+    const key = title === '哲学' ? 'philosophyOpen' : 'modelsOpen';
+    return workspaceDisclosure(doc, { title, help, content, open: viewState[key] ?? initialOpen, onToggle: open => { viewState[key] = open; } });
+  };
+  surface.append(fold('哲学', '判断の前提となる考え方です。登録された本文と、判断への適用範囲を分けて表示します。', renderPhilosophies(doc, catalog, recordContexts), true));
+  surface.append(fold('世界モデル', '何をすると結果が変わるか、という仮説。未検証・許可用途を分けて確認します。', renderModels(doc, catalog, viewState, callbacks, recordContexts), false));
   root.append(surface);
   return surface;
 }
@@ -731,7 +731,7 @@ function appendRecordSource(doc, card, record, contexts) {
 
 /** Compose independently validated catalogs by topic, preserving each reference's source context. */
 export function renderFoundationCollectionOverview(root, sources, {
-  document: explicitDocument, viewState = { query: '', page: 0 }, callbacks = {}, scopeLabel = '全体',
+  document: explicitDocument, viewState = { query: '', page: 0 }, callbacks = {}, scopeLabel = '全体', onNotice,
 } = {}) {
   const doc = getDocument(explicitDocument);
   root.replaceChildren();
@@ -741,14 +741,12 @@ export function renderFoundationCollectionOverview(root, sources, {
   let ready = 0;
   for (const source of sources) {
     if (source.state.status !== 'ready') {
-      const notice = workspaceNotice(doc, {
-        label: source.label,
-        text: source.state.status === 'loading' ? '目的・哲学・世界モデルを読み込んでいます。'
-          : `取得失敗: ${source.state.error?.message ?? 'この対象は未確認です。0件ではありません。'}`,
-        tone: source.state.status === 'loading' ? 'info' : 'danger',
-      });
-      notice.append(workspaceButton(doc, { text: '再試行', variant: 'quiet', onClick: callbacks.load }));
-      root.append(notice);
+      if (source.state.status === 'loading') {
+        root.append(workspaceNotice(doc, { label: source.label, text: '目的・哲学・世界モデルを読み込んでいます。' }));
+      } else {
+        const notice = { title: source.label, message: `取得失敗: ${source.state.error?.message ?? 'この対象は未確認です。0件ではありません。'}`, onRetry: callbacks.load };
+        if (onNotice) onNotice(notice); else root.append(workspaceErrorCard(doc, notice));
+      }
       continue;
     }
     const value = normalizeFoundationCatalog(source.state.catalog, source.scopeId);
@@ -780,7 +778,7 @@ export function renderFoundationCollectionOverview(root, sources, {
     const mount = makeElement(doc, 'div');
     renderFoundationOverview(mount, { status: 'ready', catalog }, {
       document: doc, scopeId: scopeLabel, showHeader: false, viewState, callbacks,
-      recordContexts: contexts, partial: ready !== sources.length,
+      recordContexts: contexts, partial: ready !== sources.length, onNotice,
     });
     root.append(mount);
   }
@@ -813,6 +811,7 @@ export function createFoundationOverview({ root, port, scopeId, document: explic
     },
     async load() {
       if (destroyed) return state;
+      viewState.dialog?.close();
       const requestGeneration = ++generation;
       state.status = 'loading';
       state.catalog = null;
@@ -841,6 +840,7 @@ export function createFoundationOverview({ root, port, scopeId, document: explic
     destroy() {
       destroyed = true;
       generation += 1;
+      viewState.dialog?.close();
       root.replaceChildren();
     },
   };

package/ui/graph-own-share.js

@@ -282,11 +282,15 @@ export function createOwnObjectivesView({
   basePath = '/api/graph/own',
   label = GRAPH_OWN_OBJECTIVES_LABEL,
   autoLoad = true,
+  compact = false,
+  onState,
+  onNotice,
 } = {}) {
   if (!root) throw new TypeError('root is required');
   const doc = explicitDocument ?? globalThis.document;
   const source = graphOwnShareSource({ basePath, label }, { fetcher });
   const state = { list: { state: 'loading' }, selectedId: null };
+  let destroyed = false, generation = 0;
 
   function detail(objective) {
     const wrap = makeElement(doc, 'div', { className: 'bb-graph-own-detail', attrs: { 'aria-label': '選んだ目的（引き継いだ自分の分）' } });
@@ -316,7 +320,17 @@ export function createOwnObjectivesView({
 
   function body() {
     const notice = ownShareStateNotice(doc, state.list, { onRetry: () => controller.load(), loadingText: '引き継いだ自分の目的を読み込んでいます。' });
-    if (notice) return [notice];
+    if (notice) {
+      if (compact && state.list.state !== 'loading' && state.list.state !== 'not_handed_over') {
+        onNotice?.({ title: label, message: `${state.list.reason ?? '引き継いだ自分の目的を取得できません。'} 0件ではありません。`, onRetry: () => controller.load() });
+        return [makeElement(doc, 'p', { className: 'bb-ws-inline-error', text: '取得できません' })];
+      }
+      if (compact && state.list.state === 'not_handed_over') {
+        const guide = makeElement(doc, 'details'); guide.append(makeElement(doc, 'summary', { text: '引き継ぎの案内' }), notice);
+        return [makeElement(doc, 'p', { text: 'まだ引き継いだ目的はありません。' }), guide];
+      }
+      return [notice];
+    }
     const { payload } = state.list;
     if (payload.objectives.length === 0) {
       return [makeElement(doc, 'p', { className: 'bb-graph-empty', text: payload.foundation === 'none' ? 'この束には、目的の定義がありません。' : 'この束には、目的がありません。' })];
@@ -346,18 +360,31 @@ export function createOwnObjectivesView({
   const controller = {
     get state() { return state; },
     render() {
+      if (destroyed) return controller;
       const handover = state.list.state === 'ok' ? state.list.payload.handover : null;
-      root.replaceChildren(ownShareSection(doc, { label: source.label, lead: OBJECTIVES_LEAD, handover, children: body(), className: 'bb-graph-own-objectives' }));
+      if (compact) {
+        const facts = makeElement(doc, 'p', { className: 'bb-graph-own-facts', text: '読み取りのみ' });
+        const refs = makeElement(doc, 'details');
+        refs.append(makeElement(doc, 'summary', { text: '出典' }), makeElement(doc, 'p', { text: ownShareHandoverText(handover) ?? (state.list.state === 'not_handed_over' ? 'まだ引き継いでいません。' : '出典は確認できません。') }));
+        root.replaceChildren(facts, ...body(), refs);
+      }
+      else root.replaceChildren(ownShareSection(doc, { label: source.label, lead: OBJECTIVES_LEAD, handover, children: body(), className: 'bb-graph-own-objectives' }));
+      onState?.(state.list);
       return controller;
     },
     async load() {
+      if (destroyed) return state.list;
+      const requestGeneration = ++generation;
       state.list = { state: 'loading' };
       controller.render();
-      state.list = normalizeOwnObjectives(await source.client.read('/objectives'));
+      const result = await source.client.read('/objectives');
+      if (destroyed || requestGeneration !== generation) return state.list;
+      state.list = normalizeOwnObjectives(result);
       if (state.list.state !== 'ok' || !state.list.payload.objectives.some((objective) => objective.id === state.selectedId)) state.selectedId = null;
       controller.render();
       return state.list;
     },
+    destroy() { destroyed = true; generation++; root.replaceChildren(); },
     select(id) {
       state.selectedId = textOrNull(id);
       return controller.render();

package/ui/local-web-shell.css

@@ -1,3 +1,4 @@
+@import './native-scrollbars.css';
 /*
  * Shell of the local Web host, in the organization edition's layout: a white
  * left rail (brand, navigation, source) and a paper workspace. Uses only the

package/ui/local-web-shell.js

@@ -26,6 +26,7 @@ import { createMeetingMinutesStorageExtension } from './meeting-minutes-storage.
 import { createMeetingMinutesLineageExtension } from './meeting-minutes-lineage-http.js';
 import { createWorldModelView } from './world-model-view.js';
 import { createGraphClient } from './graph-view-shared.js';
+import { installNativeScrollbars } from './native-scrollbars.js';
 
 export const LOCAL_WEB_SHELL_CONTRACT_VERSION = 'brainbase.local-web-shell.v1';
 
@@ -459,6 +460,7 @@ export function createLocalWebShell({
   }
   shell.append(sidebar, backdrop, workspace, railAside);
   root.replaceChildren(shell);
+  const stopScrollbars = doc.documentElement?.classList && doc.addEventListener ? installNativeScrollbars(doc) : () => {};
 
   // The rail column shows only while the active screen is mounted and has one.
   function updateRail() {
@@ -493,6 +495,7 @@ export function createLocalWebShell({
   }
 
   const controller = {
+    destroy() { stopScrollbars(); for (const view of mounted.values()) view?.destroy?.(); root.replaceChildren(); },
     get state() {
       return { active, status, mounted: [...mounted.keys()] };
     },

package/ui/native-scrollbars.css

@@ -0,0 +1,18 @@
+
+@property --bb-scrollbar-opacity { syntax: "<number>"; inherits: false; initial-value: 0; }
+:root.bb-native-scrollbars, .bb-native-scrollbars :is(.bb-scrollable, .sidebar, .bb-shell-sidebar, .bb-shell-main, .bb-shell-rail, .bb-ws-dialog, .mutation-dialog) {
+  --bb-scrollbar-rgb: var(--bb-color-scrollbar-rgb); --bb-scrollbar-opacity: 0;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(var(--bb-scrollbar-rgb),var(--bb-scrollbar-opacity)) transparent;
+  transition: --bb-scrollbar-opacity 450ms ease;
+}
+.bb-native-scrollbars :is(.sidebar,.bb-shell-sidebar) { --bb-scrollbar-rgb: var(--bb-color-scrollbar-dark-rgb); }
+:root.bb-native-scrollbars.bb-is-scrolling, .bb-native-scrollbars .bb-is-scrolling { --bb-scrollbar-opacity: .28; }
+:root.bb-native-scrollbars::-webkit-scrollbar, .bb-native-scrollbars :is(.bb-scrollable,.sidebar,.bb-shell-sidebar,.bb-shell-main,.bb-shell-rail,.bb-ws-dialog,.mutation-dialog)::-webkit-scrollbar { width: 6px; height: 6px; }
+:root.bb-native-scrollbars::-webkit-scrollbar-track, .bb-native-scrollbars :is(.bb-scrollable,.sidebar,.bb-shell-sidebar,.bb-shell-main,.bb-shell-rail,.bb-ws-dialog,.mutation-dialog)::-webkit-scrollbar-track { background: transparent; }
+:root.bb-native-scrollbars::-webkit-scrollbar-thumb, .bb-native-scrollbars :is(.bb-scrollable,.sidebar,.bb-shell-sidebar,.bb-shell-main,.bb-shell-rail,.bb-ws-dialog,.mutation-dialog)::-webkit-scrollbar-thumb { background: rgba(var(--bb-scrollbar-rgb),var(--bb-scrollbar-opacity)); border-radius: 8px; }
+@media (prefers-reduced-motion: reduce) { :root.bb-native-scrollbars, .bb-native-scrollbars :is(.bb-scrollable,.sidebar,.bb-shell-sidebar,.bb-shell-main,.bb-shell-rail,.bb-ws-dialog,.mutation-dialog) { transition: none; } }
+@media (forced-colors: active) {
+  :root.bb-native-scrollbars, .bb-native-scrollbars :is(.bb-scrollable,.sidebar,.bb-shell-sidebar,.bb-shell-main,.bb-shell-rail,.bb-ws-dialog,.mutation-dialog) { scrollbar-width: auto; scrollbar-color: auto; }
+  :root.bb-native-scrollbars::-webkit-scrollbar-thumb, .bb-native-scrollbars :is(.bb-scrollable,.sidebar,.bb-shell-sidebar,.bb-shell-main,.bb-shell-rail,.bb-ws-dialog,.mutation-dialog)::-webkit-scrollbar-thumb { background: CanvasText; }
+}

package/ui/native-scrollbars.js

@@ -0,0 +1,18 @@
+/** Animate native scrollbars without replacing scrolling or input handling. */
+export function installNativeScrollbars(doc = document) {
+  const timers = new Map();
+  doc.documentElement.classList.add('bb-native-scrollbars');
+  const activate = event => {
+    const target = event.target === doc ? doc.scrollingElement : event.target;
+    if (!target?.classList) return;
+    target.classList.add('bb-scrollable', 'bb-is-scrolling');
+    clearTimeout(timers.get(target));
+    timers.set(target, setTimeout(() => { target.classList.remove('bb-is-scrolling'); timers.delete(target); }, 800));
+  };
+  doc.addEventListener('scroll', activate, true);
+  return () => {
+    doc.removeEventListener('scroll', activate, true);
+    for (const [target, timer] of timers) { clearTimeout(timer); target.classList.remove('bb-is-scrolling'); }
+    timers.clear(); doc.documentElement.classList.remove('bb-native-scrollbars');
+  };
+}

package/ui/workspace-kit.css

@@ -494,3 +494,39 @@
   }
 
 }
+
+/* Shared help, modal, disclosures and persistent notifications. */
+.bb-ws-help { position: relative; display: inline-flex; vertical-align: middle; }
+.bb-ws-help-button { display: grid; place-items: center; width: 16px; height: 16px; padding: 0; border: 1px solid var(--bb-color-muted); border-radius: 50%; background: transparent; color: var(--bb-color-muted); font: italic 11px var(--bb-font-help); cursor: help; }
+.bb-ws-help-bubble { position: absolute; z-index: 70; bottom: calc(100% + 8px); left: 50%; width: min(300px,70vw); padding: 10px 12px; border: 1px solid var(--bb-color-border); border-radius: 8px; background: var(--bb-color-panel); color: var(--bb-color-ink); font-size: 12px; font-weight: normal; line-height: 1.7; box-shadow: var(--bb-shadow-help); opacity: 0; visibility: hidden; transform: translate(-50%,4px); transition: opacity 160ms ease,transform 160ms ease,visibility 160ms; pointer-events: none; }
+.bb-ws-help-bubble::after { content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 10px; }
+.bb-ws-help:not(.is-dismissed):is(:hover,:focus-within,.is-open) .bb-ws-help-bubble { opacity: 1; visibility: visible; transform: translate(-50%,0); pointer-events: auto; }
+.bb-ws-dialog { width: min(720px,calc(100vw - 36px)); max-height: calc(100dvh - 48px); box-sizing: border-box; padding: 0; overflow: auto; border: 1px solid var(--bb-color-border); border-radius: 12px; background: var(--bb-color-panel); color: var(--bb-color-ink); font: inherit; }
+.bb-ws-dialog::backdrop { background: var(--bb-color-dialog-overlay); }
+.bb-ws-dialog-head { display: flex; justify-content: space-between; align-items: start; gap: 20px; padding: 24px 28px; border-bottom: 1px solid var(--bb-color-border); }
+.bb-ws-dialog-head h2 { margin: 0; font-size: 22px; line-height: 1.5; }
+.bb-ws-dialog-body { padding: 28px; }
+.bb-ws-disclosure { border-top: 1px solid var(--bb-color-border); }
+.bb-ws-disclosure > summary { display: flex; align-items: center; gap: 12px; padding: 16px 0; cursor: pointer; list-style: none; }
+.bb-ws-disclosure > summary::-webkit-details-marker { display: none; }
+.bb-ws-disclosure > summary::before { content: '›'; font-size: 20px; color: var(--bb-color-muted); }
+.bb-ws-disclosure[open] > summary::before { transform: rotate(90deg); }
+.bb-ws-disclosure > summary h2 { margin: 0; font-size: 22px; line-height: 1.4; }
+.bb-ws-disclosure > :not(summary) { margin: 0 0 18px 25px; }
+.bb-ws-disclosure > summary:focus-visible, .bb-ws-help-button:focus-visible { outline: 2px solid var(--bb-color-focus); outline-offset: 3px; }
+.bb-ws-error-stack { position: absolute; z-index: 55; top: 0; right: 0; width: min(300px,100%); max-height: none; padding-bottom: 64px; pointer-events: none; box-sizing: border-box; overflow: visible; }
+.bb-ws-error-list { display: grid; gap: 6px; }
+.bb-ws-error-count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+.bb-ws-error-card { display: flex; align-items: start; gap: 8px; box-sizing: border-box; width: 100%; padding: 8px 10px; border: 1px solid var(--bb-color-notice-border); border-left: 3px solid var(--bb-color-notice-danger); border-radius: 4px; background: var(--bb-color-notice-background); backdrop-filter: blur(5px); color: var(--bb-color-notice-text); font-size: 12px; line-height: 1.5; pointer-events: auto; }
+.bb-ws-error-card.is-warning { border-left-color: var(--bb-color-notice-warning); }
+.bb-ws-error-card > details { flex: 1; min-width: 0; }
+.bb-ws-error-card summary { display: flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; }
+.bb-ws-error-card summary::-webkit-details-marker { display: none; }
+.bb-ws-error-card summary > span:last-child { overflow-wrap: anywhere; }
+.bb-ws-error-symbol { display: grid; flex: none; place-items: center; width: 14px; height: 14px; border: 1px solid var(--bb-color-notice-danger-symbol-border); color: var(--bb-color-notice-danger-text); border-radius: 3px; }
+.bb-ws-error-card.is-warning .bb-ws-error-symbol { color: var(--bb-color-notice-warning-text); border-color: var(--bb-color-notice-warning-symbol-border); }
+.bb-ws-error-card p { margin: 8px 0 0; overflow-wrap: anywhere; font-size: 11px; }
+.bb-ws-error-card .bb-ws-button { flex: none; min-height: 18px; padding: 0 5px; border: 1px solid var(--bb-color-notice-control-border); border-radius: 4px; background: transparent; color: var(--bb-color-notice-text); font-size: 11px; line-height: 16px; }
+.bb-ws-error-card :is(summary,button):focus-visible { outline: 2px solid var(--bb-color-notice-text); outline-offset: 2px; }
+.bb-ws-inline-error { height: 15px; max-height: 15px; margin: 4px 0; padding: 0; overflow: hidden; color: var(--bb-color-inline-error); font-size: 11px; line-height: 15px; }
+@media (prefers-reduced-motion: reduce) { .bb-ws-help-bubble { transition: none; } }

package/ui/workspace-kit.js

@@ -230,3 +230,68 @@ export function workspaceSectionTitle(doc, { title, lead } = {}) {
   if (lead) wrap.append(el(doc, 'p', { text: lead }));
   return wrap;
 }
+
+
+let workspaceSequence = 0;
+/** Shared explanatory help: hover/focus above the control, click for touch. */
+export function workspaceHelp(doc, { text, label } = {}) {
+  const wrap = el(doc, 'span', { className: 'bb-ws-help' });
+  const control = workspaceButton(doc, { text: 'i', attrs: { 'aria-label': `${label}の説明`, 'aria-expanded': 'false' } });
+  control.className = 'bb-ws-help-button';
+  const bubble = el(doc, 'span', { className: 'bb-ws-help-bubble', text, attrs: { id: `bb-ws-help-${++workspaceSequence}`, role: 'tooltip' } });
+  control.setAttribute('aria-describedby', bubble.id || bubble.getAttribute?.('id') || bubble.attributes?.id);
+  control.addEventListener('click', event => {
+    event.stopPropagation(); event.preventDefault();
+    const opened = wrap.classList.toggle('is-open');
+    wrap.classList.remove('is-dismissed');
+    control.setAttribute('aria-expanded', String(opened));
+  });
+  wrap.addEventListener('mouseleave', () => wrap.classList.remove('is-dismissed'));
+  control.addEventListener('blur', () => { wrap.classList.remove('is-open', 'is-dismissed'); control.setAttribute('aria-expanded', 'false'); });
+  control.addEventListener('keydown', event => {
+    if (event.key !== 'Escape') return;
+    wrap.classList.remove('is-open'); wrap.classList.add('is-dismissed');
+    control.setAttribute('aria-expanded', 'false'); event.stopPropagation();
+  });
+  wrap.append(control, bubble); return wrap;
+}
+
+/** Native dialog keeps focus trapped, Escape close and focus restoration. */
+export function workspaceDialog(doc, { title, content, opener } = {}) {
+  const dialog = el(doc, 'dialog', { className: 'bb-ws-dialog' });
+  const headingId = `bb-ws-dialog-${++workspaceSequence}`;
+  dialog.setAttribute('aria-labelledby', headingId);
+  const head = el(doc, 'header', { className: 'bb-ws-dialog-head' });
+  const close = workspaceButton(doc, { text: '×', attrs: { 'aria-label': '閉じる' }, onClick: () => dialog.close() });
+  head.append(el(doc, 'h2', { text: title, attrs: { id: headingId } }), close);
+  const body = el(doc, 'div', { className: 'bb-ws-dialog-body' }); appendContent(body, doc, content);
+  dialog.append(head, body); doc.body.append(dialog);
+  dialog.addEventListener('click', event => {
+    if (event.target !== dialog) return;
+    const rect = dialog.getBoundingClientRect();
+    if (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom) dialog.close();
+  });
+  dialog.addEventListener('close', () => { dialog.remove(); if (opener?.isConnected) opener.focus(); }, { once: true });
+  dialog.showModal(); close.focus(); return dialog;
+}
+
+/** Persistent, initially closed notification. The caller owns its lifecycle. */
+export function workspaceErrorCard(doc, { title, message, tone = 'danger', onRetry } = {}) {
+  const card = el(doc, 'section', { className: `bb-ws-error-card is-${tone}`, attrs: { role: 'listitem' } });
+  const details = el(doc, 'details');
+  const summary = el(doc, 'summary', { attrs: { 'aria-label': `${title}の通知` } });
+  summary.append(el(doc, 'span', { className: 'bb-ws-error-symbol', text: '!', attrs: { 'aria-hidden': 'true' } }), el(doc, 'span', { text: title }));
+  details.append(summary, el(doc, 'p', { text: message })); card.append(details);
+  if (onRetry) card.append(workspaceButton(doc, { text: '再試行', attrs: { 'aria-label': `${title}を再試行` }, onClick: onRetry }));
+  return card;
+}
+
+export function workspaceDisclosure(doc, { title, help, content, open = false, onToggle } = {}) {
+  const details = el(doc, 'details', { className: 'bb-ws-disclosure' }); details.open = open;
+  const summary = el(doc, 'summary');
+  summary.append(el(doc, 'h2', { text: title }));
+  if (help) summary.append(workspaceHelp(doc, { label: title, text: help }));
+  details.append(summary, content);
+  if (onToggle) details.addEventListener('toggle', () => onToggle(details.open));
+  return details;
+}