@unson/brainbase-mcp 0.41.7 → 0.41.9

package/ui/outcome-knowledge.js

@@ -380,6 +380,7 @@ export function normalizeKnowledgeItem(item) {
   return {
     id: fieldValue(item, 'id', 'knowledge_id', 'canonical_id') ?? null,
     type: fieldValue(item, 'type', 'kind', 'entity_type') ?? null,
+    project_code: fieldValue(item, 'project_code', 'projectCode') ?? null,
     title: fieldValue(item, 'title', 'name', 'subject') ?? null,
     summary: fieldValue(item, 'summary', 'statement', 'body') ?? null,
     content: fieldValue(item, 'content', 'canonical_content') ?? null,
@@ -411,12 +412,31 @@ export function normalizeKnowledgeCollection(payload) {
     records,
     absence_confirmed: absenceConfirmed,
     searched_scope: Array.isArray(body.searched_scope) ? body.searched_scope : null,
+    truncated: body.truncated === true,
     query: fieldValue(body, 'query', 'q') ?? null,
     warnings: Array.isArray(body.warnings) ? body.warnings : null,
     raw: payload,
   };
 }
 
+const HEADING_MAX_LENGTH = 80;
+
+/**
+ * The heading shown for a knowledge record. A record without a title uses
+ * the first line of its own summary or body instead of a generic label, so
+ * the list still tells records apart. Nothing is invented: when none of the
+ * three exists the heading says the title is unconfirmed.
+ */
+export function knowledgeItemHeading(item) {
+  const title = optionalText(item?.title).trim();
+  if (title) return title;
+  for (const value of [item?.summary, item?.content]) {
+    const firstLine = optionalText(value).split(/\r?\n/u).map((line) => line.trim()).find(Boolean);
+    if (firstLine) return firstLine.length > HEADING_MAX_LENGTH ? `${firstLine.slice(0, HEADING_MAX_LENGTH)}…` : firstLine;
+  }
+  return 'タイトル未確認';
+}
+
 function isRecord(value) {
   return Boolean(value && typeof value === 'object' && !Array.isArray(value));
 }
@@ -755,7 +775,8 @@ export function renderDiscoveryFilters(root, filters = {}, callbacks = {}) {
   queryLabel.append(query);
   const scopeFieldLabel = makeElement('label', { text: '範囲' });
   const scope = makeElement('select', { className: 'knowledge-control', attrs: { name: 'scope' } });
-  for (const value of ['project', 'organization', 'all']) append(scope, makeElement('option', { text: scopeLabel(value), value, attrs: { value, ...(filters.scope === value ? { selected: 'selected' } : {}) } }));
+  const scopeOptionLabel = (value) => optionalText(callbacks.scopeLabels?.[value]).trim() || scopeLabel(value);
+  for (const value of ['project', 'organization', 'all']) append(scope, makeElement('option', { text: scopeOptionLabel(value), value, attrs: { value, ...(filters.scope === value ? { selected: 'selected' } : {}) } }));
   scope.value = filters.scope || 'all';
   scopeFieldLabel.append(scope);
   const statusLabel = makeElement('label', { text: '状態' });
@@ -781,6 +802,18 @@ export function renderDiscoveryFilters(root, filters = {}, callbacks = {}) {
   return form;
 }
 
+/**
+ * Where a record belongs, for lists that span several projects. Organization
+ * wide records say so instead of naming the project row that stores them.
+ */
+export function knowledgeItemProjectLabel(item, projectLabel) {
+  if (optionalText(item?.scope).trim().toLowerCase() === 'organization') return '組織共通';
+  const code = optionalText(item?.project_code).trim();
+  if (!code) return 'プロジェクト未確認';
+  const label = typeof projectLabel === 'function' ? optionalText(projectLabel(code)).trim() : '';
+  return label || code;
+}
+
 export function renderKnowledgeList(root, model = {}, callbacks = {}) {
   clear(root);
   const collection = model.records === undefined && (model.items || model.results || model.state) ? normalizeKnowledgeCollection(model) : model;
@@ -792,15 +825,24 @@ export function renderKnowledgeList(root, model = {}, callbacks = {}) {
     && ['ready', 'results', EMPTY].includes(state);
   const section = makeElement('section', { className: 'knowledge-list-panel', attrs: { 'aria-labelledby': 'knowledge-list-title' } });
   const header = makeElement('div', { className: 'knowledge-panel-head' });
-  append(header, makeElement('div', {},), makeElement('span', { className: 'knowledge-count', text: countKnown ? `${collection.records.length}件` : UNKNOWN }));
-  header.firstChild.append(makeElement('h3', { text: '知識・判断', attrs: { id: 'knowledge-list-title' } }), makeElement('p', { text: searchedScope ? `検索範囲: ${searchedScope}` : '検索範囲: 未確認' }));
+  const countText = countKnown
+    ? `${collection.records.length}件${collection.truncated ? '（新しい順の上限まで）' : ''}`
+    : UNKNOWN;
+  const scopeText = typeof callbacks.scopeText === 'function'
+    ? callbacks.scopeText(collection)
+    : searchedScope ? `検索範囲: ${searchedScope}` : '検索範囲: 未確認';
+  append(header, makeElement('div', {},), makeElement('span', { className: 'knowledge-count', text: countText }));
+  header.firstChild.append(makeElement('h3', { text: '知識・判断', attrs: { id: 'knowledge-list-title' } }), makeElement('p', { text: scopeText }));
+  if (collection.truncated && countKnown) {
+    header.firstChild.append(makeElement('p', { className: 'knowledge-list-truncated', text: '表示は新しい順の上限までです。キーワードやプロジェクトで絞ると、ほかの記録も見られます。' }));
+  }
   section.append(header);
   if (state === 'loading') {
     const skeleton = makeElement('div', { className: 'knowledge-list-rows', attrs: { 'aria-label': '知識を読み込み中' } });
     for (let index = 0; index < 4; index += 1) skeleton.append(skeletonRow());
     section.append(skeleton);
   } else if (state === EMPTY) {
-    section.append(makeElement('div', { className: 'knowledge-empty', text: 'この条件に一致する知識はありません。自然文から登録案を作成できます。' }));
+    section.append(makeElement('div', { className: 'knowledge-empty', text: callbacks.emptyText ?? 'この条件に一致する知識はありません。自然文から登録案を作成できます。' }));
   } else if (state === 'permission_denied') {
     // Keep the upstream reason and recovery action visible.  Replacing the
     // payload with a generic detail makes a denied scope look like an
@@ -818,13 +860,14 @@ export function renderKnowledgeList(root, model = {}, callbacks = {}) {
     const hasSelectedId = callbacks.selectedId !== undefined && callbacks.selectedId !== null;
     if (!collection.records.length) rows.append(makeElement('div', { className: 'knowledge-empty', text: '検索結果を確認できません。空の一覧とは扱いません。' }));
     for (const item of collection.records) {
-      const title = item.title ? text(item.title) : 'タイトル未確認';
+      const title = knowledgeItemHeading(item);
       const row = makeElement('button', { className: 'knowledge-list-row', attrs: { type: 'button', 'aria-pressed': String(item.id === callbacks.selectedId), 'aria-controls': 'knowledge-selected-detail', title } });
       const main = makeElement('span', { className: 'knowledge-row-main' });
       const meta = makeElement('span', { className: 'knowledge-row-meta' });
+      if (callbacks.showProject) meta.append(makeElement('span', { className: 'knowledge-row-project', text: knowledgeItemProjectLabel(item, callbacks.projectLabel) }));
       append(meta,
         makeElement('span', { className: 'knowledge-row-type', text: item.type ? typeLabel(item.type) : UNKNOWN }),
-        makeElement('span', { className: 'knowledge-row-scope', text: item.scope ? scopeLabel(item.scope) : UNKNOWN }),
+        callbacks.showProject ? null : makeElement('span', { className: 'knowledge-row-scope', text: item.scope ? scopeLabel(item.scope) : UNKNOWN }),
         makeElement('span', { className: 'knowledge-row-state', text: item.lifecycle.status !== UNKNOWN ? lifecycleStatusLabel(item.lifecycle.status) : UNKNOWN }),
       );
       append(main,
@@ -895,14 +938,14 @@ export function renderKnowledgeDetail(root, item, callbacks = {}) {
   }
   append(section,
     makeElement('span', { className: 'knowledge-eyebrow', text: item.type ? typeLabel(item.type) : UNKNOWN }),
-    makeElement('h3', { text: item.title ? text(item.title) : 'タイトル未確認', attrs: { id: 'knowledge-detail-title' } }),
+    makeElement('h3', { text: knowledgeItemHeading(item), attrs: { id: 'knowledge-detail-title' } }),
   );
   const summary = makeElement('p', { className: 'knowledge-long-text', text: item.summary ? text(item.summary) : '要旨未確認' });
   section.append(summary);
   renderDefinitionList(section, [
     ['正本ID', item.id ? text(item.id) : UNKNOWN],
     ['版', item.version !== null && item.version !== undefined && String(item.version).trim() !== '' ? String(item.version) : UNKNOWN],
-    ['範囲', item.scope ? scopeLabel(item.scope) : UNKNOWN],
+    ['範囲', item.scope ? (optionalText(callbacks.scopeLabels?.[optionalText(item.scope).trim().toLowerCase()]).trim() || scopeLabel(item.scope)) : UNKNOWN],
     ['責任者', ownerValue(item.owner)],
     ['有効状態', lifecycleStatusLabel(item.lifecycle.status)],
     ['適用', item.applicability.state ? applicabilityStateLabel(item.applicability.state) : UNKNOWN],
@@ -1383,6 +1426,212 @@ function defaultCandidateBody(values, context = {}) {
   };
 }
 
+function projectOptions(projects) {
+  const list = typeof projects === 'function' ? projects() : projects;
+  if (!Array.isArray(list)) return [];
+  const options = [];
+  for (const project of list) {
+    const code = optionalText(fieldValue(project, 'code', 'project_code', 'projectCode') ?? (typeof project === 'string' ? project : '')).trim();
+    if (!code || options.some((option) => option.code === code)) continue;
+    const name = optionalText(fieldValue(project, 'name', 'display_name', 'displayName', 'label')).trim();
+    options.push({ code, name: name || code });
+  }
+  return options;
+}
+
+/**
+ * Renders the optional project filter shared by the organization-wide list
+ * and the single project workspace. The empty value means every project the
+ * viewer may read; it never stands for an implicitly chosen project.
+ */
+export function renderKnowledgeProjectFilter(root, model = {}, callbacks = {}) {
+  clear(root);
+  const label = makeElement('label', { className: 'knowledge-project-filter', text: 'プロジェクト' });
+  const select = makeElement('select', { className: 'knowledge-control', attrs: { name: 'knowledge_project', 'aria-label': 'プロジェクトで絞り込む' } });
+  const selected = optionalText(model.selected).trim();
+  const options = projectOptions(model.projects);
+  append(select, makeElement('option', { text: 'すべてのプロジェクト', value: '', attrs: { value: '', ...(selected ? {} : { selected: 'selected' }) } }));
+  for (const option of options) {
+    append(select, makeElement('option', { text: option.name === option.code ? option.code : `${option.name}（${option.code}）`, value: option.code, attrs: { value: option.code, ...(option.code === selected ? { selected: 'selected' } : {}) } }));
+  }
+  if (selected && !options.some((option) => option.code === selected)) {
+    append(select, makeElement('option', { text: selected, value: selected, attrs: { value: selected, selected: 'selected' } }));
+  }
+  select.value = selected;
+  select.addEventListener('change', () => callbacks.onChange?.(optionalText(select.value).trim() || null));
+  label.append(select);
+  root.append(label);
+  return label;
+}
+
+/**
+ * Creates the organization-wide knowledge list. It reads every project the
+ * viewer may read plus organization-wide records from one host path, shows
+ * the project each record belongs to, and only reads. Registration and
+ * version changes stay in the single project workspace: choosing a project
+ * calls `onSelectProject`, and the host mounts `createKnowledgeOutcomeController`.
+ *
+ * @param {object} options
+ * @param {string} [options.itemsPath] Host path for the organization-wide list.
+ * @param {Array|Function} [options.projects] Projects offered in the filter.
+ * @param {(code: string|null, context?: object) => void} [options.onSelectProject]
+ */
+export function createKnowledgeOverviewController(options = {}) {
+  const { root, api, onSelectProject } = options;
+  if (!root || typeof root.replaceChildren !== 'function') throw new Error('knowledge_root_unavailable');
+  const labels = resolveKnowledgeUiLabels(options.labels);
+  const itemsBase = optionalText(options.itemsPath).trim() || `/api/knowledge/${KNOWLEDGE_ROUTES.items}`;
+  const state = {
+    filters: { q: '', scope: 'all', status: 'active' },
+    list: { state: 'loading', records: null, absence_confirmed: false, searched_scope: null },
+    selected: null,
+    detail: { state: 'idle' },
+  };
+  let selectionGeneration = 0;
+  const projectName = (code) => projectOptions(options.projects).find((option) => option.code === code)?.name ?? null;
+
+  function itemsPath() {
+    const query = new URLSearchParams();
+    if (state.filters.q) query.set('q', state.filters.q);
+    if (state.filters.scope) query.set('scope', state.filters.scope);
+    if (state.filters.status) query.set('status', state.filters.status);
+    const encoded = query.toString();
+    return `${itemsBase}${encoded ? `?${encoded}` : ''}`;
+  }
+
+  function emptyText() {
+    const filtered = Boolean(state.filters.q) || state.filters.scope !== 'all' || state.filters.status !== 'active';
+    return filtered
+      ? 'この条件に一致する知識・判断はありません。'
+      : '見られる範囲に、有効な知識・判断の記録はありません。';
+  }
+
+  function scopeText(collection) {
+    const count = Array.isArray(collection.searched_scope) ? collection.searched_scope.length : null;
+    return count === null
+      ? '読んだ範囲: 未確認'
+      : `読んだ範囲: 見られる${count}件のプロジェクトと組織共通`;
+  }
+
+  function openProject(code, context = {}) {
+    if (!code) return;
+    onSelectProject?.(code, context);
+  }
+
+  function render() {
+    clear(root);
+    const shell = makeElement('div', { className: 'knowledge-outcome knowledge-overview' });
+    const header = makeElement('header', { className: 'knowledge-outcome-head' });
+    const headerMain = makeElement('div', { className: 'knowledge-header-main' });
+    append(headerMain,
+      makeElement('span', { className: 'knowledge-eyebrow', text: 'Brainbase Outcome' }),
+      makeElement('h2', { text: '知識・判断' }),
+      makeElement('p', { text: '見られるすべてのプロジェクトと組織共通の知識・判断を一覧にします。登録や改訂は、プロジェクトを選ぶとできます。' }),
+    );
+    const headerMeta = makeElement('div', { className: 'knowledge-header-meta' });
+    renderKnowledgeProjectFilter(headerMeta, { projects: options.projects, selected: null }, { onChange: (code) => openProject(code, { reason: 'filter' }) });
+    append(header, headerMain, headerMeta);
+    shell.append(header);
+    const body = makeElement('div', { className: 'knowledge-outcome-body knowledge-workspace', attrs: { 'data-view': 'discovery' } });
+    const primary = makeElement('section', { className: 'knowledge-outcome-primary knowledge-master', attrs: { 'aria-label': '知識の一覧' } });
+    const discovery = makeElement('section', { className: 'knowledge-discovery-view', attrs: { 'aria-labelledby': 'knowledge-discovery-title' } });
+    const discoveryHeader = makeElement('div', { className: 'knowledge-view-heading' });
+    append(discoveryHeader, makeElement('div', {},), makeElement('span', { className: 'knowledge-view-kicker', text: labels.discovery }));
+    discoveryHeader.firstChild.append(makeElement('h3', { id: 'knowledge-discovery-title', text: '知識・判断を探す' }), makeElement('p', { text: '選んだ記録の本文・出典・所属プロジェクトを確認できます。' }));
+    discovery.append(discoveryHeader);
+    const filters = makeElement('div', { className: 'knowledge-filter-region knowledge-discovery-toolbar' });
+    renderDiscoveryFilters(filters, state.filters, {
+      scopeLabels: { project: 'プロジェクトの記録', organization: '組織共通', all: 'すべて' },
+      onChange: (next) => { state.filters = next; void loadItems(); },
+    });
+    discovery.append(filters);
+    const list = makeElement('div', { className: 'knowledge-discovery-list' });
+    renderKnowledgeList(list, state.list, {
+      labels,
+      showProject: true,
+      projectLabel: projectName,
+      scopeText,
+      emptyText: emptyText(),
+      selectedId: state.selected?.id,
+      onSelect: (item) => { void selectItem(item); },
+      onRetry: () => loadItems(),
+    });
+    discovery.append(list);
+    primary.append(discovery);
+    body.append(primary);
+    const detail = makeElement('aside', { className: 'knowledge-outcome-detail knowledge-inspector', attrs: { 'aria-label': labels.inspector, id: 'knowledge-selected-detail', tabindex: '-1' } });
+    const inspectorHeading = makeElement('div', { className: 'knowledge-inspector-heading' });
+    append(inspectorHeading, makeElement('span', { className: 'knowledge-view-kicker', text: labels.inspector }), makeElement('span', { className: 'knowledge-inspector-state', text: state.selected ? labels.selected : labels.unselected }));
+    detail.append(inspectorHeading);
+    const detailContent = makeElement('div', { className: 'knowledge-inspector-detail' });
+    const hasSelectableKnowledge = normaliseStatus(state.list.state) === 'ready' && Array.isArray(state.list.records) && state.list.records.length > 0;
+    renderKnowledgeDetail(detailContent, state.selected, {
+      labels,
+      detailState: state.detail,
+      scopeLabels: { project: 'プロジェクトの記録', organization: '組織共通' },
+      showSelectionGuide: Boolean(state.selected) || hasSelectableKnowledge,
+      onRetry: state.selected ? () => void selectItem(state.selected) : null,
+    });
+    detail.append(detailContent);
+    if (state.selected) {
+      const owner = makeElement('div', { className: 'knowledge-overview-owner' });
+      const code = optionalText(state.selected.project_code).trim();
+      append(owner, makeElement('p', { className: 'knowledge-overview-project', text: `所属: ${knowledgeItemProjectLabel(state.selected, projectName)}` }));
+      if (code) {
+        const open = makeElement('button', { className: 'knowledge-button secondary', text: 'このプロジェクトで開く', attrs: { type: 'button' } });
+        open.addEventListener('click', () => openProject(code, { reason: 'record', item_id: state.selected.id }));
+        owner.append(open);
+      }
+      detail.append(owner);
+    }
+    body.append(detail); shell.append(body); root.append(shell);
+    options.onStateChange?.(state);
+    return shell;
+  }
+
+  async function loadItems() {
+    selectionGeneration += 1;
+    state.selected = null;
+    state.detail = { state: 'idle' };
+    state.list = { ...state.list, state: 'loading' }; render();
+    try { state.list = normalizeKnowledgeCollection(await callKnowledgeApi(api, itemsPath())); }
+    catch (error) { state.list = { state: error.code === 'permission_denied' || error.status === 403 ? 'permission_denied' : 'error_retryable', records: null, message: apiErrorText(error), error: error.code }; }
+    render(); return state.list;
+  }
+
+  async function selectItem(item) {
+    const requestGeneration = ++selectionGeneration;
+    state.selected = item ?? null;
+    const code = optionalText(item?.project_code).trim();
+    if (!item?.id || !code) {
+      // A record whose project is unknown cannot be read through a project
+      // route. Show what the list returned and say the canonical read is
+      // unavailable instead of presenting it as the confirmed detail.
+      state.detail = item ? { state: 'unknown', message: '所属プロジェクトを確認できないため、正本の詳細を読めません。' } : { state: 'idle' };
+      render(); return null;
+    }
+    state.detail = { state: 'loading' }; render();
+    try {
+      const path = typeof options.detailPath === 'function'
+        ? options.detailPath(code, item.id)
+        : knowledgePath(code, `${KNOWLEDGE_ROUTES.items}/${encodeURIComponent(item.id)}`);
+      const payload = await callKnowledgeApi(api, path);
+      if (requestGeneration !== selectionGeneration) return null;
+      const read = normalizeKnowledgeItem(payload?.item ?? payload?.record ?? payload?.data ?? payload);
+      const detailed = read ? { ...read, project_code: read.project_code ?? code } : item;
+      state.selected = detailed; state.detail = { state: 'ready', item: detailed }; render(); return detailed;
+    } catch (error) {
+      if (requestGeneration !== selectionGeneration) return null;
+      state.detail = { state: error.code === 'permission_denied' || error.status === 403 ? 'permission_denied' : 'error_retryable', message: apiErrorText(error), error: error.code }; render(); return null;
+    }
+  }
+
+  const controller = { state, render, loadItems, selectItem, paths: { items: itemsPath } };
+  render();
+  if (options.autoLoad !== false) void loadItems();
+  return controller;
+}
+
 /**
  * Creates the knowledge outcome workspace.
  *
@@ -1452,7 +1701,14 @@ export function createKnowledgeOutcomeController(options = {}) {
       makeElement('p', { text: '正本を探し、由来と状態を確認して、必要なときだけ更新します。' }),
     );
     const headerMeta = makeElement('div', { className: 'knowledge-header-meta' });
-    headerMeta.append(makeElement('span', { className: 'knowledge-project-context', text: `プロジェクト: ${code}` }));
+    if (options.projectFilter) {
+      // The host decides what choosing another project, or every project,
+      // means. Showing the filter keeps the chosen project explicit instead
+      // of a fixed label that cannot be changed from here.
+      renderKnowledgeProjectFilter(headerMeta, { projects: options.projectFilter.projects, selected: code }, { onChange: (next) => options.projectFilter.onChange?.(next) });
+    } else {
+      headerMeta.append(makeElement('span', { className: 'knowledge-project-context', text: `プロジェクト: ${code}` }));
+    }
     append(header, headerMain, headerMeta);
     const nav = makeElement('nav', { className: 'knowledge-outcome-nav', attrs: { 'aria-label': '知識の操作' } });
     for (const [value, label] of [['discovery', '探す'], ['capture', '登録案を作る'], ['preview', '公開前テスト'], ['destination', '保存先']]) {

package/ui/workspace-kit.css

@@ -573,3 +573,45 @@
   .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; }
 }
+
+/* Searchable dropdown (workspaceCombobox) */
+.bb-ws-combobox { position: relative; display: inline-grid; min-width: 0; }
+.bb-ws-combobox-trigger {
+  display: flex; align-items: center; justify-content: space-between; gap: var(--bb-space-2);
+  width: 100%; min-width: 0; min-height: 38px; box-sizing: border-box; padding: 0 10px 0 11px;
+  border: 1px solid var(--bb-color-border-strong); border-radius: var(--bb-radius-sm);
+  background: var(--bb-color-panel); color: var(--bb-color-ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
+}
+.bb-ws-combobox-trigger:hover { border-color: var(--bb-color-muted); }
+.bb-ws-combobox-trigger:focus-visible { outline: 2px solid var(--bb-color-focus); outline-offset: 1px; }
+.bb-ws-combobox-trigger[aria-expanded='true'] { border-color: var(--bb-color-accent); }
+.bb-ws-combobox-trigger[disabled] { color: var(--bb-color-quiet); cursor: not-allowed; }
+.bb-ws-combobox-trigger[data-empty='true'] .bb-ws-combobox-value { color: var(--bb-color-quiet); }
+.bb-ws-combobox-value { overflow: hidden; min-width: 0; text-overflow: ellipsis; white-space: nowrap; }
+.bb-ws-combobox-chevron::after { content: '⌄'; color: var(--bb-color-muted); }
+.bb-ws-combobox-popup {
+  position: absolute; z-index: 45; top: calc(100% + 6px); left: 0; display: grid; gap: var(--bb-space-2);
+  box-sizing: border-box; width: max(100%, 260px); max-width: calc(100vw - 32px); padding: 8px;
+  border: 1px solid var(--bb-color-border); border-radius: var(--bb-radius-md); background: var(--bb-color-panel); color: var(--bb-color-ink);
+  box-shadow: var(--bb-shadow-popover); animation: bb-ws-filter-enter 140ms ease-out; transform-origin: top left;
+}
+.bb-ws-combobox-popup[hidden], .bb-ws-combobox-search[hidden] { display: none !important; }
+.bb-ws-combobox-search {
+  box-sizing: border-box; width: 100%; min-height: 34px; padding: 0 10px;
+  border: 1px solid var(--bb-color-border-strong); border-radius: var(--bb-radius-sm); background: var(--bb-color-surface); color: var(--bb-color-ink); font: inherit; font-size: 13px;
+}
+.bb-ws-combobox-search:focus-visible { outline: 2px solid var(--bb-color-focus); outline-offset: 0; }
+.bb-ws-combobox-list { max-height: 300px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
+.bb-ws-combobox-list:focus-visible { outline: 2px solid var(--bb-color-focus); outline-offset: 0; }
+.bb-ws-combobox-option {
+  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: var(--bb-space-2);
+  padding: 7px 8px; border-radius: var(--bb-radius-sm); font-size: 13px; cursor: pointer;
+}
+.bb-ws-combobox-option::before { content: ''; color: var(--bb-color-accent-strong); font-weight: 700; }
+.bb-ws-combobox-option[aria-selected='true']::before { content: '✓'; }
+.bb-ws-combobox-option:hover, .bb-ws-combobox-option.is-active { background: var(--bb-color-accent-soft); }
+.bb-ws-combobox-option.is-active { box-shadow: inset 2px 0 0 var(--bb-color-accent); }
+.bb-ws-combobox-option-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.bb-ws-combobox-option-hint { color: var(--bb-color-muted); font-size: 12px; white-space: nowrap; }
+.bb-ws-combobox-status { margin: 0; padding: 2px 4px 0; color: var(--bb-color-muted); font-size: 12px; }
+@media (prefers-reduced-motion:reduce) { .bb-ws-combobox-popup { animation: none; } }

package/ui/workspace-kit.js

@@ -422,3 +422,168 @@ export function workspaceDisclosure(doc, { title, help, content, open = false, o
   if (onToggle) details.addEventListener('toggle', () => onToggle(details.open));
   return details;
 }
+
+function comboboxText(value) {
+  return String(value ?? '').normalize('NFKC').toLocaleLowerCase('ja');
+}
+
+/**
+ * Dropdown whose list can be searched. The trigger shows the chosen label;
+ * opening it moves focus to a search box (role=combobox) that narrows a
+ * listbox. Arrow keys move the active option, Enter chooses it, Escape closes
+ * and returns focus to the trigger, and typing on the trigger starts a search.
+ * Long lists render the first `limit` matches and say how many the search
+ * would still reveal. Options are `{ value, label, hint?, keywords? }`; the
+ * host owns the chosen value and receives it through `onChange`.
+ */
+export function workspaceCombobox(doc, {
+  label, options = [], value = '', placeholder = '選択してください', searchLabel, searchPlaceholder = '絞り込む',
+  emptyText = '一致する候補はありません', limit = 100, searchable = 'auto', className, onChange,
+} = {}) {
+  const sequence = ++workspaceSequence;
+  const listId = `bb-ws-combobox-${sequence}-list`;
+  const root = el(doc, 'span', { className: ['bb-ws-combobox', className].filter(Boolean).join(' ') });
+  const trigger = el(doc, 'button', { className: 'bb-ws-combobox-trigger', attrs: { type: 'button', 'aria-haspopup': 'listbox', 'aria-expanded': 'false', 'aria-controls': listId } });
+  const triggerText = el(doc, 'span', { className: 'bb-ws-combobox-value' });
+  trigger.append(triggerText, el(doc, 'span', { className: 'bb-ws-combobox-chevron', attrs: { 'aria-hidden': 'true' } }));
+  const popup = el(doc, 'div', { className: 'bb-ws-combobox-popup' });
+  popup.hidden = true;
+  const search = el(doc, 'input', { className: 'bb-ws-combobox-search', attrs: {
+    type: 'text', role: 'combobox', 'aria-autocomplete': 'list', 'aria-expanded': 'true', 'aria-controls': listId,
+    'aria-label': searchLabel || `${label || '候補'}を絞り込む`, placeholder: searchPlaceholder, autocomplete: 'off', spellcheck: 'false',
+  } });
+  const list = el(doc, 'ul', { className: 'bb-ws-combobox-list', attrs: { id: listId, role: 'listbox', 'aria-label': label || '候補', tabindex: '-1' } });
+  const status = el(doc, 'p', { className: 'bb-ws-combobox-status', attrs: { role: 'status', 'aria-live': 'polite' } });
+  popup.append(search, list, status);
+  root.append(trigger, popup);
+
+  const state = { options: [], value: String(value ?? ''), query: '', active: -1, shown: [], open: false, disabled: false };
+  const usesSearch = () => searchable === true || (searchable === 'auto' && state.options.length > 8);
+  const focusTarget = () => (usesSearch() ? search : list);
+  const chosen = () => state.options.find(option => option.value === state.value);
+
+  function setOptions(next) {
+    state.options = (Array.isArray(next) ? next : []).map(option => ({
+      value: String(option?.value ?? ''), label: String(option?.label ?? option?.value ?? ''),
+      hint: option?.hint ? String(option.hint) : '', keywords: option?.keywords ? String(option.keywords) : '',
+    }));
+  }
+
+  function renderTrigger() {
+    const option = chosen();
+    // A value the list does not offer stays visible instead of looking unset.
+    const text = option ? option.label : state.value || placeholder;
+    triggerText.textContent = text;
+    trigger.setAttribute('aria-label', `${label ? `${label}: ` : ''}${text}`);
+    trigger.setAttribute('data-empty', String(!option && !state.value));
+    if (state.disabled) trigger.setAttribute('disabled', ''); else trigger.removeAttribute('disabled');
+  }
+
+  function activeDescendant(node) {
+    for (const target of [search, list]) {
+      if (node) target.setAttribute('aria-activedescendant', node.getAttribute('id'));
+      else target.removeAttribute('aria-activedescendant');
+    }
+  }
+
+  function renderList() {
+    const terms = comboboxText(state.query).split(/\s+/u).filter(Boolean);
+    const matches = terms.length
+      ? state.options.filter(option => { const text = comboboxText(`${option.label}\n${option.hint}\n${option.keywords}`); return terms.every(term => text.includes(term)); })
+      : state.options;
+    const max = Math.max(1, Number(limit) || 100);
+    state.shown = matches.slice(0, max);
+    if (state.active >= state.shown.length) state.active = state.shown.length - 1;
+    list.replaceChildren();
+    state.shown.forEach((option, index) => {
+      const selected = option.value === state.value;
+      const item = el(doc, 'li', { className: `bb-ws-combobox-option${index === state.active ? ' is-active' : ''}`, attrs: { id: `bb-ws-combobox-${sequence}-option-${index}`, role: 'option', 'aria-selected': String(selected), 'data-value': option.value } });
+      item.append(el(doc, 'span', { className: 'bb-ws-combobox-option-label', text: option.label }));
+      if (option.hint) item.append(el(doc, 'span', { className: 'bb-ws-combobox-option-hint', text: option.hint }));
+      item.addEventListener('pointerdown', event => event.preventDefault?.());
+      item.addEventListener('click', () => choose(option));
+      list.append(item);
+    });
+    const active = list.children?.[state.active];
+    activeDescendant(active);
+    active?.scrollIntoView?.({ block: 'nearest' });
+    const rest = matches.length - state.shown.length;
+    status.textContent = !matches.length ? emptyText : rest > 0 ? `${matches.length}件中${state.shown.length}件を表示。ほか${rest}件は絞り込むと出ます` : `${matches.length}件`;
+  }
+
+  function move(index) {
+    if (!state.shown.length) return;
+    state.active = Math.min(state.shown.length - 1, Math.max(0, index));
+    renderList();
+  }
+
+  function removeListeners() { doc.removeEventListener?.('pointerdown', outside); }
+  function outside(event) { if (!root.contains?.(event.target)) close(false); }
+
+  function open(query = '') {
+    if (state.disabled) return;
+    if (!state.open) { state.open = true; doc.addEventListener?.('pointerdown', outside); }
+    state.query = query; search.value = query; search.hidden = !usesSearch();
+    const selectedIndex = state.options.findIndex(option => option.value === state.value);
+    state.active = query ? 0 : Math.max(0, selectedIndex);
+    popup.hidden = false; trigger.setAttribute('aria-expanded', 'true');
+    renderList();
+    focusTarget().focus?.();
+  }
+
+  function close(returnFocus = true) {
+    if (!state.open) return;
+    state.open = false; removeListeners();
+    popup.hidden = true; trigger.setAttribute('aria-expanded', 'false'); activeDescendant(null);
+    if (returnFocus) trigger.focus?.();
+  }
+
+  function choose(option) {
+    const changed = option.value !== state.value;
+    state.value = option.value; renderTrigger(); close(true);
+    if (changed) onChange?.(option.value, option);
+  }
+
+  function keydown(event) {
+    const page = 10;
+    const keys = {
+      ArrowDown: () => move(state.active + 1), ArrowUp: () => move(state.active - 1),
+      PageDown: () => move(state.active + page), PageUp: () => move(state.active - page),
+      Enter: () => { const option = state.shown[state.active]; if (option) choose(option); },
+      Escape: () => close(true),
+    };
+    // Home and End move the caret while a search box is shown.
+    if (!usesSearch()) Object.assign(keys, { Home: () => move(0), End: () => move(state.shown.length - 1) });
+    if (event.key === 'Tab') { close(false); return; }
+    const action = keys[event.key];
+    if (!action) return;
+    event.preventDefault?.(); event.stopPropagation?.();
+    action();
+  }
+
+  trigger.addEventListener('click', () => (state.open ? close(true) : open()));
+  trigger.addEventListener('keydown', event => {
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') { event.preventDefault?.(); open(); return; }
+    const printable = typeof event.key === 'string' && event.key.length === 1 && event.key !== ' ' && !event.ctrlKey && !event.metaKey && !event.altKey;
+    if (printable && usesSearch()) { event.preventDefault?.(); open(event.key); }
+  });
+  search.addEventListener('input', () => { state.query = search.value; state.active = 0; renderList(); });
+  search.addEventListener('keydown', keydown);
+  list.addEventListener('keydown', keydown);
+
+  setOptions(options); renderTrigger();
+  return {
+    root, trigger, popup, search, list,
+    get value() { return state.value; },
+    get isOpen() { return state.open; },
+    open, close,
+    update({ options: nextOptions, value: nextValue, disabled } = {}) {
+      if (nextOptions !== undefined) setOptions(nextOptions);
+      if (nextValue !== undefined) state.value = String(nextValue ?? '');
+      if (disabled !== undefined) { state.disabled = Boolean(disabled); if (state.disabled) close(false); }
+      renderTrigger();
+      if (state.open) { search.hidden = !usesSearch(); renderList(); }
+    },
+    destroy() { close(false); removeListeners(); },
+  };
+}

package/ui/world/world-canvas-notes.js

@@ -23,7 +23,8 @@ export function workCanvasNotes(work) {
   const summary = work.summary;
   if (summary?.state === 'complete' || summary?.state === 'partial') {
     const needs = summary.needs_check?.length;
-    if (needs > 0) notes.push({ label: '記録の確認', tone: 'attention', summary: `記録の要確認 ${needs}件`, text: `読めた未完了の仕事のうち${needs}件に、記録から把握できていないことがあります。仕事が止まっているという意味ではありません。詳細の絞り込みから根拠を確認できます。` });
+    // `opens: 'city'`: the host lets the quest open the city details, where these records are listed.
+    if (needs > 0) notes.push({ label: '記録の確認', tone: 'attention', opens: 'city', summary: `記録の要確認 ${needs}件`, text: `読めた未完了の仕事のうち${needs}件に、記録から把握できていないことがあります。仕事が止まっているという意味ではありません。詳細の絞り込みから根拠を確認できます。` });
   }
   const at = work.reads?.tasks?.read_at;
   notes.push({ label: '区画の時点', tone: 'info', text: `仕事の読み込み：${shortTime(at) ?? '時点不明'}。表示は読み込んだ時点の記録です。` });

package/ui/world/world-canvas-ui.css

@@ -170,15 +170,60 @@
   font-size: 11px;
   font-weight: 700;
 }
-.bb-world-canvas-ui .bb-world-canvas-quest-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
-/* A quest with a way down (候補の確認) is clickable even though the quest list lets the map take the pointer. */
-.bb-world-canvas-ui .bb-world-canvas-quest a {
+.bb-world-canvas-ui .bb-world-canvas-quest-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+/* A quest with a way down (候補の確認, 区画の入口) is pressable as a whole row even though the quest list lets
+   the map take the pointer: its one link or button stretches over the row. */
+.bb-world-canvas-ui .bb-world-canvas-quest.has-way {
+  position: relative;
+  pointer-events: auto;
+  cursor: pointer;
+  transition: background-color 120ms ease, border-color 120ms ease;
+}
+.bb-world-canvas-ui .bb-world-canvas-quest.has-way:hover,
+.bb-world-canvas-ui .bb-world-canvas-quest.has-way:focus-within {
+  border-color: rgb(155 232 145 / 55%);
+  background: linear-gradient(110deg, rgb(20 44 62 / 94%), rgb(20 44 62 / 84%));
+}
+.bb-world-canvas-ui .bb-world-canvas-quest a,
+.bb-world-canvas-ui .bb-world-canvas-quest-action {
   flex: none;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
   color: #b5f2ab;
+  font: inherit;
   text-decoration: underline;
   text-underline-offset: 2px;
+  cursor: pointer;
   pointer-events: auto;
 }
+.bb-world-canvas-ui .bb-world-canvas-quest a::after,
+.bb-world-canvas-ui .bb-world-canvas-quest-action::after { content: " ›"; }
+.bb-world-canvas-ui .bb-world-canvas-quest a::before,
+.bb-world-canvas-ui .bb-world-canvas-quest-action::before { content: ""; position: absolute; inset: 0; border-radius: 4px; }
+.bb-world-canvas-ui .bb-world-canvas-quest a:focus-visible,
+.bb-world-canvas-ui .bb-world-canvas-quest-action:focus-visible { outline: none; }
+.bb-world-canvas-ui .bb-world-canvas-quest a:focus-visible::before,
+.bb-world-canvas-ui .bb-world-canvas-quest-action:focus-visible::before { outline: 2px solid #9be891; outline-offset: 1px; }
+/* A quest with nowhere to go: flat and dashed, so it reads as a sign, not a button, with its reason. */
+.bb-world-canvas-ui .bb-world-canvas-quest.is-static {
+  border-style: dashed;
+  border-left-style: solid;
+  background: rgb(13 25 46 / 58%);
+  box-shadow: none;
+}
+/* On a narrow canvas the reason gives way before the row's own words. */
+.bb-world-canvas-ui .bb-world-canvas-quest.is-static .bb-world-canvas-quest-text { flex: none; }
+.bb-world-canvas-ui .bb-world-canvas-quest-reason {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  color: rgb(255 255 255 / 68%);
+  font-size: 11px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 
 .bb-world-canvas-ui .bb-world-canvas-edge {
   position: absolute;