@unson/brainbase-mcp 0.37.0 → 0.39.0

package/ui/graph-view-shared.js

@@ -56,6 +56,7 @@ export const GRAPH_RELATION_LABELS = Object.freeze({
   participates_in: Object.freeze({ label: '参加', meaning: '人物がプロジェクトに参加している', outgoing: 'に参加', incoming: 'が参加' }),
   accountable_for: Object.freeze({ label: '責任', meaning: '人物がプロジェクトの成果や判断に責任を持つ', outgoing: 'に責任を持つ', incoming: 'が責任を持つ' }),
   owned_by: Object.freeze({ label: '所有', meaning: 'プロジェクトを組織が所有している', outgoing: 'が所有', incoming: 'を所有' }),
+  related_to: Object.freeze({ label: '関わる', meaning: '会社が顧客・協業先などとしてプロジェクトに関わっている', outgoing: 'に関わる', incoming: 'が関わる' }),
   governs: Object.freeze({ label: '方針', meaning: '判断や原則がプロジェクトの進め方を決める', outgoing: 'の進め方を決める', incoming: 'が進め方を決める' }),
   supersedes: Object.freeze({ label: '置き換え', meaning: '判断が以前の判断を置き換える', outgoing: 'を置き換える', incoming: 'に置き換えられた' }),
 });
@@ -101,6 +102,7 @@ const CORRECTION_KIND_LABELS = Object.freeze({
   update_entity: '記録を直した',
   update_edge: '関係を直した',
   create_edge: '関係を加えた',
+  create_entity: '記録を加えた',
 });
 
 /** Inputs of the correction form. `date` inputs hold a local day (YYYY-MM-DD). */
