@unson/brainbase-mcp 0.41.3 → 0.41.6

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

@@ -4,13 +4,190 @@
   min-width: 0;
 }
 
+.bb-jh .bb-ws-breadcrumb {
+  margin-bottom: 4px;
+  font-size: 12px;
+}
+
+.bb-jh .bb-ws-page-head {
+  align-items: flex-end;
+  gap: 8px 16px;
+}
+
+.bb-jh .bb-ws-page-head h1 {
+  font-size: 20px;
+  font-weight: 800;
+  line-height: 1.25;
+  letter-spacing: 0;
+}
+
+.bb-jh .bb-ws-lead {
+  margin: 0;
+  font-size: 12.5px;
+  line-height: 1.4;
+}
+
+.bb-jh-banner {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 10px 0 8px;
+  padding: 6px 10px;
+  border: 1px solid #f0d98c;
+  border-radius: 6px;
+  background: #fff8e6;
+  font-size: 12.5px;
+  line-height: 1.4;
+}
+
+.bb-jh-banner.is-info {
+  border-color: #cddcf2;
+  background: #f2f6fc;
+}
+
+.bb-jh-banner.is-danger {
+  border-color: #f0b4b4;
+  background: #fdecec;
+}
+
+.bb-jh-banner > strong,
+.bb-jh-banner-note,
+.bb-jh-source-detail summary {
+  white-space: nowrap;
+}
+
+.bb-jh-banner-sources {
+  display: flex;
+  flex: 1 1 auto;
+  flex-wrap: nowrap;
+  gap: 12px;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.bb-jh-banner-sources > span {
+  white-space: nowrap;
+}
+
+.bb-jh-banner-note {
+  color: var(--bb-color-muted);
+}
+
+.bb-jh-source-detail {
+  margin-left: auto;
+  flex: none;
+}
+
+.bb-jh-source-detail summary {
+  color: #1a56b8;
+  cursor: pointer;
+}
+
+.bb-jh-source-detail-body {
+  position: absolute;
+  z-index: 2;
+  display: grid;
+  gap: 4px;
+  max-width: 360px;
+  margin-top: 6px;
+  padding: 8px 10px;
+  border: 1px solid var(--bb-color-border);
+  border-radius: 6px;
+  background: var(--bb-color-panel, #fff);
+  color: var(--bb-color-muted);
+  font-size: 12px;
+}
+
+.bb-jh-source-detail-body p {
+  margin: 0;
+}
+
+.bb-jh-banner > .bb-ws-button {
+  align-self: center;
+  flex: none;
+}
+
 .bb-jh-controls {
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   align-items: center;
-  justify-content: space-between;
-  gap: 14px 20px;
-  margin: 28px 0 20px;
+  gap: 8px;
+  margin: 0 0 6px;
+}
+
+.bb-jh-toolbar-status {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+}
+
+.bb-jh-checked {
+  color: var(--bb-color-muted);
+  font-size: 12.5px;
+  white-space: nowrap;
+}
+
+.bb-jh-controls .bb-ws-button:disabled {
+  color: #9aa0a6;
+  opacity: 0.55;
+}
+
+.bb-jh-summary {
+  margin: 4px 0 6px;
+  color: #3b4148;
+  font-size: 12.5px;
+}
+
+.bb-jh-summary strong {
+  color: #111;
+  font-size: 14px;
+}
+
+.bb-jh-summary-note {
+  color: #6b7280;
+}
+
+.bb-jh-skeleton {
+  display: block;
+  height: 10px;
+  border-radius: 4px;
+  background: linear-gradient(90deg, #eef0f2, #f6f7f8, #eef0f2);
+  background-size: 200% 100%;
+  animation: bb-jh-shimmer 1.6s linear infinite;
+}
+
+.bb-jh-skeleton.is-inline {
+  display: inline-block;
+  width: 36px;
+  vertical-align: middle;
+}
+
+.bb-jh-skeleton.is-date { width: 60px; }
+.bb-jh-skeleton.is-decision { width: 85%; }
+.bb-jh-skeleton.is-reference { width: 75%; }
+.bb-jh-skeleton.is-status { width: 60px; }
+
+.bb-jh-skeleton-row {
+  pointer-events: none;
+}
+
+@keyframes bb-jh-shimmer {
+  from { background-position: 100% 0; }
+  to { background-position: -100% 0; }
+}
+
+.bb-jh.is-reduced-motion .bb-jh-skeleton {
+  animation: none;
+  background: #eef0f2;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bb-jh-skeleton {
+    animation: none;
+    background: #eef0f2;
+  }
 }
 
 .bb-jh-reference-note {
@@ -22,8 +199,14 @@
 
 .bb-jh-periods {
   display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
+  flex: none;
+  flex-wrap: nowrap;
+  gap: 0;
+}
+
+.bb-jh-periods .bb-ws-button {
+  min-height: 30px;
+  padding: 3px 10px;
 }
 
 .bb-jh-normal-filters {
@@ -34,11 +217,14 @@
 }
 
 .bb-jh-filter {
-  display: grid;
-  min-width: 130px;
+  display: flex;
+  flex: none;
+  align-items: center;
   gap: 4px;
+  min-width: 0;
   color: var(--bb-color-muted);
-  font-size: 11px;
+  font-size: 12.5px;
+  white-space: nowrap;
 }
 
 .bb-jh-filter span {
@@ -46,10 +232,10 @@
 }
 
 .bb-jh-filter select {
-  min-height: 38px;
+  min-height: 30px;
   border: 1px solid var(--bb-color-border-strong);
   border-radius: var(--bb-radius-sm);
-  padding: 7px 28px 7px 10px;
+  padding: 3px 8px;
   background: var(--bb-color-panel);
   color: var(--bb-color-ink);
   font: inherit;
@@ -57,12 +243,13 @@
 
 .bb-jh-search {
   display: flex;
-  flex: 1 1 230px;
+  flex: 1 1 110px;
   align-items: center;
   gap: 9px;
-  max-width: 330px;
+  min-width: 110px;
+  max-width: none;
   color: var(--bb-color-muted);
-  font-size: 12px;
+  font-size: 12.5px;
 }
 
 .bb-jh-search span {
@@ -77,10 +264,10 @@
 
 .bb-jh-search input {
   width: 100%;
-  min-height: 38px;
+  min-height: 30px;
   border: 1px solid var(--bb-color-border-strong);
   border-radius: var(--bb-radius-sm);
-  padding: 8px 12px;
+  padding: 3px 10px;
   background: var(--bb-color-panel);
   color: var(--bb-color-ink);
   font: inherit;
@@ -105,14 +292,14 @@
 }
 
 .bb-jh-ledger .bb-ws-ledger-row {
-  grid-template-columns: 124px minmax(190px, 1.05fr) minmax(260px, 1.8fr);
-  align-items: stretch;
-  min-height: 76px;
+  grid-template-columns: 92px minmax(0, 1fr) 250px 105px;
+  align-items: center;
+  min-height: 52px;
 }
 
 .bb-jh-ledger .bb-ws-ledger-head {
   align-items: center;
-  min-height: 38px;
+  min-height: 32px;
 }
 
 .bb-jh-ledger .bb-ws-ledger-row > span {
@@ -386,7 +573,47 @@
     text-transform: uppercase;
   }
 
+  .bb-jh-controls,
+  .bb-jh-banner-sources {
+    flex-wrap: wrap;
+  }
+
   .bb-jh-ledger .bb-ws-ledger-row > span:nth-child(1)::before { content: '日時'; }
-  .bb-jh-ledger .bb-ws-ledger-row > span:nth-child(2)::before { content: '使った参照'; }
-  .bb-jh-ledger .bb-ws-ledger-row > span:nth-child(3)::before { content: '行った判断'; }
-}
+  .bb-jh-ledger .bb-ws-ledger-row > span:nth-child(2)::before { content: '行った判断'; }
+  .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; }