aimeat 1.25.0 → 1.26.0

package/dist/public/views/profile/organisms/activity-panel.js

@@ -0,0 +1,135 @@
+/**
+ * @file activity-panel.js
+ * @description Workspace activity panel — a GitHub-style contribution heatmap (every day split 2×2
+ *   into documents vs records × draft vs published) plus the recent activity log. Built from the
+ *   workspace activity feed (derived from version history). Extracted from organisms-tab.js, no
+ *   behaviour change.
+ * @structure buildHeatmap, hmCell (internal helpers), ActivityPanel
+ * @usage import { ActivityPanel } from '/views/profile/organisms/activity-panel.js';
+ * @version-history
+ *   v1.0.0 — 2026-06-19 — Extracted from organisms-tab.js during the module split.
+ */
+import { h } from 'preact';
+import { useState, useEffect } from 'preact/hooks';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+import { dt } from '/js/format.js';
+import * as orgService from '/js/services/organisms.js';
+
+/* Build a GitHub-style contribution calendar from activity events. Each day holds FOUR counters —
+ * documents draft/published and records (schema'd) draft/published — so a cell can be drawn as a 2×2
+ * quadrant. Returns { cols, monthLabels }: each col is 7 day-slots (Sun→Sat); a future slot is null.
+ * Deterministic from the event timestamps. */
+function buildHeatmap(byDay, today) {
+  const iso = (d) => d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');
+  const weeks = 53;                                         // always a full year ending today, GitHub-style
+  const start = new Date(today);
+  start.setDate(start.getDate() - (weeks * 7 - 1));
+  start.setDate(start.getDate() - start.getDay());          // align to the start of a week (Sunday)
+  const cols = []; const monthLabels = [];
+  let cur = new Date(start); let prevMonth = -1;
+  while (cur <= today) {
+    monthLabels.push(cur.getMonth() !== prevMonth ? cur.toLocaleString(undefined, { month: 'short' }) : '');
+    prevMonth = cur.getMonth();
+    const col = [];
+    for (let dow = 0; dow < 7; dow++) {
+      if (cur > today) { col.push(null); }
+      else { col.push({ date: iso(cur), b: byDay.get(iso(cur)) || null }); }
+      cur = new Date(cur); cur.setDate(cur.getDate() + 1);
+    }
+    cols.push(col);
+  }
+  return { cols, monthLabels };
+}
+const hmLevel = (n) => (n === 0 ? 0 : n <= 1 ? 1 : n <= 3 ? 2 : n <= 6 ? 3 : 4);
+const ZERO_DAY = { dd: 0, dp: 0, rd: 0, rp: 0, total: 0 };
+
+/* One heatmap day = a 2×2 grid: ↖ docs draft, ↗ docs published, ↙ records draft, ↘ records published.
+ * Each quadrant's shade is its own count's intensity. */
+function hmCell(date, b, key) {
+  const c = b || ZERO_DAY;
+  const tip = b
+    ? `${date} — docs: ${c.dd} draft / ${c.dp} published · records: ${c.rd} draft / ${c.rp} published`
+    : `${date} — no activity`;
+  return html`<span class="pj-hm-cell" key=${key} title=${tip}>
+    <i class="q lvl${hmLevel(c.dd)}"></i><i class="q lvl${hmLevel(c.dp)}"></i>
+    <i class="q lvl${hmLevel(c.rd)}"></i><i class="q lvl${hmLevel(c.rp)}"></i>
+  </span>`;
+}
+
+/* Activity panel — a GitHub-style contribution heatmap of the workspace's history, where every day is
+ * split 2×2 into documents vs records × draft vs published (quadrant shade = intensity) — plus the
+ * recent activity log (who did what, where, when), which doubles as an audit trail. Built from
+ * GET …/workspace/activity (derived from version history). */
+export function ActivityPanel({ orgId, wsId }) {
+  const [data, setData] = useState(null);
+  const [show, setShow] = useState(true);
+  useEffect(() => {
+    let cancelled = false;
+    const fetchIt = () => orgService.getWorkspaceActivity(orgId, wsId).then(d => { if (!cancelled) setData(d); }).catch(() => {});
+    fetchIt();
+    window.addEventListener('aimeat-live-update', fetchIt);
+    return () => { cancelled = true; window.removeEventListener('aimeat-live-update', fetchIt); };
+  }, [orgId, wsId]);
+  if (!data || !(data.events || []).length) return null;
+  const events = data.events;
+  const byDay = new Map();
+  for (const e of events) {
+    const day = (e.at || '').slice(0, 10); if (!day) continue;
+    const b = byDay.get(day) || { dd: 0, dp: 0, rd: 0, rp: 0, total: 0 };
+    const doc = e.mode === 'document';
+    if (e.action === 'draft') { if (doc) b.dd++; else b.rd++; } else if (doc) b.dp++; else b.rp++;
+    b.total++; byDay.set(day, b);
+  }
+  const today = new Date(); today.setHours(0, 0, 0, 0);
+  const { cols, monthLabels } = buildHeatmap(byDay, today);
+
+  return html`
+    <div class="pj-chart">
+      <div class="pj-chart-head">
+        <span class="pj-chart-title">${'📊 '}${t('organisms.activity') || 'Activity'}<span class="pj-act-count">${data.total} ${t('organisms.events') || 'events'}</span></span>
+        <button class="btn-ghost btn-sm" onClick=${() => setShow(s => !s)}>${show ? (t('organisms.hide') || 'Hide') : (t('organisms.show') || 'Show')}</button>
+      </div>
+      ${show ? html`
+        <div class="pj-act">
+          <div class="pj-hm">
+            <div class="pj-hm-monthrow">${monthLabels.map((m, i) => html`<span class="pj-hm-month" key=${i}>${m}</span>`)}</div>
+            <div class="pj-hm-body">
+              <div class="pj-hm-daycol"><span></span><span>${t('organisms.mon') || 'Mon'}</span><span></span><span>${t('organisms.wed') || 'Wed'}</span><span></span><span>${t('organisms.fri') || 'Fri'}</span><span></span></div>
+              <div class="pj-hm-cols">
+                ${cols.map((col, ci) => html`<div class="pj-hm-col" key=${ci}>
+                  ${col.map((cell, ri) => cell === null
+                    ? html`<span class="pj-hm-cell future" key=${ri}></span>`
+                    : hmCell(cell.date, cell.b, ri))}
+                </div>`)}
+              </div>
+            </div>
+          </div>
+          <div class="pj-hm-legend">
+            <div class="pj-hm-quadkey">
+              <span class="pj-hm-cell"><i class="q lvl1"></i><i class="q lvl3"></i><i class="q lvl2"></i><i class="q lvl4"></i></span>
+              <div class="pj-hm-quadlabels">
+                <span>${'↖ '}${t('organisms.docsDraft') || 'Docs draft'}</span><span>${'↗ '}${t('organisms.docsPublished') || 'Docs published'}</span>
+                <span>${'↙ '}${t('organisms.recordsDraft') || 'Records draft'}</span><span>${'↘ '}${t('organisms.recordsPublished') || 'Records published'}</span>
+              </div>
+            </div>
+            <div class="pj-hm-intensity">
+              <span>${t('organisms.less') || 'Less'}</span>
+              <i class="q lvl0"></i><i class="q lvl1"></i><i class="q lvl2"></i><i class="q lvl3"></i><i class="q lvl4"></i>
+              <span>${t('organisms.more') || 'More'}</span>
+            </div>
+          </div>
+          <div class="pj-act-list">
+            ${events.slice(0, 20).map((e, i) => html`<div class="pj-act-item" key=${i}>
+              <span class="pj-act-dot ${e.action}"></span>
+              <span class="pj-act-time">${dt(e.at)}</span>
+              <span class="pj-act-who">${(e.actor)}</span>
+              ${e.agent ? html`<span class="pj-act-agent" title=${t('organisms.viaAgent') || 'via this agent'}>${'🤖 '}${(e.agent)}</span>` : null}
+              <span class="pj-act-act">${e.action === 'publish' ? (t('organisms.publishedVerb') || 'published') : (t('organisms.editedVerb') || 'edited')}</span>
+              <span class="pj-act-what">${(e.mode === 'document' ? '📄' : '🗂')} ${(e.type)}${' / '}${(e.instance)}</span>
+            </div>`)}
+          </div>
+        </div>` : null}
+    </div>`;
+}

