@unson/brainbase-mcp 0.15.7 → 0.17.0

package/ui/graph-view-shared.js

@@ -21,6 +21,15 @@
  */
 
 import { workspaceButton, workspaceNotice } from './workspace-kit.js';
+import {
+  PROJECT_ICON_MAX_BYTES,
+  PROJECT_ICON_MIME_TYPES,
+  projectIconMimeLabel,
+  projectIconSummary,
+  readProjectIconFile,
+  renderProjectIcon,
+  validateProjectIconDataUrl,
+} from './project-icon.js';
 
 export const GRAPH_VIEW_SHARED_CONTRACT_VERSION = 'brainbase.graph-view-shared.v2';
 
@@ -76,8 +85,10 @@ const FIELD_LABELS = Object.freeze({
   validTo: '終了日',
   goal: '目的',
   status: '状態',
+  icon: 'アイコン',
   'metadata.goal': '目的',
   'metadata.status': '状態',
+  'metadata.icon': 'アイコン',
   role: '役割',
   context: '文脈',
   fromId: '起点',
@@ -99,6 +110,7 @@ export const GRAPH_CORRECTION_FIELDS = Object.freeze({
   summary: Object.freeze({ label: '要約', control: 'textarea', max: 2000 }),
   goal: Object.freeze({ label: '目的', control: 'textarea', max: 2000 }),
   status: Object.freeze({ label: '状態', control: 'text', max: 200, help: '自由記述です。例: 進行中、保留、完了' }),
+  icon: Object.freeze({ label: 'アイコン', control: 'project-icon', help: 'PNG、JPEG、WebP。256KiB以下。' }),
   validFrom: Object.freeze({ label: '開始日', control: 'date' }),
   validTo: Object.freeze({ label: '終了日', control: 'date', help: 'この日の0時から、終わったものとして扱います。空にすると終了日を消します。' }),
   role: Object.freeze({ label: '役割', control: 'text', max: 200, help: '自由記述です。例: 最終判断、進行管理' }),
@@ -448,7 +460,7 @@ export function graphCorrectionScope(scope) {
 
 /** The record fields the correction form offers for an entity of this kind. */
 export function graphEntityCorrectionFields(type) {
-  return ['name', 'aliases', 'summary', 'validFrom', 'validTo', ...(type === 'project' ? ['goal', 'status'] : [])];
+  return ['name', 'aliases', 'summary', 'validFrom', 'validTo', ...(type === 'project' ? ['goal', 'status', 'icon'] : [])];
 }
 
 /** Whether a built correction request stays inside the scope (`recordType` is the corrected entity's kind). */
@@ -469,45 +481,6 @@ export function hostSourceNotice(sourceNotice, subject) {
   return { ...sourceNotice, text: sourceNotice.text(subject ?? null) };
 }
 
-// ---------------------------------------------------------------------------
-// The organization's web (Inspector UX-20261004-01)
-
-const ORGANIZATION_RECORD_ID = /^[A-Za-z0-9_.:-]{1,200}$/u;
-
-/** The organization web's origin the host was told about, or null. */
-export function organizationWebOrigin(organizationGraph) {
-  if (organizationGraph?.status !== 'connected') return null;
-  const origin = organizationGraph.web_url;
-  return typeof origin === 'string' && /^https:\/\/[^/?#@\s]+$/u.test(origin) ? origin : null;
-}
-
-/**
- * Where a record opens in the organization web, `{ href, label }`, or null when it has no usable id.  The
- * organization web opens 情報と関係 by record id and プロジェクトと関係者 by project code, and keeps that record
- * across sign-in.  A project opens by its own code only: a sub-project's scope code is its parent's and
- * would open the parent, so without its own code the record opens by id.
- */
-export function organizationRecordLink(origin, screenId, record) {
-  const id = typeof record?.id === 'string' && ORGANIZATION_RECORD_ID.test(record.id) ? record.id : null;
-  const own = typeof record?.metadata?.code === 'string' ? record.metadata.code.trim() : '';
-  const code = own && ORGANIZATION_RECORD_ID.test(own) ? own : null;
-  if (screenId === 'projects' && record?.type === 'project' && code) {
-    return { href: `${origin}/?screen=projects&project=${encodeURIComponent(code)}`, label: '「プロジェクトと関係者」' };
-  }
-  return id ? { href: `${origin}/?screen=graph&entity_id=${encodeURIComponent(id)}`, label: '「情報と関係」' } : null;
-}
-
-export const ORGANIZATION_RECORD_LINK_TEXT = '組織版でこの記録を開く';
-
-/** A link that opens `target` from organizationRecordLink in a new tab. */
-export function organizationRecordAnchor(doc, target, className) {
-  return makeElement(doc, 'a', {
-    ...(className ? { className } : {}),
-    text: ORGANIZATION_RECORD_LINK_TEXT,
-    attrs: { href: target.href, target: '_blank', rel: 'noopener noreferrer' },
-  });
-}
-
 /**
  * A host's note that corrections are not available here, or null when it passed none.  The host may
  * pass a function of the selected record (`{ id, type, metadata }`) returning a string or an element,
@@ -757,6 +730,9 @@ export function graphRecordValues(record) {
     validTo: formatDay(record?.validTo) ?? '',
     goal: pick(typeof record?.goal === 'string' ? record.goal : metadata.goal),
     status: pick(typeof record?.status === 'string' && record?.type === 'project' ? record.status : metadata.status),
+    // Keep the raw value in form state for exact comparison; renderers below
+    // always replace it with a short summary and never put the data URL in text.
+    icon: typeof metadata.icon === 'string' ? metadata.icon : '',
     role: pick(record?.role),
     context: pick(record?.context),
   };
@@ -764,16 +740,32 @@ export function graphRecordValues(record) {
 
 function displayValue(field, value) {
   if (field === 'validFrom' || field === 'validTo') return value ? value : 'なし';
+  if (field === 'icon') {
+    const summary = projectIconSummary(value);
+    return summary ? `${projectIconMimeLabel(summary.mimeType)}（${Math.ceil(summary.bytes / 1024)}KiB）` : '未登録';
+  }
   return value ? value : '未記入';
 }
 
-function valueRows(record, fields) {
+function valueRows(doc, record, fields) {
   const values = graphRecordValues(record);
-  return fields.map((field) => [GRAPH_CORRECTION_FIELDS[field]?.label ?? FIELD_LABELS[field] ?? field, displayValue(field, values[field])]);
+  return fields.map((field) => [
+    GRAPH_CORRECTION_FIELDS[field]?.label ?? FIELD_LABELS[field] ?? field,
+    field === 'icon' ? renderIconValue(doc, values[field], record?.name) : displayValue(field, values[field]),
+  ]);
 }
 
 function renderValues(doc, record, fields, leadingRows = []) {
-  return facts(doc, [...leadingRows, ...valueRows(record, fields)], 'bb-graph-facts');
+  return facts(doc, [...leadingRows, ...valueRows(doc, record, fields)], 'bb-graph-facts');
+}
+
+function renderIconValue(doc, value, name) {
+  const summary = projectIconSummary(value);
+  const wrap = makeElement(doc, 'span', { className: 'bb-graph-icon-value' });
+  wrap.append(renderProjectIcon(doc, value, name, { size: 'sm' }), makeElement(doc, 'span', {
+    text: summary ? `${projectIconMimeLabel(summary.mimeType)}（${Math.ceil(summary.bytes / 1024)}KiB）` : '未登録',
+  }));
+  return wrap;
 }
 
 function splitAliases(value) {
@@ -830,6 +822,15 @@ export function buildCorrectionRequest(form) {
 
   const changes = {};
   for (const field of form.fields) {
+    if (field === 'icon') {
+      const before = form.original[field] ?? '';
+      const after = form.draft[field] ?? '';
+      if (after === before) continue;
+      const parsed = validateProjectIconDataUrl(after === '' ? null : after);
+      if (!parsed.ok) return { ok: false, message: parsed.message };
+      changes.icon = parsed.value;
+      continue;
+    }
     const before = String(form.original[field] ?? '');
     const after = String(form.draft[field] ?? '');
     if (after.trim() === before.trim()) continue;
@@ -885,6 +886,29 @@ function fieldControl(doc, form, field, callbacks) {
   const id = `${form.formId}-${field}`;
   const wrap = makeElement(doc, 'div', { className: 'bb-graph-field' });
   wrap.append(makeElement(doc, 'label', { text: definition.label, attrs: { for: id } }));
+  if (definition.control === 'project-icon') {
+    const input = makeElement(doc, 'input', { attrs: {
+      id,
+      name: field,
+      type: 'file',
+      accept: 'image/png,image/jpeg,image/webp',
+    } });
+    input.addEventListener('change', (event) => callbacks.onIconFile(event?.target?.files?.[0] ?? null));
+    const preview = makeElement(doc, 'div', { className: 'bb-graph-icon-picker' });
+    preview.append(renderProjectIcon(doc, form.draft[field], form.recordName ?? form.subject ?? 'プロジェクト', { size: 'md' }));
+    const summary = projectIconSummary(form.draft[field]);
+    preview.append(makeElement(doc, 'span', {
+      className: 'bb-graph-icon-picker-state',
+      text: summary ? `${projectIconMimeLabel(summary.mimeType)}（${Math.ceil(summary.bytes / 1024)}KiB）` : '未登録',
+    }));
+    if (form.draft[field]) {
+      preview.append(button(doc, 'アイコンを外す', () => callbacks.onInput(field, null), { className: 'bb-ws-button is-quiet' }));
+    }
+    wrap.append(input, preview);
+    if (form.fieldErrors?.[field]) wrap.append(makeElement(doc, 'small', { className: 'bb-graph-field-error', text: form.fieldErrors[field], attrs: { role: 'alert' } }));
+    if (definition.help) wrap.append(makeElement(doc, 'small', { className: 'bb-graph-help', text: definition.help }));
+    return wrap;
+  }
   const control = definition.control === 'textarea'
     ? makeElement(doc, 'textarea', { attrs: { id, name: field, rows: 3, maxlength: definition.max } })
     : makeElement(doc, 'input', { attrs: { id, name: field, type: definition.control === 'date' ? 'date' : 'text', maxlength: definition.max } });
@@ -1049,9 +1073,21 @@ export function renderCorrectionPanel(doc, form, callbacks) {
   formElement.append(reasonControl(doc, form, callbacks));
   const actions = makeElement(doc, 'div', { className: 'bb-graph-actions' });
   const saving = form.phase === 'saving';
-  const submitLabel = saving ? '保存しています' : form.phase === 'conflict' && form.conflictCode === 'digest_conflict' ? '今の内容に対して保存する' : '保存する';
+  const iconReadPending = form.iconReadPending === true;
+  const iconHasError = Boolean(form.fieldErrors?.icon);
+  const submitLabel = saving
+    ? '保存しています'
+    : iconReadPending
+      ? 'アイコンを読み込んでいます'
+      : form.phase === 'conflict' && form.conflictCode === 'digest_conflict'
+        ? '今の内容に対して保存する'
+        : '保存する';
   actions.append(
-    makeElement(doc, 'button', { className: 'bb-ws-button is-primary', text: submitLabel, attrs: { type: 'submit', disabled: saving } }),
+    makeElement(doc, 'button', {
+      className: 'bb-ws-button is-primary',
+      text: submitLabel,
+      attrs: { type: 'submit', disabled: saving || iconReadPending || iconHasError },
+    }),
     button(doc, '取り消す', callbacks.onClose, { attrs: { disabled: saving } }),
   );
   formElement.append(actions);
@@ -1073,18 +1109,24 @@ export function createGraphCorrection({ client, rerender, onSaved, onConflict, n
   let form = null;
   let focusPending = false;
   let sequence = 0;
+  // A file read can finish after a newer selection, removal, cancellation or
+  // form switch.  Invalidate the older read before touching the draft.
+  let iconReadGeneration = 0;
   // Label/input ids stay unique when two screens are on one page.
   const idPrefix = `bb-graph-form-${Math.random().toString(36).slice(2, 8)}`;
   const redraw = () => rerender?.();
 
   function baseForm(kind, extra) {
     sequence += 1;
+    iconReadGeneration += 1;
     focusPending = true;
     return {
       kind,
       formId: `${idPrefix}-${sequence}`,
       phase: 'editing',
       message: null,
+      fieldErrors: {},
+      iconReadPending: false,
       reason: '',
       current: null,
       conflictCode: null,
@@ -1118,7 +1160,60 @@ export function createGraphCorrection({ client, rerender, onSaved, onConflict, n
 
   const callbacks = {
     onInput(field, value) {
-      if (form) form.draft[field] = value;
+      if (form) {
+        if (field === 'icon') {
+          iconReadGeneration += 1;
+          form.iconReadPending = false;
+          form.fieldErrors.icon = null;
+          form.message = null;
+        }
+        form.draft[field] = value;
+        if (field === 'icon') redraw();
+      }
+    },
+    async onIconFile(file) {
+      const generation = ++iconReadGeneration;
+      const target = form;
+      if (!target || target.kind === 'create_edge') return;
+      // Selecting the file input and then cancelling is a no-op; keep the
+      // current draft and any already selected icon intact.
+      if (!file) {
+        target.iconReadPending = false;
+        target.fieldErrors.icon = null;
+        target.message = null;
+        redraw();
+        return;
+      }
+      target.iconReadPending = false;
+      target.message = null;
+      if (typeof file.size === 'number' && file.size > PROJECT_ICON_MAX_BYTES) {
+        target.fieldErrors.icon = `アイコンは${Math.floor(PROJECT_ICON_MAX_BYTES / 1024)}KiB以下にしてください。`;
+        redraw();
+        return;
+      }
+      if (typeof file.type !== 'string' || !PROJECT_ICON_MIME_TYPES.includes(file.type)) {
+        target.fieldErrors.icon = 'アイコンはPNG、JPEG、WebPの画像を選んでください。';
+        redraw();
+        return;
+      }
+      target.iconReadPending = true;
+      target.fieldErrors.icon = null;
+      target.message = null;
+      redraw();
+      try {
+        const value = await readProjectIconFile(file);
+        const parsed = validateProjectIconDataUrl(value);
+        if (!parsed.ok) throw new Error(parsed.message);
+        if (form !== target || iconReadGeneration !== generation) return;
+        target.draft.icon = parsed.value;
+        target.iconReadPending = false;
+        target.message = null;
+      } catch (error) {
+        if (form !== target || iconReadGeneration !== generation) return;
+        target.iconReadPending = false;
+        target.fieldErrors.icon = error instanceof Error ? error.message : 'アイコンを読み取れません。';
+      }
+      if (form === target && iconReadGeneration === generation) redraw();
     },
     onReason(value) {
       if (form) form.reason = value;
@@ -1154,6 +1249,7 @@ export function createGraphCorrection({ client, rerender, onSaved, onConflict, n
         title,
         subject: subject ?? `${typeLabel(record.type)}「${record.name}」`,
         recordType: record.type,
+        recordName: record.name,
         targetId: record.id,
         expectedDigest: record.digest,
         fields: shown,
@@ -1203,12 +1299,26 @@ export function createGraphCorrection({ client, rerender, onSaved, onConflict, n
       return form;
     },
     close() {
+      iconReadGeneration += 1;
       form = null;
       redraw();
     },
     async submit() {
       const target = form;
       if (!target || target.phase === 'saving') return target;
+      if (target.fieldErrors?.icon) {
+        target.message = { tone: 'danger', text: target.fieldErrors.icon };
+        redraw();
+        return target;
+      }
+      if (target.iconReadPending === true) {
+        target.message = {
+          tone: 'warning',
+          text: 'アイコンを読み込んでいます。読み込みが終わってから保存してください。',
+        };
+        redraw();
+        return target;
+      }
       const built = buildCorrectionRequest(target);
       if (!built.ok) {
         target.message = { tone: 'danger', text: built.message };

package/ui/local-web-shell.js

@@ -21,7 +21,7 @@ import { createObjectiveEditorController } from './objective-editor.js';
 import { createObjectiveEditorHttpPort } from './objective-editor-http-port.js';
 import { createValueProofReviewUI } from './value-proof-review.js';
 import { createWorldModelView } from './world-model-view.js';
-import { createGraphClient, organizationRecordAnchor, organizationRecordLink, organizationWebOrigin } from './graph-view-shared.js';
+import { createGraphClient } from './graph-view-shared.js';
 
 export const LOCAL_WEB_SHELL_CONTRACT_VERSION = 'brainbase.local-web-shell.v1';
 
@@ -203,58 +203,11 @@ function mountObjectives(container, context) {
   return { editor, worldModel };
 }
 
-const ORGANIZATION_READ_ONLY_NOTE = '組織のGraphを読み取り専用で表示しています。登録の訂正は組織版で行ってください。';
-// What the owner needs before leaving for the organization web (Inspector UX-20261004-01): a link to this
-// very record there, who may correct it, and what happens after saving.
-export { organizationRecordLink };
-const organizationReadOnlyNoteLinked = (doc, origin, screenId) => (record) => {
-  const target = organizationRecordLink(origin, screenId, record);
-  if (!target) return ORGANIZATION_READ_ONLY_NOTE;
-  const note = makeElement(doc, 'span');
-  note.append(
-    makeElement(doc, 'span', { text: [
-      '組織のGraphを読み取り専用で表示しています。ここでは直せません。訂正の手順：',
-      `① 下のリンク（上の「出典」にも同じリンクがあります）から、組織版の${target.label}でこの記録を開きます。ログインしていなければSlackでログインすると、そのままこの記録に戻ります。`,
-      '② 直せるのは、組織版での役割がgmかceoで、このプロジェクトが属する事業（事業そのものなら、その事業）を許可されている人です。直せるのはプロジェクトの記録（名前・別名・要約・期間・目的・状態）だけで、人物の記録と、関係者の追加・終了は組織版でもまだ直せません。',
-      '③ 保存すると、理由といっしょに組織のGraphへ書き込まれ、組織版がその場で読み戻して表示します。この画面には、1分ほどたってから再読み込みすると反映されます。',
-      '',
-    ].join('\n') }),
-    organizationRecordAnchor(doc, target),
-  );
-  return note;
-};
-
-/**
- * The 出典 notice of a screen reading the organization Graph.  Once a record is selected its link opens
- * that record in the organization web; before that, the screen there.
- */
-const organizationSourceText = (doc, origin, screenId, sourceText) => (record) => {
-  const target = record ? organizationRecordLink(origin, screenId, record) : null;
-  const link = target
-    ? organizationRecordAnchor(doc, target)
-    : makeElement(doc, 'a', {
-      text: '組織版で開いて訂正する',
-      attrs: { href: `${origin}/?screen=${encodeURIComponent(screenId)}`, target: '_blank', rel: 'noopener noreferrer' },
-    });
-  const source = makeElement(doc, 'span');
-  source.append(makeElement(doc, 'span', { text: `${sourceText} ` }), link);
-  return source;
-};
-
 function mountGraphScreen(screenId, createView) {
   return (container, context) => {
     const viewRoot = makeElement(context.document, 'div');
     makePage(container, context).append(viewRoot);
-    // Ledger C1: when the host reads the organization Graph, nothing here can be corrected.
-    const readOnly = context.organizationGraph?.status === 'connected';
-    const origin = readOnly ? organizationWebOrigin(context.organizationGraph) : null;
-    const sourceText = `組織のGraph（${context.organizationGraph?.server ?? '接続先不明'}）を読み取り専用で表示しています。このMacのGraphではありません。`;
     return createView({
-      ...(readOnly ? {
-        canCorrect: false,
-        readOnlyNote: origin ? organizationReadOnlyNoteLinked(context.document, origin, screenId) : ORGANIZATION_READ_ONLY_NOTE,
-        sourceNotice: { label: '出典', text: origin ? organizationSourceText(context.document, origin, screenId, sourceText) : sourceText },
-      } : {}),
       root: viewRoot,
       rail: context.rail,
       page: context.page,
@@ -334,7 +287,6 @@ function renderSource(doc, bar, status, onRecheck) {
   bar.append(
     fact('データ', data.data_dir),
     fact('Graph', graphLabel, data.graph.status === 'ready' ? '' : 'is-warning'),
-    fact('組織のGraph', data.organization_graph?.status === 'connected' ? '読んでいます（読み取りのみ）' : '読んでいません'),
   );
 }
 
@@ -446,10 +398,8 @@ export function createLocalWebShell({
     slot.replaceChildren();
     const rail = rails.get(screen.id) ?? null;
     rail?.replaceChildren();
-    const organizationGraph = status.phase === 'ready' ? status.data.organization_graph ?? null : null;
-    const readsOrganization = organizationGraph?.status === 'connected' && (screen.id === 'projects' || screen.id === 'graph');
-    const page = Object.freeze({ crumbs: Object.freeze(['あなたのBrainbase', screen.label]), source: readsOrganization ? '組織のGraph（読み取りのみ）' : screen.source ?? null });
-    const view = screen.mount(slot, Object.freeze({ ...context, rail, page, initialEntityId: entityId, organizationGraph })) ?? true;
+    const page = Object.freeze({ crumbs: Object.freeze(['あなたのBrainbase', screen.label]), source: screen.source ?? null });
+    const view = screen.mount(slot, Object.freeze({ ...context, rail, page, initialEntityId: entityId })) ?? true;
     mounted.set(screen.id, view);
     if (entityId && screen.id === 'today' && typeof view?.openDecision === 'function') view.openDecision(entityId);
     if (entityId && screen.id === 'projects' && typeof view?.openProject === 'function') void view.openProject(entityId);

package/ui/project-icon.js

@@ -0,0 +1,155 @@
+/*
+ * Project icon validation and rendering shared by the local and organization
+ * Graph screens.
+ *
+ * Icons are deliberately kept as bounded data URLs.  The Graph correction
+ * endpoint stores the value in the project metadata, while this module keeps
+ * the browser side independent from Node's Buffer implementation so the
+ * organization edition can consume the same helper.
+ */
+
+export const PROJECT_ICON_MAX_BYTES = 256 * 1024;
+export const PROJECT_ICON_MIME_TYPES = Object.freeze(['image/png', 'image/jpeg', 'image/webp']);
+
+const MIME_LABELS = Object.freeze({
+  'image/png': 'PNG',
+  'image/jpeg': 'JPEG',
+  'image/webp': 'WebP',
+});
+
+const DATA_URL_PATTERN = /^data:(image\/(?:png|jpeg|webp));base64,([A-Za-z0-9+/]*={0,2})(?![\s\S])/u;
+const BASE64_ALPHABET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+const PNG_SIGNATURE = Object.freeze([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]);
+
+/** A compact representation safe to put in correction history or audit UI. */
+export function projectIconSummary(value) {
+  const result = validateProjectIconDataUrl(value);
+  if (!result.ok || result.value === null) return null;
+  return { present: true, mimeType: result.mimeType, bytes: result.bytes };
+}
+
+/**
+ * Checks a project icon data URL, including the decoded byte limit and the
+ * file signature.  `null` means an explicit removal and is valid for a
+ * correction; callers can distinguish it from an invalid non-null value.
+ */
+export function validateProjectIconDataUrl(value, { maxBytes = PROJECT_ICON_MAX_BYTES } = {}) {
+  if (value === null || value === undefined || value === '') return { ok: true, value: null, mimeType: null, bytes: 0 };
+  if (typeof value !== 'string') return invalidIcon('type', 'アイコンはPNG、JPEG、WebPの画像を選んでください。');
+  const match = DATA_URL_PATTERN.exec(value);
+  if (!match) return invalidIcon('format', 'アイコンはPNG、JPEG、WebPの画像を選んでください。');
+  const [, mimeType, payload] = match;
+  if (!isCanonicalBase64(payload)) return invalidIcon('base64', 'アイコンの画像データを読み取れません。もう一度選んでください。');
+  const bytes = decodedLength(payload);
+  if (bytes === 0) return invalidIcon('empty', '空の画像は登録できません。');
+  if (bytes > maxBytes) return invalidIcon('too_large', `アイコンは${Math.floor(maxBytes / 1024)}KiB以下にしてください。`);
+  if (!matchesSignature(mimeType, payload, bytes)) return invalidIcon('signature', '画像形式とデータが一致しません。もう一度選んでください。');
+  return { ok: true, value, mimeType, bytes };
+}
+
+/** Human-readable type for a validated icon summary. */
+export function projectIconMimeLabel(mimeType) {
+  return MIME_LABELS[mimeType] ?? '画像';
+}
+
+/** A stable fallback mark for an unregistered project icon. */
+export function projectIconInitial(name) {
+  const text = typeof name === 'string' ? name.trim() : '';
+  return [...text][0]?.toUpperCase() ?? 'P';
+}
+
+/**
+ * Render an icon without putting the data URL into text content.  Fallback
+ * initials are drawn by CSS from `data-initial`, which keeps ledger accessible
+ * names and existing screen-reader text compact.
+ */
+export function renderProjectIcon(doc, value, name, { size = 'md' } = {}) {
+  const valid = validateProjectIconDataUrl(value);
+  const registered = valid.ok && valid.value;
+  const label = `${typeof name === 'string' && name.trim() ? name.trim() : 'プロジェクト'}のアイコン`;
+  const icon = doc.createElement('span');
+  icon.className = `bb-project-icon is-${size}${registered ? ' is-registered' : ' is-unregistered'}`;
+  icon.setAttribute('aria-label', registered ? label : `${label}（未登録）`);
+  icon.setAttribute('title', registered ? label : `${label}（未登録）`);
+  icon.setAttribute('data-state', registered ? 'registered' : 'unregistered');
+  if (registered) {
+    const image = doc.createElement('img');
+    image.setAttribute('src', value);
+    image.setAttribute('alt', '');
+    image.setAttribute('aria-hidden', 'true');
+    icon.append(image);
+  } else {
+    icon.setAttribute('data-initial', projectIconInitial(name));
+  }
+  return icon;
+}
+
+/** Reads a browser File as a data URL; validation is left to the caller. */
+export function readProjectIconFile(file) {
+  if (!file) return Promise.reject(new Error('icon_file_required'));
+  const Reader = globalThis.FileReader;
+  if (typeof Reader === 'function') {
+    return new Promise((resolve, reject) => {
+      const reader = new Reader();
+      reader.addEventListener?.('error', () => reject(new Error('icon_file_read_failed')));
+      reader.onerror = () => reject(new Error('icon_file_read_failed'));
+      reader.onload = () => {
+        if (typeof reader.result !== 'string') reject(new Error('icon_file_read_failed'));
+        else resolve(reader.result);
+      };
+      reader.readAsDataURL(file);
+    });
+  }
+  if (typeof file.arrayBuffer === 'function' && typeof globalThis.btoa === 'function') {
+    return file.arrayBuffer().then((buffer) => {
+      const bytes = new Uint8Array(buffer);
+      let binary = '';
+      for (const byte of bytes) binary += String.fromCharCode(byte);
+      const mimeType = typeof file.type === 'string' && file.type ? file.type : 'application/octet-stream';
+      return `data:${mimeType};base64,${globalThis.btoa(binary)}`;
+    });
+  }
+  return Promise.reject(new Error('icon_file_reader_unavailable'));
+}
+
+function invalidIcon(code, message) {
+  return { ok: false, code, message };
+}
+
+function isCanonicalBase64(value) {
+  if (!value || value.length % 4 !== 0 || !/^[A-Za-z0-9+/]*={0,2}$/u.test(value)) return false;
+  const padding = value.endsWith('==') ? 2 : value.endsWith('=') ? 1 : 0;
+  const meaningful = value.length - padding;
+  if (meaningful === 0) return false;
+  const last = BASE64_ALPHABET.indexOf(value[meaningful - 1]);
+  if (last < 0) return false;
+  if (padding === 1 && (last & 0x03) !== 0) return false;
+  if (padding === 2 && (last & 0x0f) !== 0) return false;
+  return true;
+}
+
+function decodedLength(value) {
+  const padding = value.endsWith('==') ? 2 : value.endsWith('=') ? 1 : 0;
+  return (value.length / 4) * 3 - padding;
+}
+
+function base64Byte(value, index) {
+  const group = Math.floor(index / 3) * 4;
+  const a = BASE64_ALPHABET.indexOf(value[group]);
+  const b = BASE64_ALPHABET.indexOf(value[group + 1]);
+  const c = value[group + 2] === '=' ? 0 : BASE64_ALPHABET.indexOf(value[group + 2]);
+  const d = value[group + 3] === '=' ? 0 : BASE64_ALPHABET.indexOf(value[group + 3]);
+  const first = (a << 2) | (b >> 4);
+  const second = ((b & 0x0f) << 4) | (c >> 2);
+  const third = ((c & 0x03) << 6) | d;
+  const offset = index % 3;
+  return offset === 0 ? first : offset === 1 ? second : third;
+}
+
+function matchesSignature(mimeType, payload, bytes) {
+  if (mimeType === 'image/png') return bytes >= PNG_SIGNATURE.length && PNG_SIGNATURE.every((byte, index) => base64Byte(payload, index) === byte);
+  if (mimeType === 'image/jpeg') return bytes >= 4 && base64Byte(payload, 0) === 0xff && base64Byte(payload, 1) === 0xd8 && base64Byte(payload, 2) === 0xff
+    && base64Byte(payload, bytes - 2) === 0xff && base64Byte(payload, bytes - 1) === 0xd9;
+  return bytes >= 12 && base64Byte(payload, 0) === 0x52 && base64Byte(payload, 1) === 0x49 && base64Byte(payload, 2) === 0x46 && base64Byte(payload, 3) === 0x46
+    && base64Byte(payload, 8) === 0x57 && base64Byte(payload, 9) === 0x45 && base64Byte(payload, 10) === 0x42 && base64Byte(payload, 11) === 0x50;
+}

package/ui/workspace-kit.css

@@ -286,9 +286,20 @@
 
 .bb-ws-ledger-object {
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   gap: 4px;
 }
 
+.bb-ws-ledger-object:has(> .bb-project-icon) {
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+}
+
+.bb-ws-ledger-object:has(> .bb-project-icon) > strong,
+.bb-ws-ledger-object:has(> .bb-project-icon) > code {
+  grid-column: 2;
+}
+
 .bb-ws-ledger-object strong {
   overflow: hidden;
   color: var(--bb-color-ink);

package/ui/workspace-kit.js

@@ -139,7 +139,8 @@ function ledgerRowLabel(cells = []) {
 /**
  * A ledger: a header row and selectable rows. `className` sets the column
  * template in the caller's CSS. A cell is text, an element, `{ text, className }`,
- * or `{ primary, secondary }` for a name with its id underneath.
+ * or `{ primary, secondary, leading }` for a name with its id underneath and
+ * an optional leading element (for example a project icon).
  */
 export function workspaceLedger(doc, { columns = [], rows = [], className = '', ariaLabel, empty } = {}) {
   const ledger = el(doc, 'div', { className: `bb-ws-ledger${className ? ` ${className}` : ''}`, attrs: { role: 'table', 'aria-label': ariaLabel } });
@@ -165,6 +166,7 @@ export function workspaceLedger(doc, { columns = [], rows = [], className = '',
     for (const cell of row.cells ?? []) {
       if (cell && typeof cell === 'object' && 'primary' in cell) {
         const object = el(doc, 'span', { className: 'bb-ws-ledger-object', attrs: { role: 'cell' } });
+        if (cell.leading && typeof cell.leading.tagName === 'string') object.append(cell.leading);
         object.append(el(doc, 'strong', { text: cell.primary }));
         if (cell.secondary) object.append(el(doc, 'code', { text: cell.secondary }));
         item.append(object);
@@ -185,9 +187,10 @@ export function workspaceLedger(doc, { columns = [], rows = [], className = '',
 }
 
 /** The selected item's head in the right rail. */
-export function workspaceRailHead(doc, { kicker, title, sub, lead } = {}) {
+export function workspaceRailHead(doc, { kicker, title, sub, lead, leading } = {}) {
   const head = el(doc, 'div', { className: 'bb-ws-rail-head' });
   if (kicker) head.append(el(doc, 'small', { text: kicker }));
+  if (leading && typeof leading.tagName === 'string') head.append(leading);
   head.append(el(doc, 'h2', { text: title }));
   if (sub) head.append(el(doc, 'span', { text: sub }));
   if (lead) head.append(el(doc, 'p', { text: lead }));