@@ -127,6 +129,9 @@ export const GRAPH_CORRECTION_ERROR_MESSAGES = Object.freeze({
   correction_relation_change_not_allowed: '関係の種類は変えられません。今の関係を終えてから、新しい関係を加えてください。',
   correction_endpoint_change_not_allowed: '関係の相手は変えられません。今の関係を終えてから、新しい関係を加えてください。',
   correction_endpoint_type_invalid: 'この組み合わせの関係は加えられません。',
+  correction_entity_type_not_allowed: 'ここで作れるのは人と会社だけです。',
+  correction_name_required: '名前を書いてください。',
+  entity_already_exists: '同じ名前の記録がすでにあります。今の記録を開いて確かめてください。',
   correction_field_not_allowed: 'この項目は、ここでは直せません。',
   correction_changes_required: '変更がありません。直したい項目を書き換えてください。',
   correction_scope_not_allowed: 'この画面では、この記録や関係は直せません。',
@@ -442,6 +447,7 @@ export function readOnlyGraphClient(client) {
  *   `GRAPH_CORRECTION_FIELDS` such as `name` or `goal` (default: every field).
  * - `edges: false`: relations cannot be corrected or ended.
  * - `createEdges: false`: relations cannot be added.
+ * - `createEntities: false`: people and companies cannot be created.
  */
 export function graphCorrectionScope(scope) {
   const given = isRecord(scope) ? scope : {};
@@ -451,6 +457,7 @@ export function graphCorrectionScope(scope) {
   return Object.freeze({
     edges: given.edges !== false,
     createEdges: given.createEdges !== false,
+    createEntities: given.createEntities !== false,
     /** Whether a record of this kind may be corrected. */
     entity: (type) => types === null || types.has(type),
     /** The given record fields that may be corrected, in their order. */
@@ -466,6 +473,7 @@ export function graphEntityCorrectionFields(type) {
 /** Whether a built correction request stays inside the scope (`recordType` is the corrected entity's kind). */
 function withinCorrectionScope(scope, body, recordType) {
   if (body.kind === 'create_edge') return scope.createEdges;
+  if (body.kind === 'create_entity') return scope.createEntities && scope.entity(body.entity?.type);
   if (body.kind === 'update_edge') return scope.edges;
   const changed = Object.keys(body.changes ?? {});
   return scope.entity(recordType) && scope.fields(changed).length === changed.length;
@@ -820,6 +828,24 @@ export function buildCorrectionRequest(form) {
     return { ok: true, body: { kind: 'create_edge', reason, edge } };
   }
 
+  if (form.kind === 'create_entity') {
+    const type = String(form.draft.type ?? '');
+    if (!form.entityTypes.includes(type)) return { ok: false, message: '作る記録の種類を選んでください。' };
+    const name = String(form.draft.name ?? '').trim();
+    if (!name) return { ok: false, message: GRAPH_CORRECTION_ERROR_MESSAGES.correction_name_required };
+    const entity = { type, name };
+    const aliases = splitAliases(form.draft.aliases ?? '').filter((alias) => alias !== name);
+    const summary = String(form.draft.summary ?? '').trim();
+    if (aliases.length > 0) entity.aliases = aliases;
+    if (summary) entity.summary = summary;
+    if (form.draft.validFrom) {
+      const validFrom = dayToRfc3339(form.draft.validFrom);
+      if (!validFrom) return { ok: false, message: '開始日の形式が正しくありません。' };
+      entity.validFrom = validFrom;
+    }
+    return { ok: true, body: { kind: 'create_entity', reason, entity } };
+  }
+
   const changes = {};
   for (const field of form.fields) {
     if (field === 'icon') {
@@ -860,11 +886,17 @@ export function buildCorrectionRequest(form) {
 
 function readBackFields(form, payload) {
   if (form.kind === 'create_edge') return ['role', 'context', 'validFrom', 'validTo'];
+  if (form.kind === 'create_entity') return ['name', 'aliases', 'summary', 'validFrom'];
   const changed = Array.isArray(payload?.correction?.changedFields) ? payload.correction.changedFields : [];
   const fields = changed.map((field) => field.replace(/^metadata\./u, '')).filter((field) => GRAPH_CORRECTION_FIELDS[field]);
   return fields.length > 0 ? fields : form.fields;
 }
 
+/** What a new record is, as rows shown before its values. */
+function createdEntityRows(form, record) {
+  return [['種類', form.typeNames[record?.type] ?? typeLabel(record?.type)]];
+}
+
 /** What a new relation connects, as rows shown before its values. */
 function createdRows(form, record) {
   const counterpartId = record?.fromId === form.anchor.id ? record?.toId : record?.fromId;
@@ -1015,6 +1047,22 @@ function renderCreateFields(doc, form, callbacks) {
   return group;
 }
 
+function renderCreateEntityFields(doc, form, callbacks) {
+  const group = makeElement(doc, 'div', { className: 'bb-graph-fields' });
+  if (form.entityTypes.length > 1) {
+    group.append(selectControl(doc, {
+      id: `${form.formId}-type`,
+      name: 'type',
+      label: '種類',
+      value: form.draft.type,
+      options: form.entityTypes.map((type) => ({ value: type, label: form.typeNames[type] ?? typeLabel(type) })),
+      onChange: (value) => callbacks.onInput('type', value),
+    }));
+  }
+  for (const field of form.fields) group.append(fieldControl(doc, form, field, callbacks));
+  return group;
+}
+
 /**
  * The correction panel.  `form` is the state held by `createGraphCorrection`;
  * callbacks are the controller's handlers.
@@ -1035,7 +1083,9 @@ export function renderCorrectionPanel(doc, form, callbacks) {
     const readBack = makeElement(doc, 'div', { className: 'bb-graph-readback', attrs: { 'aria-label': '読み直した内容' } });
     readBack.append(
       makeElement(doc, 'strong', { text: '読み直した内容' }),
-      renderValues(doc, payload.record, readBackFields(form, payload), form.kind === 'create_edge' ? createdRows(form, payload.record) : []),
+      renderValues(doc, payload.record, readBackFields(form, payload), form.kind === 'create_edge'
+        ? createdRows(form, payload.record)
+        : form.kind === 'create_entity' ? createdEntityRows(form, payload.record) : []),
     );
     panel.append(readBack, notice(doc, 'accent', mcpNote(payload)));
     panel.append(recordDetails(doc, [['記録ID', payload.record?.id], ['保存した内容のdigest', payload.digest], ['訂正ID', payload.correction?.id]]));
@@ -1045,12 +1095,17 @@ export function renderCorrectionPanel(doc, form, callbacks) {
 
   if (form.phase === 'conflict') {
     const exists = form.conflictCode === 'edge_already_exists';
-    panel.append(notice(doc, 'warning', exists
-      ? 'この関わりはすでに登録されているため、加えませんでした。今の内容を下に示します。終わった関わりをもう一度始めるときは、その関わりの終了日を消してください。入力は残しています。'
-      : 'ほかの保存で内容が変わっていたため、保存しませんでした。今の内容を下に示します。入力は残しています。今の内容を確かめてから、もう一度保存してください。', 'alert'));
+    const entityExists = form.conflictCode === 'entity_already_exists';
+    panel.append(notice(doc, 'warning', entityExists
+      ? '同じ名前の記録がすでにあるため、作りませんでした。今の記録を下に示します。同じ人や会社なら、今の記録を使ってください（終わっている記録は、終了日を消すと戻せます）。入力は残しています。'
+      : exists
+        ? 'この関わりはすでに登録されているため、加えませんでした。今の内容を下に示します。終わった関わりをもう一度始めるときは、その関わりの終了日を消してください。入力は残しています。'
+        : 'ほかの保存で内容が変わっていたため、保存しませんでした。今の内容を下に示します。入力は残しています。今の内容を確かめてから、もう一度保存してください。', 'alert'));
     const current = makeElement(doc, 'div', { className: 'bb-graph-current', attrs: { 'aria-label': '今の内容' } });
-    const fields = exists ? ['role', 'context', 'validFrom', 'validTo'] : form.fields;
-    current.append(makeElement(doc, 'strong', { text: '今の内容' }), renderValues(doc, form.current.record, fields));
+    const fields = exists ? ['role', 'context', 'validFrom', 'validTo'] : entityExists ? ['name', 'aliases', 'summary', 'validFrom', 'validTo'] : form.fields;
+    current.append(makeElement(doc, 'strong', { text: '今の内容' }), renderValues(doc, form.current.record, fields, entityExists
+      ? [['種類', form.typeNames[form.current.record?.type] ?? typeLabel(form.current.record?.type)]]
+      : []));
     current.append(recordDetails(doc, [['記録ID', form.current.record?.id], ['今の内容のdigest', form.current.digest]]));
     panel.append(current);
   } else if (form.message) {
@@ -1065,6 +1120,8 @@ export function renderCorrectionPanel(doc, form, callbacks) {
   });
   if (form.kind === 'create_edge') {
     formElement.append(renderCreateFields(doc, form, callbacks));
+  } else if (form.kind === 'create_entity') {
+    formElement.append(renderCreateEntityFields(doc, form, callbacks));
   } else {
     const group = makeElement(doc, 'div', { className: 'bb-graph-fields' });
     for (const field of form.fields) group.append(fieldControl(doc, form, field, callbacks));
@@ -1298,6 +1355,29 @@ export function createGraphCorrection({ client, rerender, onSaved, onConflict, n
       void searchCandidates('');
       return form;
     },
+    /**
+     * Create a person or a company.  `types` lists the kinds offered (only
+     * `person` and `org` are created; others are dropped), `typeNames` their
+     * labels.  Null outside the scope.
+     */
+    openCreateEntity({ types = ['person', 'org'], type, typeNames = {}, title = '記録を加える', subject } = {}) {
+      const entityTypes = allowed.createEntities
+        ? types.filter((candidate) => (candidate === 'person' || candidate === 'org') && allowed.entity(candidate))
+        : [];
+      if (entityTypes.length === 0) return null;
+      const fields = ['name', 'aliases', 'summary', 'validFrom'];
+      form = baseForm('create_entity', {
+        title,
+        subject: subject ?? null,
+        entityTypes,
+        typeNames,
+        fields,
+        original: Object.fromEntries(fields.map((field) => [field, ''])),
+        draft: { type: entityTypes.includes(type) ? type : entityTypes[0], name: '', aliases: '', summary: '', validFrom: '' },
+      });
+      redraw();
+      return form;
+    },
     close() {
       iconReadGeneration += 1;
       form = null;
@@ -1353,7 +1433,7 @@ export function createGraphCorrection({ client, rerender, onSaved, onConflict, n
         // The owner now sees the current record; the next save is based on it
         // and still sends only the fields the owner changed.  Untouched fields
         // show the current values so the form never suggests reverting them.
-        if (target.kind !== 'create_edge' && typeof result.current.digest === 'string') {
+        if (target.kind !== 'create_edge' && target.kind !== 'create_entity' && typeof result.current.digest === 'string') {
           target.expectedDigest = result.current.digest;
           const currentValues = graphRecordValues(result.current.record);
           for (const field of target.fields) {

package/ui/local-web-shell.css

@@ -70,6 +70,19 @@ body {
   gap: 2px;
 }
 
+.bb-shell-nav-group {
+  display: grid;
+  gap: 2px;
+}
+
+.bb-shell-nav-group-head {
+  margin: 14px 10px 4px;
+  color: var(--bb-color-rail-muted);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: .04em;
+}
+
 .bb-shell-nav-link {
   min-height: 38px;
   display: flex;

package/ui/local-web-shell.js

@@ -17,6 +17,7 @@
 
 import { createGraphProjectsView } from './graph-projects-view.js';
 import { createGraphRegistryView } from './graph-registry-view.js';
+import { createPeopleAndCompaniesView } from './people-and-companies-view.js';
 import { createObjectiveEditorController } from './objective-editor.js';
 import { createObjectiveEditorHttpPort } from './objective-editor-http-port.js';
 import { createJudgmentHistoryUI } from './judgment-history.js';
@@ -42,18 +43,52 @@ const UNREADABLE_LABELS = Object.freeze({
 
 // Stroke icons from the organization edition's sprite (apps/web/public/index.html).
 const NAV_ICON_PATHS = Object.freeze({
-  'value-proofs': ['M5 20V10m7 10V4m7 16v-7'],
+  'value-proofs': ['M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8', 'M3 3v5h5', 'M12 7v5l4 2'],
   objectives: ['M12 4 3 20h18z', 'M12 9v5m0 3h.01'],
   projects: ['M3 6.5h7l2 2h9v10H3z', 'M3 6.5v-2h7l2 2'],
   graph: ['M10 13a5 5 0 0 0 7.5.5l2-2a5 5 0 0 0-7-7l-1.2 1.2', 'M14 11a5 5 0 0 0-7.5-.5l-2 2a5 5 0 0 0 7 7l1.2-1.2'],
   minutes: ['M6 3.5h9l3 3V20.5H6z', 'M15 3.5v4h3', 'M9 12h6m-6 3h6'],
+  // Two people (the organization edition's 人と会社 uses the same shape).
+  people: ['M9 11a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z', 'M2.5 20a6.5 6.5 0 0 1 13 0', 'M16 4.5a3.5 3.5 0 0 1 0 6.5', 'M18 14a6.5 6.5 0 0 1 3.5 6'],
   // World view (extension id `world`, ledger P17).
   world: ['M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18z', 'M3 12h18', 'M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z'],
 });
+// Screens without their own icon (for example a private product's extension).
+const DEFAULT_NAV_ICON_PATHS = Object.freeze(['M5 20V10m7 10V4m7 16v-7']);
 const SVG_NS = 'http://www.w3.org/2000/svg';
 
+// The menu's areas (brainbase-project ledger D10): the same order and headings
+// as the organization edition. 目的と現状 is the only item of its area, so it
+// has no heading. Inside an area, `order` lists the screens first in that order.
+const NAV_AREAS = Object.freeze([
+  Object.freeze({ id: 'purpose', label: null, order: ['objectives'] }),
+  Object.freeze({ id: 'work', label: '仕事', order: ['projects', 'minutes'] }),
+  Object.freeze({ id: 'outcomes', label: '成果', order: ['value-proofs'] }),
+  Object.freeze({ id: 'information', label: '情報と関係', order: ['graph', 'people'] }),
+  Object.freeze({ id: 'settings', label: '設定', order: [] }),
+]);
+
+// Menu order only: the screens' own order (and so the first screen) stays as given.
+// Screens without an area keep their place — those before the first area-bound
+// screen come first (a leading extension such as the world), the rest come last.
+function navLayout(screens) {
+  const firstInArea = screens.findIndex((screen) => NAV_AREAS.some((area) => area.id === screen.area));
+  if (firstInArea === -1) return { leading: [...screens], areas: [], trailing: [] };
+  const leading = screens.slice(0, firstInArea);
+  const trailing = screens.slice(firstInArea).filter((screen) => !NAV_AREAS.some((area) => area.id === screen.area));
+  const areas = NAV_AREAS.map((area) => {
+    const members = screens.filter((screen) => screen.area === area.id);
+    const rank = (screen) => {
+      const index = area.order.indexOf(screen.id);
+      return index === -1 ? area.order.length + members.indexOf(screen) : index;
+    };
+    return { area, screens: [...members].sort((a, b) => rank(a) - rank(b)) };
+  }).filter((entry) => entry.screens.length > 0);
+  return { leading, areas, trailing };
+}
+
 function makeIcon(doc, id) {
-  const paths = NAV_ICON_PATHS[id] ?? NAV_ICON_PATHS['value-proofs'];
+  const paths = NAV_ICON_PATHS[id] ?? DEFAULT_NAV_ICON_PATHS;
   const create = (tag) => (typeof doc.createElementNS === 'function' ? doc.createElementNS(SVG_NS, tag) : doc.createElement(tag));
   const svg = create('svg');
   svg.setAttribute('class', 'bb-shell-icon');
@@ -235,7 +270,7 @@ function mountObjectives(container, context) {
   return { editor, worldModel };
 }
 
-function mountGraphScreen(screenId, createView) {
+function mountGraphScreen(screenId, createView, extra = {}) {
   return (container, context) => {
     const viewRoot = makeElement(context.document, 'div');
     makePage(container, context).append(viewRoot);
@@ -247,16 +282,18 @@ function mountGraphScreen(screenId, createView) {
       fetcher: context.fetcher,
       token: context.token,
       initialEntityId: context.initialEntityId,
+      ...extra,
     });
   };
 }
 
 export const LOCAL_WEB_SCREENS = Object.freeze([
-  Object.freeze({ id: 'value-proofs', label: '判断の履歴', usesGraph: false, rail: true, source: '判断の記録', mount: mountToday }),
-  Object.freeze({ id: 'minutes', label: '議事録', usesGraph: false, rail: true, source: '正本の議事録', mount: mountMeetingMinutes }),
-  Object.freeze({ id: 'objectives', label: '目的と現状', usesGraph: true, rail: true, source: '手元のGraph', mount: mountObjectives }),
-  Object.freeze({ id: 'projects', label: 'プロジェクトと関係者', usesGraph: true, rail: true, source: '手元のGraph', mount: mountGraphScreen('projects', createGraphProjectsView) }),
-  Object.freeze({ id: 'graph', label: '情報と関係', usesGraph: true, rail: true, source: '手元のGraph', mount: mountGraphScreen('graph', createGraphRegistryView) }),
+  Object.freeze({ id: 'value-proofs', label: '判断の履歴', area: 'outcomes', usesGraph: false, rail: true, source: '判断の記録', mount: mountToday }),
+  Object.freeze({ id: 'minutes', label: '議事録', area: 'work', usesGraph: false, rail: true, source: '正本の議事録', mount: mountMeetingMinutes }),
+  Object.freeze({ id: 'objectives', label: '目的と現状', area: 'purpose', usesGraph: true, rail: true, source: '手元のGraph', mount: mountObjectives }),
+  Object.freeze({ id: 'projects', label: 'プロジェクトと関係者', area: 'work', usesGraph: true, rail: true, source: '手元のGraph', mount: mountGraphScreen('projects', createGraphProjectsView) }),
+  Object.freeze({ id: 'graph', label: '情報と関係', area: 'information', usesGraph: true, rail: true, source: '手元のGraph', mount: mountGraphScreen('graph', createGraphRegistryView) }),
+  Object.freeze({ id: 'people', label: '人と会社', area: 'information', usesGraph: true, rail: true, source: '手元のGraph', mount: mountGraphScreen('people', createPeopleAndCompaniesView, { canCorrect: true }) }),
 ]);
 
 function renderGraphGate(doc, slot, status, onRecheck, label) {
@@ -373,7 +410,7 @@ export function createLocalWebShell({
   };
   menuButton.addEventListener('click', () => setMenuOpen(!sidebar.className.includes('is-open')));
   backdrop.addEventListener('click', () => setMenuOpen(false));
-  for (const screen of screens) {
+  const navLink = (screen) => {
     const link = makeElement(doc, 'a', { className: 'bb-shell-nav-link', text: screen.label, attrs: { href: `#${screen.id}` } });
     // The label stays the link's own text; the icon goes in front where the DOM allows it.
     if (typeof link.prepend === 'function') link.prepend(makeIcon(doc, screen.id));
@@ -382,8 +419,22 @@ export function createLocalWebShell({
       controller.show(screen.id);
     });
     links.set(screen.id, link);
-    nav.append(link);
+    return link;
+  };
+  const layout = navLayout(screens);
+  for (const screen of layout.leading) nav.append(navLink(screen));
+  for (const { area, screens: members } of layout.areas) {
+    if (!area.label) {
+      for (const screen of members) nav.append(navLink(screen));
+      continue;
+    }
+    const headId = `bb-shell-nav-area-${area.id}`;
+    const group = makeElement(doc, 'div', { className: 'bb-shell-nav-group', attrs: { role: 'group', 'aria-labelledby': headId } });
+    group.append(makeElement(doc, 'div', { className: 'bb-shell-nav-group-head', text: area.label, attrs: { id: headId } }));
+    for (const screen of members) group.append(navLink(screen));
+    nav.append(group);
   }
+  for (const screen of layout.trailing) nav.append(navLink(screen));
   const source = makeElement(doc, 'section', { className: 'bb-shell-source', attrs: { 'aria-label': '出典' } });
   sidebar.append(brand, nav, source);
   const workspace = makeElement(doc, 'div', { className: 'bb-shell-workspace' });

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

@@ -0,0 +1,121 @@
+/*
+ * 「人と会社」. Load after workspace-kit.css and graph-view-shared.css.
+ * Column templates of the people and company ledgers, the group titles,
+ * the write buttons, the recorded company note and the relations in the
+ * right rail, with a 760px variant.
+ * Uses only the shared tokens in brainbase-tokens.css.
+ */
+.bb-pc-people,
+.bb-pc-companies {
+  margin-bottom: 30px;
+}
+
+.bb-graph .bb-pc-group-title {
+  margin: 22px 0 10px;
+  color: var(--bb-color-ink);
+  font-size: 13px;
+}
+
+.bb-graph .bb-pc-company-title {
+  margin: 14px 0 8px;
+  color: var(--bb-color-muted);
+  font-size: 12px;
+  font-weight: 650;
+}
+
+.bb-graph .bb-pc-empty,
+.bb-graph .bb-pc-ended,
+.bb-graph-rail .bb-pc-empty {
+  margin: 0 0 10px;
+  color: var(--bb-color-muted);
+  font-size: 12px;
+}
+
+.bb-pc-people-ledger .bb-ws-ledger-row {
+  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
+}
+
+.bb-pc-company-ledger .bb-ws-ledger-row {
+  grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) 84px minmax(0, 1fr) minmax(0, 1fr);
+}
+
+.bb-pc-relation-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.bb-pc-relation {
+  display: grid;
+  gap: 4px;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--bb-color-border);
+}
+
+.bb-pc-relation.is-ended {
+  opacity: .62;
+}
+
+.bb-pc-relation-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.bb-pc-relation-meta {
+  color: var(--bb-color-muted);
+  font-size: 12px;
+}
+
+.bb-graph-rail .bb-pc-fix {
+  display: grid;
+  gap: 6px;
+  margin: 16px 0 0;
+  color: var(--bb-color-muted);
+  font-size: 12px;
+}
+
+.bb-pc-actions,
+.bb-pc-relation-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.bb-pc-actions {
+  margin: 0 0 12px;
+}
+
+.bb-pc-company-cell {
+  display: grid;
+  gap: 2px;
+}
+
+/* A note recorded as text on the person, never a membership: muted and dashed. */
+.bb-pc-org-note {
+  justify-self: start;
+  padding: 1px 6px;
+  border: 1px dashed var(--bb-color-border);
+  border-radius: 4px;
+  color: var(--bb-color-muted);
+  font-size: 11px;
+}
+
+@media (max-width: 760px) {
+  .bb-pc-people-ledger .bb-ws-ledger-row {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 84px;
+  }
+
+  .bb-pc-people-ledger .bb-ws-ledger-row > :nth-child(4) {
+    display: none;
+  }
+
+  .bb-pc-company-ledger .bb-ws-ledger-row {
+    grid-template-columns: minmax(0, 1fr) minmax(0, .7fr) 64px;
+  }
+
+  .bb-pc-company-ledger .bb-ws-ledger-row > :nth-child(4),
+  .bb-pc-company-ledger .bb-ws-ledger-row > :nth-child(5) {
+    display: none;
+  }
+}