package/dist/public/views/profile/organisms/agents.js

@@ -0,0 +1,141 @@
+/**
+ * @file agents.js
+ * @description Organism Agents tab — attached agents listed first; "+ Attach agent" opens a picker
+ *   of the user's OWN agents (free-text GAII attach behind "Advanced"), with per-agent activity
+ *   context aggregated from the accessible workspaces. Extracted from organisms-tab.js, no behaviour
+ *   change.
+ * @structure OrgAgentsPanel
+ * @usage import { OrgAgentsPanel } from '/views/profile/organisms/agents.js';
+ * @version-history
+ *   v1.0.0 — 2026-06-19 — Extracted from organisms-tab.js during the module split.
+ */
+import { h } from 'preact';
+import { useState, useEffect } from 'preact/hooks';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+import { Spinner } from '/views/profile/shared.js';
+import { EmptyState } from '/components/EmptyState.js';
+import * as orgService from '/js/services/organisms.js';
+import { listAgents, offersWorkspaceContract, contractNamesOf } from '/js/services/agents.js';
+import { relTime } from '/views/profile/organisms/helpers.js';
+
+/**
+ * Agents tab — attached agents listed first; "+ Attach agent" opens a picker of the user's OWN
+ * agents (the node knows them — no GAII syntax needed), with free-text attach-by-ID behind an
+ * "Advanced" link for cross-node agents. Each row shows where the agent has acted (aggregated
+ * from the accessible workspaces' activity feeds) or, for own agents, when it was last active.
+ */
+export function OrgAgentsPanel({ org, ghii, canManage, showToast, onChanged }) {
+  const orgId = org.id;
+  const attached = org.agentGaiis || [];
+  const [mine, setMine] = useState(null);            // own agents (picker) — null = loading
+  const [pick, setPick] = useState('');
+  const [showAttach, setShowAttach] = useState(false);
+  const [showAdvanced, setShowAdvanced] = useState(false);
+  const [agentId, setAgentId] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [acted, setActed] = useState({});            // agent name → { count, lastAt, ws: Set }
+
+  useEffect(() => {
+    listAgents(ghii).then(a => setMine((a || []).filter(x => !String(x.name || '').startsWith('session-')))).catch(() => setMine([]));
+  }, [ghii]);
+
+  // Best-effort activity context: which workspaces each agent has touched, and when last.
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const wss = (await orgService.discoverWorkspaces(orgId)).filter(w => w.access !== 'none');
+        const map = {};
+        await Promise.all(wss.map(async (w) => {
+          const a = await orgService.getWorkspaceActivity(orgId, w.id);
+          for (const e of (a.events || [])) {
+            if (!e.agent) continue;
+            const m = map[e.agent] || (map[e.agent] = { count: 0, lastAt: '', ws: new Set() });
+            m.count++; m.ws.add(w.name || w.id);
+            if (!m.lastAt || e.at > m.lastAt) m.lastAt = e.at;
+          }
+        }));
+        if (!cancelled) setActed(map);
+      } catch { /* context is optional */ }
+    })();
+    return () => { cancelled = true; };
+  }, [orgId, attached.length]);
+
+  const run = async (fn, okMsg) => {
+    setBusy(true);
+    try {
+      const r = await fn();
+      if (r?.ok === false) showToast(r?.error?.message || (t('organisms.agentFailed') || 'Failed'));
+      else { if (okMsg) showToast(okMsg); onChanged?.(); }
+    } catch (e) { showToast((e && e.message) || (t('organisms.agentFailed') || 'Failed')); }
+    finally { setBusy(false); }
+  };
+  const attach = (g) => {
+    const id = (g || '').trim();
+    if (!id) return;
+    setPick(''); setAgentId(''); setShowAttach(false);
+    run(() => orgService.attachAgent(orgId, id), t('organisms.agentAttached') || 'Agent attached');
+  };
+  const detach = (g) => run(() => orgService.detachAgent(orgId, g), t('organisms.agentDetached') || 'Agent detached');
+
+  const attachedSet = new Set(attached);
+  const pickable = (mine || []).filter(a => a.gaii && !attachedSet.has(a.gaii));
+  const parseGaii = (g) => { const m = /^([^#]+)#([^@]+)@(.+)$/.exec(g) || []; return { name: m[1] || g, owner: m[2] || '', node: m[3] || '' }; };
+  const ownByGaii = new Map((mine || []).map(a => [a.gaii, a]));
+
+  return html`
+    <div class="card-detail">
+      <div class="pj-tabhead">
+        <div class="section-desc pj-tabhead-desc">${t('organisms.agentsDesc') || 'An attached agent works in this organism with its owner’s member rights — it shows up in workspace participants and activity.'}</div>
+        <button class="btn-primary btn-sm" onClick=${() => setShowAttach(s => !s)}>${'+ '}${t('organisms.attachAgent') || 'Attach agent'}</button>
+      </div>
+
+      ${showAttach ? html`
+        <div class="pj-attach">
+          ${mine === null ? html`<${Spinner} />` : (pickable.length > 0 ? html`
+            <div class="flex-row-wrap">
+              <select class="input-field input-sm" value=${pick} onChange=${e => setPick(e.target.value)}>
+                <option value="">${t('organisms.pickAgent') || 'Choose one of your agents…'}</option>
+                ${pickable.map(a => html`<option value=${a.gaii} key=${a.gaii}>${(a.display_name || a.name) + (offersWorkspaceContract(a) ? ` · 📜 ${t('organisms.contractTag') || 'contract'}` : '')}</option>`)}
+              </select>
+              <button class="btn-outline btn-sm" disabled=${busy || !pick} onClick=${() => attach(pick)}>${t('organisms.attach') || 'Attach'}</button>
+            </div>` : html`
+            <div class="section-desc">${t('organisms.noOwnAgentsLeft') || 'All your agents are already attached (or you have none yet).'}</div>`)}
+          <button class="pj-linklike" onClick=${() => setShowAdvanced(s => !s)}>${t('organisms.advancedAttach') || 'Advanced: attach by ID'}</button>
+          ${showAdvanced ? html`
+            <div class="flex-row-wrap">
+              <input class="input-field input-sm" placeholder=${t('organisms.agentGaiiPlaceholder') || 'agent#owner@node'} value=${agentId}
+                onInput=${(e) => setAgentId(e.target.value)} onKeyDown=${(e) => { if (e.key === 'Enter') attach(agentId); }} />
+              <button class="btn-outline btn-sm" disabled=${busy || !agentId.trim()} onClick=${() => attach(agentId)}>${t('organisms.attach') || 'Attach'}</button>
+            </div>` : null}
+        </div>` : null}
+
+      ${attached.length === 0 ? html`<${EmptyState} icon="🤖" text=${t('organisms.noAgents') || 'No agents attached.'} />` : null}
+      ${attached.map(g => {
+        const p = parseGaii(g);
+        const own = ownByGaii.get(g);
+        const act = acted[p.name];
+        return html`
+          <div class="pj-org-row" key=${'ag-' + g}>
+            <div class="pj-org-avatar" aria-hidden="true">${'🤖'}</div>
+            <div class="pj-org-main pj-org-main-static">
+              <div class="pj-org-titlerow">
+                <span class="pj-org-name">${(own?.display_name || p.name)}</span>
+                ${p.node ? html`<span class="badge badge-info">${(p.node)}</span>` : null}
+                ${own && offersWorkspaceContract(own) ? html`<span class="badge badge-success" title=${(t('organisms.contractAgentHint') || 'Advertises a workspace contract') + (contractNamesOf(own).length ? `: ${contractNamesOf(own).join(', ')}` : '')}>${'📜 '}${t('organisms.contractTag') || 'contract'}</span>` : null}
+              </div>
+              <div class="pj-org-desc" title=${g}>
+                <span class="mono">${(p.owner ? `${p.name}#${p.owner}` : g)}</span>
+                ${act ? html` · ${t('organisms.agentActedIn') || 'active in'} ${([...act.ws].join(', '))} (${act.count}) · ${relTime(act.lastAt)}`
+                  : (own?.last_seen ? html` · ${t('organisms.lastActive') || 'last active'} ${relTime(own.last_seen)}` : null)}
+              </div>
+            </div>
+            ${(canManage || g.includes('#' + ghii + '@'))
+              ? html`<button class="btn-outline btn-sm" disabled=${busy} onClick=${() => detach(g)}>${t('organisms.detach') || 'Detach'}</button>`
+              : null}
+          </div>`;
+      })}
+    </div>`;
+}

package/dist/public/views/profile/organisms/document.js

@@ -0,0 +1,274 @@
+/**
+ * @file document.js
+ * @description Document-space editor + viewer for organism workspaces: a read-only DocumentView
+ *   (markdown render, private-image resolution, Draft/Published compare toggle) and a DocumentEditor
+ *   (Toast UI WYSIWYG with a markdown fallback, image upload + per-image visibility). Lazy-loads the
+ *   vendored Toast UI Editor. Extracted from organisms-tab.js with no behaviour change.
+ * @structure loadToastUI (internal), DocumentView, DocumentEditor
+ * @usage import { DocumentView, DocumentEditor } from '/views/profile/organisms/document.js';
+ * @version-history
+ *   v1.0.0 — 2026-06-19 — Extracted from organisms-tab.js during the module split.
+ */
+import { h } from 'preact';
+import { useState, useEffect, useRef } from 'preact/hooks';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+import { VisibilityPill } from '/views/profile/shared.js';
+import { KeyValueRow } from '/components/KeyValueRow.js';
+import { Markdown } from '/components/Markdown.js';
+import { dt } from '/js/format.js';
+import * as orgService from '/js/services/organisms.js';
+
+// Lazy-load the vendored Toast UI Editor (MIT, /lib/toastui/) only when a document is edited —
+// it's ~520KB, so it stays out of the main bundle. Resolves window.toastui.Editor.
+let _tuiPromise = null;
+function loadToastUI() {
+  if (window.toastui && window.toastui.Editor) return Promise.resolve(window.toastui.Editor);
+  if (_tuiPromise) return _tuiPromise;
+  _tuiPromise = new Promise((resolve, reject) => {
+    const css = document.createElement('link');
+    css.rel = 'stylesheet'; css.href = '/lib/toastui/toastui-editor.min.css';
+    document.head.appendChild(css);
+    const s = document.createElement('script');
+    s.src = '/lib/toastui/toastui-editor-all.min.js';
+    s.onload = () => (window.toastui && window.toastui.Editor) ? resolve(window.toastui.Editor) : reject(new Error('editor missing'));
+    s.onerror = () => reject(new Error('failed to load editor'));
+    document.head.appendChild(s);
+  });
+  return _tuiPromise;
+}
+
+/* Read-only document view. Renders the markdown, resolves private /v1/storage images (the GET needs
+ * the session token, so a plain <img> would break), and — when the document has BOTH an unpublished
+ * draft and a published version — offers a Draft/Published toggle so the two can be compared. The
+ * parent passes the merged `page` (the draft, carrying the published copy on `page._pub`). Remounted
+ * per document via `key`, so the toggle resets to "Draft" each time a document is opened. */
+export function DocumentView({ page, busy, onEdit, onPublish, onWikiLink, onPopOut }) {
+  const hasBoth = page._draft && page._pub;
+  const [tab, setTab] = useState('draft');
+  const shown = (hasBoth && tab === 'published') ? page._pub : page;
+  const [rendered, setRendered] = useState(shown.markdown || '');
+
+  // Resolve private /v1/storage images to auth'd blob: URLs IN THE MARKDOWN TEXT (declarative), then
+  // render that. Doing it in the text — instead of mutating <img src> after render — means a
+  // re-render (toggling Draft/Published, a live-update refresh) can never leave a stale or revoked
+  // object URL on a reused <img> node, which previously showed a broken image. Re-runs per version.
+  useEffect(() => {
+    let cancelled = false; const created = [];
+    const raw = shown.markdown || '';
+    setRendered(raw);   // show text/structure at once; images swap in a moment later
+    (async () => {
+      const urls = [...new Set(raw.match(/\/v1\/storage\/[^\s)\]"'>]+/g) || [])];
+      if (!urls.length) return;
+      let out = raw;
+      for (const su of urls) {
+        try { const bu = await orgService.fetchStorageObjectUrl(su); created.push(bu); out = out.split(su).join(bu); }
+        catch (e) { /* leave the storage URL — renders broken but never throws */ }
+      }
+      if (!cancelled) setRendered(out);
+    })();
+    return () => { cancelled = true; created.forEach(u => { try { URL.revokeObjectURL(u); } catch (e) { /* noop */ } }); };
+  }, [shown.markdown]);
+
+  // created/saved/published timestamps come from the workspace read (record metadata on the value).
+  const created = page._createdAt || page._pub?._createdAt;
+  const savedAt = page._draft ? page._updatedAt : null;          // draft = working copy → "last saved"
+  const publishedAt = page._pub?._updatedAt || (!page._draft && page._published ? page._updatedAt : null);
+
+  return html`
+    <div class="pj-doc-toolbar">
+      <span class="pj-doc-vtitle">${shown.title || shown.id || page.id}</span>
+      ${hasBoth ? html`
+        <div class="seg" role="tablist">
+          <button class="seg-btn ${tab === 'draft' ? 'active' : ''}" onClick=${() => setTab('draft')}>${t('organisms.draftVersion') || 'Draft'}</button>
+          <button class="seg-btn ${tab === 'published' ? 'active' : ''}" onClick=${() => setTab('published')}>${t('organisms.publishedVersion') || 'Published'}</button>
+        </div>` : null}
+      <button class="btn-ghost btn-sm" onClick=${onEdit}>${t('organisms.edit') || 'Edit'}</button>
+      ${page._draft ? html`<button class="btn-primary btn-sm" onClick=${onPublish} disabled=${busy}>${t('organisms.publish') || 'Publish'}</button>` : null}
+      ${onPopOut ? html`<button class="btn-ghost btn-sm pj-doc-popout" title=${t('organisms.popOut') || 'Open in its own window'} onClick=${onPopOut}>${'⧉'}</button>` : null}
+    </div>
+    ${(created || savedAt || publishedAt) ? html`
+      <div class="pj-doc-meta">
+        ${created ? html`<${KeyValueRow} label=${t('organisms.createdAt') || 'Created'} value=${dt(created)} />` : null}
+        ${savedAt ? html`<${KeyValueRow} label=${t('organisms.lastSaved') || 'Last saved'} value=${dt(savedAt)} />` : null}
+        ${publishedAt ? html`<${KeyValueRow} label=${t('organisms.publishedAt') || 'Published'} value=${dt(publishedAt)} />` : null}
+      </div>` : null}
+    <div class="pj-doc-view"><${Markdown} text=${rendered} onWikiLink=${onWikiLink} /></div>`;
+}
+
+/* Document editor: a Toast UI Editor (WYSIWYG, with its own built-in Markdown⇄WYSIWYG toggle, so
+ * non-technical users type like a document). Falls back to a plain markdown textarea + live preview
+ * if the editor can't load. Title is a separate Preact-controlled field. */
+export function DocumentEditor({ orgId, page, busy, onSave, onCancel }) {
+  const [title, setTitle] = useState((page && page.title) || '');
+  const [mode, setMode] = useState('rich');               // 'rich' = Toast UI; 'markdown' = fallback textarea
+  const [md, setMd] = useState((page && page.markdown) || '');
+  const containerRef = useRef(null);
+  const editorRef = useRef(null);
+  const imageMap = useRef({});                             // data: URL (shown in editor) → /v1/storage URL (saved)
+  const displayMap = useRef({});                           // blob: URL (shown in editor) → /v1/storage URL (saved) — for already-stored images
+  const pending = useRef([]);                              // in-flight image uploads — save() awaits these
+  const [saving, setSaving] = useState(false);
+  const [images, setImages] = useState([]);                // embedded /v1/storage images: [{key, alt, visibility}]
+  const [imgBusy, setImgBusy] = useState(false);
+
+  // Load the visibility of the document's already-saved /v1/storage images, so the author can make
+  // them public (a private image won't load for other viewers of a shared/published document).
+  // Newly-pasted images appear here after the first save + reopen.
+  useEffect(() => {
+    let cancelled = false;
+    const embedded = orgService.extractStorageImages((page && page.markdown) || '');
+    if (!embedded.length) { setImages([]); return undefined; }
+    orgService.listStorageVisibilities().then((vis) => {
+      if (!cancelled) setImages(embedded.map(e => ({ ...e, visibility: vis[e.key] || 'private' })));
+    }).catch(() => { if (!cancelled) setImages(embedded.map(e => ({ ...e, visibility: 'private' }))); });
+    return () => { cancelled = true; };
+  }, []);
+
+  const changeImageVisibility = async (key, visibility) => {
+    setImgBusy(true);
+    try {
+      const r = await orgService.setImageVisibility(key, visibility);
+      if (r?.ok === false) throw new Error(r?.error?.message || 'Failed');
+      setImages(imgs => imgs.map(i => i.key === key ? { ...i, visibility } : i));
+    } catch (e) { /* leave as-is; a failed toggle just doesn't change the pill */ }
+    finally { setImgBusy(false); }
+  };
+  const makeAllImagesPublic = async () => {
+    setImgBusy(true);
+    try {
+      const targets = images.filter(i => i.visibility !== 'public');
+      await Promise.all(targets.map(i => orgService.setImageVisibility(i.key, 'public').catch(() => {})));
+      setImages(imgs => imgs.map(i => ({ ...i, visibility: 'public' })));
+    } finally { setImgBusy(false); }
+  };
+
+  // Show the image instantly via a data URL, upload to storage in the background, and remember the
+  // mapping so save() rewrites the data URL to the storage URL. If the upload fails, the image stays
+  // inline (still renders + saves, just larger) — so an image NEVER silently disappears.
+  const uploadAndMap = (blob, dataUrl) => {
+    pending.current.push(
+      orgService.uploadImage(orgId, blob, blob.type || 'image/png')
+        .then((url) => { imageMap.current[dataUrl] = url; })
+        .catch(() => { /* keep the inline data URL */ }),
+    );
+  };
+  const insertFromFile = async (file) => {
+    if (!file) return;
+    const dataUrl = await orgService.blobToDataUrl(file);
+    if (mode === 'rich' && editorRef.current) editorRef.current.exec('addImage', { imageUrl: dataUrl, altText: file.name || 'image' });
+    else setMd((m) => m + `\n\n![${file.name || 'image'}](${dataUrl})\n`);
+    uploadAndMap(file, dataUrl);
+  };
+
+  useEffect(() => {
+    if (mode !== 'rich') return undefined;
+    let inst = null, cancelled = false; const blobUrls = [];
+    (async () => {
+      const Editor = await loadToastUI().catch(() => null);
+      if (cancelled) return;
+      if (!Editor) { setMode('markdown'); return; }
+      // Already-stored images embed a private /v1/storage URL, which a plain <img> in the editor
+      // can't load (the GET needs the session token). Fetch each with auth, show it as a blob: URL,
+      // and remember blob→storage so save() rewrites it back to the canonical storage URL.
+      let initial = (page && page.markdown) || '';
+      const urls = [...new Set(initial.match(/\/v1\/storage\/[^\s)\]"'>]+/g) || [])];
+      for (const su of urls) {
+        try {
+          const bu = await orgService.fetchStorageObjectUrl(su);
+          displayMap.current[bu] = su; blobUrls.push(bu);
+          initial = initial.split(su).join(bu);
+        } catch (e) { /* leave the storage URL — it renders broken but saves intact */ }
+      }
+      if (cancelled || !containerRef.current) return;
+      inst = new Editor({
+        el: containerRef.current,
+        height: '440px',
+        initialEditType: 'wysiwyg',
+        previewStyle: 'tab',
+        initialValue: initial,
+        usageStatistics: false,
+        // Drop Toast UI's own image button — its file popup is unreliable; the "📷 Insert image"
+        // button above is the image path (and paste/drag still work via the hook below).
+        toolbarItems: [
+          ['heading', 'bold', 'italic', 'strike'],
+          ['hr', 'quote'],
+          ['ul', 'ol', 'task', 'indent', 'outdent'],
+          ['table', 'link'],
+          ['code', 'codeblock'],
+        ],
+        hooks: {
+          // Paste/drag an image → insert it as a data URL (shows at once) + upload in the background.
+          addImageBlobHook: async (blob, callback) => {
+            const dataUrl = await orgService.blobToDataUrl(blob);
+            callback(dataUrl, '');
+            uploadAndMap(blob, dataUrl);
+          },
+        },
+      });
+      editorRef.current = inst;
+    })();
+    return () => {
+      cancelled = true;
+      if (inst) { try { inst.destroy(); } catch (e) { /* noop */ } }
+      editorRef.current = null;
+      blobUrls.forEach(u => { try { URL.revokeObjectURL(u); } catch (e) { /* noop */ } });
+    };
+  }, [mode]);
+
+  const save = async () => {
+    setSaving(true);
+    try {
+      if (pending.current.length) { await Promise.all(pending.current); pending.current = []; }  // finish uploads first
+      let markdown = (mode === 'rich' && editorRef.current) ? editorRef.current.getMarkdown() : md;
+      for (const [dataUrl, storageUrl] of Object.entries(imageMap.current)) markdown = markdown.split(dataUrl).join(storageUrl);
+      for (const [blobUrl, storageUrl] of Object.entries(displayMap.current)) markdown = markdown.split(blobUrl).join(storageUrl);
+      // Point each image at the URL form its visibility needs: public → /v1/pub/<ghii>/<key> (loads
+      // for any viewer), private → /v1/storage/<key> (owner-only). So a public document's images render.
+      const visByKey = {}; for (const im of images) visByKey[im.key] = im.visibility;
+      markdown = orgService.applyImageVisibilityUrls(markdown, visByKey, orgService.currentGhii());
+      onSave({ ...page, title: title.trim(), markdown });
+    } finally { setSaving(false); }
+  };
+
+  return html`
+    <div class="pj-doc-editor">
+      <input type="text" class="input-field input-sm" placeholder=${t('organisms.pageTitle') || 'Document title'}
+        value=${title} onInput=${e => setTitle(e.target.value)} />
+      <div class="pj-doc-imgbar">
+        <label class="btn-outline btn-sm pj-file-btn">
+          <span class="pj-file-btn-icon">📷</span> ${t('organisms.insertImage') || 'Upload image from file'}
+          <input type="file" accept="image/*" hidden onChange=${e => { insertFromFile(e.target.files && e.target.files[0]); e.target.value = ''; }} />
+        </label>
+        <span class="pj-imgbar-hint">${t('organisms.orPaste') || '…or paste / drag an image into the editor'}</span>
+      </div>
+      ${images.length ? html`
+        <div class="pj-img-vis">
+          <div class="pj-img-vis-head">
+            <span class="pj-img-vis-title">${t('organisms.fileVisibility') || 'File visibility'}</span>
+            <span class="pj-img-vis-note">${t('organisms.fileVisibilityNote') || 'Private files only load for you — make them public to share the document.'}</span>
+            ${images.some(i => i.visibility !== 'public') ? html`<button class="btn-ghost btn-sm" disabled=${imgBusy} onClick=${makeAllImagesPublic}>${t('organisms.makeAllPublic') || 'Make all public'}</button>` : null}
+          </div>
+          ${images.map(i => html`
+            <div class="pj-img-vis-row" key=${i.key}>
+              <span class="pj-img-vis-name" title=${i.key}>${(i.alt)}</span>
+              <${VisibilityPill} visibility=${i.visibility} onClick=${() => { if (!imgBusy) changeImageVisibility(i.key, i.visibility === 'public' ? 'private' : 'public'); }} />
+            </div>`)}
+        </div>` : null}
+      ${mode === 'rich'
+        ? html`<div ref=${containerRef} class="pj-tui"></div>`
+        : html`<div class="pj-doc-grid">
+            <textarea class="input-field pj-doc-md" rows="14" placeholder=${t('organisms.writeMarkdown') || 'Write markdown…'}
+              value=${md} onInput=${e => setMd(e.target.value)}></textarea>
+            <div class="pj-doc-preview"><${Markdown} text=${md} /></div>
+          </div>`}
+      <div class="form-actions">
+        <button class="btn-primary btn-sm" onClick=${save} disabled=${busy || saving || !title.trim()}>
+          ${saving ? html`<span class="spinner"></span> ${t('organisms.saving') || 'Saving…'}` : (t('organisms.saveDraft') || 'Save draft')}
+        </button>
+        <button class="btn-ghost btn-sm" onClick=${onCancel}>${t('organisms.cancel') || 'Cancel'}</button>
+      </div>
+    </div>
+  `;
+}

package/dist/public/views/profile/organisms/helpers.js

@@ -0,0 +1,61 @@
+/**
+ * @file helpers.js
+ * @description Shared pure helpers for the organisms tab modules — locale-aware date
+ *   formatting, relative-time labels, avatar monograms, and the whole-organism ZIP export.
+ *   Extracted from organisms-tab.js (no behaviour change) so every organism module shares
+ *   one copy instead of re-implementing them.
+ * @structure fmtDate, relTime, orgInitials, exportOrganismZip
+ * @usage import { fmtDate, relTime, orgInitials, exportOrganismZip } from '/views/profile/organisms/helpers.js';
+ * @version-history
+ *   v1.0.0 — 2026-06-19 — Extracted from organisms-tab.js during the module split.
+ */
+import { t, getLocale } from '/js/i18n.js';
+
+/** Date-only, formatted in the APP locale (browser locale may differ — fi must show 10.6.2026, not 6/10/2026).
+ * @param {string} s ISO date string
+ * @returns {string} */
+export function fmtDate(s) {
+  return new Date(s).toLocaleDateString(getLocale() === 'fi' ? 'fi-FI' : undefined);
+}
+
+/** Relative time for list metadata ("2 h ago" / "2 h sitten"); falls back to a locale date past 7 days.
+ * @param {string} s ISO date string
+ * @returns {string} */
+export function relTime(s) {
+  const ts = new Date(s).getTime();
+  if (!Number.isFinite(ts)) return '';
+  const mins = Math.max(0, Math.round((Date.now() - ts) / 60000));
+  if (mins < 60) return (t('organisms.relMin') || '{n} min ago').replace('{n}', String(mins));
+  const hours = Math.round(mins / 60);
+  if (hours < 24) return (t('organisms.relHours') || '{n} h ago').replace('{n}', String(hours));
+  const days = Math.round(hours / 24);
+  if (days <= 7) return (t('organisms.relDays') || '{n} d ago').replace('{n}', String(days));
+  return fmtDate(s);
+}
+
+/** Two-letter monogram for the list/home avatar (initials of the first two words, else first two chars).
+ * @param {string} name
+ * @returns {string} */
+export function orgInitials(name) {
+  const s = String(name || '?').trim();
+  const words = s.split(/\s+/).filter(Boolean);
+  const ini = words.length >= 2 ? words[0][0] + words[1][0] : s.slice(0, 2);
+  return ini.charAt(0).toUpperCase() + (ini.charAt(1) || '').toLowerCase();
+}
+
+/** Download a whole-organism ZIP backup (used from the list "…" menu and the home header).
+ * @param {{ id: string, name?: string }} org
+ * @param {(msg: string) => void} showToast
+ * @returns {Promise<void>} */
+export async function exportOrganismZip(org, showToast) {
+  try {
+    const jwt = window.AIMEAT?.auth?.getSession?.()?.jwt || '';
+    const res = await fetch(`/v1/organisms/${encodeURIComponent(org.id)}/export`, { headers: { Authorization: 'Bearer ' + jwt } });
+    if (!res.ok) throw new Error('Export failed');
+    const blob = await res.blob();
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url; a.download = `organism-${String(org.name || org.id).replace(/[^a-z0-9_-]+/gi, '-').slice(0, 40)}.zip`;
+    document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url);
+  } catch (e) { showToast((e && e.message) || 'Export failed'); }
+}