@unson/brainbase-mcp 0.41.10 → 0.41.13

package/ui/local-web-shell.css

@@ -1,4 +1,5 @@
 @import './native-scrollbars.css';
+@import './area-nav.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
@@ -71,19 +72,6 @@ body {
   gap: 2px;
 }
 
-.bb-shell-nav-group {
-  display: grid;
-  gap: 2px;
-}
-
-.bb-shell-nav-group-head {
-  margin: 14px 10px 4px;
-  color: var(--bb-color-rail-muted);
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: .04em;
-}
-
 .bb-shell-nav-link {
   min-height: 38px;
   display: flex;

package/ui/local-web-shell.js

@@ -17,6 +17,7 @@
 
 import { createGraphProjectsView } from './graph-projects-view.js';
 import { createGraphRegistryView } from './graph-registry-view.js';
+import { createGraphOntologyView } from './graph-ontology-view.js';
 import { createPeopleAndCompaniesView } from './people-and-companies-view.js';
 import { createObjectiveEditorController } from './objective-editor.js';
 import { createObjectiveEditorHttpPort } from './objective-editor-http-port.js';
@@ -27,6 +28,7 @@ import { createMeetingMinutesLineageExtension } from './meeting-minutes-lineage-
 import { createWorldModelView } from './world-model-view.js';
 import { createGraphClient } from './graph-view-shared.js';
 import { installNativeScrollbars } from './native-scrollbars.js';
+import { browserAreaStorage, createAreaMemory, createAreaNav } from './area-nav.js';
 
 export const LOCAL_WEB_SHELL_CONTRACT_VERSION = 'brainbase.local-web-shell.v1';
 
@@ -51,22 +53,30 @@ const NAV_ICON_PATHS = Object.freeze({
   minutes: ['M6 3.5h9l3 3V20.5H6z', 'M15 3.5v4h3', 'M9 12h6m-6 3h6'],
   // Two people (the organization edition's 人と会社 uses the same shape).
   people: ['M9 11a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z', 'M2.5 20a6.5 6.5 0 0 1 13 0', 'M16 4.5a3.5 3.5 0 0 1 0 6.5', 'M18 14a6.5 6.5 0 0 1 3.5 6'],
+  // Kinds of information and how they connect (settings, ledger D14): three linked boxes.
+  ontology: ['M4 4h6v6H4z', 'M14 14h6v6h-6z', 'M14 4h6v6h-6z', 'M10 7h4', 'M17 10v4'],
   // World view (extension id `world`, ledger P17).
   world: ['M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18z', 'M3 12h18', 'M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z'],
+  // Areas whose screens have their own icons (ledger D10, stage 2): a briefcase, and
+  // the organization edition's gear.
+  'area:work': ['M4 8h16v11H4z', 'M9 8V5h6v3', 'M4 13h16'],
+  'area:settings': ['M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915', 'M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'],
 });
 // Screens without their own icon (for example a private product's extension).
 const DEFAULT_NAV_ICON_PATHS = Object.freeze(['M5 20V10m7 10V4m7 16v-7']);
 const SVG_NS = 'http://www.w3.org/2000/svg';
 
-// The menu's areas (brainbase-project ledger D10): the same order and headings
-// as the organization edition. 目的と現状 is the only item of its area, so it
-// has no heading. Inside an area, `order` lists the screens first in that order.
+// The menu's areas (brainbase-project ledger D10): the same order and names as
+// the organization edition. The left side lists only the areas; the screens of
+// the current area are tabs above the page (stage 2). 目的と現状 is the only
+// screen of its area and keeps its own name. Inside an area, `order` lists the
+// screens first in that order; `defaultScreen` opens when nothing is remembered.
 const NAV_AREAS = Object.freeze([
-  Object.freeze({ id: 'purpose', label: null, order: ['objectives'] }),
-  Object.freeze({ id: 'work', label: '仕事', order: ['projects', 'minutes'] }),
-  Object.freeze({ id: 'outcomes', label: '成果', order: ['value-proofs'] }),
-  Object.freeze({ id: 'information', label: '情報と関係', order: ['graph', 'people'] }),
-  Object.freeze({ id: 'settings', label: '設定', order: [] }),
+  Object.freeze({ id: 'purpose', label: null, order: ['objectives'], icon: 'objectives' }),
+  Object.freeze({ id: 'work', label: '仕事', order: ['projects', 'minutes'], defaultScreen: 'projects', icon: 'area:work' }),
+  Object.freeze({ id: 'outcomes', label: '成果', order: ['value-proofs'], icon: 'value-proofs' }),
+  Object.freeze({ id: 'information', label: '情報と関係', order: ['graph', 'people'], defaultScreen: 'graph', icon: 'graph' }),
+  Object.freeze({ id: 'settings', label: '設定', order: ['ontology'], defaultScreen: 'ontology', icon: 'area:settings' }),
 ]);
 
 // Menu order only: the screens' own order (and so the first screen) stays as given.
@@ -88,6 +98,23 @@ function navLayout(screens) {
   return { leading, areas, trailing };
 }
 
+// Every menu line is an area: a screen without an area is an area of its own.
+function navAreas(screens) {
+  const layout = navLayout(screens);
+  const own = (screen) => ({ id: screen.id, label: null, screenIds: [screen.id], icon: screen.id });
+  return [
+    ...layout.leading.map(own),
+    ...layout.areas.map(({ area, screens: members }) => ({
+      id: area.id,
+      label: area.label,
+      defaultScreen: area.defaultScreen,
+      screenIds: members.map((screen) => screen.id),
+      icon: area.icon,
+    })),
+    ...layout.trailing.map(own),
+  ];
+}
+
 function makeIcon(doc, id) {
   const paths = NAV_ICON_PATHS[id] ?? DEFAULT_NAV_ICON_PATHS;
   const create = (tag) => (typeof doc.createElementNS === 'function' ? doc.createElementNS(SVG_NS, tag) : doc.createElement(tag));
@@ -186,6 +213,21 @@ function makePage(container, context) {
   return page;
 }
 
+/** Names of judgment references from the local Graph, under the host's current access. */
+function judgmentReferenceLabelReader(context) {
+  const client = createGraphClient({ fetcher: context.fetcher, basePath: '/api/graph', token: context.token });
+  return async (references) => {
+    const labels = new Map();
+    await Promise.all(references.map(async ({ ref }) => {
+      const result = await client.read(`/entities/${encodeURIComponent(ref)}`);
+      const entity = result.state === 'ok' && isRecord(result.payload?.entity) ? result.payload.entity : null;
+      const name = entity && entity.id === ref && typeof entity.name === 'string' ? entity.name.trim() : '';
+      if (name) labels.set(ref, name);
+    }));
+    return labels;
+  };
+}
+
 function mountToday(container, context) {
   return createJudgmentHistoryUI({
     root: makePage(container, context),
@@ -195,6 +237,7 @@ function mountToday(container, context) {
     fetcher: context.fetcher,
     token: context.token,
     basePath: '/api/judgment-history',
+    resolveReferenceLabels: judgmentReferenceLabelReader(context),
   });
 }
 
@@ -283,7 +326,7 @@ function mountGraphScreen(screenId, createView, extra = {}) {
       fetcher: context.fetcher,
       token: context.token,
       initialEntityId: context.initialEntityId,
-      ...extra,
+      ...(typeof extra === 'function' ? extra(context) : extra),
     });
   };
 }
