@unson/brainbase-mcp 0.42.0 → 0.43.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unson/brainbase-mcp",
-  "version": "0.42.0",
+  "version": "0.43.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",
@@ -335,6 +335,8 @@
     "./ui/personal-memory": "./ui/personal-memory.js",
     "./ui/personal-memory.css": "./ui/personal-memory.css",
     "./ui/personal-memory-http-port": "./ui/personal-memory-http-port.js",
+    "./ui/inbox": "./ui/inbox.js",
+    "./ui/inbox.css": "./ui/inbox.css",
     "./ui/area-nav": "./ui/area-nav.js",
     "./ui/area-nav.css": "./ui/area-nav.css",
     "./ui/local-web-shell": "./ui/local-web-shell.js",
@@ -494,5 +496,5 @@
   "engines": {
     "node": ">=20"
   },
-  "gitHead": "35fc142733aac0f385f2d21e6d0651e1a9d8d7db"
+  "gitHead": "a8166d088899a27bb8267af9e6dd99d3550c7b63"
 }

package/ui/area-nav.css

@@ -1,15 +1,66 @@
 /*
- * Area navigation (ledger D10, stage 2): the area links on the left and the
- * tabs of the current area above the page. Uses only the shared tokens in
- * brainbase-tokens.css; a host gives the area links its own look through
+ * Area navigation (ledger D10): the destinations on the left, grouped under
+ * small headings with 設定 at the bottom, and the tabs of a destination with
+ * several screens above the page. Uses only the shared tokens in
+ * brainbase-tokens.css; a host gives the links its own look through
  * `linkClassName`.
  */
 .bb-area-nav {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.bb-area-section,
+.bb-area-section-links {
   display: grid;
   gap: 2px;
 }
 
+/* Space between the groups; the footer group sits at the bottom of the nav. */
+.bb-area-section + .bb-area-section {
+  margin-top: var(--bb-space-4);
+}
+
+.bb-area-section.is-footer {
+  margin-top: auto;
+  padding-top: var(--bb-space-4);
+}
+
+.bb-area-section-label {
+  padding: 0 10px 4px;
+  color: var(--bb-color-rail-muted, var(--bb-color-muted));
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: .04em;
+}
+
+.bb-area-section-link {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  border-radius: 6px;
+  padding-top: 4px;
+  text-decoration: none;
+}
+
+/* A heading that opens a screen says so with a chevron (not part of its name). */
+.bb-area-section-link::after {
+  content: "›";
+  font-size: 13px;
+  line-height: 1;
+}
+
+.bb-area-section-link:hover,
+.bb-area-section-link[aria-current="page"] {
+  color: var(--bb-color-accent);
+}
+
 .bb-area-link[hidden],
+.bb-area-section[hidden],
+.bb-area-section-label[hidden],
+.bb-area-section-links[hidden],
 .bb-area-tabs[hidden] {
   display: none;
 }
@@ -67,7 +118,8 @@
 }
 
 .bb-area-tab:focus-visible,
