@unson/brainbase-mcp 0.16.0 → 0.17.1

package/dist/graph-corrections.d.ts

@@ -11,11 +11,13 @@ export declare const GRAPH_CORRECTION_SCHEMA: "brainbase-graph-correction.v1";
 /** Relative to the data directory. Committed as a sidecar of the canonical SSOT transaction. */
 export declare const GRAPH_CORRECTIONS_FILE = "evidence/graph-corrections.jsonl";
 export declare const GRAPH_CORRECTION_ENTITY_FIELDS: readonly ["name", "aliases", "summary", "validFrom", "validTo"];
-export declare const GRAPH_CORRECTION_PROJECT_FIELDS: readonly ["goal", "status"];
+export declare const GRAPH_CORRECTION_PROJECT_FIELDS: readonly ["goal", "status", "icon"];
 export declare const GRAPH_CORRECTION_EDGE_FIELDS: readonly ["role", "context", "validTo"];
 export declare const GRAPH_CORRECTION_NEW_EDGE_RELATIONS: readonly ["participates_in", "accountable_for", "member_of"];
 /** MCP tools that read the same graph.json on every call and therefore see a saved correction next time. */
 export declare const GRAPH_CORRECTION_APPLIES_TO: readonly ["search", "get_context", "resolve_entity"];