@@ -293,8 +336,13 @@ export const LOCAL_WEB_SCREENS = Object.freeze([
   Object.freeze({ id: 'minutes', label: '議事録', area: 'work', usesGraph: false, rail: true, source: '正本の議事録', mount: mountMeetingMinutes }),
   Object.freeze({ id: 'objectives', label: '目的と現状', area: 'purpose', usesGraph: true, rail: true, source: '手元のGraph', mount: mountObjectives }),
   Object.freeze({ id: 'projects', label: 'プロジェクトと関係者', area: 'work', usesGraph: true, rail: true, source: '手元のGraph', mount: mountGraphScreen('projects', createGraphProjectsView) }),
-  Object.freeze({ id: 'graph', label: '情報と関係', area: 'information', usesGraph: true, rail: true, source: '手元のGraph', mount: mountGraphScreen('graph', createGraphRegistryView) }),
+  // A record of 情報と関係 opens as its own screen at `#graph?entity_id=…`; the list is `#graph`.
+  Object.freeze({ id: 'graph', label: '情報と関係', area: 'information', usesGraph: true, rail: false, source: '手元のGraph', mount: mountGraphScreen('graph', createGraphRegistryView, (context) => ({
+    onRouteChange: (entityId, options) => context.navigate?.(entityId ? `graph?entity_id=${encodeURIComponent(entityId)}` : 'graph', options),
+  })) }),
   Object.freeze({ id: 'people', label: '人と会社', area: 'information', usesGraph: true, rail: true, source: '手元のGraph', mount: mountGraphScreen('people', createPeopleAndCompaniesView, { canCorrect: true }) }),
+  // The definitions behind 情報と関係: infrequent management work, so under settings (ledger D14).
+  Object.freeze({ id: 'ontology', label: '情報の種類とつながり方', area: 'settings', usesGraph: true, rail: false, source: '手元のGraph', mount: mountGraphScreen('ontology', createGraphOntologyView, { canCorrect: true }) }),
 ]);
 
 function renderGraphGate(doc, slot, status, onRecheck, label) {
@@ -378,6 +426,8 @@ export function createLocalWebShell({
   initialScreen,
   meetingMinutesStorage = null,
   meetingMinutesLineage = null,
+  areaMemory = createAreaMemory(browserAreaStorage()),
+  onNavigate,
 } = {}) {
   if (!root) throw new TypeError('root is required');
   const doc = explicitDocument ?? (typeof document === 'undefined' ? null : document);
@@ -385,12 +435,13 @@ export function createLocalWebShell({
   const request = typeof fetcher === 'function'
     ? fetcher
     : typeof globalThis.fetch === 'function' ? (path, init) => globalThis.fetch(path, init) : null;
-  const context = Object.freeze({ document: doc, fetcher: request, token, meetingMinutesStorage, meetingMinutesLineage });
+  // `navigate(target, { back })` lets a screen give its own state an address (the host's hash).
+  const navigate = typeof onNavigate === 'function' ? (target, options = {}) => onNavigate(target, options) : null;
+  const context = Object.freeze({ document: doc, fetcher: request, token, meetingMinutesStorage, meetingMinutesLineage, navigate });
 
   const status = { phase: 'loading', data: null, error: null };
   const mounted = new Map();
   const slots = new Map();
-  const links = new Map();
   const pendingEntityIds = new Map();
   let active = null;
 
@@ -411,37 +462,27 @@ export function createLocalWebShell({
   };
   menuButton.addEventListener('click', () => setMenuOpen(!sidebar.className.includes('is-open')));
   backdrop.addEventListener('click', () => setMenuOpen(false));
-  const navLink = (screen) => {
-    const link = makeElement(doc, 'a', { className: 'bb-shell-nav-link', text: screen.label, attrs: { href: `#${screen.id}` } });
-    // The label stays the link's own text; the icon goes in front where the DOM allows it.
-    if (typeof link.prepend === 'function') link.prepend(makeIcon(doc, screen.id));
-    link.addEventListener('click', () => {
+  const areaList = navAreas(screens);
+  const areaNav = createAreaNav({
+    document: doc,
+    areas: areaList,
+    screens: screens.map((screen) => ({ id: screen.id, label: screen.label })),
+    memory: areaMemory,
+    linkClassName: 'bb-shell-nav-link',
+    iconFor: (area) => makeIcon(doc, areaList.find((entry) => entry.id === area.id)?.icon ?? area.id),
+    onSelect: (screenId) => {
       setMenuOpen(false);
-      controller.show(screen.id);
-    });
-    links.set(screen.id, link);
-    return link;
-  };
-  const layout = navLayout(screens);
-  for (const screen of layout.leading) nav.append(navLink(screen));
-  for (const { area, screens: members } of layout.areas) {
-    if (!area.label) {
-      for (const screen of members) nav.append(navLink(screen));
-      continue;
-    }
-    const headId = `bb-shell-nav-area-${area.id}`;
-    const group = makeElement(doc, 'div', { className: 'bb-shell-nav-group', attrs: { role: 'group', 'aria-labelledby': headId } });
-    group.append(makeElement(doc, 'div', { className: 'bb-shell-nav-group-head', text: area.label, attrs: { id: headId } }));
-    for (const screen of members) group.append(navLink(screen));
-    nav.append(group);
-  }
-  for (const screen of layout.trailing) nav.append(navLink(screen));
+      controller.show(screenId);
+    },
+  });
+  nav.append(areaNav.nav);
   const source = makeElement(doc, 'section', { className: 'bb-shell-source', attrs: { 'aria-label': '出典' } });
   sidebar.append(brand, nav, source);
   const workspace = makeElement(doc, 'div', { className: 'bb-shell-workspace' });
   const mobileBar = makeElement(doc, 'div', { className: 'bb-shell-mobile-bar' });
   mobileBar.append(makeElement(doc, 'strong', { text: 'Brainbase' }), menuButton);
   const main = makeElement(doc, 'main', { className: 'bb-shell-main' });
+  main.append(areaNav.tabs);
   for (const screen of screens) {
     const slot = makeElement(doc, 'section', { className: 'bb-shell-screen', attrs: { 'data-screen': screen.id, 'aria-label': screen.label } });
     slot.hidden = true;
@@ -477,6 +518,8 @@ export function createLocalWebShell({
     if (mounted.has(screen.id)) {
       const view = mounted.get(screen.id);
       if (entityId && screen.id === 'graph' && typeof view?.openEntity === 'function') void view.openEntity(entityId);
+      // `#graph` without a record is the list: a record still open there closes (the browser's back).
+      if (!entityId && screen.id === 'graph' && view?.state?.detail && typeof view.closeEntity === 'function') view.closeEntity();
       if (entityId && screen.id === 'value-proofs' && typeof view?.openDecision === 'function') view.openDecision(entityId);
       if (entityId && screen.id === 'projects' && typeof view?.openProject === 'function') void view.openProject(entityId);
       return;
@@ -510,10 +553,7 @@ export function createLocalWebShell({
           : screen.id === 'projects' ? parsed.projectId ?? null : null);
       active = screen.id;
       for (const [screenId, slot] of slots) slot.hidden = screenId !== screen.id;
-      for (const [screenId, link] of links) {
-        if (screenId === screen.id) link.setAttribute('aria-current', 'page');
-        else link.removeAttribute('aria-current');
-      }
+      areaNav.show(screen.id);
       ensureMounted(screen, pendingEntityIds.get(screen.id));
       updateRail();
       return controller;

package/ui/meeting-minutes.css

@@ -4,7 +4,7 @@
   --bb-color-accent-strong: var(--bb-color-brand-indigo);
   --bb-color-action: var(--bb-color-brand-indigo);
   display: grid;
-  grid-template-rows: auto auto minmax(0, 1fr);
+  grid-template-rows: auto auto auto minmax(0, 1fr);
   gap: 4px;
   height: 100%;
   min-height: 0;
@@ -108,6 +108,70 @@
   color: var(--bb-color-danger);
 }
 
+.bb-minutes-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  align-items: flex-end;
+  min-width: 0;
+  padding: 8px 12px;
+  border: 1px solid var(--bb-color-border);
+  border-radius: var(--bb-radius-md, 6px);
+  background: var(--bb-color-surface);
+}
+
+.bb-minutes-filter-host {
+  display: contents;
+}
+
+.bb-minutes-filter-field {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.bb-minutes-filter-field[hidden],
+.bb-minutes-filter-host[hidden],
+.bb-minutes-filter-reset[hidden] {
+  display: none;
+}
+
+.bb-minutes-filter-field.is-keyword {
+  flex: 1 1 180px;
+  max-width: 260px;
+}
+
+.bb-minutes-filter-field .bb-minutes-input {
+  min-height: 38px;
+  padding: 4px 8px;
+  font-size: 13px;
+}
+
+.bb-minutes-filter-period {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+
+.bb-minutes-filter-period .bb-minutes-input {
+  width: 8.75rem;
+}
+
+.bb-minutes-filter-period-sep {
+  color: var(--bb-color-muted);
+}
+
+.bb-minutes-filter-combobox {
+  min-width: 11rem;
+  max-width: 16rem;
+}
+
+.bb-minutes-create-reason {
+  color: var(--bb-color-muted);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+
 .bb-minutes-columns {
   display: grid;
   grid-template-columns: minmax(340px, 380px) minmax(0, 1fr);
@@ -537,6 +601,28 @@
   .bb-minutes-columns {
     grid-template-columns: 1fr;
   }
+
+  .bb-minutes-filter-field {
+    flex: 1 1 calc(50% - 6px);
+    max-width: none;
+  }
+
+  .bb-minutes-filter-field.is-keyword,
+  .bb-minutes-filter-field.is-period {
+    flex-basis: 100%;
+    max-width: none;
+  }
+
+  .bb-minutes-filter-period .bb-minutes-input {
+    flex: 1 1 0;
+    width: auto;
+    min-width: 0;
+  }
+
+  .bb-minutes-filter-combobox {
+    min-width: 0;
+    max-width: none;
+  }
 }
 
 /* この会議から: project, tasks, decisions, storage and sharing. */