-.bb-area-link:focus-visible {
+.bb-area-link:focus-visible,
+.bb-area-section-link:focus-visible {
   outline: 2px solid var(--bb-color-accent);
   outline-offset: -2px;
 }

package/ui/area-nav.js

@@ -1,13 +1,18 @@
 /*
  * Area navigation shared by OSS Personal and the organization edition
- * (brainbase-project ledger D10, stage 2).
+ * (brainbase-project ledger D10).
  *
- * The left side lists only the areas; the screens of the current area are tabs
- * above the page.  An area link opens the screen last used in that area, which
- * is remembered in the viewer's browser only (a display preference, not a fact
- * of the organization).  Every area link and tab is a link to a screen, so
- * screen addresses never change.  The part draws links only: showing and
- * loading screens stays with the caller (`show` in, `onSelect` out).
+ * Each line on the left is an area: usually one screen (a destination itself,
+ * 2026-10-17 revision), or several screens shown as tabs above the page (設定).
+ * An area link opens the screen last used in that area, which is remembered in
+ * the viewer's browser only (a display preference, not a fact of the
+ * organization).  Optional `sections` group the lines under small headings and
+ * put some at the bottom; a heading can open a screen of its own, and the
+ * caller can put links at the top of a section (starred projects).  Without
+ * `sections` the lines sit directly in the nav, as in stage 2.  Every link is a
+ * link to a screen, so screen addresses never change.  The part draws links
+ * only: showing and loading screens stays with the caller (`show` in,
+ * `onSelect` / `onSelectLink` out).
  */
 
 export const AREA_NAV_CONTRACT_VERSION = 'brainbase.area-nav.v1';
@@ -78,12 +83,18 @@ export function resolveAreaTarget(area, { remembered = null, isShown = () => tru
 /**
  * @param {object} options
  * @param {Document} options.document
- * @param {Array<{id: string, label: string|null, defaultScreen?: string, screenIds: string[]}>} options.areas
+ * @param {Array<{id: string, label: string|null, defaultScreen?: string, screenIds: string[], section?: string}>} options.areas
  *   In menu order. A null label takes the label of the area's only screen.
  * @param {Array<{id: string, label: string, href?: string, external?: boolean, hidden?: boolean}>} options.screens
+ * @param {Array<{id: string, label: string|null, placement?: 'main'|'footer', screenId?: string}>} [options.sections]
+ *   Groups of lines. A section sits where its first area is (a section without
+ *   areas after the other main ones); `footer` sections come last. `screenId`
+ *   makes the heading a link to that screen. Areas without a section are grouped
+ *   with their neighbours, without a heading.
  * @param {{get(areaId: string): string|null, set(areaId: string, screenId: string): void}} [options.memory]
  * @param {(screenId: string) => string} [options.hrefFor] Address of a screen (default `#<id>`).
  * @param {(screenId: string, event: Event) => void} [options.onSelect]
+ * @param {(linkId: string, event: Event) => void} [options.onSelectLink] A link given by `setLinks`.
  * @param {(area: object) => Node|null} [options.iconFor] Icon in front of an area link.
  * @param {string} [options.linkClassName] Extra class for the area links (the host's look).
  */
@@ -91,9 +102,11 @@ export function createAreaNav({
   document: doc,
   areas: areaInput,
   screens: screenInput,
+  sections: sectionInput,
   memory = createAreaMemory(null),
   hrefFor = (screenId) => `#${screenId}`,
   onSelect,
+  onSelectLink,
   iconFor,
   linkClassName = '',
   label = '画面',
@@ -108,10 +121,18 @@ export function createAreaNav({
     count: null,
     waiting: false,
   }]));
+  const sections = new Map((sectionInput ?? []).map((section) => [section.id, {
+    id: section.id,
+    label: section.label ?? null,
+    footer: section.placement === 'footer',
+    screenId: section.screenId ?? null,
+    links: [],
+  }]));
   const areas = (areaInput ?? []).map((area) => ({
     id: area.id,
     label: area.label ?? null,
     defaultScreen: area.defaultScreen ?? null,
+    section: sections.has(area.section) ? area.section : null,
     screens: area.screenIds.map((id) => screens.get(id)).filter(Boolean),
   })).filter((area) => area.screens.length > 0);
   const areaByScreen = new Map();
@@ -137,10 +158,11 @@ export function createAreaNav({
   const tabs = makeElement(doc, 'nav', { className: 'bb-area-tabs' });
   tabs.hidden = true;
   const areaLinks = new Map();
+  const linkClass = ['bb-area-link', linkClassName].filter(Boolean).join(' ');
 
   for (const area of areas) {
     const link = makeElement(doc, 'a', {
-      className: ['bb-area-link', linkClassName].filter(Boolean).join(' '),
+      className: linkClass,
       attrs: { 'data-area': area.id },
     });
     link.addEventListener('click', (event) => {
@@ -148,7 +170,87 @@ export function createAreaNav({
       if (target) onSelect?.(target, event);
     });
     areaLinks.set(area.id, link);
-    nav.append(link);
+  }
+
+  // Groups of lines: one per section, plus runs of areas without a section.
+  const groups = [];
+  if (sections.size === 0) {
+    nav.append(...areas.map((area) => areaLinks.get(area.id)));
+  } else {
+    const groupOf = new Map();
+    const makeGroup = (section) => {
+      const element = makeElement(doc, 'div', {
+        className: section?.footer ? 'bb-area-section is-footer' : 'bb-area-section',
+        attrs: {
+          role: 'group',
+          'aria-label': section?.label ?? null,
+          'data-section': section?.id ?? null,
+          'data-placement': section?.footer ? 'footer' : null,
+        },
+      });
+      const group = { section, element, headingText: null, headingLink: null, linkSlot: null, areas: [] };
+      if (section) {
+        // Both forms of the heading are made once; render shows one of them.
+        group.headingText = makeElement(doc, 'div', { className: 'bb-area-section-label', text: section.label ?? '' });
+        group.headingLink = makeElement(doc, 'a', { className: 'bb-area-section-label bb-area-section-link', text: section.label ?? '' });
+        group.headingLink.addEventListener('click', (event) => {
+          if (section.screenId) onSelect?.(section.screenId, event);
+        });
+        group.linkSlot = makeElement(doc, 'div', { className: 'bb-area-section-links' });
+        groupOf.set(section.id, group);
+      }
+      groups.push(group);
+      return group;
+    };
+    for (const area of areas) {
+      const section = area.section ? sections.get(area.section) : null;
+      const last = groups.at(-1);
+      const group = section
+        ? groupOf.get(section.id) ?? makeGroup(section)
+        : last && !last.section ? last : makeGroup(null);
+      group.areas.push(area);
+    }
+    for (const section of sections.values()) if (!groupOf.has(section.id)) makeGroup(section);
+    const ordered = [...groups.filter((group) => !group.section?.footer), ...groups.filter((group) => group.section?.footer)];
+    groups.splice(0, groups.length, ...ordered);
+    for (const group of groups) {
+      group.element.append(...[group.headingText, group.headingLink, group.linkSlot, ...group.areas.map((area) => areaLinks.get(area.id))].filter(Boolean));
+      nav.append(group.element);
+    }
+  }
+
+  function renderHeading(group) {
+    const { section, headingText, headingLink } = group;
+    const screen = section.screenId ? screens.get(section.screenId) : null;
+    const opens = Boolean(screen && isShown(screen.id) && !screen.external);
+    headingText.hidden = !section.label || opens;
+    headingLink.hidden = !section.label || !opens;
+    if (opens) headingLink.setAttribute('href', screenHref(screen));
+    else headingLink.removeAttribute('href');
+    if (opens && activeScreenId === screen.id) headingLink.setAttribute('aria-current', 'page');
+    else headingLink.removeAttribute('aria-current');
+    return opens;
+  }
+
+  function renderLinks(group) {
+    group.linkSlot.replaceChildren(...group.section.links.map((entry) => {
+      const link = makeElement(doc, 'a', {
+        className: linkClass,
+        attrs: { href: entry.href, 'data-link': entry.id, 'aria-current': entry.current ? 'page' : null },
+      });
+      link.append(makeElement(doc, 'span', { className: 'bb-area-link-label', text: entry.label }));
+      if (entry.count > 0) link.append(countBadge(entry.count, `待っているもの${entry.count}件`));
+      link.addEventListener('click', (event) => onSelectLink?.(entry.id, event));
+      return link;
+    }));
+    group.linkSlot.hidden = group.section.links.length === 0;
+  }
+
+  function renderGroup(group) {
+    const headingOpens = group.section ? renderHeading(group) : false;
+    if (group.section) renderLinks(group);
+    const anyArea = group.areas.some((area) => !areaLinks.get(area.id).hidden);
+    group.element.hidden = !(anyArea || headingOpens || (group.section?.links.length ?? 0) > 0);
   }
 
   function renderAreaLink(area) {
@@ -202,6 +304,7 @@ export function createAreaNav({
 
   function render() {
     for (const area of areas) renderAreaLink(area);
+    for (const group of groups) renderGroup(group);
     renderTabs();
   }
 
@@ -241,6 +344,23 @@ export function createAreaNav({
       render();
       return controller;
     },
+    /**
+     * Links at the top of a section, before its areas (for example starred
+     * projects): `{id, label, href, count?, current?}`. An empty list removes them.
+     */
+    setLinks(sectionId, links) {
+      const section = sections.get(sectionId);
+      if (!section) return controller;
+      section.links = (links ?? []).filter((entry) => entry && entry.id && entry.label && entry.href).map((entry) => ({
+        id: String(entry.id),
+        label: String(entry.label),
+        href: String(entry.href),
+        count: Number.isInteger(entry.count) && entry.count > 0 ? entry.count : 0,
+        current: entry.current === true,
+      }));
+      render();
+      return controller;
+    },
   };
   render();
   return controller;

package/ui/inbox.css

@@ -0,0 +1,189 @@
+/*
+ * 受信箱. Load after workspace-kit.css.
+ * The two tabs, the sections by what to do, the rows with their buttons on
+ * the right, and the lines for kinds that could not be read or are not
+ * collected yet.  A kind that could not be read is told by words in the
+ * warning tone, never left out.  Uses only the shared tokens in
+ * brainbase-tokens.css.
+ */
+.bb-inbox-tabs {
+  display: flex;
+  gap: var(--bb-space-1);
+  margin: 0 0 var(--bb-space-4);
+  border-bottom: 1px solid var(--bb-color-border);
+}
+
+.bb-inbox-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: -1px;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  padding: 8px 12px;
+  background: transparent;
+  color: var(--bb-color-muted);
+  font: inherit;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.bb-inbox-tab.is-selected {
+  border-bottom-color: var(--bb-color-accent);
+  color: var(--bb-color-ink);
+  font-weight: 600;
+}
+
+.bb-inbox-count {
+  min-width: 20px;
+  border-radius: 999px;
+  padding: 0 6px;
+  background: var(--bb-color-accent-soft);
+  color: var(--bb-color-accent);
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 18px;
+  text-align: center;
+}
+
+.bb-inbox-loading {
+  height: 2px;
+  margin: 0 0 10px;
+  overflow: hidden;
+  background: var(--bb-color-accent-soft);
+  color: transparent;
+  font-size: 0;
+}
+
+.bb-inbox-group {
+  margin: 0 0 var(--bb-space-5);
+}
+
+.bb-inbox-group-title {
+  margin: 0 0 var(--bb-space-2);
+  color: var(--bb-color-muted);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.bb-inbox-list {
+  border: 1px solid var(--bb-color-border);
+  border-radius: var(--bb-radius-md);
+  background: var(--bb-color-paper);
+}
+
+.bb-inbox-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--bb-space-2) var(--bb-space-3);
+  padding: var(--bb-space-3) var(--bb-space-4);
+  border-top: 1px solid var(--bb-color-border);
+}
+
+.bb-inbox-row:first-child {
+  border-top: 0;
+}
+
+.bb-inbox-row-main {
+  flex: 1 1 260px;
+  min-width: 0;
+}
+
+.bb-inbox-title {
+  color: var(--bb-color-ink);
+  font-size: 14px;
+  font-weight: 600;
+  text-decoration: none;
+  overflow-wrap: anywhere;
+}
+
+a.bb-inbox-title:hover,
+a.bb-inbox-title:focus-visible {
+  color: var(--bb-color-accent-strong);
+  text-decoration: underline;
+}
+
+.bb-inbox-detail {
+  margin: 2px 0 0;
+  color: var(--bb-color-muted);
+  font-size: 13px;
+}
+
+.bb-inbox-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--bb-space-2);
+  margin-top: 4px;
+  color: var(--bb-color-muted);
+  font-size: 12px;
+}
+
+.bb-inbox-blocking {
+  border-radius: 999px;
+  padding: 0 8px;
+  background: var(--bb-color-warning-soft);
+  color: var(--bb-color-warning);
+  font-weight: 600;
+}
+
+.bb-inbox-due {
+  color: var(--bb-color-ink);
+}
+
+.bb-inbox-row-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--bb-space-1);
+}
+
+.bb-inbox-later-menu {
+  display: flex;
+  flex-wrap: wrap;
+  flex-basis: 100%;
+  justify-content: flex-end;
+  gap: var(--bb-space-1);
+}
+
+.bb-inbox-source {
+  margin: var(--bb-space-2) 0 0;
+  font-size: 13px;
+}
+
+.bb-inbox-source.is-unavailable {
+  border-radius: var(--bb-radius-sm);
+  padding: var(--bb-space-2) var(--bb-space-3);
+  background: var(--bb-color-warning-soft);
+  color: var(--bb-color-warning);
+}
+
+.bb-inbox-source.is-not-connected,
+.bb-inbox-uncollected {
+  color: var(--bb-color-muted);
+}
+
+.bb-inbox-uncollected {
+  margin: 0 0 var(--bb-space-3);
+  font-size: 13px;
+}
+
+.bb-inbox-empty {
+  margin: 0 0 var(--bb-space-3);
+  color: var(--bb-color-ink);
+  font-size: 14px;
+}
+
+.bb-inbox-elsewhere {
+  display: flex;
+  gap: var(--bb-space-2);
+}
+
+@media (max-width: 640px) {
+  .bb-inbox-row {
+    padding: var(--bb-space-3);
+  }
+
+  .bb-inbox-row-actions {
+    width: 100%;
+  }
+}

package/ui/inbox.js

@@ -0,0 +1,578 @@
+/*
+ * 受信箱 (story-inbox-stage1-v1, docs/specs/inbox-stage1.md).
+ *
+ * What is waiting for the viewer — to answer, approve, sort or take in, and
+ * tasks — on one screen with two tabs, 対応待ち and お知らせ.  The part never
+ * reads anything by itself: the host passes a port (`readInbox`,
+ * `setDisposition`, optional `runAction` and `readNotices`).  Each kind is
+ * read on its own; a kind that could not be read says so and is never shown
+ * as zero.  あとで and 片付けた belong to the host (the inbox is the canonical
+ * place for them), and a row's buttons call the host's own operation: the part
+ * has no write path of its own.
+ *
+ * The address keeps only the tab and the list being shown; titles, details
+ * and item ids never enter it.
+ */
+
+import {
+  makeWorkspaceElement,
+  workspaceButton,
+  workspaceErrorCard,
+  workspaceNotice,
+  workspacePageHeader,
+} from './workspace-kit.js';
+
+export const INBOX_UI_CONTRACT_VERSION = 'brainbase.inbox-ui.v1';
+
+export const INBOX_GROUP_LABELS = Object.freeze({
+  answer: '答える・決める',
+  approve: '承認する',
+  triage: '振り分ける・取り込む',
+  task: 'タスク',
+});
+const GROUPS = Object.keys(INBOX_GROUP_LABELS);
+const TABS = ['waiting', 'notices'];
+const VIEWS = ['waiting', 'later', 'cleared'];
+
+const el = makeWorkspaceElement;
+
+// Why a read failed, in the viewer's words; the code stays beside it for support.
+const REASON_LABELS = Object.freeze({
+  upstream_unavailable: '元の記録を読めません',
+  forbidden: '読む権限がありません',
+  unauthorized: 'ログインし直してください',
+  store_unavailable: '受信箱の状態を保存できません',
+  request_failed: '通信に失敗しました',
+  response_invalid: '応答の形が正しくありません',
+});
+
+function reasonText(reason) {
+  const code = String(reason ?? 'unknown');
+  return REASON_LABELS[code] ? `${REASON_LABELS[code]}（${code}）` : code;
+}
+
+function textOf(value) {
+  return typeof value === 'string' && value.trim() ? value.trim() : null;
+}
+
+function timeOf(value) {
+  const time = value ? new Date(value).getTime() : Number.NaN;
+  return Number.isNaN(time) ? null : time;
+}
+
+function unitsOf(item) {
+  return Number.isInteger(item?.units) && item.units >= 0 ? item.units : 1;
+}
+
+function normalizeRoute(route = {}) {
+  return {
+    tab: TABS.includes(route.tab) ? route.tab : 'waiting',
+    view: VIEWS.includes(route.view) ? route.view : 'waiting',
+  };
+}
+
+/** Reads `tab` and `view` from the address. Unknown values fall back to 対応待ち. */
+export function parseInboxRoute(params) {
+  return normalizeRoute({ tab: params.get('tab'), view: params.get('view') });
+}
+
+/** The shell's hash target for a route.  Anything else in the route is dropped. */
+export function inboxRouteTarget(route) {
+  const normalized = normalizeRoute(route);
+  const params = new URLSearchParams();
+  if (normalized.tab !== 'waiting') params.set('tab', normalized.tab);
+  else if (normalized.view !== 'waiting') params.set('view', normalized.view);
+  const query = params.toString();
+  return query ? `inbox?${query}` : 'inbox';
+}
+
+/** Blocking first, then the nearest due date (none last), then the newest arrival. */
+export function sortInboxItems(items) {
+  return [...(Array.isArray(items) ? items : [])].sort((left, right) => {
+    const blocking = Number(right.blocking === true) - Number(left.blocking === true);
+    if (blocking !== 0) return blocking;
+    const leftDue = timeOf(left.dueAt);
+    const rightDue = timeOf(right.dueAt);
+    if (leftDue !== rightDue) {
+      if (leftDue === null) return 1;
+      if (rightDue === null) return -1;
+      return leftDue - rightDue;
+    }
+    return (timeOf(right.receivedAt) ?? 0) - (timeOf(left.receivedAt) ?? 0);
+  });
+}
+
+/** The disposition that still applies to an item now: same revision, and a later not yet passed. */
+function activeDisposition(item, dispositions, now) {
+  const disposition = dispositions.get(item.id);
+  if (!disposition) return null;
+  if ((disposition.revision ?? null) !== (item.revision ?? null)) return null;
+  if (disposition.state === 'later') {
+    const until = timeOf(disposition.until);
+    return until !== null && until > now.getTime() ? disposition : null;
+  }
+  return disposition.state === 'cleared' ? disposition : null;
+}
+
+function dispositionMap(list) {
+  const map = new Map();
+  for (const disposition of Array.isArray(list) ? list : []) {
+    if (textOf(disposition?.itemId)) map.set(disposition.itemId, disposition);
+  }
+  return map;
+}
+
+function readableItems(result) {
+  const readable = new Set((result.sources ?? []).filter((source) => source.status === 'ok').map((source) => source.kind));
+  return (Array.isArray(result.items) ? result.items : []).filter((item) => readable.has(item.kind) && GROUPS.includes(item.group));
+}
+
+/**
+ * The 対応待ち count for the left menu: what is shown (hidden and cleared rows
+ * left out, a summary row counts as its own number), from the kinds that could
+ * be read.  `count` is null when the inbox itself could not be read.
+ */
+export function countInboxWaiting(result, now = new Date()) {
+  if (result?.status !== 'ok') return { count: null, unreadable: [] };
+  const dispositions = dispositionMap(result.dispositions);
+  const count = readableItems(result)
+    .filter((item) => !activeDisposition(item, dispositions, now))
+    .reduce((sum, item) => sum + unitsOf(item), 0);
+  const unreadable = (result.sources ?? []).filter((source) => source.status === 'unavailable').map((source) => source.label);
+  return { count, unreadable };
+}
+
+function at(base, dayOffset, hour) {
+  const date = new Date(base.getFullYear(), base.getMonth(), base.getDate() + dayOffset, hour, 0, 0, 0);
+  return date;
+}
+
+/** あとで: this evening (only before 18:00), tomorrow morning, next Monday morning — by the viewer's clock. */
+export function inboxLaterChoices(now = new Date()) {
+  const choices = [];
+  const evening = at(now, 0, 18);
+  if (evening.getTime() > now.getTime()) choices.push({ id: 'evening', label: '今日の夕方', until: evening });
+  choices.push({ id: 'tomorrow', label: '明日の朝', until: at(now, 1, 9) });
+  const toMonday = ((8 - now.getDay()) % 7) || 7;
+  choices.push({ id: 'monday', label: '来週の月曜の朝', until: at(now, toMonday, 9) });
+  return choices;
+}
+
+export const INBOX_DISPOSITIONS_KEY = 'brainbase.inbox.dispositions.v1';
+const CLEARED_KEPT_MS = 30 * 86_400_000;
+
+/**
+ * 片付けた・あとで kept in the viewer's browser (stage 1: the inbox has no
+ * canonical store yet; stage 4 moves them there with the Slack sync).  One
+ * key per person, because a browser can be shared by several accounts.  A
+ * storage that cannot be reached reads as nothing kept and fails every write
+ * with `store_unavailable`, so the screen puts the row back.
+ */
+export function createLocalInboxDispositions(storage, { personId = null, key = INBOX_DISPOSITIONS_KEY, now = () => new Date() } = {}) {
+  const storageKey = textOf(personId) ? `${key}:${personId}` : key;
+  const read = () => {
+    try {
+      const raw = storage?.getItem?.(storageKey);
+      const value = raw ? JSON.parse(raw) : [];
+      return Array.isArray(value) ? value.filter((entry) => textOf(entry?.itemId)) : [];
+    } catch {
+      return [];
+    }
+  };
+  const current = (entries) => {
+    const time = now().getTime();
+    // A passed あとで and an old 片付けた are dropped so the key does not grow.
+    return entries.filter((entry) => (entry.state === 'later'
+      ? (timeOf(entry.until) ?? 0) > time
+      : entry.state === 'cleared' && time - (timeOf(entry.at) ?? 0) < CLEARED_KEPT_MS));
+  };
+  return Object.freeze({
+    list: () => current(read()),
+    set(itemId, change) {
+      if (!storage || typeof storage.setItem !== 'function') return { status: 'unavailable', reason: 'store_unavailable' };
+      const others = current(read()).filter((entry) => entry.itemId !== itemId);
+      const next = change?.state === 'later' || change?.state === 'cleared'
+        ? [...others, { itemId, revision: change.revision ?? null, state: change.state, until: change.state === 'later' ? change.until : null, at: now().toISOString() }]
+        : others;
+      try {
+        storage.setItem(storageKey, JSON.stringify(next));
+        return { status: 'ok' };
+      } catch {
+        return { status: 'unavailable', reason: 'store_unavailable' };
+      }
+    },
+  });
+}
+
+/** A port whose 片付けた・あとで live in `store` (see createLocalInboxDispositions). */
+export function withLocalInboxDispositions(reader, store) {
+  const port = {
+    async readInbox() {
+      const result = await reader.readInbox();
+      return result?.status === 'ok' ? { ...result, dispositions: store.list() } : result;
+    },
+    async setDisposition(itemId, change) {
+      return store.set(itemId, change);
+    },
+  };
+  if (typeof reader.runAction === 'function') port.runAction = (itemId, actionId) => reader.runAction(itemId, actionId);
+  if (typeof reader.readNotices === 'function') port.readNotices = () => reader.readNotices();
+  return port;
+}
+
+function formatShort(value) {
+  const time = timeOf(value);
+  if (time === null) return null;
+  const date = new Date(time);
+  return `${date.getMonth() + 1}/${date.getDate()} ${date.getHours()}:${String(date.getMinutes()).padStart(2, '0')}`;
+}
+
+function relativeTime(value, now) {
+  const time = timeOf(value);
+  if (time === null) return null;
+  const minutes = Math.floor((now.getTime() - time) / 60_000);
+  if (minutes < 1) return 'たった今';
+  if (minutes < 60) return `${minutes}分前`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}時間前`;
+  const days = Math.floor(hours / 24);
+  return days < 30 ? `${days}日前` : formatShort(value);
+}
+
+export function createInboxUI({
+  root,
+  page,
+  document: explicitDocument,
+  port,
+  route: initialRoute,
+  onRouteChange,
+  onNavigate,
+  onCount,
+  now = () => new Date(),
+} = {}) {
+  if (!root) throw new TypeError('root is required');
+  if (!port || typeof port.readInbox !== 'function' || typeof port.setDisposition !== 'function') {
+    throw new TypeError('port is required');
+  }
+  const doc = explicitDocument ?? (typeof document === 'undefined' ? null : document);
+  if (!doc || typeof doc.createElement !== 'function') throw new Error('document_unavailable');
+  const crumbs = Array.isArray(page?.crumbs) ? page.crumbs : ['受信箱'];
+  const readNow = () => (typeof now === 'function' ? now() : now);
+
+  const state = {
+    route: normalizeRoute(initialRoute),
+    phase: 'idle',
+    result: null,
+    reason: null,
+    dispositions: new Map(),
+    laterOpen: null,
+    notice: null,
+    notices: null,
+    destroyed: false,
+  };
+  let generation = 0;
+
+  function go(route) {
+    const next = normalizeRoute({ ...state.route, ...route });
+    if (typeof onRouteChange === 'function') onRouteChange(next);
+    else applyRoute(next);
+  }
+
+  function reportCount() {
+    if (typeof onCount !== 'function') return;
+    onCount(state.result ? countInboxWaiting({ ...state.result, dispositions: [...state.dispositions.values()] }, readNow()) : { count: null, unreadable: [] });
+  }
+
+  async function loadNotices() {
+    if (typeof port.readNotices !== 'function') {
+      state.notices = { phase: 'not_collected' };
+      return;
+    }
+    let result;
+    try {
+      result = await port.readNotices();
+    } catch (error) {
+      result = { status: 'unavailable', reason: error instanceof Error ? error.message : 'request_failed' };
+    }
+    state.notices = result?.status === 'ok' && Array.isArray(result.items)
+      ? { phase: 'ok', items: result.items }
+      : { phase: 'unavailable', reason: result?.reason ?? 'response_invalid' };
+  }
+
+  async function load() {
+    if (state.destroyed) return;
+    const current = ++generation;
+    // The previous rows stay on screen while the next read runs.
+    state.phase = 'loading';
+    render();
+    let result;
+    try {
+      result = await port.readInbox();
+    } catch (error) {
+      result = { status: 'unavailable', reason: error instanceof Error ? error.message : 'request_failed' };
+    }
+    if (state.route.tab === 'notices' && state.notices === null) await loadNotices();
+    if (current !== generation || state.destroyed) return;
+    if (result?.status === 'ok' && Array.isArray(result.sources) && Array.isArray(result.items)) {
+      state.result = result;
+      state.dispositions = dispositionMap(result.dispositions);
+      state.phase = 'ready';
+      state.reason = null;
+    } else {
+      state.result = null;
+      state.phase = 'error';
+      state.reason = result?.reason ?? 'response_invalid';
+    }
+    render();
+    reportCount();
+  }
+
+  function applyRoute(route) {
+    state.route = normalizeRoute(route);
+    state.laterOpen = null;
+    if (state.route.tab === 'notices' && state.notices === null) {
+      void loadNotices().then(() => render());
+    }
+    render();
+  }
+
+  async function dispose(item, change, failureTitle) {
+    const previous = state.dispositions.get(item.id) ?? null;
+    if (change.state === 'open') state.dispositions.delete(item.id);
+    else state.dispositions.set(item.id, { itemId: item.id, revision: change.revision, state: change.state, until: change.until ?? null, at: readNow().toISOString() });
+    state.laterOpen = null;
+    state.notice = null;
+    render();
+    reportCount();
+    let result;
+    try {
+      result = await port.setDisposition(item.id, change);
+    } catch (error) {
+      result = { status: 'unavailable', reason: error instanceof Error ? error.message : 'request_failed' };
+    }
+    if (state.destroyed || result?.status === 'ok') return;
+    if (previous) state.dispositions.set(item.id, previous);
+    else state.dispositions.delete(item.id);
+    state.notice = `${failureTitle}。理由: ${reasonText(result?.reason ?? 'response_invalid')}。`;
+    render();
+    reportCount();
+  }
+
+  async function runAction(item, action) {
+    let result;
+    try {
+      result = await port.runAction(item.id, action.id);
+    } catch (error) {
+      result = { status: 'unavailable', reason: error instanceof Error ? error.message : 'request_failed' };
+    }
+    if (state.destroyed) return;
+    if (result?.status === 'ok') {
+      state.notice = null;
+      await load();
+      return;
+    }
+    state.notice = `「${action.label}」を実行できませんでした。理由: ${reasonText(result?.reason ?? 'response_invalid')}。`;
+    render();
+  }
+
+  function openItem(item, event) {
+    if (item.clearOnOpen === true) void dispose(item, { state: 'cleared', revision: item.revision ?? null }, '開いた行を片付けられませんでした');
+    const href = textOf(item.href);
+    if (href && typeof onNavigate === 'function') {
+      event?.preventDefault?.();
+      onNavigate(href);
+    }
+  }
+
+  function renderTabs(waitingCount) {
+    const bar = el(doc, 'div', { className: 'bb-inbox-tabs', attrs: { role: 'tablist', 'aria-label': '受信箱' } });
+    for (const [id, label] of [['waiting', '対応待ち'], ['notices', 'お知らせ']]) {
+      const selected = state.route.tab === id;
+      const tab = el(doc, 'button', {
+        className: `bb-inbox-tab${selected ? ' is-selected' : ''}`,
+        text: label,
+        attrs: { type: 'button', role: 'tab', 'aria-selected': selected ? 'true' : 'false' },
+      });
+      if (id === 'waiting' && Number.isInteger(waitingCount) && waitingCount > 0) {
+        tab.append(el(doc, 'span', { className: 'bb-inbox-count', text: waitingCount, attrs: { 'aria-label': `${waitingCount}件` } }));
+      }
+      tab.addEventListener('click', () => go({ tab: id, view: 'waiting' }));
+      bar.append(tab);
+    }
+    return bar;
+  }
+
+  function renderLaterMenu(item) {
+    const menu = el(doc, 'div', { className: 'bb-inbox-later-menu', attrs: { role: 'group', 'aria-label': 'あとでの時刻' } });
+    for (const choice of inboxLaterChoices(readNow())) {
+      menu.append(workspaceButton(doc, {
+        text: choice.label,
+        variant: 'quiet',
+        onClick: () => void dispose(item, { state: 'later', until: choice.until.toISOString(), revision: item.revision ?? null }, 'あとでにできませんでした'),
+      }));
+    }
+    return menu;
+  }
+
+  function renderRow(item, view) {
+    const row = el(doc, 'div', { className: `bb-inbox-row${item.blocking === true ? ' is-blocking' : ''}`, attrs: { role: 'listitem', 'data-inbox-item': item.id } });
+    const main = el(doc, 'div', { className: 'bb-inbox-row-main' });
+    const href = textOf(item.href);
+    const title = el(doc, href ? 'a' : 'span', { className: 'bb-inbox-title', text: item.title, attrs: href ? { href } : {} });
+    if (href) title.addEventListener('click', (event) => openItem(item, event));
+    main.append(title);
+    const meta = el(doc, 'div', { className: 'bb-inbox-meta' });
+    if (item.blocking === true) meta.append(el(doc, 'span', { className: 'bb-inbox-blocking', text: '止めています' }));
+    const due = formatShort(item.dueAt);
+    if (due) meta.append(el(doc, 'span', { className: 'bb-inbox-due', text: `期限 ${due}` }));
+    const received = relativeTime(item.receivedAt, readNow());
+    if (received) meta.append(el(doc, 'span', { text: received, attrs: { title: formatShort(item.receivedAt) ?? undefined } }));
+    const disposition = state.dispositions.get(item.id);
+    if (view === 'later' && disposition?.until) meta.append(el(doc, 'span', { className: 'bb-inbox-until', text: `${formatShort(disposition.until)}に戻ります` }));
+    if (textOf(item.detail)) main.append(el(doc, 'p', { className: 'bb-inbox-detail', text: item.detail }));
+    if (meta.children?.length !== 0) main.append(meta);
+    row.append(main);
+
+    const controls = el(doc, 'div', { className: 'bb-inbox-row-actions' });
+    if (view === 'waiting') {
+      if (typeof port.runAction === 'function') {
+        for (const action of Array.isArray(item.actions) ? item.actions : []) {
+          if (!textOf(action?.id) || !textOf(action?.label)) continue;
+          controls.append(workspaceButton(doc, { text: action.label, variant: action.tone === 'primary' ? 'primary' : action.tone === 'danger' ? 'danger' : 'default', onClick: () => void runAction(item, action) }));
+        }
+      }
+      controls.append(
+        workspaceButton(doc, {
+          text: 'あとで',
+          variant: 'quiet',
+          attrs: { 'aria-expanded': state.laterOpen === item.id ? 'true' : 'false', 'aria-haspopup': 'true' },
+          onClick: () => {
+            state.laterOpen = state.laterOpen === item.id ? null : item.id;
+            render();
+          },
+        }),
+        workspaceButton(doc, { text: '片付けた', variant: 'quiet', onClick: () => void dispose(item, { state: 'cleared', revision: item.revision ?? null }, '片付けられませんでした') }),
+      );
+    } else {
+      controls.append(workspaceButton(doc, { text: '対応待ちに戻す', variant: 'quiet', onClick: () => void dispose(item, { state: 'open' }, '対応待ちに戻せませんでした') }));
+    }
+    row.append(controls);
+    if (state.laterOpen === item.id) row.append(renderLaterMenu(item));
+    return row;
+  }
+
+  function sourceLine(source) {
+    if (source.status === 'not_connected') {
+      return el(doc, 'p', { className: 'bb-inbox-source is-not-connected', text: `${source.label}は未接続です。` });
+    }
+    return el(doc, 'p', { className: 'bb-inbox-source is-unavailable', text: `${source.label}を読めませんでした。理由: ${reasonText(source.reason)}。0件ではありません。`, attrs: { role: 'status' } });
+  }
+
+  function partition(now) {
+    const shown = { waiting: [], later: [], cleared: [] };
+    for (const item of readableItems(state.result)) {
+      const disposition = activeDisposition(item, state.dispositions, now);
+      shown[disposition ? disposition.state : 'waiting'].push(item);
+    }
+    return shown;
+  }
+
+  function renderWaiting(shown) {
+    const view = el(doc, 'div', { className: 'bb-inbox-waiting' });
+    const sources = state.result.sources;
+    let anyContent = false;
+    for (const group of GROUPS) {
+      const rows = sortInboxItems(shown.waiting.filter((item) => item.group === group));
+      const problems = sources.filter((source) => source.group === group && source.status !== 'ok');
+      if (rows.length === 0 && problems.length === 0) continue;
+      anyContent = true;
+      const section = el(doc, 'section', { className: 'bb-inbox-group', attrs: { 'data-group': group, 'aria-label': INBOX_GROUP_LABELS[group] } });
+      section.append(el(doc, 'h2', { className: 'bb-inbox-group-title', text: INBOX_GROUP_LABELS[group] }));
+      if (rows.length > 0) {
+        const list = el(doc, 'div', { className: 'bb-inbox-list', attrs: { role: 'list' } });
+        for (const item of rows) list.append(renderRow(item, 'waiting'));
+        section.append(list);
+      }
+      for (const source of problems) section.append(sourceLine(source));
+      view.append(section);
+    }
+    const allRead = sources.every((source) => source.status !== 'unavailable');
+    if (!anyContent && allRead) view.append(el(doc, 'p', { className: 'bb-inbox-empty', text: '待っているものはありません。' }));
+    const uncollected = (Array.isArray(state.result.uncollected) ? state.result.uncollected : []).filter(textOf);
+    if (uncollected.length > 0) {
+      view.append(el(doc, 'p', { className: 'bb-inbox-uncollected', text: `まだ集めていない種類があります（${uncollected.join('・')}）。件数には入っていません。` }));
+    }
+    const links = el(doc, 'div', { className: 'bb-inbox-elsewhere' });
+    if (shown.later.length > 0) links.append(workspaceButton(doc, { text: `あとで ${shown.later.length}件`, variant: 'quiet', onClick: () => go({ view: 'later' }) }));
+    if (shown.cleared.length > 0) links.append(workspaceButton(doc, { text: `片付けた ${shown.cleared.length}件`, variant: 'quiet', onClick: () => go({ view: 'cleared' }) }));
+    if (links.children.length > 0) view.append(links);
+    return view;
+  }
+
+  function renderSet(shown, which) {
+    const view = el(doc, 'div', { className: 'bb-inbox-set' });
+    view.append(workspaceButton(doc, { text: '対応待ちへ', variant: 'quiet', onClick: () => go({ view: 'waiting' }) }));
+    view.append(el(doc, 'h2', { className: 'bb-inbox-group-title', text: which === 'later' ? 'あとで' : '片付けた' }));
+    const rows = which === 'later'
+      ? [...shown.later].sort((left, right) => (timeOf(state.dispositions.get(left.id)?.until) ?? 0) - (timeOf(state.dispositions.get(right.id)?.until) ?? 0))
+      : [...shown.cleared].sort((left, right) => (timeOf(state.dispositions.get(right.id)?.at) ?? 0) - (timeOf(state.dispositions.get(left.id)?.at) ?? 0));
+    if (rows.length === 0) {
+      view.append(el(doc, 'p', { className: 'bb-inbox-empty', text: which === 'later' ? 'あとでにしたものはありません。' : '片付けたものはありません。' }));
+      return view;
+    }
+    const list = el(doc, 'div', { className: 'bb-inbox-list', attrs: { role: 'list' } });
+    for (const item of rows) list.append(renderRow(item, which));
+    view.append(list);
+    return view;
+  }
+
+  function renderNotices() {
+    const view = el(doc, 'div', { className: 'bb-inbox-notices' });
+    const notices = state.notices;
+    if (!notices || notices.phase === 'not_collected') {
+      view.append(el(doc, 'p', { className: 'bb-inbox-uncollected', text: 'お知らせはまだ集めていません。AIに任せた仕事の終わり・議事録ができたこと・申請の結果は、これから集めます。' }));
+    } else if (notices.phase === 'unavailable') {
+      view.append(workspaceErrorCard(doc, { title: 'お知らせを読めませんでした', message: `理由: ${reasonText(notices.reason)}。0件ではありません。` }));
+    } else if (notices.items.length === 0) {
+      view.append(el(doc, 'p', { className: 'bb-inbox-empty', text: 'お知らせはありません。' }));
+    }
+    return view;
+  }
+
+  function render() {
+    if (state.destroyed) return;
+    const current = readNow();
+    const shown = state.result ? partition(current) : null;
+    const waitingCount = shown ? shown.waiting.reduce((sum, item) => sum + unitsOf(item), 0) : null;
+    const view = el(doc, 'div', { className: 'bb-inbox', attrs: { 'data-contract-version': INBOX_UI_CONTRACT_VERSION } });
+    view.append(workspacePageHeader(doc, { crumbs, title: '受信箱', source: page?.source ?? undefined }));
+    view.append(renderTabs(waitingCount));
+    if (state.phase === 'loading') view.append(el(doc, 'div', { className: 'bb-inbox-loading', text: '読み込んでいます', attrs: { role: 'status' } }));
+    if (state.notice) view.append(workspaceNotice(doc, { label: 'できませんでした', text: state.notice, tone: 'warning', role: 'alert' }));
+    if (state.route.tab === 'notices') {
+      view.append(renderNotices());
+    } else if (state.phase === 'error' && !shown) {
+      view.append(workspaceErrorCard(doc, { title: '受信箱を読めませんでした', message: `理由: ${reasonText(state.reason)}。0件ではありません。`, onRetry: () => void load() }));
+    } else if (shown) {
+      view.append(state.route.view === 'waiting' ? renderWaiting(shown) : renderSet(shown, state.route.view));
+    }
+    root.replaceChildren(view);
+  }
+
+  const controller = {
+    load,
+    applyRoute,
+    get state() {
+      return { route: { ...state.route }, phase: state.phase, result: state.result, dispositions: [...state.dispositions.values()] };
+    },
+    destroy() {
+      state.destroyed = true;
+      generation += 1;
+      root.replaceChildren();
+    },
+  };
+  render();
+  return controller;
+}
+
+export default createInboxUI;

package/ui/local-web-shell.css

@@ -67,9 +67,11 @@ body {
   letter-spacing: -.035em;
 }
 
+/* The menu fills the rail so that 設定 sits at its bottom (ledger D10). */
 .bb-shell-nav {
-  display: grid;
-  gap: 2px;
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
 }
 
 .bb-shell-nav-link {

package/ui/local-web-shell.js

@@ -61,62 +61,63 @@ const NAV_ICON_PATHS = Object.freeze({
   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'],
+  // 設定 (ledger D10): the organization edition's gear.
   '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 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'], 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', 'memory'], defaultScreen: 'graph', icon: 'graph' }),
-  Object.freeze({ id: 'settings', label: '設定', order: ['ontology'], defaultScreen: 'ontology', icon: 'area:settings' }),
+// The menu's sections (brainbase-project ledger D10, 2026-10-17 revision): the
+// destinations themselves under small headings, in the organization edition's
+// order, with 設定 at the bottom. Screens OSS Personal does not have are not
+// listed. `screenId` makes the heading open that screen (プロジェクトと関係者);
+// `area` turns the section's screens into one line with tabs (設定). Inside a
+// section, `order` lists the screens first in that order.
+const NAV_SECTIONS = Object.freeze([
+  Object.freeze({ id: 'meetings', label: '会議', order: ['minutes'] }),
+  Object.freeze({ id: 'project', label: 'プロジェクト', screenId: 'projects', order: ['objectives'] }),
+  Object.freeze({ id: 'explore', label: '調べる', order: ['value-proofs', 'graph', 'people', 'memory'] }),
+  Object.freeze({ id: 'settings', label: null, placement: 'footer', order: ['ontology'], area: Object.freeze({ label: '設定', defaultScreen: 'ontology', icon: 'area:settings' }) }),
 ]);
 
+const sectionOf = (screen) => NAV_SECTIONS.find((section) => section.id === screen.section) ?? null;
+
 // Menu order only: the screens' own order (and so the first screen) stays as given.
-// Screens without an area keep their place — those before the first area-bound
-// screen come first (a leading extension such as the world), the rest come last.
-function navLayout(screens) {
-  const firstInArea = screens.findIndex((screen) => NAV_AREAS.some((area) => area.id === screen.area));
-  if (firstInArea === -1) return { leading: [...screens], areas: [], trailing: [] };
-  const leading = screens.slice(0, firstInArea);
-  const trailing = screens.slice(firstInArea).filter((screen) => !NAV_AREAS.some((area) => area.id === screen.area));
-  const areas = NAV_AREAS.map((area) => {
-    const members = screens.filter((screen) => screen.area === area.id);
+// Screens without a section keep their place — those before the first sectioned
+// screen come first (a leading extension such as the world), the rest come after
+// the sections and before 設定.
+function navAreas(screens) {
+  const own = (screen, section = null) => ({ id: screen.id, label: null, screenIds: [screen.id], icon: screen.id, ...(section ? { section } : {}) });
+  const firstSectioned = screens.findIndex((screen) => sectionOf(screen));
+  const leading = firstSectioned === -1 ? [...screens] : screens.slice(0, firstSectioned);
+  const trailing = firstSectioned === -1 ? [] : screens.slice(firstSectioned).filter((screen) => !sectionOf(screen));
+  const sectioned = NAV_SECTIONS.map((section) => {
+    const members = screens.filter((screen) => screen.section === section.id && screen.id !== section.screenId);
     const rank = (screen) => {
-      const index = area.order.indexOf(screen.id);
-      return index === -1 ? area.order.length + members.indexOf(screen) : index;
+      const index = section.order.indexOf(screen.id);
+      return index === -1 ? section.order.length + members.indexOf(screen) : index;
     };
-    return { area, screens: [...members].sort((a, b) => rank(a) - rank(b)) };
-  }).filter((entry) => entry.screens.length > 0);
-  return { leading, areas, trailing };
+    const ordered = [...members].sort((a, b) => rank(a) - rank(b));
+    if (ordered.length === 0) return { section, areas: [] };
+    if (section.area) {
+      return { section, areas: [{ id: section.id, label: section.area.label, defaultScreen: section.area.defaultScreen, screenIds: ordered.map((screen) => screen.id), icon: section.area.icon, section: section.id }] };
+    }
+    return { section, areas: ordered.map((screen) => own(screen, section.id)) };
+  });
+  const main = sectioned.filter(({ section }) => section.placement !== 'footer').flatMap(({ areas }) => areas);
+  const footer = sectioned.filter(({ section }) => section.placement === 'footer').flatMap(({ areas }) => areas);
+  return [...leading.map((screen) => own(screen)), ...main, ...trailing.map((screen) => own(screen)), ...footer];
 }
 
-// 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),
-  ];
+// The sections handed to the menu part; a heading opens its screen only when that screen exists.
+function navSections(screens) {
+  return NAV_SECTIONS.map((section) => ({
+    id: section.id,
+    label: section.label,
+    placement: section.placement ?? 'main',
+    ...(section.screenId && screens.some((screen) => screen.id === section.screenId) ? { screenId: section.screenId } : {}),
+  }));
 }
 
 function makeIcon(doc, id) {
@@ -376,19 +377,19 @@ function mountGraphScreen(screenId, createView, extra = {}) {
 }
 
 export const LOCAL_WEB_SCREENS = Object.freeze([
-  Object.freeze({ id: 'value-proofs', label: '判断の履歴', area: 'outcomes', usesGraph: false, rail: true, source: '判断の記録', mount: mountToday }),
-  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: 'value-proofs', label: '判断の履歴', section: 'explore', usesGraph: false, rail: true, source: '判断の記録', mount: mountToday }),
+  Object.freeze({ id: 'minutes', label: '議事録', section: 'meetings', usesGraph: false, rail: true, source: '正本の議事録', mount: mountMeetingMinutes }),
+  Object.freeze({ id: 'objectives', label: '目的と現状', section: 'project', usesGraph: true, rail: true, source: '手元のGraph', mount: mountObjectives }),
+  Object.freeze({ id: 'projects', label: 'プロジェクトと関係者', section: 'project', usesGraph: true, rail: true, source: '手元のGraph', mount: mountGraphScreen('projects', createGraphProjectsView) }),
   // 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) => ({
+  Object.freeze({ id: 'graph', label: '情報と関係', section: 'explore', 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 }) }),
+  Object.freeze({ id: 'people', label: '人と会社', section: 'explore', usesGraph: true, rail: true, source: '手元のGraph', mount: mountGraphScreen('people', createPeopleAndCompaniesView, { canCorrect: true }) }),
   // Only the owner sees it (ledger D15); the local host has one owner, so it is always listed here.
-  Object.freeze({ id: 'memory', label: 'あなたの記憶', area: 'information', usesGraph: false, rail: true, ownerOnly: true, source: '手元の個人KG', mount: mountPersonalMemory }),
+  Object.freeze({ id: 'memory', label: 'あなたの記憶', section: 'explore', usesGraph: false, rail: true, ownerOnly: true, source: '手元の個人KG', mount: mountPersonalMemory }),
   // 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 }) }),
+  Object.freeze({ id: 'ontology', label: '情報の種類とつながり方', section: 'settings', usesGraph: true, rail: false, source: '手元のGraph', mount: mountGraphScreen('ontology', createGraphOntologyView, { canCorrect: true }) }),
 ]);
 
 function renderGraphGate(doc, slot, status, onRecheck, label) {
@@ -516,6 +517,7 @@ export function createLocalWebShell({
   const areaNav = createAreaNav({
     document: doc,
     areas: areaList,
+    sections: navSections(screens),
     screens: screens.map((screen) => ({ id: screen.id, label: screen.label })),
     memory: areaMemory,
     linkClassName: 'bb-shell-nav-link',