@unson/brainbase-mcp 0.41.4 → 0.41.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unson/brainbase-mcp",
-  "version": "0.41.4",
+  "version": "0.41.6",
   "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",
@@ -483,5 +483,5 @@
   "engines": {
     "node": ">=20"
   },
-  "gitHead": "56d428ab1e2ba87b273a09119b2c5b4f25314440"
+  "gitHead": "0c67baf7d7c57f4f671c966c8053705af65ba4d0"
 }

package/ui/brainbase-tokens.css

@@ -62,6 +62,10 @@
   --bb-color-notice-control-border: #ffffff45;
   --bb-color-inline-error: #9b3d3d;
   --bb-color-record-missing: #80601c;
+  --bb-color-drawer-overlay: rgb(13 25 46 / 6%);
+  --bb-color-drawer-overlay-clear: rgb(13 25 46 / 0%);
+  --bb-shadow-drawer: -18px 0 48px rgb(13 25 46 / 10%);
+  --bb-shadow-popover: 0 8px 28px rgb(13 25 46 / 14%);
   --bb-color-dialog-overlay: #0d192e66;
   --bb-color-scrollbar-rgb: 36,50,75;
   --bb-color-scrollbar-dark-rgb: 203,212,225;

package/ui/foundation-overview.js

@@ -14,7 +14,7 @@ import {
   workspaceNotice,
   workspacePageHeader,
   workspaceSectionTitle,
-  workspaceHelp, workspaceDialog, workspaceDisclosure, workspaceErrorCard,
+  workspaceHelp, workspaceDialog, workspaceDisclosure, workspaceErrorCard, workspaceLoadingCard, workspaceDismissNotification,
 } from './workspace-kit.js';
 
 export const FOUNDATION_OVERVIEW_CONTRACT_VERSION = 'foundation-overview.v1';
@@ -660,10 +660,25 @@ function renderModels(doc, catalog, viewState, callbacks, recordContexts) {
   return section;
 }
 