+/** Decoded bytes, shared with the browser-side project-icon helper. */
+export declare const PROJECT_ICON_MAX_BYTES: number;
 export type GraphCorrectionKind = 'update_entity' | 'update_edge' | 'create_edge';
 export type GraphNewEdgeRelation = typeof GRAPH_CORRECTION_NEW_EDGE_RELATIONS[number];
 export interface GraphEntityCorrectionChanges {
@@ -28,6 +30,8 @@ export interface GraphEntityCorrectionChanges {
     goal?: string | null;
     /** Projects only. Stored as `metadata.status`. */
     status?: string | null;
+    /** Projects only. Stored as `metadata.icon` as a bounded PNG/JPEG/WebP data URL. */
+    icon?: string | null;
 }
 export interface GraphEdgeCorrectionChanges {
     role?: string | null;
@@ -155,3 +159,5 @@ export declare function readGraphCorrectionHistory(dataDir: string): Promise<{
     records: GraphCorrectionRecord[];
     issues: GraphCorrectionHistoryIssue[];
 }>;
+/** Returns true only for a bounded, signature-checked project icon data URL. */
+export declare function isProjectIconDataUrl(value: unknown): value is string;

package/dist/graph-corrections.js

@@ -18,7 +18,7 @@ export const GRAPH_CORRECTION_SCHEMA = 'brainbase-graph-correction.v1';
 /** Relative to the data directory. Committed as a sidecar of the canonical SSOT transaction. */
 export const GRAPH_CORRECTIONS_FILE = 'evidence/graph-corrections.jsonl';
 export const GRAPH_CORRECTION_ENTITY_FIELDS = ['name', 'aliases', 'summary', 'validFrom', 'validTo'];
-export const GRAPH_CORRECTION_PROJECT_FIELDS = ['goal', 'status'];
+export const GRAPH_CORRECTION_PROJECT_FIELDS = ['goal', 'status', 'icon'];
 export const GRAPH_CORRECTION_EDGE_FIELDS = ['role', 'context', 'validTo'];
 export const GRAPH_CORRECTION_NEW_EDGE_RELATIONS = ['participates_in', 'accountable_for', 'member_of'];
 /** MCP tools that read the same graph.json on every call and therefore see a saved correction next time. */
@@ -27,6 +27,8 @@ const MAX_REASON_LENGTH = 500;
 const MAX_NAME_LENGTH = 200;
 const MAX_TEXT_LENGTH = 2000;
 const MAX_ALIASES = 50;
+/** Decoded bytes, shared with the browser-side project-icon helper. */
+export const PROJECT_ICON_MAX_BYTES = 256 * 1024;
 const DIGEST_PATTERN = /^sha256:[0-9a-f]{64}$/u;
 const PROJECTED_RELATIONS = new Set(['participates_in', 'accountable_for']);
 export class GraphCorrectionError extends Error {
@@ -213,8 +215,8 @@ function planEntityUpdate(graph, relationships, correction, at) {
     const before = matches[0];
     assertExpectedDigest('entity', before, correction.expectedDigest);
     const changes = correction.changes;
-    if ((changes.goal !== undefined || changes.status !== undefined) && before.type !== 'project') {
-        invalid('correction_field_not_allowed', 'goal and status can be corrected only on a project');
+    if ((changes.goal !== undefined || changes.status !== undefined || changes.icon !== undefined) && before.type !== 'project') {
+        invalid('correction_field_not_allowed', 'goal, status and icon can be corrected only on a project');
     }
     const after = structuredClone(before);
     const diff = {};
@@ -228,7 +230,7 @@ function planEntityUpdate(graph, relationships, correction, at) {
         setField(after, 'validFrom', changes.validFrom, before, diff);
     if (changes.validTo !== undefined)
         setField(after, 'validTo', changes.validTo, before, diff);
-    if (changes.goal !== undefined || changes.status !== undefined) {
+    if (changes.goal !== undefined || changes.status !== undefined || changes.icon !== undefined) {
         const metadata = { ...(before.metadata ?? {}) };
         for (const key of ['goal', 'status']) {
             const next = changes[key];
@@ -243,6 +245,18 @@ function planEntityUpdate(graph, relationships, correction, at) {
                 metadata[key] = next;
             diff[`metadata.${key}`] = { before: previous, after: next };
         }
+        if (changes.icon !== undefined) {
+            const previous = typeof metadata.icon === 'string' ? metadata.icon : null;
+            const next = changes.icon;
+            if (previous !== next) {
+                if (next === null)
+                    delete metadata.icon;
+                else
+                    metadata.icon = next;
+                // Keep image bytes and the long data URL out of append-only history.
+                diff['metadata.icon'] = { before: projectIconSummary(previous), after: projectIconSummary(next) };
+            }
+        }
         if (Object.keys(metadata).length > 0)
             after.metadata = metadata;
         else
@@ -488,6 +502,8 @@ function parseEntityChanges(value) {
         changes.goal = optionalText(value.goal, 'changes.goal', MAX_TEXT_LENGTH);
     if (value.status !== undefined)
         changes.status = optionalText(value.status, 'changes.status', MAX_NAME_LENGTH);
+    if (value.icon !== undefined)
+        changes.icon = parseProjectIcon(value.icon);
     return changes;
 }
 function parseEdgeChanges(value) {
@@ -577,6 +593,75 @@ function optionalDateTime(value, field) {
     }
     return value;
 }
+const PROJECT_ICON_DATA_URL = /^data:(image\/(?:png|jpeg|webp));base64,([A-Za-z0-9+/]*={0,2})(?![\s\S])/u;
+function parseProjectIcon(value) {
+    if (value === null)
+        return null;
+    if (typeof value !== 'string')
+        invalid('correction_invalid', 'changes.icon must be a PNG, JPEG, WebP data URL or null');
+    const match = PROJECT_ICON_DATA_URL.exec(value);
+    if (!match || value.length === 0)
+        invalid('correction_invalid', 'changes.icon must be a PNG, JPEG, WebP data URL or null');
+    const payload = match[2];
+    if (!payload || payload.length % 4 !== 0 || !/^[A-Za-z0-9+/]*={0,2}$/u.test(payload)) {
+        invalid('correction_invalid', 'changes.icon must contain canonical base64 data');
+    }
+    let decoded;
+    try {
+        decoded = Buffer.from(payload, 'base64');
+    }
+    catch {
+        invalid('correction_invalid', 'changes.icon contains invalid base64 data');
+    }
+    if (decoded.length === 0 || decoded.toString('base64') !== payload) {
+        invalid('correction_invalid', 'changes.icon contains invalid base64 data');
+    }
+    if (decoded.length > PROJECT_ICON_MAX_BYTES) {
+        invalid('correction_invalid', `changes.icon must be at most ${PROJECT_ICON_MAX_BYTES} decoded bytes`);
+    }
+    const mimeType = match[1];
+    const validSignature = mimeType === 'image/png'
+        ? decoded.length >= 8 && Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]).equals(decoded.subarray(0, 8))
+        : mimeType === 'image/jpeg'
+            ? decoded.length >= 4 && decoded[0] === 0xff && decoded[1] === 0xd8 && decoded[2] === 0xff
+                && decoded[decoded.length - 2] === 0xff && decoded[decoded.length - 1] === 0xd9
+            : decoded.length >= 12 && decoded.subarray(0, 4).toString('ascii') === 'RIFF'
+                && decoded.subarray(8, 12).toString('ascii') === 'WEBP';
+    if (!validSignature)
+        invalid('correction_invalid', 'changes.icon image signature does not match its MIME type');
+    return value;
+}
+/** Returns true only for a bounded, signature-checked project icon data URL. */
+export function isProjectIconDataUrl(value) {
+    if (value === null)
+        return false;
+    try {
+        return parseProjectIcon(value) !== null;
+    }
+    catch (error) {
+        if (error instanceof GraphCorrectionError && error.kind === 'invalid')
+            return false;
+        throw error;
+    }
+}
+function projectIconSummary(value) {
+    if (value === null || value === undefined)
+        return null;
+    if (typeof value !== 'string')
+        return { present: true, valid: false };
+    const match = PROJECT_ICON_DATA_URL.exec(value);
+    if (!match)
+        return { present: true, valid: false };
+    if (!isProjectIconDataUrl(value))
+        return { present: true, valid: false };
+    try {
+        const decoded = Buffer.from(match[2], 'base64');
+        return { present: true, valid: true, mimeType: match[1], bytes: decoded.length };
+    }
+    catch {
+        return { present: true, valid: false };
+    }
+}
 function requireId(value, field) {
     if (typeof value !== 'string' || value.trim() === '' || value.length > 500)
         invalid('correction_invalid', `${field} must be a non-empty id`);

package/dist/graph-web-http.js

@@ -2,7 +2,9 @@ import { applyGraphCorrection, GraphCorrectionError } from './graph-corrections.
 import { GraphWebError, listGraphProjects, readGraphEntity, readGraphOntology, readGraphProject, readGraphWebStatus, searchGraphEntities } from './graph-web.js';
 export const GRAPH_WEB_HTTP_VERSION = 'graph-web-http.v1';
 const DEFAULT_BASE_PATH = '/api/graph';
-const MAX_BODY_BYTES = 16 * 1024;
+// A 256KiB decoded image becomes roughly 350KiB as base64 in JSON. Keep a
+// bounded request envelope while allowing the project-icon correction through.
+const MAX_BODY_BYTES = 512 * 1024;
 class HttpError extends Error {
     statusCode;
     code;

package/dist/graph-web.d.ts

@@ -74,6 +74,8 @@ export interface GraphEntityView {
     digest: string;
     goal?: string | null;
     status?: string | null;
+    /** Projects only. A validated PNG/JPEG/WebP data URL, or null when unset. */
+    icon?: string | null;
 }
 export type GraphProvenanceReference = {
     status: 'none';

package/dist/graph-web.js

@@ -2,7 +2,7 @@ import { access, readdir, readFile } from 'node:fs/promises';
 import { join } from 'node:path';
 import { isActiveAt } from './canonical-graph.js';
 import { assertFoundationCatalog, findFoundationRecord } from './foundation-catalog.js';
-import { GRAPH_CORRECTION_EDGE_FIELDS, GRAPH_CORRECTION_ENTITY_FIELDS, GRAPH_CORRECTION_NEW_EDGE_RELATIONS, GRAPH_CORRECTION_PROJECT_FIELDS, GRAPH_CORRECTIONS_FILE, graphRecordDigest, readGraphCorrectionHistory } from './graph-corrections.js';
+import { GRAPH_CORRECTION_EDGE_FIELDS, GRAPH_CORRECTION_ENTITY_FIELDS, GRAPH_CORRECTION_NEW_EDGE_RELATIONS, GRAPH_CORRECTION_PROJECT_FIELDS, GRAPH_CORRECTIONS_FILE, graphRecordDigest, isProjectIconDataUrl, readGraphCorrectionHistory } from './graph-corrections.js';
 import { ONTOLOGY_VERSION, portableOntology } from './ontology.js';
 import { canonicalRelationRegistry, getCanonicalRelation } from './relation-registry.js';
 import { loadPersonalOs } from './ssot.js';
@@ -534,11 +534,23 @@ function entityView(entity, asOf) {
         validTo: entity.validTo ?? null,
         active: isActiveAt(entity, asOf),
         digest: graphRecordDigest(entity),
-        ...(entity.type === 'project' ? { goal: metadataString(entity, 'goal'), status: metadataString(entity, 'status') } : {})
+        ...(entity.type === 'project'
+            ? { goal: metadataString(entity, 'goal'), status: metadataString(entity, 'status'), icon: projectIconString(entity) }
+            : {})
     };
 }
 function projectView(project, asOf) {
-    return { ...entityView(project, asOf), type: 'project', goal: metadataString(project, 'goal'), status: metadataString(project, 'status') };
+    return {
+        ...entityView(project, asOf),
+        type: 'project',
+        goal: metadataString(project, 'goal'),
+        status: metadataString(project, 'status'),
+        icon: projectIconString(project),
+    };
+}
+function projectIconString(entity) {
+    const value = entity.metadata?.icon;
+    return isProjectIconDataUrl(value) ? value : null;
 }
 function historyFor(records, ids) {
     return records.filter((record) => ids.has(record.target.id)).reverse();

package/dist/local-web-host.js

@@ -683,6 +683,7 @@ export function createGraphWebModule(context) {
     return {
         id: 'graph',
         uiFiles: [
+            'project-icon.js',
             'graph-view-shared.js',
             'graph-view-shared.css',
             'graph-projects-view.js',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unson/brainbase-mcp",
-  "version": "0.16.0",
+  "version": "0.17.1",
   "description": "Local-first Brainbase judgment OS that lets supported AI agents reuse a user's approved goals, priorities, decisions, and judgment criteria.",
   "type": "module",
   "license": "MIT",
@@ -228,6 +228,7 @@
     "./ui/workspace-kit.css": "./ui/workspace-kit.css",
     "./ui/graph-view-shared": "./ui/graph-view-shared.js",
     "./ui/graph-view-shared.css": "./ui/graph-view-shared.css",
+    "./ui/project-icon": "./ui/project-icon.js",
     "./ui/graph-own-share": "./ui/graph-own-share.js",
     "./ui/graph-projects-view": "./ui/graph-projects-view.js",
     "./ui/graph-projects-view.css": "./ui/graph-projects-view.css",
@@ -358,5 +359,5 @@
   "engines": {
     "node": ">=20"
   },
-  "gitHead": "a0914d025914d4ada329b730aeddd6488f28bcfd"
+  "gitHead": "e7f165e9a2dd0ebbcb0a561160f927afbad95b95"
 }

package/ui/graph-projects-view.js

@@ -5,7 +5,8 @@
  * Built on the organization edition's screen pattern (workspace kit): the
  * workspace has the page head, the source notice, summary metrics and the
  * project ledger; the right rail has the selected project — its outline, each
- * 関係者 and the corrections.  The first project is selected on load.
+ * 関係者 and the corrections.  The first project is selected on load when the
+ * host has not provided a selection.
  *
  * Reads `GET {base}/projects` and `GET {base}/projects/:id` and corrects
  * through `POST {base}/corrections` (see `graph-view-shared.js`).  「関係者」
@@ -55,6 +56,7 @@ import {
   graphHostEmptyNotice,
 } from './graph-view-shared.js';
 import { graphOwnShareSource, ownProjectDetail, ownShareSection, ownShareStateNotice } from './graph-own-share.js';
+import { renderProjectIcon } from './project-icon.js';
 import {
   createProjectKnowledgeWorkspace,
   normalizeProjectContext,
@@ -208,8 +210,9 @@ function normalizeProjectSummary(value) {
  *   history).  Called synchronously on every rail render while a project is selected, with the read
  *   project detail, or null while it loads or when it could not be read.  A throw or a value that is
  *   not a node is shown as a small danger notice instead of breaking the rail.
- * @param {string} [options.selectedId] The project to select first.  When absent or not in the
- *   list, the first project is selected, as by default.
+ * @param {string} [options.selectedId] The project to select first. When it
+ *   is absent, the first project is selected. When it is not in the list, the
+ *   requested id stays selected and the rail shows not found.
  * @param {(id: string) => void} [options.onSelect] Called when the view changes the selection itself
  *   (a ledger row, or the automatic first project).  Not called for `select(id)`.
  * @param {{ basePath: string, fetcher?: Function, label?: string }} [options.ownShare]
@@ -617,7 +620,7 @@ export function createGraphProjectsView({
           void reading;
         },
         cells: [
-          { primary: project.name, secondary: project.id },
+          { primary: project.name, secondary: project.id, leading: renderProjectIcon(doc, project.icon, project.name, { size: 'sm' }) },
           textCell(project.goal, '目的未記入'),
           accountableCell(project),
           textCell(project.status, '未記入'),
@@ -721,7 +724,7 @@ export function createGraphProjectsView({
     const project = loaded?.project ?? listItem(state.selectedId) ?? { id: state.selectedId, name: state.selectedId };
     // The record a host's read-only note may point at.
     const noteSubject = { id: project.id, type: 'project', metadata: loaded?.project?.metadata ?? {} };
-    const children = [workspaceRailHead(doc, { kicker: 'プロジェクト', title: project.name, sub: project.id })];
+    const children = [workspaceRailHead(doc, { kicker: 'プロジェクト', title: project.name, sub: project.id, leading: renderProjectIcon(doc, project.icon, project.name) })];
     if (!loaded) {
       const readState = detail?.id === state.selectedId
         ? detail
@@ -756,7 +759,7 @@ export function createGraphProjectsView({
     children.push(renderParticipants(loaded));
     if (writable) {
       const canAdd = scope.createEdges;
-      const projectFields = scope.entity('project') ? scope.fields(['name', 'goal', 'status']) : [];
+      const projectFields = scope.entity('project') ? scope.fields(['name', 'goal', 'status', 'icon']) : [];
       const actions = [
         canAdd ? workspaceButton(doc, {
           text: '関係者を加える',
@@ -809,7 +812,7 @@ export function createGraphProjectsView({
       return state.list;
     }
     const { projects } = state.list.payload;
-    if (!state.selectedId || !projects.some((project) => project.id === state.selectedId)) {
+    if (!state.selectedId) {
       if (correction.form) correction.close();
       state.panelAt = null;
       state.detail = null;
@@ -824,7 +827,22 @@ export function createGraphProjectsView({
         if (viewDestroyed || request !== hostListRequest) return state.list;
         return state.list;
       }
-    } else if (state.detail?.id !== state.selectedId) {
+    } else if (!projects.some((project) => project.id === state.selectedId)) {
+      // An explicit host selection, or a project selected by the user, must
+      // never be replaced with the first row when the refreshed list no
+      // longer contains it.  Keeping the id makes the missing target visible
+      // and lets the host decide whether its identity or access changed.
+      if (correction.form) correction.close();
+      detailRequest += 1;
+      state.panelAt = null;
+      state.detail = {
+        id: state.selectedId,
+        state: 'not_found',
+        reason: 'このプロジェクトは一覧から見つかりません。一覧を読み直してください。',
+      };
+      state.context = null;
+      contextRequest += 1;
+    } else if (state.detail?.id !== state.selectedId || state.detail?.state === 'not_found') {
       // The project the host asked for is listed; read it for the rail.
       if (viewDestroyed || request !== hostListRequest) return state.list;
       await controller.loadDetail(state.selectedId);

package/ui/graph-view-shared.css

@@ -100,6 +100,55 @@
   min-width: 0;
 }
 
+/* Project marks are shared by the ledger, rail and correction readback. The
+   unregistered initial is painted from an attribute so it never pollutes the
+   ledger's accessible project name or correction history with data URLs. */
+.bb-project-icon {
+  display: inline-grid;
+  flex: 0 0 36px;
+  place-items: center;
+  width: 36px;
+  height: 36px;
+  overflow: hidden;
+  border: 1px solid var(--bb-color-border);
+  border-radius: var(--bb-radius-sm);
+  color: var(--bb-color-accent-strong);
+  background: var(--bb-color-accent-soft);
+  font-size: 15px;
+  font-weight: 750;
+  line-height: 1;
+}
+
+.bb-project-icon.is-sm {
+  flex-basis: 26px;
+  width: 26px;
+  height: 26px;
+  border-radius: 6px;
+  font-size: 11px;
+}
+
+.bb-project-icon::before { content: attr(data-initial); }
+.bb-project-icon.is-registered::before { content: ''; }
+.bb-project-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
+
+.bb-graph-icon-value,
+.bb-graph-icon-picker {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--bb-space-2);
+}
+
+.bb-graph-icon-picker { margin-top: var(--bb-space-2); }
+.bb-graph-icon-picker-state { color: var(--bb-color-muted); font-size: 12px; }
+.bb-graph-field-error { display: block; color: var(--bb-color-danger); font-size: 12px; }
+.bb-graph-correction .bb-project-icon { margin-right: var(--bb-space-1); }
+
+.bb-ws-ledger-object > .bb-project-icon {
+  grid-row: 1 / span 2;
+}
+.bb-ws-rail-head > .bb-project-icon { margin-bottom: var(--bb-space-3); }
+
 /* Compact items: each 関係者 or relation in the rail. */
 .bb-graph-compact-list {
   display: grid;

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). */
@@ -718,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),
   };
@@ -725,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) {
@@ -791,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;
@@ -846,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 } });
@@ -1010,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);
@@ -1034,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,
@@ -1079,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;
@@ -1115,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,
@@ -1164,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/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 }));