@unson/brainbase-mcp 0.7.0 → 0.9.0

package/ui/objective-editor.js

@@ -6,8 +6,29 @@
  * opens a database, or decides organization membership/RACI.  An organization
  * application can compose the same screen by adapting its authenticated
  * FoundationRevisionStore boundary to the port.
+ *
+ * Two layouts: without `rail` the screen keeps its tabs (list, editor, Story
+ * links) as the organization edition composes it.  With a `rail` element the
+ * screen follows the organization edition's pattern (workspace-kit): page
+ * head, metrics and a ledger of objectives in the workspace, and the selected
+ * objective (or its edit form) in the rail.
  */
 
+import {
+  workspaceActions,
+  workspaceButton,
+  workspaceDefinition,
+  workspaceDetailEmpty,
+  workspaceHostActions,
+  workspaceHostNotice,
+  workspaceLedger,
+  workspaceMetrics,
+  workspaceNotice,
+  workspacePageHeader,
+  workspaceRailBlock,
+  workspaceRailHead,
+} from './workspace-kit.js';
+
 export const OBJECTIVE_EDITOR_CONTRACT_VERSION = 'brainbase.objective-editor.v1';
 
 export const OBJECTIVE_EDITOR_STORY_IDS = Object.freeze([
@@ -29,6 +50,9 @@ const STATUS_LABELS = Object.freeze({
   ready: '取得済み',
   empty: '登録なし',
   draft: '下書き',
+  proposed: '提案中',
+  approved: '承認済み',
+  retired: '終了',
   judgment_available: '判断に利用可能',
   judgment_unknown: '判断利用可否 未確認',
   permission_denied: '権限不足',
@@ -447,7 +471,8 @@ function statusBadge(state, label = null) {
 function field(labelText, name, value, options = {}) {
   const label = makeElement('label', { className: 'objective-editor-field' });
   label.append(makeElement('span', { className: 'objective-editor-label', text: labelText }));
-  const input = makeElement(options.tag ?? 'input', {
+  // A field with choices is a select; an input cannot hold option elements.
+  const input = makeElement(options.tag ?? (options.options ? 'select' : 'input'), {
     className: 'objective-editor-input',
     value: value ?? '',
     attrs: { name, ...(options.attrs ?? {}) },
@@ -523,6 +548,36 @@ function editorDraftFromObjective(objective, options = {}) {
   };
 }
 
+function shortDate(value) {
+  const input = nonEmptyText(value);
+  if (!input) return null;
+  const date = new Date(input);
+  if (Number.isNaN(date.getTime())) return input;
+  const pad = (part) => String(part).padStart(2, '0');
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+
+/** Readiness in the list: known readiness is named as such, not as the adoption state. */
+function readinessBadge(objective) {
+  const readiness = objective.readiness;
+  if (readiness?.state === 'ready' && readiness.ready === false) {
+    const count = readiness.issues?.length ?? 0;
+    return statusBadge('draft', count > 0 ? `判断に使えない（不足${count}件）` : '判断に使えない');
+  }
+  return statusBadge(objectiveJudgmentState(objective), objectiveJudgmentLabel(objective));
+}
+
+/** One line per Objective: desired state, evaluation period, accountable person and criteria count. */
+function objectiveSummary(objective) {
+  const from = shortDate(objective.evaluationPeriod?.from);
+  const until = shortDate(objective.evaluationPeriod?.until);
+  return [
+    `評価期間 ${from || until ? `${from ?? '未設定'}〜${until ?? '未設定'}` : '未設定'}`,
+    `責任者 ${objective.accountableId ?? '未設定'}`,
+    `評価基準 ${objective.criteria ? `${objective.criteria.length}件` : '未確認'}`,
+  ].join(' ・ ');
+}
+
 function renderObjectiveList(root, state, callbacks) {
   const section = makeElement('section', { className: 'objective-editor-panel', attrs: { 'aria-label': '目的一覧' } });
   append(section,
@@ -548,10 +603,12 @@ function renderObjectiveList(root, state, callbacks) {
     const copy = makeElement('span', { className: 'objective-editor-list-copy' });
     append(copy,
       makeElement('strong', { text: text(objective.meaning, objective.id) }),
+      objective.desiredState ? makeElement('span', { className: 'objective-editor-muted', text: `実現したい状態: ${objective.desiredState}` }) : null,
+      makeElement('small', { text: objectiveSummary(objective) }),
       makeElement('small', { text: `${objective.id}@${objective.revision}` }),
     );
     const badges = makeElement('span', { className: 'objective-editor-list-badges' });
-    badges.append(statusBadge(objective.adoptionState ?? 'unknown'), statusBadge(objectiveJudgmentState(objective), objectiveJudgmentLabel(objective)));
+    badges.append(statusBadge(objective.adoptionState ?? 'unknown'), readinessBadge(objective));
     row.append(copy, badges);
     list.append(row);
   }
@@ -564,10 +621,10 @@ function renderReadiness(root, readiness) {
   const normalized = normalizeReadiness(readiness);
   section.append(makeElement('div', { className: 'objective-editor-subheading', text: '判断への利用' }));
   if (normalized.state !== 'ready') {
-    section.append(statusBadge('judgment_unknown'), makeElement('p', { className: 'objective-editor-muted', text: 'readinessを正本APIから確認できていません。' }));
+    section.append(statusBadge('judgment_unknown'), makeElement('p', { className: 'objective-editor-muted', text: '判断に使える状態かどうかを、保存先から確認できていません。' }));
     return section;
   }
-  section.append(statusBadge(normalized.ready ? 'judgment_available' : 'draft'));
+  section.append(normalized.ready ? statusBadge('judgment_available') : statusBadge('draft', '判断に使えない'));
   if (!normalized.ready && normalized.issues?.length) {
     const list = makeElement('ul', { className: 'objective-editor-issue-list' });
     for (const issue of normalized.issues) list.append(makeElement('li', { text: `${issue.path}: ${issue.message}` }));
@@ -596,11 +653,13 @@ function renderConstraintRefs(root, state, callbacks) {
     const item = makeElement('li', { className: 'objective-editor-reference-item' });
     item.append(makeElement('span', { text: `${ref.id}@${ref.revision}` }));
     if (ref.meaning) item.append(makeElement('small', { text: ref.meaning }));
-    if (callbacks.canEdit && callbacks.onRemoveConstraintRef) item.append(makeButton('外す', () => callbacks.onRemoveConstraintRef(ref), 'objective-editor-button-danger'));
+    if (callbacks.canEdit && callbacks.constraintsEditable !== false && callbacks.onRemoveConstraintRef) item.append(makeButton('外す', () => callbacks.onRemoveConstraintRef(ref), 'objective-editor-button-danger'));
     list.append(item);
   }
   section.append(list);
-  if (callbacks.canEdit && callbacks.onAddConstraintRef) {
+  if (callbacks.constraintsEditable === false) {
+    section.append(makeElement('p', { className: 'objective-editor-muted', text: '制約の参照はここでは表示だけです。' }));
+  } else if (callbacks.canEdit && callbacks.onAddConstraintRef) {
     const addForm = makeElement('form', { className: 'objective-editor-inline-form' });
     const idField = field('制約ID', 'constraint_id', '', { attrs: { placeholder: 'constraint-id' } });
     const revisionField = field('版', 'constraint_revision', '', { attrs: { placeholder: '1' } });
@@ -619,12 +678,12 @@ function renderCriteria(root, draft, callbacks) {
   const fieldset = makeElement('fieldset', { className: 'objective-editor-criteria' });
   fieldset.append(makeElement('legend', { text: '評価基準' }));
   const criteria = Array.isArray(draft.criteria) ? draft.criteria : [];
-  if (!criteria.length) fieldset.append(makeElement('p', { className: 'objective-editor-muted', text: '評価基準はまだありません。判断利用にはVariable参照が必要です。' }));
+  if (!criteria.length) fieldset.append(makeElement('p', { className: 'objective-editor-muted', text: '評価基準はまだありません。判断に使うには、測る変数の参照が必要です。' }));
   criteria.forEach((criterion, index) => {
     const row = makeElement('div', { className: 'objective-editor-criterion-row' });
     const variableRef = criterion?.variableRef ?? {};
-    const variableId = field('Variable ID', `criteria.${index}.variable_id`, variableRef.id ?? '', { attrs: { required: true } });
-    const variableRevision = field('Variable版', `criteria.${index}.variable_revision`, variableRef.revision ?? '', { attrs: { required: true } });
+    const variableId = field('変数ID', `criteria.${index}.variable_id`, variableRef.id ?? '', { attrs: { required: true } });
+    const variableRevision = field('変数の版', `criteria.${index}.variable_revision`, variableRef.revision ?? '', { attrs: { required: true } });
     const operator = field('比較', `criteria.${index}.operator`, criterion?.operator ?? 'equals', { options: [
       { value: 'at_least', label: '以上' },
       { value: 'at_most', label: '以下' },
@@ -681,9 +740,19 @@ function renderObjectiveForm(root, state, callbacks) {
   const title = state.editor.mode === 'create' ? '目的を作成' : '目的を編集';
   append(section,
     makeElement('div', { className: 'objective-editor-panel-heading', text: title }),
-    makeElement('p', { className: 'objective-editor-muted', text: '入力はFoundationRevisionStoreへ渡す定義の編集です。組織の権限判定はホストのportが担当します。' }),
+    makeElement('p', { className: 'objective-editor-muted', text: '保存すると新しい版になり、保存した版を読み戻して表示します。' }),
   );
   if (state.save.state !== 'idle' && state.save.state !== 'saving') section.append(statusNotice(state.save, { onRetry: callbacks.onRetrySave }));
+  section.append(buildObjectiveForm(state, callbacks));
+  return section;
+}
+
+/**
+ * The edit form.  The tabs layout ends it with 保存 and 一覧へ戻る; the
+ * workspace layout (in the rail) ends it with 保存 and キャンセル.
+ */
+function buildObjectiveForm(state, callbacks, { workspace = false } = {}) {
+  const draft = state.editor.draft;
   const form = makeElement('form', { className: 'objective-editor-form' });
   const identity = makeElement('div', { className: 'objective-editor-identity' });
   const idField = field('目的ID', 'id', draft.id, { disabled: state.editor.mode !== 'create', attrs: { required: true } });
@@ -707,36 +776,37 @@ function renderObjectiveForm(root, state, callbacks) {
     { value: 'retired', label: '終了' },
   ] }).label);
   form.append(governance);
-  form.append(renderCriteria(root, draft, callbacks));
-  form.append(renderReadiness(root, state.readiness));
-  form.append(renderConstraintRefs(root, state, callbacks));
+  form.append(renderCriteria(form, draft, callbacks));
+  form.append(renderReadiness(form, state.readiness));
+  form.append(renderConstraintRefs(form, state, callbacks));
   const actions = makeElement('div', { className: 'objective-editor-actions' });
   actions.append(makeElement('span', { className: 'objective-editor-muted', text: callbacks.canEdit ? '保存後に同じID・新版を再取得して確認します。' : '読み取り専用です。書込み権限はホストから提供してください。' }));
-  if (callbacks.canEdit) actions.append(makeElement('button', { className: 'objective-editor-button-primary', text: state.save.state === 'saving' ? '保存中…' : '保存', attrs: { type: 'submit' }, disabled: state.save.state === 'saving' }));
-  actions.append(makeButton('一覧へ戻る', callbacks.onBack, 'objective-editor-button-secondary'));
+  const saving = state.save.state === 'saving';
+  if (callbacks.canEdit) actions.append(makeElement('button', { className: workspace ? 'bb-ws-button is-primary' : 'objective-editor-button-primary', text: saving ? '保存中…' : '保存', attrs: { type: 'submit' }, disabled: saving }));
+  if (workspace) actions.append(makeButton('キャンセル', callbacks.onCancelEdit, 'bb-ws-button'));
+  else actions.append(makeButton('一覧へ戻る', callbacks.onBack, 'objective-editor-button-secondary'));
   form.append(actions);
   form.addEventListener('submit', (event) => {
     event.preventDefault();
     callbacks.onSubmit?.(collectDefinition(form, draft));
   });
-  section.append(form);
-  return section;
+  return form;
 }
 
 function renderStoryLinks(root, state, callbacks) {
-  const section = makeElement('section', { className: 'objective-editor-panel', attrs: { 'aria-label': 'StoryからObjectiveを参照' } });
+  const section = makeElement('section', { className: 'objective-editor-panel', attrs: { 'aria-label': 'ストーリーから参照される目的' } });
   append(section,
-    makeElement('div', { className: 'objective-editor-panel-heading', text: 'StoryからObjectiveを参照' }),
-    makeElement('p', { className: 'objective-editor-muted', text: 'Story本文を複製せず、既存のtyped relationとObjectiveの版を表示します。' }),
+    makeElement('div', { className: 'objective-editor-panel-heading', text: 'ストーリーから参照される目的' }),
+    makeElement('p', { className: 'objective-editor-muted', text: 'ストーリーの本文は複製せず、ストーリーが参照する目的とその版を表示します。' }),
   );
   const form = makeElement('form', { className: 'objective-editor-inline-form' });
-  const storyField = field('Story ID', 'story_id', state.story.storyId ?? '', { attrs: { required: true, placeholder: 'story-...' } });
+  const storyField = field('ストーリーID', 'story_id', state.story.storyId ?? '', { attrs: { required: true, placeholder: 'story-...' } });
   form.append(storyField.label, makeElement('button', { className: 'objective-editor-button-secondary', text: '参照を取得', attrs: { type: 'submit' } }));
   form.addEventListener('submit', (event) => { event.preventDefault(); callbacks.onLoadStoryLinks?.(storyField.input.value.trim()); });
   section.append(form);
-  if (state.story.state === 'loading') section.append(makeElement('p', { className: 'objective-editor-muted', text: 'Storyの関係を読み込んでいます。' }));
+  if (state.story.state === 'loading') section.append(makeElement('p', { className: 'objective-editor-muted', text: 'ストーリーとの関係を読み込んでいます。' }));
   else if (['permission_denied', 'api_unavailable', 'error_retryable', 'unknown'].includes(state.story.state)) section.append(statusNotice(state.story, { onRetry: callbacks.onRetryStory }));
-  else if (state.story.state === 'empty') section.append(makeElement('p', { className: 'objective-editor-empty', text: 'このStoryから参照されるObjectiveはありません。' }));
+  else if (state.story.state === 'empty') section.append(makeElement('p', { className: 'objective-editor-empty', text: 'このストーリーから参照される目的はありません。' }));
   else if (state.story.links) {
     const list = makeElement('ul', { className: 'objective-editor-link-list' });
     for (const link of state.story.links) {
@@ -744,7 +814,7 @@ function renderStoryLinks(root, state, callbacks) {
       append(item,
         statusBadge(link.relation, link.relationLabel),
         makeElement('strong', { text: `${link.objective.id}@${link.objective.revision}` }),
-        makeElement('span', { text: text(link.objective.meaning, 'Objectiveの意味 未確認') }),
+        makeElement('span', { text: text(link.objective.meaning, '目的の意味 未確認') }),
       );
       if (link.timeCondition) item.append(makeElement('small', { text: `時間条件: ${JSON.stringify(link.timeCondition)}` }));
       list.append(item);
@@ -764,9 +834,9 @@ export function renderObjectiveEditor(root, state, callbacks = {}) {
   const header = makeElement('header', { className: 'objective-editor-header' });
   const copy = makeElement('div', { className: 'objective-editor-header-copy' });
   append(copy,
-    makeElement('div', { className: 'objective-editor-eyebrow', text: 'BRAINBASE / COMPANY OS' }),
+    makeElement('div', { className: 'objective-editor-eyebrow', text: 'BRAINBASE / OBJECTIVES' }),
     makeElement('h1', { text: '目的と評価基準' }),
-    makeElement('p', { text: '世界の認識やStoryとは分けたObjectiveの正本を、版付きで編集・確認します。' }),
+    makeElement('p', { text: '目指す状態と評価基準を、版つきで編集・確認します。現状の理解（観測や仮説）とは分けて扱います。' }),
   );
   const headerStatus = state.save.state !== 'idle' ? state.save.state : state.objectives.state;
   header.append(copy, statusBadge(headerStatus));
@@ -775,7 +845,7 @@ export function renderObjectiveEditor(root, state, callbacks = {}) {
   const tabs = [
     ['list', '目的一覧'],
     ['editor', '目的を編集'],
-    ['story', 'Story参照'],
+    ...(callbacks.storyLinks === false ? [] : [['story', 'Story参照']]),
   ];
   for (const [id, label] of tabs) toolbar.append(makeButton(label, () => callbacks.onView?.(id), `objective-editor-tab${state.view === id ? ' is-active' : ''}`));
   toolbar.append(makeButton('再読込', callbacks.onReload, 'objective-editor-button-secondary'));
@@ -784,13 +854,300 @@ export function renderObjectiveEditor(root, state, callbacks = {}) {
   const connectionState = state.connection;
   if (connectionState && connectionState !== 'ready') wrapper.append(statusNotice({ state: connectionState, message: state.connectionMessage }, { onRetry: callbacks.onReload }));
   const content = makeElement('main', { className: 'objective-editor-content' });
-  const renderer = state.view === 'editor' ? renderObjectiveForm : state.view === 'story' ? renderStoryLinks : renderObjectiveList;
+  const renderer = state.view === 'editor' ? renderObjectiveForm
+    : state.view === 'story' && callbacks.storyLinks !== false ? renderStoryLinks
+      : renderObjectiveList;
   content.append(renderer(content, state, callbacks));
   wrapper.append(content);
   root.append(wrapper);
   return wrapper;
 }
 
+/* ---- Workspace layout (the organization edition's pattern; used when the host gives a rail) ---- */
+
+const OPERATOR_LABELS = Object.freeze({ at_least: '以上', at_most: '以下', equals: '一致' });
+const FAILED_STATES = Object.freeze(['permission_denied', 'api_unavailable', 'missing', 'conflict', 'error_retryable', 'unknown']);
+
+/** `2026/7/1`, or `7/1` when the year is `sameYearAs`'s; text that is not a date stays as it is. */
+function ledgerDate(value, sameYearAs = null) {
+  const input = nonEmptyText(value);
+  if (!input) return null;
+  const date = new Date(input);
+  if (Number.isNaN(date.getTime())) return input;
+  const day = `${date.getMonth() + 1}/${date.getDate()}`;
+  return sameYearAs !== null && sameYearAs === date.getFullYear() ? day : `${date.getFullYear()}/${day}`;
+}
+
+function periodText(period, { compact = false } = {}) {
+  const from = shortDate(period?.from);
+  const until = shortDate(period?.until);
+  if (!from && !until) return null;
+  if (!compact) return `${from ?? '未設定'}〜${until ?? '未設定'}`;
+  // In the ledger the dates are short and the end drops its year when it is the start's year.
+  const start = new Date(nonEmptyText(period?.from) ?? '');
+  const startYear = Number.isNaN(start.getTime()) ? null : start.getFullYear();
+  return `${ledgerDate(period?.from) ?? '未設定'}〜${ledgerDate(period?.until, startYear) ?? '未設定'}`;
+}
+
+/** A state as a kit notice: failures are alerts, and never read as zero items. */
+function workspaceStatusNotice(doc, value, { label, onRetry, retryLabel = '再試行' } = {}) {
+  const normalized = typeof value === 'string' ? { state: value } : value ?? {};
+  const status = normalizeState(normalized.state);
+  const tone = status === 'verified' ? 'info'
+    : ['unknown', 'saved_unverified'].includes(status) ? 'warning'
+      : 'danger';
+  const body = makeElement('div', { className: 'bb-objective-notice-body' });
+  body.append(makeElement('p', { text: `${STATUS_LABELS[status] ?? STATUS_LABELS.unknown}：${normalized.message ?? STATUS_LABELS[status] ?? '状態を確認できません。'}` }));
+  if (status === 'conflict' && normalized.currentRevision) {
+    body.append(makeElement('p', { text: `現在の版: ${normalized.currentRevision}。入力は残しています。現在の版を確かめてから直してください。` }));
+  }
+  if (onRetry) body.append(workspaceButton(doc, { text: retryLabel, variant: 'quiet', onClick: onRetry }));
+  return workspaceNotice(doc, { label, text: body, tone });
+}
+
+function objectiveReadinessCell(objective) {
+  const readiness = objective.readiness;
+  if (readiness?.state === 'ready' && readiness.ready === false) {
+    const count = readiness.issues?.length ?? 0;
+    return { text: count > 0 ? `使えない・不足${count}件` : '使えない', className: 'bb-objective-judgment is-draft' };
+  }
+  const state = objectiveJudgmentState(objective);
+  if (state === 'judgment_available') return { text: '使える', className: 'bb-objective-judgment is-available' };
+  if (state === 'draft') return { text: '使えない・下書き', className: 'bb-objective-judgment is-draft' };
+  return { text: '未確認', className: 'bb-objective-judgment is-unresolved' };
+}
+
+function renderObjectiveMetrics(doc, state) {
+  const records = ['ready', 'empty'].includes(state.objectives.state) && Array.isArray(state.objectives.records) ? state.objectives.records : null;
+  const judged = records ? records.map((objective) => objectiveJudgmentState(objective)) : [];
+  const unknown = judged.filter((value) => value === 'judgment_unknown').length;
+  return workspaceMetrics(doc, [
+    { label: '目的', value: records ? records.length : null, note: '読めた目的' },
+    {
+      label: '判断に使える',
+      value: records ? judged.filter((value) => value === 'judgment_available').length : null,
+      note: unknown > 0 ? `使えるか未確認 ${unknown}件` : '評価基準と参照が揃った目的',
+    },
+    {
+      label: '下書き',
+      value: records ? records.filter((objective) => ['draft', 'proposed'].includes(objective.adoptionState)).length : null,
+      note: '下書き・提案中',
+    },
+  ], { ariaLabel: '目的の集計' });
+}
+
+const OBJECTIVE_COLUMNS = Object.freeze(['目的', '望ましい状態', '状態', '判断に使えるか', '評価期間']);
+
+function renderObjectiveLedger(doc, state, callbacks) {
+  const objectives = state.objectives;
+  if (objectives.state === 'idle' && state.connection !== 'ready') {
+    return workspaceStatusNotice(doc, { state: state.connection, message: state.connectionMessage }, { label: '目的', onRetry: callbacks.onReload, retryLabel: '再読込' });
+  }
+  if (FAILED_STATES.includes(objectives.state)) {
+    return workspaceStatusNotice(doc, objectives, { label: '目的', onRetry: callbacks.onReload, retryLabel: '再読込' });
+  }
+  const loading = objectives.state === 'loading' || objectives.state === 'idle';
+  const records = loading ? [] : objectives.records ?? [];
+  return workspaceLedger(doc, {
+    className: 'bb-objective-ledger',
+    ariaLabel: '目的の一覧',
+    columns: OBJECTIVE_COLUMNS,
+    empty: loading ? '目的を読み込んでいます。' : '目的はまだ登録されていません。',
+    rows: records.map((objective) => {
+      const period = periodText(objective.evaluationPeriod, { compact: true });
+      return {
+        key: objective.id,
+        selected: objective.id === state.selectedId,
+        onSelect: () => callbacks.onSelect?.(objective),
+        cells: [
+          { primary: text(objective.meaning, objective.id), secondary: `${objective.id}@${objective.revision}` },
+          objective.desiredState ?? { text: '未設定', className: 'is-unresolved' },
+          objective.adoptionState ? (STATUS_LABELS[objective.adoptionState] ?? objective.adoptionState) : { text: '未記録', className: 'is-unresolved' },
+          objectiveReadinessCell(objective),
+          period ?? { text: '未設定', className: 'is-unresolved' },
+        ],
+      };
+    }),
+  });
+}
+
+/**
+ * Render the workspace (page head, metrics, ledger) and the rail.  `host` is
+ * what the host adds to the page head: `{ title, lead, sourceNotice, pageActions }`
+ * (see `createObjectiveEditorController`).
+ */
+export function renderObjectiveWorkspace(root, rail, state, callbacks = {}, page = {}, host = {}) {
+  const doc = getDocument();
+  clear(root);
+  const wrapper = makeElement('div', {
+    className: 'bb-objective-workspace',
+    attrs: { 'data-contract-version': OBJECTIVE_EDITOR_CONTRACT_VERSION, 'data-layout': 'workspace' },
+  });
+  const actions = [{ text: '再読込', onClick: callbacks.onReload }];
+  if (callbacks.canEdit) actions.push({ text: '新しい目的', variant: 'primary', onClick: callbacks.onCreate });
+  actions.push(...workspaceHostActions(host?.pageActions));
+  wrapper.append(workspacePageHeader(doc, {
+    crumbs: Array.isArray(page?.crumbs) ? page.crumbs : [],
+    title: nonEmptyText(host?.title) ?? '目的と現状',
+    lead: nonEmptyText(host?.lead) ?? '目指す状態と評価基準を、版つきで確かめて直します。下の「現状と見通し」は、目的とは分けた、いまの理解（観測と仮説）です。',
+    source: nonEmptyText(page?.source),
+    actions,
+  }));
+  const notice = workspaceHostNotice(doc, host?.sourceNotice);
+  if (notice) wrapper.append(notice);
+  wrapper.append(renderObjectiveMetrics(doc, state), renderObjectiveLedger(doc, state, callbacks));
+  if (callbacks.storyLinks !== false) {
+    const story = makeElement('div', { className: 'bb-objective-story' });
+    story.append(renderStoryLinks(story, state, callbacks));
+    wrapper.append(story);
+  }
+  root.append(wrapper);
+  if (rail) renderObjectiveRail(doc, rail, state, callbacks);
+  return wrapper;
+}
+
+function criteriaContent(doc, criteria) {
+  if (criteria === null || criteria === undefined) return makeElement('p', { className: 'is-unrecorded', text: '評価基準を確認できません。' });
+  if (!criteria.length) return makeElement('p', { text: '評価基準はまだありません。判断に使うには、測る変数の参照が必要です。' });
+  const list = makeElement('ul', { className: 'bb-objective-list' });
+  for (const criterion of criteria) {
+    const item = makeElement('li');
+    const operator = OPERATOR_LABELS[criterion.operator] ?? criterion.operator;
+    const target = criterion.target === undefined ? null : optionalText(criterion.target);
+    item.append(
+      makeElement('code', { text: `${criterion.variableRef.id}@${criterion.variableRef.revision}` }),
+      makeElement('span', { text: target === null ? `基準値なし（${operator}）` : criterion.operator === 'equals' ? `${target} と一致` : `${target} ${operator}` }),
+    );
+    list.append(item);
+  }
+  return list;
+}
+
+function constraintContent(doc, state, callbacks) {
+  if (state.constraints.state === 'loading') return makeElement('p', { text: '制約の参照を読み込んでいます。' });
+  if (['permission_denied', 'api_unavailable', 'error_retryable', 'unknown'].includes(state.constraints.state)) {
+    return workspaceStatusNotice(doc, state.constraints, { label: '制約', onRetry: callbacks.onReloadConstraints, retryLabel: '再読込' });
+  }
+  const refs = state.editor.constraintRefs ?? state.constraints.refs ?? [];
+  const content = [];
+  if (!refs.length) content.push(makeElement('p', { text: 'この目的に紐づく制約の参照はありません。' }));
+  else {
+    const list = makeElement('ul', { className: 'bb-objective-list' });
+    for (const ref of refs) {
+      const item = makeElement('li');
+      item.append(makeElement('code', { text: `${ref.id}@${ref.revision}` }));
+      if (ref.meaning) item.append(makeElement('span', { text: ref.meaning }));
+      list.append(item);
+    }
+    content.push(list);
+  }
+  content.push(makeElement('p', {
+    className: 'bb-objective-note',
+    text: callbacks.constraintsEditable === false || !callbacks.canEdit
+      ? '制約の参照はここでは表示だけです。'
+      : '参照の追加と外しは「目的を直す」から行えます。',
+  }));
+  return content;
+}
+
+function readinessContent(doc, readiness) {
+  const normalized = normalizeReadiness(readiness);
+  if (normalized.state !== 'ready') {
+    return [statusBadge('judgment_unknown'), makeElement('p', { text: '判断に使える状態かどうかを、保存先から確認できていません。' })];
+  }
+  if (normalized.ready) {
+    return [statusBadge('judgment_available'), makeElement('p', { text: '必要な定義・基準・参照が揃っています。観測値の存在は別途確認します。' })];
+  }
+  const content = [statusBadge('draft', '判断に使えない')];
+  if (normalized.issues?.length) {
+    const list = makeElement('ul', { className: 'bb-objective-issues' });
+    for (const issue of normalized.issues) list.append(makeElement('li', { text: `${issue.path}: ${issue.message}` }));
+    content.push(list);
+  }
+  return content;
+}
+
+function renderObjectiveDetail(doc, state, callbacks) {
+  const objective = state.selected;
+  const parts = [workspaceRailHead(doc, { kicker: '目的', title: text(objective.meaning, objective.id), sub: `${objective.id}@${objective.revision}` })];
+  if (state.save.state === 'verified' && state.save.reference?.id === objective.id) {
+    parts.push(workspaceNotice(doc, {
+      label: '保存',
+      text: `${STATUS_LABELS.verified}：保存した版（${state.save.reference.id}@${state.save.reference.revision}）を読み戻して確かめました。`,
+    }));
+  }
+  parts.push(workspaceRailBlock(doc, {
+    title: '概要',
+    content: workspaceDefinition(doc, [
+      ['望ましい状態', objective.desiredState],
+      ['対象者', objective.beneficiaryIds?.length ? objective.beneficiaryIds.join('、') : null],
+      ['責任者', objective.accountableId],
+      ['採用状態', objective.adoptionState ? (STATUS_LABELS[objective.adoptionState] ?? objective.adoptionState) : null],
+      ['評価期間', periodText(objective.evaluationPeriod)],
+    ]),
+  }));
+  parts.push(workspaceRailBlock(doc, { title: `評価基準${objective.criteria ? ` ${objective.criteria.length}件` : ''}`, className: 'bb-objective-criteria-block', content: criteriaContent(doc, objective.criteria) }));
+  parts.push(workspaceRailBlock(doc, { title: '制約の参照', className: 'bb-objective-constraints-block', content: constraintContent(doc, state, callbacks) }));
+  parts.push(workspaceRailBlock(doc, { title: '判断に使えるか', className: 'bb-objective-readiness-block', content: readinessContent(doc, state.readiness) }));
+  if (callbacks.canEdit) {
+    parts.push(workspaceActions(doc, [{ text: '目的を直す', variant: 'primary', onClick: callbacks.onEdit }]));
+  }
+  return parts;
+}
+
+function renderObjectiveFormRail(doc, state, callbacks) {
+  const creating = state.editor.mode === 'create';
+  const draft = state.editor.draft;
+  const parts = [workspaceRailHead(doc, {
+    kicker: '目的',
+    title: creating ? '新しい目的' : '目的を直す',
+    sub: creating ? '保存すると版1になります。' : `${draft.id}@${state.editor.expectedRevision ?? draft.revision} を元に新しい版を作ります。`,
+  })];
+  if (state.save.state !== 'idle' && state.save.state !== 'saving') {
+    // A conflict keeps the input; saving again with the same revision would fail again, so no retry there.
+    parts.push(workspaceStatusNotice(doc, state.save, {
+      label: '保存',
+      onRetry: state.save.state === 'conflict' ? null : callbacks.onRetrySave,
+      retryLabel: 'もう一度保存',
+    }));
+  }
+  parts.push(buildObjectiveForm(state, callbacks, { workspace: true }));
+  return parts;
+}
+
+function renderObjectiveRail(doc, rail, state, callbacks) {
+  const panel = makeElement('div', { className: 'bb-objective-rail', attrs: { 'aria-label': '選択中の目的' } });
+  const pending = state.selectedId ? (state.objectives.records ?? []).find((objective) => objective.id === state.selectedId) : null;
+  if (state.railMode === 'form' && state.editor.draft) {
+    panel.setAttribute('data-rail-mode', 'form');
+    panel.append(...renderObjectiveFormRail(doc, state, callbacks));
+  } else if (state.editor.state === 'loading') {
+    panel.setAttribute('data-rail-mode', 'loading');
+    panel.append(
+      workspaceRailHead(doc, { kicker: '目的', title: pending ? text(pending.meaning, pending.id) : '目的', sub: pending ? `${pending.id}@${pending.revision}` : null }),
+      workspaceNotice(doc, { label: '目的', text: '目的を読み込んでいます。' }),
+    );
+  } else if (FAILED_STATES.includes(state.editor.state)) {
+    panel.setAttribute('data-rail-mode', 'error');
+    panel.append(
+      workspaceRailHead(doc, { kicker: '目的', title: pending ? text(pending.meaning, pending.id) : '目的', sub: pending ? `${pending.id}@${pending.revision}` : null }),
+      workspaceStatusNotice(doc, state.editor, { label: '目的', onRetry: pending ? () => callbacks.onSelect?.(pending) : null, retryLabel: '再読込' }),
+    );
+  } else if (state.selected) {
+    panel.setAttribute('data-rail-mode', 'detail');
+    panel.append(...renderObjectiveDetail(doc, state, callbacks));
+  } else {
+    panel.setAttribute('data-rail-mode', 'empty');
+    panel.append(workspaceDetailEmpty(doc, {
+      mark: '目',
+      title: '目的を選択',
+      text: '一覧から選ぶと、評価基準・制約の参照・判断に使えるかを表示します。',
+    }));
+  }
+  rail.replaceChildren(panel);
+  return panel;
+}
+
 function extractMutationRef(payload) {
   const object = objectValue(payload);
   if (!object) return null;
@@ -820,17 +1177,34 @@ function portMethod(port, name) {
  * CompanyOsObjectives where possible.  The host owns FoundationStore,
  * authentication and Story/Constraint adapters; the UI only supplies the
  * trusted context it was given and never accepts owner/scope from form data.
+ *
+ * Host options used only in the workspace layout (when `rail` is given); the
+ * tabs layout without `rail` ignores them:
+ * - `title` / `lead`: replace the page head's 目的と現状 and its lead.
+ * - `sourceNotice: { label, text }`: a notice right after the page head
+ *   (`text` is a string or an element).  Default: none.
+ * - `pageActions: [{ text, variant, onClick, disabled }]`: host-owned buttons in
+ *   the page head after 再読込 / 新しい目的.
+ * All four are read from `options` on every render, so a host may change them
+ * and call `render()`.
  */
 export function createObjectiveEditorController(options = {}) {
   const root = options.root ?? null;
+  // With a rail the screen uses the workspace layout; without one it keeps its tabs.
+  const rail = options.rail ?? null;
+  const page = options.page ?? {};
   const port = options.port ?? null;
   const context = options.context ?? {};
   const canEdit = options.canEdit === true;
+  // Hosts without a constraint-link writer show constraints read-only.
+  const constraintsEditable = options.constraintsEditable !== false;
+  // Hosts without a Story provider hide the Story tab instead of showing an unavailable API.
+  const storyLinks = options.storyLinks !== false;
   const createDefaults = options.createDefaults ?? {};
   const state = {
     view: options.initialView ?? 'list',
     connection: port ? 'ready' : 'api_unavailable',
-    connectionMessage: port ? null : 'ObjectiveEditorPortが提供されていません。組織サービスやDBへ直接接続しません。',
+    connectionMessage: port ? null : '目的を読み書きする経路が、この画面に渡されていません。',
     objectives: { state: 'idle', records: null, absence_confirmed: false },
     selected: null,
     readiness: { state: 'unknown', ready: null, issues: null },
@@ -838,12 +1212,20 @@ export function createObjectiveEditorController(options = {}) {
     story: { state: 'idle', storyId: '', links: null, absence_confirmed: false },
     editor: { state: 'idle', mode: 'edit', draft: null, expectedRevision: null, constraintRefs: null, originalConstraintRefs: null, constraintRefsChanged: false },
     save: { state: 'idle' },
+    /** The objective the owner picked (workspace layout: the selected ledger row). */
+    selectedId: null,
+    /** What the rail shows in the workspace layout: the selected objective, or the edit form. */
+    railMode: 'detail',
   };
+  // The objective shown before 新しい目的, to return to when the owner cancels.
+  let beforeCreate = null;
 
   function render() {
     if (!root) return null;
-    return renderObjectiveEditor(root, state, {
+    const callbacks = {
       canEdit,
+      constraintsEditable,
+      storyLinks,
       onView: (view) => { state.view = view; render(); },
       onReload: loadObjectives,
       onCreate: beginCreate,
@@ -858,7 +1240,10 @@ export function createObjectiveEditorController(options = {}) {
       onReloadConstraints: () => loadConstraintRefs(state.selected),
       onLoadStoryLinks: loadStoryLinks,
       onRetryStory: () => loadStoryLinks(state.story.storyId),
-    });
+      onEdit: beginEdit,
+      onCancelEdit: cancelEdit,
+    };
+    return rail ? renderObjectiveWorkspace(root, rail, state, callbacks, page, options) : renderObjectiveEditor(root, state, callbacks);
   }
 
   function setPortState(error, target, fallbackMessage = null) {
@@ -876,7 +1261,7 @@ export function createObjectiveEditorController(options = {}) {
     render();
     const method = portMethod(port, 'listObjectives');
     if (!method) {
-      state.objectives = { state: 'api_unavailable', records: null, absence_confirmed: false, message: '目的一覧APIが未提供です。' };
+      state.objectives = { state: 'api_unavailable', records: null, absence_confirmed: false, message: '目的の一覧を読む経路がありません。' };
       state.connection = 'api_unavailable';
       render();
       return state.objectives;
@@ -889,6 +1274,9 @@ export function createObjectiveEditorController(options = {}) {
       state.connection = state.objectives.state;
     }
     render();
+    // As on the organization screens, the workspace opens with the first row selected.
+    const first = state.objectives.records?.[0];
+    if (rail && first && !state.selectedId && state.railMode !== 'form') await selectObjective(first);
     return state.objectives;
   }
 
@@ -896,13 +1284,13 @@ export function createObjectiveEditorController(options = {}) {
     state.constraints = { state: 'loading', refs: null, absence_confirmed: false };
     render();
     if (!objective) {
-      state.constraints = { state: 'unknown', refs: null, absence_confirmed: false, message: 'Objectiveが未選択です。' };
+      state.constraints = { state: 'unknown', refs: null, absence_confirmed: false, message: '目的が選ばれていません。' };
       render();
       return state.constraints;
     }
     const method = portMethod(port, 'listObjectiveConstraintRefs') ?? portMethod(port, 'listConstraintReferences');
     if (!method) {
-      state.constraints = { state: 'api_unavailable', refs: null, absence_confirmed: false, message: 'ObjectiveとConstraintの参照APIが未提供です。' };
+      state.constraints = { state: 'api_unavailable', refs: null, absence_confirmed: false, message: '目的と制約の参照を読む経路がありません。' };
       state.editor.constraintRefs = null;
       render();
       return state.constraints;
@@ -926,7 +1314,7 @@ export function createObjectiveEditorController(options = {}) {
     if (!objective) return state.readiness;
     const method = portMethod(port, 'checkObjectiveReadiness');
     if (!method) {
-      state.readiness = { state: 'unknown', ready: null, issues: null, message: 'readiness APIが未提供です。' };
+      state.readiness = { state: 'unknown', ready: null, issues: null, message: '判断に使える状態を確かめる経路がありません。' };
       render();
       return state.readiness;
     }
@@ -945,6 +1333,12 @@ export function createObjectiveEditorController(options = {}) {
     const id = reference?.id;
     const revision = reference?.revision;
     if (!id) return null;
+    state.selectedId = id;
+    if (rail) {
+      state.railMode = 'detail';
+      state.save = { state: 'idle' };
+      beforeCreate = null;
+    }
     state.view = 'editor';
     state.editor = { state: 'loading', mode: 'edit', draft: null, expectedRevision: revision ?? null, constraintRefs: null, originalConstraintRefs: null, constraintRefsChanged: false };
     state.readiness = { state: 'unknown', ready: null, issues: null };
@@ -952,7 +1346,7 @@ export function createObjectiveEditorController(options = {}) {
     render();
     const method = portMethod(port, 'readObjective');
     if (!method) {
-      state.editor = { ...state.editor, state: 'api_unavailable', message: 'Objective読取APIが未提供です。' };
+      state.editor = { ...state.editor, state: 'api_unavailable', message: '目的を読む経路がありません。' };
       state.connection = 'api_unavailable';
       render();
       return null;
@@ -961,7 +1355,7 @@ export function createObjectiveEditorController(options = {}) {
       const payload = await method(id, context, revision);
       const objective = normalizeObjectiveRecord(payload);
       if (!objective) {
-        state.editor = { ...state.editor, state: 'missing', message: '指定したObjectiveを正本から確認できません。' };
+        state.editor = { ...state.editor, state: 'missing', message: '指定した目的を保存先から確認できません。' };
         state.connection = 'missing';
         render();
         return null;
@@ -985,6 +1379,8 @@ export function createObjectiveEditorController(options = {}) {
   }
 
   function beginCreate() {
+    if (rail && state.railMode !== 'form') beforeCreate = state.selected;
+    state.railMode = 'form';
     state.view = 'editor';
     state.selected = null;
     state.readiness = { state: 'unknown', ready: null, issues: null };
@@ -1000,7 +1396,49 @@ export function createObjectiveEditorController(options = {}) {
     render();
   }
 
+  /** Workspace layout: open the edit form for the selected objective in the rail. */
+  function beginEdit() {
+    if (!state.selected) return;
+    state.editor = {
+      ...state.editor,
+      state: 'ready', mode: 'edit', draft: editorDraftFromObjective(state.selected), expectedRevision: state.selected.revision,
+      constraintRefs: state.constraints.refs ?? state.editor.constraintRefs ?? null,
+      originalConstraintRefs: state.constraints.refs ? JSON.parse(JSON.stringify(state.constraints.refs)) : state.editor.originalConstraintRefs,
+      constraintRefsChanged: false,
+    };
+    state.save = { state: 'idle' };
+    state.railMode = 'form';
+    render();
+  }
+
+  /** Workspace layout: leave the form without saving and show the objective again. */
+  function cancelEdit() {
+    const creating = state.editor.mode === 'create';
+    state.railMode = 'detail';
+    state.save = { state: 'idle' };
+    if (creating) {
+      const previous = beforeCreate;
+      beforeCreate = null;
+      state.editor = { state: 'idle', mode: 'edit', draft: null, expectedRevision: null, constraintRefs: null, originalConstraintRefs: null, constraintRefsChanged: false };
+      state.selectedId = null;
+      if (previous) {
+        void selectObjective(previous);
+        return;
+      }
+      render();
+      return;
+    }
+    if (state.selected) {
+      state.editor = {
+        state: 'ready', mode: 'edit', draft: editorDraftFromObjective(state.selected), expectedRevision: state.selected.revision,
+        constraintRefs: state.constraints.refs ?? null, originalConstraintRefs: state.constraints.refs ?? null, constraintRefsChanged: false,
+      };
+    }
+    render();
+  }
+
   function addConstraintRef(reference) {
+    if (!constraintsEditable) return;
     const normalized = normalizeReference(reference, 'constraint');
     if (!normalized || normalized.type !== 'constraint') return;
     const refs = state.editor.constraintRefs ?? [];
@@ -1011,6 +1449,7 @@ export function createObjectiveEditorController(options = {}) {
   }
 
   function removeConstraintRef(reference) {
+    if (!constraintsEditable) return;
     state.editor.constraintRefs = (state.editor.constraintRefs ?? []).filter((item) => !(item.id === reference.id && item.revision === reference.revision));
     state.editor.constraintRefsChanged = true;
     render();
@@ -1022,12 +1461,12 @@ export function createObjectiveEditorController(options = {}) {
     const updateMethod = mode === 'create' ? null : portMethod(port, 'updateObjective');
     const createMethod = mode === 'create' ? portMethod(port, 'createObjective') : null;
     if ((mode === 'create' && !createMethod) || (mode !== 'create' && !updateMethod)) {
-      state.save = { state: 'api_unavailable', message: 'Objectiveの保存APIが未提供です。' };
+      state.save = { state: 'api_unavailable', message: '目的を保存する経路がありません。' };
       render();
       return state.save;
     }
     if (state.editor.constraintRefsChanged && !portMethod(port, 'replaceObjectiveConstraintRefs')) {
-      state.save = { state: 'api_unavailable', message: 'Constraint参照の保存APIが未提供のため、目的本文も保存していません。' };
+      state.save = { state: 'api_unavailable', message: '制約の参照を保存する経路が無いため、目的の本文も保存していません。' };
       render();
       return state.save;
     }
@@ -1040,7 +1479,7 @@ export function createObjectiveEditorController(options = {}) {
         : await updateMethod(definition.id, state.editor.expectedRevision, definition, context);
       const savedRef = extractMutationRef(mutation);
       if (!savedRef || savedRef.id !== definition.id || savedRef.type !== 'objective' || !savedRef.revision) {
-        state.save = { state: 'saved_unverified', message: '保存応答にObjectiveの同じID・新版が含まれていません。', mutation };
+        state.save = { state: 'saved_unverified', message: '保存の応答に、同じ目的の新しい版が含まれていません。', mutation };
         render();
         return state.save;
       }
@@ -1061,7 +1500,7 @@ export function createObjectiveEditorController(options = {}) {
       const returnedDefinition = readback ? { id: readback.id, type: readback.type, revision: readback.revision, digest: readback.digest } : null;
       const referenceMatches = definitionsEqual(savedRef, returnedDefinition);
       if (!referenceMatches || !readback || (mode !== 'create' && (!expectedRevision || readback.revision === expectedRevision))) {
-        state.save = { state: 'saved_unverified', message: '保存応答後の同じID・新版のreadbackを確認できません。', mutation, readback };
+        state.save = { state: 'saved_unverified', message: '保存した新しい版を読み戻して確かめられません。', mutation, readback };
         render();
         return state.save;
       }
@@ -1074,19 +1513,25 @@ export function createObjectiveEditorController(options = {}) {
           : null;
         const verifiedRefs = normalizeReferenceCollection(constraintPayload).refs;
         if (!verifiedRefs || !referencesEqual(verifiedRefs, state.editor.constraintRefs)) {
-          state.save = { state: 'saved_unverified', message: 'Objectiveは保存されましたが、Constraint参照のreadbackが一致しません。', mutation, readback, constraintRefs: verifiedRefs };
+          state.save = { state: 'saved_unverified', message: '目的は保存されましたが、制約の参照を読み戻した内容が一致しません。', mutation, readback, constraintRefs: verifiedRefs };
           render();
           return state.save;
         }
       }
       state.selected = readback;
+      state.selectedId = readback.id;
+      state.railMode = 'detail';
+      beforeCreate = null;
       state.editor = {
         state: 'ready', mode: 'edit', draft: editorDraftFromObjective(readback), expectedRevision: readback.revision,
         constraintRefs: state.editor.constraintRefs ?? [], originalConstraintRefs: state.editor.constraintRefs ?? [], constraintRefsChanged: false,
       };
       state.save = { state: 'verified', action: mode, reference: savedRef, readback };
       state.connection = 'ready';
+      // Readiness belongs to a revision; re-read it for the one just saved.
+      state.readiness = { state: 'unknown', ready: null, issues: null };
       render();
+      await loadReadiness(readback);
       await loadObjectives();
       return state.save;
     } catch (error) {
@@ -1103,7 +1548,7 @@ export function createObjectiveEditorController(options = {}) {
     render();
     const method = portMethod(port, 'listStoryObjectiveLinks');
     if (!method) {
-      state.story = { state: 'api_unavailable', storyId, links: null, absence_confirmed: false, message: 'Story→Objective relation APIが未提供です。' };
+      state.story = { state: 'api_unavailable', storyId, links: null, absence_confirmed: false, message: 'ストーリーと目的の関係を読む経路がありません。' };
       render();
       return state.story;
     }
@@ -1128,6 +1573,8 @@ export function createObjectiveEditorController(options = {}) {
     loadStoryLinks,
     addConstraintRef,
     removeConstraintRef,
+    beginEdit,
+    cancelEdit,
     contractVersion: OBJECTIVE_EDITOR_CONTRACT_VERSION,
   };
   render();