-function renderLoading(doc, state, callbacks) {
-  const notice = workspaceNotice(doc, { label: '読み込み', text: '目的・哲学・世界モデルを読み込んでいます。' });
-  notice.append(workspaceButton(doc, { text: '再試行', variant: 'quiet', onClick: callbacks.load }));
-  return notice;
+/** Keep one loading card across redraws so completion can leave visibly. */
+function renderLoadingState(doc, root, viewState, loading, onLoading) {
+  if (onLoading) { onLoading(loading); return; }
+  if (loading) {
+    viewState.cancelLoadingDismiss?.();
+    viewState.cancelLoadingDismiss = null;
+    viewState.loadingCard ??= workspaceLoadingCard(doc);
+  }
+  const card = viewState.loadingCard;
+  if (!card) return;
+  const stack = viewState.loadingStack ??= makeElement(doc, 'aside', { className: 'bb-ws-error-stack', attrs: { 'aria-label': '読み込み状況' } });
+  stack.append(card); root.append(stack);
+  if (!loading && !viewState.cancelLoadingDismiss) {
+    const cancel = workspaceDismissNotification(card, () => {
+      if (viewState.loadingCard !== card) return;
+      viewState.loadingCard = null; viewState.cancelLoadingDismiss = null; viewState.loadingStack = null; stack.remove();
+    });
+    if (viewState.loadingCard === card) viewState.cancelLoadingDismiss = cancel;
+  }
 }
 
 function renderFailure(doc, state, callbacks) {
@@ -684,6 +699,7 @@ export function renderFoundationOverview(root, state, {
   recordContexts,
   partial = false,
   onNotice,
+  onLoading,
 } = {}) {
   if (!root) throw new TypeError('root is required');
   const doc = getDocument(explicitDocument);
@@ -705,14 +721,13 @@ export function renderFoundationOverview(root, state, {
     else surface.append(workspaceErrorCard(doc, notice));
   };
   if (state.status === 'loading') {
-    surface.append(renderLoading(doc, state, callbacks)); root.append(surface); return surface;
+    root.append(surface); renderLoadingState(doc, root, viewState, true, onLoading); return surface;
   }
   if (state.status !== 'ready') {
     notify({ title: '取得失敗', message: `${state.error?.message ?? '目的・哲学・世界モデルを確認できません。'} 登録なし・0件として表示していません。`, onRetry: callbacks.load });
-    root.append(surface); return surface;
+    root.append(surface); renderLoadingState(doc, root, viewState, false, onLoading); return surface;
   }
   const catalog = state.catalog;
-  if (partial) notify({ title: '取得済みの範囲', tone: 'warning', message: '以下の登録なし・検索結果は取得できた記録だけが対象です。全体は未確認です。' });
   surface.append(renderObjectives(doc, catalog, viewState, callbacks, recordContexts));
   const fold = (title, help, content, initialOpen) => {
     const key = title === '哲学' ? 'philosophyOpen' : 'modelsOpen';
@@ -721,6 +736,7 @@ export function renderFoundationOverview(root, state, {
   surface.append(fold('哲学', '判断の前提となる考え方です。登録された本文と、判断への適用範囲を分けて表示します。', renderPhilosophies(doc, catalog, recordContexts), true));
   surface.append(fold('世界モデル', '何をすると結果が変わるか、という仮説。未検証・許可用途を分けて確認します。', renderModels(doc, catalog, viewState, callbacks, recordContexts), false));
   root.append(surface);
+  renderLoadingState(doc, root, viewState, false, onLoading);
   return surface;
 }
 
@@ -731,7 +747,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 = '全体', onNotice,
+  document: explicitDocument, viewState = { query: '', page: 0 }, callbacks = {}, scopeLabel = '全体', onNotice, onLoading,
 } = {}) {
   const doc = getDocument(explicitDocument);
   root.replaceChildren();
@@ -742,7 +758,7 @@ export function renderFoundationCollectionOverview(root, sources, {
   for (const source of sources) {
     if (source.state.status !== 'ready') {
       if (source.state.status === 'loading') {
-        root.append(workspaceNotice(doc, { label: source.label, text: '目的・哲学・世界モデルを読み込んでいます。' }));
+        // A single shared loading card is rendered after the available catalogs.
       } 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));
@@ -778,10 +794,11 @@ 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, onNotice,
+      recordContexts: contexts, partial: ready !== sources.length, onNotice, onLoading: () => {},
     });
     root.append(mount);
   }
+  renderLoadingState(doc, root, viewState, sources.some(source => source.state.status === 'loading'), onLoading);
   return root;
 }
 
@@ -841,6 +858,8 @@ export function createFoundationOverview({ root, port, scopeId, document: explic
       destroyed = true;
       generation += 1;
       viewState.dialog?.close();
+      viewState.cancelLoadingDismiss?.();
+      viewState.loadingCard = null;
       root.replaceChildren();
     },
   };

package/ui/judgment-history.css

@@ -583,3 +583,37 @@
   .bb-jh-ledger .bb-ws-ledger-row > span:nth-child(3)::before { content: '使った参照'; }
   .bb-jh-ledger .bb-ws-ledger-row > span:nth-child(4)::before { content: '入口・状態'; }
 }
+
+/* Compact workspace header, search controls and shared floating notifications. */
+.bb-jh { position: relative; }
+.bb-jh > .bb-ws-page { margin-bottom: var(--bb-space-6, 32px); }
+.bb-jh .bb-ws-page-head h1 { font-size: 24px; line-height: 1.4; font-weight: 600; letter-spacing: .02em; }
+.bb-jh-controls { margin-bottom: var(--bb-space-4, 16px); }
+.bb-jh-checked { font-size: 11px; font-variant-numeric: tabular-nums; }
+.bb-jh-filter-fields { display: grid; gap: 16px; }
+.bb-jh-filter-fields .bb-jh-periods { flex-wrap: wrap; gap: 6px; }
+.bb-jh-filter-fields .bb-jh-normal-filters { display: grid; flex: none; gap: 16px; }
+.bb-jh-filter-fields .bb-jh-filter { display: grid; gap: 6px; }
+.bb-jh-filter-fields select { width: 100%; }
+.bb-jh-refresh { display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 6px; }
+.bb-jh-refresh-mark { display: block; width: 16px; height: 16px; }
+.bb-jh-notifications { display: grid; gap: 8px; }
+.bb-jh-notifications .bb-jh-banner { margin: 0; }
+.bb-jh-notifications .bb-jh-banner-sources { display: grid; gap: 4px; margin-top: 8px; }
+.bb-jh-notifications .bb-jh-source-detail { margin: 8px 0 0; }
+.bb-jh-notifications .bb-jh-source-detail summary { color: inherit; }
+.bb-jh-notifications .bb-jh-source-detail-body { position: static; max-width: none; background: transparent; border-color: var(--bb-color-notice-border); color: inherit; }
+.bb-jh-detail .bb-ws-rail-head { margin-top: 0; }
+@media (max-width: 760px) {
+  .bb-jh-controls { flex-direction: row; flex-wrap: wrap; align-items: center; }
+  .bb-jh-search { flex: 1 1 150px; }
+  .bb-jh-toolbar-status { margin-left: auto; }
+}
+.bb-jh-notifications .bb-jh-banner {
+  border-color: var(--bb-color-notice-border);
+  background: var(--bb-color-notice-background);
+  color: var(--bb-color-notice-text);
+  border-left-color: var(--bb-color-notice-warning);
+}
+.bb-jh-notifications .bb-jh-banner.is-danger { border-left-color: var(--bb-color-notice-danger); }
+.bb-jh-notifications .bb-jh-banner-sources > span { white-space: normal; }

package/ui/judgment-history.js

@@ -11,6 +11,11 @@
 import {
   makeWorkspaceElement,
   workspaceButton,
+  workspaceDialog,
+  workspaceFilterPopover,
+  workspaceErrorCard,
+  workspaceLoadingCard,
+  workspaceDismissNotification,
   workspaceDefinition,
   workspaceDetailEmpty,
   workspaceLedger,
@@ -1278,14 +1283,16 @@ function sourceChips(doc, sources) {
 }
 
 function historyBanner(doc, { label, tone, role, sources, home, note, reload }) {
-  const banner = makeWorkspaceElement(doc, 'div', {
-    className: `bb-jh-banner is-${tone}`,
-    attrs: { role: role ?? 'status' },
+  const banner = workspaceErrorCard(doc, {
+    title: label,
+    tone,
+    message: note || '取得できた記録だけを表示しています。全体の取得状態は通知の詳細で確認できます。',
   });
-  banner.append(makeWorkspaceElement(doc, 'strong', { text: label }));
-  if (sources?.length) banner.append(sourceChips(doc, sources));
-  if (note) banner.append(makeWorkspaceElement(doc, 'span', { className: 'bb-jh-banner-note', text: note }));
-  if (home) banner.append(sourceDetail(doc, home));
+  banner.className += ` bb-jh-banner is-${tone}`;
+  banner.setAttribute('role', role ?? 'status');
+  const details = findFirst(banner, node => node.tagName === 'DETAILS');
+  if (sources?.length) details.append(sourceChips(doc, sources));
+  if (home) details.append(sourceDetail(doc, home));
   if (reload) banner.append(reload);
   return banner;
 }
@@ -1315,30 +1322,7 @@ function statusNotice(doc, phase, error, home, onRetry, { loading = false, slow
     });
   }
   if (loading) {
-    const progressHome = arrived ?? home;
-    const counts = new Map();
-    for (const record of progressHome?.records ?? []) {
-      const key = normalEntrypoint(record.entrypoint);
-      counts.set(key, (counts.get(key) ?? 0) + 1);
-    }
-    const known = Array.isArray(progressHome?.coverage?.sources) && progressHome.coverage.sources.length
-      ? progressHome.coverage.sources
-      : NORMAL_ENTRYPOINTS.filter((entrypoint) => entrypoint !== 'unknown').map((entrypoint) => ({ entrypoint, status: 'pending', reason: null }));
-    const sources = known.map((source) => {
-      const count = counts.get(normalEntrypoint(source.entrypoint)) ?? 0;
-      if (count > 0) return { entrypoint: source.entrypoint, status: 'partial', retrieved: count, reason: null };
-      if (source.status === 'unavailable') return { entrypoint: source.entrypoint, status: 'unavailable', reason: source.reason ?? null };
-      return { entrypoint: source.entrypoint, status: 'pending', reason: null };
-    });
-    return historyBanner(doc, {
-      label: '読み込み中',
-      tone: 'info',
-      role: 'status',
-      sources,
-      note: slow
-        ? '時間がかかっています。届いた分だけ先に見られます。'
-        : '取得元ごとに届いた順に表示します',
-    });
+    return workspaceLoadingCard(doc, { title: 'ロード中' });
   }
   if (home?.status === 'partial') {
     return historyBanner(doc, {
@@ -1522,12 +1506,6 @@ function summaryLine(doc, aggregate, { loading = false } = {}) {
     line.append(makeWorkspaceElement(doc, 'span', { className: 'bb-jh-skeleton is-inline', attrs: { 'aria-hidden': 'true' } }));
     line.append(makeWorkspaceElement(doc, 'span', { text: ' 取得済み' }));
   }
-  if (!complete) {
-    line.append(makeWorkspaceElement(doc, 'span', {
-      className: 'bb-jh-summary-note',
-      text: loading ? '（読み込み中・全件数は未確認）' : '（全件数は未確認）',
-    }));
-  }
   const references = loading ? null : (aggregate?.stats?.referenceCount ?? aggregate?.stats?.references);
   const confirmed = loading ? null : (aggregate?.stats?.confirmedOutcomes ?? aggregate?.stats?.outcomes);
   line.append(makeWorkspaceElement(doc, 'span', { text: '　・　使った参照 ' }));
@@ -1578,6 +1556,7 @@ export function createJudgmentHistoryUI({
   page,
   autoLoad = true,
   pageHeader = true,
+  notificationRoot = null,
   now = new Date(),
   skeletonDelayMs = 300,
   slowDelayMs = 10000,
@@ -1621,6 +1600,52 @@ export function createJudgmentHistoryUI({
     slowTimer: null,
   };
 
+  let filterPopover = null;
+  let filterExpanded = false;
+  let drawer = null;
+  let drawerContent = null;
+  let drawerKey = null;
+  let suppressDrawerClose = false;
+  function disposeDrawer() {
+    suppressDrawerClose = true;
+    drawer?.dispose();
+    drawer = null; drawerContent = null; drawerKey = null;
+    suppressDrawerClose = false;
+  }
+  const nativeDrawer = Boolean(doc.body && typeof doc.createElement('dialog').showModal === 'function');
+  const previousRailHidden = rail?.hidden;
+  if (nativeDrawer && rail) rail.hidden = true;
+  const notifications = makeWorkspaceElement(doc, 'div', {
+    className: 'bb-ws-error-stack bb-jh-notifications', attrs: { 'aria-label': '判断履歴の通知' },
+  });
+  if (notificationRoot) notificationRoot.append(notifications);
+  let loadingCard = null;
+  let dismissLoading = null;
+  let statusCard = null;
+  let statusKey = null;
+
+  function updateNotifications(loading) {
+    if (loading) {
+      dismissLoading?.(); dismissLoading = null;
+      if (!loadingCard) loadingCard = workspaceLoadingCard(doc, { title: 'ロード中' });
+      if (loadingCard.parentNode !== notifications) notifications.append(loadingCard);
+    } else if (loadingCard && !dismissLoading) {
+      dismissLoading = workspaceDismissNotification(loadingCard);
+    }
+    const home = state.home;
+    const key = loading ? null : JSON.stringify([state.phase, state.error, home?.status, home?.coverage]);
+    if (statusKey !== key) {
+      statusCard?.remove?.();
+      // Small host DOM adapters may not implement Element.remove().
+      if (statusCard?.parentNode === notifications && typeof statusCard.remove !== 'function') {
+        notifications.replaceChildren(...notifications.children.filter(node => node !== statusCard));
+      }
+      statusKey = key;
+      statusCard = loading ? null : statusNotice(doc, state.phase, state.error, home, () => void load());
+      if (statusCard) notifications.append(statusCard);
+    }
+  }
+
   function clearLoadTimers() {
     if (state.skeletonTimer !== null) {
       clearTimeout(state.skeletonTimer);
@@ -1664,12 +1689,13 @@ export function createJudgmentHistoryUI({
     state.selectedKey = null;
     state.detailPhase = 'idle';
     state.detailError = null;
+    if (drawer) drawer.close();
     render();
     return true;
   }
 
   function handleKeyDown(event) {
-    if (event?.key === 'Escape') closeSelected();
+    if (event?.key === 'Escape' && !drawer) closeSelected();
   }
 
   root.addEventListener?.('keydown', handleKeyDown);
@@ -1908,7 +1934,18 @@ export function createJudgmentHistoryUI({
 
   function render() {
     if (state.disposed) return;
-    if (state.phase === 'loading' && !state.showSkeleton && !state.arrived) return;
+    updateNotifications(state.phase === 'loading');
+    if (state.phase === 'loading' && !state.showSkeleton && !state.arrived) {
+      if (!notificationRoot && notifications.parentNode !== root) root.append(notifications);
+      return;
+    }
+    const focusedFilter = filterExpanded && filterPopover
+      ? findFirst(filterPopover.panel, node => node === doc.activeElement) : null;
+    const filterFocus = focusedFilter && {
+      label: attributeValue(focusedFilter, 'aria-label'), period: attributeValue(focusedFilter, 'data-period'),
+    };
+    filterPopover?.destroy();
+    filterPopover = null;
     const previousSearchInput = findFirst(root, (node) => node.tagName === 'INPUT');
     const previousSearchSelection = previousSearchInput && Number.isInteger(previousSearchInput.selectionStart)
       ? { start: previousSearchInput.selectionStart, end: previousSearchInput.selectionEnd ?? previousSearchInput.selectionStart }
@@ -1936,21 +1973,18 @@ export function createJudgmentHistoryUI({
         source: context.source,
       }));
     }
-    const notice = statusNotice(doc, state.phase, state.error, loading ? (state.arrived ?? state.home) : state.home, () => void load(), {
-      loading,
-      slow: state.slow,
-      arrived: state.arrived,
-    });
-    if (notice) wrapper.append(notice);
+    if (!notificationRoot) wrapper.append(notifications);
     const failed = state.phase === 'error' || state.home?.status === 'unavailable' || state.home?.status === 'error' || state.home?.status === 'invalid';
     if (failed) {
       wrapper.append(workspaceDetailEmpty(doc, { mark: '…', title: '判断履歴を確認できません', text: '再試行すると最新の状態を確認します。' }));
       root.replaceChildren(wrapper);
-      renderRail(doc, rail, null, null);
+      if (drawer) disposeDrawer();
+      if (!nativeDrawer) renderRail(doc, rail, null, null);
       return;
     }
     const controls = makeWorkspaceElement(doc, 'div', { className: 'bb-jh-controls' });
-    controls.append(periodButtons(doc, state.period, (period) => {
+    const filterFields = makeWorkspaceElement(doc, 'div', { className: 'bb-jh-filter-fields' });
+    filterFields.append(periodButtons(doc, state.period, (period) => {
       state.period = period;
       state.selectedKey = null;
       state.cursor = null;
@@ -1961,7 +1995,7 @@ export function createJudgmentHistoryUI({
       }
     }));
     const showNormalFilters = loading ? sourceHome?.mode !== 'legacy' : normalMode();
-    if (showNormalFilters) controls.append(normalFilterControls(doc, sourceHome ?? state.home, state, handleNormalFilterChange));
+    if (showNormalFilters) filterFields.append(normalFilterControls(doc, sourceHome ?? state.home, state, handleNormalFilterChange));
     controls.append(createSearch(doc, state.query, (query) => {
       state.query = String(query);
       state.focusSearch = true;
@@ -1970,28 +2004,41 @@ export function createJudgmentHistoryUI({
       if (searchable) state.aggregate = aggregateJudgmentHistory(searchable, { now: readNow(), period: state.period, query: state.query });
       render();
     }));
+    filterPopover = workspaceFilterPopover(doc, {
+      content: filterFields, open: filterExpanded,
+      onToggle: value => { filterExpanded = value; },
+    });
+    controls.append(filterPopover.root);
     const toolbarStatus = makeWorkspaceElement(doc, 'div', { className: 'bb-jh-toolbar-status' });
-    if (loading) {
-      toolbarStatus.append(makeWorkspaceElement(doc, 'span', {
-        className: 'bb-jh-checked',
-        text: '確認しています…',
-        attrs: { role: 'status' },
-      }));
-    } else if (state.checkedAt) {
+    if (state.checkedAt) {
       const stamp = formatCheckedAt(state.checkedAt);
-      if (stamp) toolbarStatus.append(makeWorkspaceElement(doc, 'span', { className: 'bb-jh-checked', text: `${stamp}に確認` }));
+      if (stamp) toolbarStatus.append(makeWorkspaceElement(doc, 'span', {
+        className: 'bb-jh-checked', text: stamp, attrs: { 'aria-label': `${stamp}に確認` },
+      }));
     }
-    toolbarStatus.append(workspaceButton(doc, {
-      text: '再読み込み',
-      variant: 'quiet',
-      disabled: loading,
-      onClick: () => void load(),
-      attrs: { 'aria-label': '判断履歴を再読み込み', 'data-action': 'reload' },
-    }));
+    const reloadButton = workspaceButton(doc, {
+      variant: 'quiet', disabled: loading, onClick: () => void load(),
+      attrs: { 'aria-label': '判断履歴を再読み込み', title: '再読み込み', 'data-action': 'reload' },
+    });
+    reloadButton.className += ' bb-jh-refresh';
+    // Text-independent vector keeps the refresh control available in standalone hosts.
+    const refreshMark = doc.createElementNS?.('http://www.w3.org/2000/svg', 'svg')
+      ?? makeWorkspaceElement(doc, 'span', { text: '↻' });
+    refreshMark.setAttribute('class', 'bb-jh-refresh-mark'); refreshMark.setAttribute('aria-hidden', 'true');
+    if (doc.createElementNS) {
+      refreshMark.setAttribute('viewBox', '0 0 24 24'); refreshMark.setAttribute('fill', 'none');
+      refreshMark.setAttribute('stroke', 'currentColor'); refreshMark.setAttribute('stroke-width', '1.7');
+      refreshMark.setAttribute('stroke-linecap', 'round'); refreshMark.setAttribute('stroke-linejoin', 'round');
+      const path = doc.createElementNS('http://www.w3.org/2000/svg', 'path');
+      path.setAttribute('d', 'M20 7v5h-5M4 17v-5h5M6.1 6.1a8 8 0 0 1 13.2 3.2M4.7 14.7a8 8 0 0 0 13.2 3.2');
+      refreshMark.append(path);
+    }
+    reloadButton.append(refreshMark);
+    toolbarStatus.append(reloadButton);
     controls.append(toolbarStatus);
     wrapper.append(controls);
     wrapper.append(summaryLine(doc, aggregate, { loading }));
-    const emptyText = state.home?.status === 'partial' || (normalMode() && !aggregate.countComplete)
+    const emptyText = loading ? '' : state.home?.status === 'partial' || (normalMode() && !aggregate.countComplete)
       ? 'この期間に取得できた判断履歴はありません。全件数が未確認のため0件とは確認できません。'
       : 'この期間の判断履歴はありません。';
     const dataRows = makeRows(doc, aggregate, state.selectedKey, (key) => {
@@ -2023,6 +2070,12 @@ export function createJudgmentHistoryUI({
       replaceNode(nextSearchInput, previousSearchInput);
     }
     root.replaceChildren(wrapper);
+    if (filterExpanded && filterFocus) {
+      const field = findFirst(filterPopover.panel, node => filterFocus.label
+        ? attributeValue(node, 'aria-label') === filterFocus.label
+        : filterFocus.period && attributeValue(node, 'data-period') === filterFocus.period);
+      field?.focus?.();
+    }
     if (state.focusSearch || previousSearchFocused) {
       const input = findFirst(root, (node) => node.tagName === 'INPUT');
       input?.focus?.();
@@ -2048,8 +2101,38 @@ export function createJudgmentHistoryUI({
         onCopyReference: (payload) => void copyReference(payload),
       }
       : {};
-    renderRail(doc, rail, selected, selectedDetail, selected ? closeSelected : null, { ...railOptions, loading });
-    if (state.lastFocusedKey) {
+    if (nativeDrawer) {
+      if (selected) {
+        if (!drawer || drawerKey !== selected.key) {
+          if (drawer) disposeDrawer();
+          drawerKey = selected.key;
+          drawerContent = makeWorkspaceElement(doc, 'div', { className: 'bb-jh-detail' });
+          const selectedKey = selected.key;
+          drawer = workspaceDialog(doc, {
+            title: '判断の詳細', content: drawerContent, presentation: 'drawer',
+            opener: () => findFirst(root, node => attributeValue(node, 'data-key') === selectedKey),
+            onClose: () => {
+              if (suppressDrawerClose) return;
+              drawer = null; drawerContent = null; drawerKey = null;
+              if (state.disposed) return;
+              state.selectedKey = null; state.detailPhase = 'idle'; state.detailError = null;
+              state.lastFocusedKey = selectedKey; render();
+            },
+          });
+        }
+        const detailFocus = findFirst(drawerContent, node => node === doc.activeElement);
+        const detailLabel = attributeValue(detailFocus, 'aria-label');
+        const detailSelection = Number.isInteger(detailFocus?.selectionStart)
+          ? [detailFocus.selectionStart, detailFocus.selectionEnd] : null;
+        renderRail(doc, drawerContent, selected, selectedDetail, null, { ...railOptions, loading });
+        if (detailLabel) {
+          const field = findFirst(drawerContent, node => attributeValue(node, 'aria-label') === detailLabel);
+          field?.focus?.();
+          if (detailSelection) field?.setSelectionRange?.(...detailSelection);
+        }
+      } else if (drawer) drawer.close();
+    } else renderRail(doc, rail, selected, selectedDetail, selected ? closeSelected : null, { ...railOptions, loading });
+    if (state.lastFocusedKey && !drawer) {
       const row = findFirst(root, (node) => attributeValue(node, 'data-key') === state.lastFocusedKey);
       row?.focus?.();
       state.lastFocusedKey = null;
@@ -2169,10 +2252,15 @@ export function createJudgmentHistoryUI({
     state.disposed = true;
     state.generation += 1;
     clearLoadTimers();
+    filterPopover?.destroy();
+    dismissLoading?.();
+    notifications.remove?.();
+    disposeDrawer();
     root.removeEventListener?.('keydown', handleKeyDown);
     rail?.removeEventListener?.('keydown', handleKeyDown);
     root.replaceChildren();
     rail?.replaceChildren();
+    if (nativeDrawer && rail) rail.hidden = previousRailHidden;
   }
 
   const controller = { load, render, dispose, openDecision, get state() { return { ...state }; } };

package/ui/local-web-shell.js

@@ -451,8 +451,11 @@ export function createLocalWebShell({
   workspace.append(mobileBar, main);
   const railAside = makeElement(doc, 'aside', { className: 'bb-shell-rail', attrs: { 'aria-label': '選択中の項目' } });
   const rails = new Map();
+  const nativeDrawers = Boolean(doc.body && typeof doc.createElement('dialog').showModal === 'function');
   for (const screen of screens) {
-    if (!screen.rail) continue;
+    // The built-in history uses a modal drawer in browsers, with a rail fallback
+    // for minimal hosts. Do not reserve an empty desktop column for the drawer.
+    if (!screen.rail || (nativeDrawers && screen.mount === mountToday)) continue;
     const railSlot = makeElement(doc, 'div', { className: 'bb-shell-rail-slot', attrs: { 'data-rail': screen.id } });
     railSlot.hidden = true;
     rails.set(screen.id, railSlot);

package/ui/people-and-companies-view.css

@@ -119,3 +119,146 @@
     display: none;
   }
 }
+
+/* Marks, counts and badges (2026-10). A person is a round mark, a company a
+   rounded square; both keep one tone per id. Counts sit next to each group
+   title, and the jump links at the top move to the people or company part. */
+.bb-pc-jump {
+  display: flex;
+  gap: 4px;
+  margin: 4px 0 18px;
+  padding: 3px;
+  width: max-content;
+  border-radius: 9px;
+  background: var(--bb-color-canvas);
+}
+
+.bb-pc-jump-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 28px;
+  padding: 0 12px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--bb-color-ink);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.bb-pc-jump-link:hover {
+  background: var(--bb-color-paper);
+  box-shadow: 0 1px 2px rgb(32 33 36 / 10%);
+}
+
+.bb-pc-count {
+  color: var(--bb-color-muted);
+  font-size: 12px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+
+.bb-graph .bb-pc-group-title,
+.bb-graph .bb-pc-company-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.bb-graph .bb-pc-company-title {
+  color: var(--bb-color-ink);
+  font-weight: 600;
+}
+
+.bb-pc-mark {
+  display: inline-grid;
+  flex: 0 0 auto;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  margin-right: 10px;
+  color: var(--bb-pc-mark-ink);
+  background: var(--bb-pc-mark-bg);
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.bb-pc-person-mark { border-radius: 50%; }
+.bb-pc-company-mark { border-radius: 6px; }
+.bb-pc-company-title .bb-pc-mark,
+.bb-pc-company-chip .bb-pc-mark { width: 18px; height: 18px; margin-right: 0; border-radius: 5px; font-size: 10px; }
+
+.bb-pc-tone-0 { --bb-pc-mark-bg: #fde7e9; --bb-pc-mark-ink: #b4233a; }
+.bb-pc-tone-1 { --bb-pc-mark-bg: #e3effd; --bb-pc-mark-ink: #1f5fbf; }
+.bb-pc-tone-2 { --bb-pc-mark-bg: #e2f5ea; --bb-pc-mark-ink: #157046; }
+.bb-pc-tone-3 { --bb-pc-mark-bg: #fff1d6; --bb-pc-mark-ink: #9a5a00; }
+.bb-pc-tone-4 { --bb-pc-mark-bg: #efe7fd; --bb-pc-mark-ink: #6d36c9; }
+.bb-pc-tone-5 { --bb-pc-mark-bg: #e0f4f6; --bb-pc-mark-ink: #0d6e7a; }
+
+.bb-pc-people-ledger .bb-ws-ledger-object,
+.bb-pc-company-ledger .bb-ws-ledger-object {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.bb-pc-people-ledger .bb-ws-ledger-object strong,
+.bb-pc-company-ledger .bb-ws-ledger-object strong {
+  overflow: hidden;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bb-pc-company-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 12px;
+}
+
+.bb-pc-company-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  min-width: 0;
+}
+
+.bb-pc-kinds {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.bb-pc-kind {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 1px 8px;
+  border-radius: 5px;
+  background: var(--bb-color-canvas);
+  color: var(--bb-color-muted);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.bb-pc-kind::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+}
+
+.bb-pc-kind-customer { background: #e2f5ea; color: #157046; }
+.bb-pc-kind-partner { background: #e3effd; color: #1f5fbf; }
+.bb-pc-kind-prospect { background: #fff1d6; color: #9a5a00; }
+
+.bb-pc-people-ledger .bb-ws-ledger-row:not(.bb-ws-ledger-head),
+.bb-pc-company-ledger .bb-ws-ledger-row:not(.bb-ws-ledger-head) {
+  align-items: center;
+  min-height: 46px;
+}

package/ui/people-and-companies-view.js

@@ -117,6 +117,21 @@ function ownKey(table, key) {
   return typeof key === 'string' && Object.hasOwn(table, key) ? table[key] : undefined;
 }
 
+/** First visible character of a name for its mark, or a placeholder. */
+function nameInitial(name) {
+  const text = String(name ?? '').trim();
+  const latin = text.split(/\s+/u).filter(Boolean);
+  if (/^[A-Za-z]/u.test(text) && latin.length > 1) return `${latin[0][0]}${latin[1][0]}`.toUpperCase();
+  return ([...text][0] ?? '?').toUpperCase();
+}
+
+/** A stable tone (0-5) per id so a person or company keeps its color. */
+function markTone(id) {
+  let hash = 0;
+  for (const character of String(id ?? '')) hash = (hash * 31 + character.codePointAt(0)) >>> 0;
+  return hash % 6;
+}
+
 /** The read is `ok` only when every person and company is well formed. */
 export function normalizePeopleAndCompanies(result) {
   if (result?.state !== 'ok') return result ?? INVALID;
@@ -269,8 +284,8 @@ export function createPeopleAndCompaniesView({
       selected: person.id === state.detail?.id,
       onSelect: (id) => void controller.openEntity(id),
       cells: [
-        { primary: person.isOwner ? `${person.name}（あなた）` : person.name, secondary: person.id },
-        person.companyIds.length > 0 ? person.companyIds.map(nameOf).join('、') : companyCell(person, ownId),
+        { primary: person.isOwner ? `${person.name}（あなた）` : person.name, leading: personMark(person) },
+        person.companyIds.length > 0 ? companyChips(person.companyIds) : companyCell(person, ownId),
         person.accountableProjectCount > 0
           ? `${person.projectCount}件（うち責任 ${person.accountableProjectCount}件）`
           : `${person.projectCount}件`,
@@ -280,6 +295,67 @@ export function createPeopleAndCompaniesView({
     }));
   }
 
+  function personMark(person) {
+    return makeElement(doc, 'span', {
+      className: `bb-pc-mark bb-pc-person-mark bb-pc-tone-${markTone(person.id)}`,
+      text: nameInitial(person.name),
+      attrs: { 'aria-hidden': 'true' },
+    });
+  }
+
+  function companyMark(id, name) {
+    return makeElement(doc, 'span', {
+      className: `bb-pc-mark bb-pc-company-mark bb-pc-tone-${markTone(id)}`,
+      text: nameInitial(name),
+      attrs: { 'aria-hidden': 'true' },
+    });
+  }
+
+  function companyChips(ids) {
+    const list = makeElement(doc, 'span', { className: 'bb-pc-company-chips' });
+    for (const id of ids) {
+      const chip = makeElement(doc, 'span', { className: 'bb-pc-company-chip' });
+      chip.append(companyMark(id, nameOf(id)), makeElement(doc, 'span', { text: nameOf(id) }));
+      list.append(chip);
+    }
+    return list;
+  }
+
+  function kindBadges(company) {
+    const kinds = company.kinds ?? [];
+    if (kinds.length === 0) return '';
+    const list = makeElement(doc, 'span', { className: 'bb-pc-kinds' });
+    for (const item of kinds) {
+      list.append(makeElement(doc, 'span', {
+        className: `bb-pc-kind bb-pc-kind-${Object.hasOwn(COMPANY_KIND_LABELS, item.kind) ? item.kind : 'other'}`,
+        text: ownKey(COMPANY_KIND_LABELS, item.kind) ?? item.kind,
+      }));
+    }
+    return list;
+  }
+
+  function groupTitle(tag, text, count, { className = 'bb-pc-group-title', leading } = {}) {
+    const title = makeElement(doc, tag, { className });
+    if (leading) title.append(leading);
+    title.append(makeElement(doc, 'span', { text }), makeElement(doc, 'span', { className: 'bb-pc-count', text: String(count) }));
+    return title;
+  }
+
+  function jumpLinks(payload) {
+    const people = payload.people.filter((person) => person.active).length;
+    const companies = payload.companies.filter((company) => company.active).length;
+    const nav = makeElement(doc, 'nav', { className: 'bb-pc-jump', attrs: { 'aria-label': '人と会社の段' } });
+    for (const [label, count, target] of [['人', people, 'bb-pc-people'], ['会社', companies, 'bb-pc-companies']]) {
+      const link = button(doc, '', () => {
+        const node = typeof doc.getElementById === 'function' ? doc.getElementById(target) : null;
+        node?.scrollIntoView?.({ behavior: 'smooth', block: 'start' });
+      }, { className: 'bb-pc-jump-link', attrs: { 'aria-label': `${label} ${count}件の段へ移る` } });
+      link.append(makeElement(doc, 'span', { text: label }), makeElement(doc, 'span', { className: 'bb-pc-count', text: String(count) }));
+      nav.append(link);
+    }
+    return nav;
+  }
+
   function orgNoteText(note) {
     return `記録上のメモ: ${note}（所属ではありません）`;
   }
@@ -324,7 +400,7 @@ export function createPeopleAndCompaniesView({
   }
 
   function peopleSection(payload) {
-    const section = makeElement(doc, 'section', { className: 'bb-pc-people', attrs: { 'aria-label': '人' } });
+    const section = makeElement(doc, 'section', { className: 'bb-pc-people', attrs: { 'aria-label': '人', id: 'bb-pc-people' } });
     section.append(workspaceSectionTitle(doc, { title: '人', lead: '社内か社外かは、所属（会社への所属の関係）と自社から決めています。印は別に持っていません。' }));
     if (can.createPerson) section.append(sectionActions('人を加える', () => openCreateEntity('person')));
     const groups = groupPeople(payload);
@@ -337,22 +413,22 @@ export function createPeopleAndCompaniesView({
       }));
     }
     if (groups.ownCompanyId) {
-      section.append(makeElement(doc, 'h3', { className: 'bb-pc-group-title', text: `社内（${nameOf(groups.ownCompanyId)}）` }));
+      section.append(groupTitle('h3', `社内（${nameOf(groups.ownCompanyId)}）`, groups.internal.length));
       section.append(peopleLedger('社内の人', groups.internal, '自社に所属する人の記録はありません。'));
-      section.append(makeElement(doc, 'h3', { className: 'bb-pc-group-title', text: '社外' }));
+      section.append(groupTitle('h3', '社外', groups.external.reduce((sum, group) => sum + group.people.length, 0)));
       if (groups.external.length === 0) section.append(makeElement(doc, 'p', { className: 'bb-pc-empty', text: 'ほかの会社に所属する人の記録はありません。' }));
       for (const group of groups.external) {
-        section.append(makeElement(doc, 'h4', { className: 'bb-pc-company-title', text: group.company.name }));
+        section.append(groupTitle('h4', group.company.name, group.people.length, { className: 'bb-pc-company-title', leading: companyMark(group.company.id, group.company.name) }));
         section.append(peopleLedger(`${group.company.name}の人`, group.people));
       }
     }
-    section.append(makeElement(doc, 'h3', { className: 'bb-pc-group-title', text: '所属未確認' }));
+    section.append(groupTitle('h3', '所属未確認', groups.unknown.length));
     section.append(peopleLedger('所属未確認の人', groups.unknown, '所属が分からない人はいません。'));
     return section;
   }
 
   function companySection(payload) {
-    const section = makeElement(doc, 'section', { className: 'bb-pc-companies', attrs: { 'aria-label': '会社' } });
+    const section = makeElement(doc, 'section', { className: 'bb-pc-companies', attrs: { 'aria-label': '会社', id: 'bb-pc-companies' } });
     section.append(workspaceSectionTitle(doc, {
       title: '会社',
       lead: '自社を先頭に、顧客・協業先など関わる会社を並べています。種類は、会社の属性、プロジェクトとの関係の役割、提案中の案件の記録から出しています。記録が無い会社には種類を出しません。',
@@ -369,8 +445,8 @@ export function createPeopleAndCompaniesView({
         selected: company.id === state.detail?.id,
         onSelect: (id) => void controller.openEntity(id),
         cells: [
-          { primary: company.id === payload.ownCompany.id ? `${company.name}（自社）` : company.name, secondary: company.id },
-          companyKindLabel(company),
+          { primary: company.id === payload.ownCompany.id ? `${company.name}（自社）` : company.name, leading: companyMark(company.id, company.name) },
+          kindBadges(company),
           `${company.memberIds.length}人`,
           company.relatedProjects.length > 0
             ? `${company.projectIds.length}件（関わる ${company.relatedProjects.length}件）`
@@ -408,7 +484,7 @@ export function createPeopleAndCompaniesView({
       return [...children, graphHostEmptyNotice(doc, emptyNotice)
         ?? workspaceNotice(doc, { label: '未登録', tone: 'info', role: 'status', text: 'Graphに人と会社の記録はまだありません。' })];
     }
-    return [...children, peopleSection(payload), companySection(payload), endedNote(payload)];
+    return [...children, jumpLinks(payload), peopleSection(payload), companySection(payload), endedNote(payload)];
   }
 
   // -------------------------------------------------------------------------

package/ui/workspace-kit.css

@@ -530,3 +530,46 @@
 .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; } }
+
+/* One native-dialog drawer presentation for shared parts and host-owned task dialogs. */
+.bb-ws-drawer {
+  box-sizing: border-box; width: min(640px,100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh;
+  margin: 0 0 0 auto; padding: 0; border: 0; border-left: 1px solid var(--bb-color-border);
+  border-radius: 0; background: var(--bb-color-panel); color: var(--bb-color-ink); box-shadow: var(--bb-shadow-drawer); overflow: auto;
+}
+.bb-ws-drawer[open] { animation: bb-ws-drawer-in 180ms ease-out; }
+.bb-ws-drawer::backdrop { background: var(--bb-color-drawer-overlay); }
+.bb-ws-drawer.is-closing { animation: bb-ws-drawer-out 280ms ease-in both; pointer-events: none; }
+.bb-ws-drawer.is-closing::backdrop { animation: bb-ws-drawer-backdrop-out 280ms ease-in both; }
+.bb-ws-drawer .bb-ws-dialog-head { align-items: center; padding: 14px 16px 14px 28px; }
+.bb-ws-drawer .bb-ws-dialog-head h2 { font-weight: 650; line-height: 1.35; }
+.bb-ws-drawer .bb-ws-dialog-body { padding: 18px 28px 32px; }
+@keyframes bb-ws-drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
+@keyframes bb-ws-drawer-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(32px); opacity: 0; } }
+@keyframes bb-ws-drawer-backdrop-out { from { background: var(--bb-color-drawer-overlay); } to { background: var(--bb-color-drawer-overlay-clear); } }
+.bb-ws-filter-anchor { position: relative; display: inline-flex; flex: none; }
+.bb-ws-filter-anchor > .bb-ws-button::after { content: '⌄'; margin-left: var(--bb-space-2); }
+.bb-ws-filter-popover {
+  position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; display: grid; gap: var(--bb-space-4);
+  box-sizing: border-box; width: 360px; max-width: calc(100vw - 48px); padding: 20px;
+  border: 1px solid var(--bb-color-border); border-radius: 12px; background: var(--bb-color-panel); color: var(--bb-color-ink);
+  box-shadow: var(--bb-shadow-popover); max-height: calc(100dvh - 220px); overflow-y: auto;
+  transform-origin: top right; animation: bb-ws-filter-enter 180ms ease-out;
+}
+.bb-ws-filter-popover[hidden] { display: none !important; }
+@keyframes bb-ws-filter-enter { from { opacity: 0; transform: translateY(-6px) scaleY(.96); } to { opacity: 1; transform: none; } }
+.bb-ws-loading-card { align-items: center; border-left-color: var(--bb-color-notice-control-border); }
+.bb-ws-loading-spinner { position: relative; display: block; flex: none; width: 14px; height: 14px; }
+.bb-ws-loading-spinner::before {
+  content: ''; position: absolute; top: 1px; left: 1px; box-sizing: border-box; width: 12px; height: 12px;
+  border: 1.5px solid var(--bb-color-notice-control-border); border-top-color: var(--bb-color-notice-text); border-radius: 50%;
+  transform-origin: center; animation: bb-ws-spinner 1s linear infinite;
+}
+@keyframes bb-ws-spinner { to { transform: rotate(360deg); } }
+.bb-ws-error-card.is-dismissing { animation: bb-ws-notification-out 450ms ease both; pointer-events: none; }
+@keyframes bb-ws-notification-out { to { opacity: 0; transform: translateX(28px); } }
+@media (max-width:760px) { .bb-ws-drawer { width: 100vw; border-left: 0; } }
+@media (prefers-reduced-motion:reduce) {
+  .bb-ws-drawer[open], .bb-ws-drawer.is-closing, .bb-ws-drawer.is-closing::backdrop,
+  .bb-ws-filter-popover, .bb-ws-loading-spinner::before, .bb-ws-error-card.is-dismissing { animation: none; }
+}

package/ui/workspace-kit.js

@@ -256,23 +256,150 @@ export function workspaceHelp(doc, { text, label } = {}) {
   wrap.append(control, bubble); return wrap;
 }
 
-/** Native dialog keeps focus trapped, Escape close and focus restoration. */
-export function workspaceDialog(doc, { title, content, opener } = {}) {
+const drawerClosings = new WeakMap();
+const notificationClosings = new WeakMap();
+const reducedMotion = node => node.ownerDocument?.defaultView?.matchMedia?.('(prefers-reduced-motion: reduce)').matches === true;
+
+/** Apply the same native-dialog presentation to host-owned and kit drawers. */
+export function workspaceApplyDrawer(dialog) {
+  dialog.classList.add('bb-ws-drawer');
+  return dialog;
+}
+
+/** Keep the modal/focus trap alive until the exit motion finishes. Returns cancellation cleanup. */
+export function workspaceCloseDrawer(dialog, finish) {
+  if (drawerClosings.has(dialog)) return drawerClosings.get(dialog);
+  if (!dialog.open || reducedMotion(dialog)) { finish(); return () => {}; }
+  let timer;
+  let active = true;
+  const cancel = () => {
+    if (!active) return;
+    active = false;
+    clearTimeout(timer);
+    dialog.removeEventListener('animationend', ended);
+    dialog.removeEventListener('close', cancel);
+    dialog.classList.remove('is-closing');
+    drawerClosings.delete(dialog);
+  };
+  const complete = () => { if (!active) return; cancel(); finish(); };
+  const ended = event => {
+    if (event.target === dialog && event.animationName === 'bb-ws-drawer-out') complete();
+  };
+  drawerClosings.set(dialog, cancel);
+  dialog.addEventListener('animationend', ended);
+  dialog.addEventListener('close', cancel);
+  dialog.classList.add('is-closing');
+  timer = setTimeout(complete, 360); // Animation cancellation / background-tab fallback.
+  return cancel;
+}
+
+/** Native modal, optionally a right drawer. close() animates; dispose() tears down immediately. */
+export function workspaceDialog(doc, { title, content, opener, presentation = 'center', onClose } = {}) {
   const dialog = el(doc, 'dialog', { className: 'bb-ws-dialog' });
+  if (presentation === 'drawer') workspaceApplyDrawer(dialog);
   const headingId = `bb-ws-dialog-${++workspaceSequence}`;
   dialog.setAttribute('aria-labelledby', headingId);
   const head = el(doc, 'header', { className: 'bb-ws-dialog-head' });
+  const nativeClose = dialog.close.bind(dialog);
+  let disposed = false;
+  const cleanup = () => {
+    if (disposed) return;
+    disposed = true;
+    drawerClosings.get(dialog)?.();
+    dialog.remove();
+    try { onClose?.(); } finally {
+      const target = typeof opener === 'function' ? opener() : opener;
+      if (target?.isConnected) target.focus();
+    }
+  };
+  dialog.close = value => {
+    if (disposed) return;
+    const finish = () => { nativeClose(value); cleanup(); };
+    if (presentation === 'drawer') workspaceCloseDrawer(dialog, finish);
+    else finish();
+  };
+  dialog.dispose = () => {
+    if (disposed) return;
+    drawerClosings.get(dialog)?.();
+    nativeClose(); cleanup();
+  };
   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('cancel', event => { event.preventDefault(); dialog.close(); });
   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;
+  dialog.addEventListener('close', cleanup, { once: true });
+  try { dialog.showModal(); close.focus(); } catch (error) { cleanup(); throw error; }
+  return dialog;
+}
+
+/** Anchored advanced search. Hosts destroy it before replacing its controls. */
+export function workspaceFilterPopover(doc, { content, open = false, onToggle, trigger, panel: suppliedPanel, initialFocus } = {}) {
+  const root = el(doc, 'span', { className: 'bb-ws-filter-anchor' });
+  const panel = suppliedPanel || el(doc, 'div', { className: 'bb-ws-filter-popover', attrs: { id: `bb-ws-filter-${++workspaceSequence}`, role: 'region', 'aria-label': '詳細検索' } });
+  if (!panel.id && !panel.getAttribute?.('id')) panel.setAttribute('id', `bb-ws-filter-${++workspaceSequence}`);
+  panel.classList?.add('bb-ws-filter-popover');
+  const control = trigger || workspaceButton(doc, { text: '詳細検索', variant: 'quiet' });
+  control.setAttribute('aria-controls', panel.id || panel.getAttribute?.('id') || panel.attributes?.id);
+  appendContent(panel, doc, content); root.append(control, panel);
+  let destroyed = false;
+  const removeListeners = () => { doc.removeEventListener?.('pointerdown', outside); doc.removeEventListener?.('keydown', escape); };
+  const setOpen = (value, focus = false) => {
+    if (destroyed) return;
+    removeListeners(); panel.hidden = !value; control.setAttribute('aria-expanded', String(value));
+    onToggle?.(value);
+    if (value) {
+      doc.addEventListener?.('pointerdown', outside); doc.addEventListener?.('keydown', escape);
+      if (focus) (typeof initialFocus === 'function' ? initialFocus() : initialFocus || panel.querySelector?.('input:not(:disabled),select:not(:disabled),button:not(:disabled)'))?.focus();
+    }
+  };
+  const outside = event => { if (!root.contains?.(event.target)) setOpen(false); };
+  const escape = event => {
+    if (event.key !== 'Escape') return;
+    event.preventDefault(); event.stopPropagation(); setOpen(false); control.focus();
+  };
+  const toggle = () => setOpen(panel.hidden, true);
+  control.addEventListener('click', toggle); setOpen(open);
+  return { root, control, panel, destroy() {
+    destroyed = true; removeListeners(); control.removeEventListener?.('click', toggle);
+    panel.hidden = true; control.setAttribute('aria-expanded', 'false');
+  } };
+}
+
+/** Compact notification with a fixed-center, purely visual spinner. */
+export function workspaceLoadingCard(doc, { title = 'ロード中' } = {}) {
+  const card = el(doc, 'section', { className: 'bb-ws-error-card bb-ws-loading-card', attrs: { role: 'status', 'aria-live': 'polite' } });
+  card.append(el(doc, 'span', { className: 'bb-ws-loading-spinner', attrs: { 'aria-hidden': 'true' } }), el(doc, 'span', { text: title }));
+  return card;
+}
+
+/** Fade right then remove. Calling the returned cancel function restores a reusable card. */
+export function workspaceDismissNotification(card, onDismiss) {
+  const remove = () => {
+    if (typeof card.remove === 'function') card.remove();
+    else if (card.parentNode?.removeChild) card.parentNode.removeChild(card);
+    else if (card.parentNode?.replaceChildren) card.parentNode.replaceChildren(...Array.from(card.parentNode.children).filter(node => node !== card));
+  };
+  if (notificationClosings.has(card)) return notificationClosings.get(card);
+  if (!card.classList || reducedMotion(card)) { remove(); onDismiss?.(); return () => {}; }
+  let timer;
+  let active = true;
+  const cancel = () => {
+    if (!active) return;
+    active = false; clearTimeout(timer);
+    card.removeEventListener('animationend', ended);
+    card.classList.remove('is-dismissing'); notificationClosings.delete(card);
+  };
+  const complete = () => { if (!active) return; cancel(); remove(); onDismiss?.(); };
+  const ended = event => { if (event.target === card && event.animationName === 'bb-ws-notification-out') complete(); };
+  notificationClosings.set(card, cancel); card.addEventListener('animationend', ended);
+  card.classList.add('is-dismissing'); timer = setTimeout(complete, 500);
+  return cancel;
 }
 
 /** Persistent, initially closed notification. The caller owns its lifecycle. */