aimeat 1.23.0 → 1.23.2

package/dist/public/views/profile/organisms-tab.js

@@ -73,13 +73,77 @@
  *     a legacy unsupported value like 'knowledge') render as a notice card instead of being filtered
  *     out — published content disappearing without a trace is how the invisible-documents bug hid for
  *     a month. Missing backing counts as memory; kind:'document' without mode renders as a doc space.
+ *   v1.18.0 — 2026-06-10 — Workspace renew, phase 2: manifest-driven tabs — one tab per declared
+ *     space (record/doc/unsupported-backing, manifest order, item counts) + fixed Review (approvals
+ *     queue + publish-gate toggle, with a banner when items wait) / Activity (heatmap + decisions) /
+ *     People (ParticipantsPanel) + a "+" pseudo-tab for add-space. Header gains a "For agents" menu
+ *     (the 3 AI prompts) and Settings absorbs share / sources / edit-flow chart alongside the
+ *     manifest form, spaces, restructure and danger zone. Old toolbar removed; nothing hidden —
+ *     every former panel lives in a tab, the header menu, or Settings.
+ *   v1.19.0 — 2026-06-10 — Organism-home tab contents redesigned (user feedback round): Agents tab
+ *     gets OrgAgentsPanel — picker of own agents (free-text GAII behind "Advanced"), activity
+ *     context per row. Workspaces tab: list first (map behind a 🗺 toggle), enriched rows
+ *     (record/doc counts, last event, review pill), delete moved into the "…" menu, compact content
+ *     search above the list. Members tab flipped: roster rows first (role badge, access line,
+ *     joined date, "…" menu), "+ Invite" toggle, pending requests only when present + tab pill.
+ *     Board tab: embedded preview (latest posts + composer) instead of a bare UUID + link. Red
+ *     intra-tab titles dropped (the tab IS the title).
+ *   v1.20.0 — 2026-06-10 — Organism Settings form redesigned: every field has a persistent label,
+ *     grouped Identity / Access (with per-choice gray hints for join policy + visibility), interests
+ *     as a TagInput (chips), read-only metadata collapsed to one line (Created · Creator · Board+copy;
+ *     members/max moved to the Members tab), Save disabled until dirty (doubles as the unsaved
+ *     indicator) + discard guard on settings-close/breadcrumb. Danger zone is its own red box with
+ *     typed-name confirmation that states exactly what gets deleted (counted workspaces/records/docs).
+ *   v1.20.1 — 2026-06-10 — Workspace breadcrumb unified with the organism home's: Organisms / {org} /
+ *     {workspace} (registry name), both ancestors clickable — the list is one click away from inside
+ *     a workspace (new onBackToList). Old "← Workspaces / 🧬 org" button row removed.
+ *   v1.20.2 — 2026-06-10 — Fix: settings form opened EMPTY when the home mounted from an {id}-only
+ *     stub (F5 before the list loaded) — the form now re-syncs whenever fresher org data arrives, as
+ *     long as the user hasn't touched the fields. Workspace rows gain a clickable 👥 participants
+ *     counter that expands an inline people list (like the access-request inbox).
+ *   v1.21.0 — 2026-06-10 — Workspace settings adopts the organism-settings form pattern: meta line
+ *     (template/last-saved), Identity + Agent policy groups, an autonomy hint, dirty-gated "Save
+ *     changes" (no longer closes the panel) + reset-Cancel + discard guard on the ⚙ toggle (the
+ *     populate effect only re-seeds untouched fields, so live updates never clobber typing). Spaces/
+ *     Public-sharing headings restyled to group labels. Workspace-row counts get real singular/
+ *     plural forms ("1 tietue", "{n} tietuetta").
+ *   v1.22.0 — 2026-06-10 — SchemaForm usability: new records pre-fill `id` (editable, hinted) and
+ *     requester-style fields (x-default:"currentUser" or requested_by/created_by/author names) with
+ *     the signed-in GHII; Save draft is always clickable and a failed attempt outlines the still-empty
+ *     required fields + lists them; readOnly (agent-filled) properties are hidden from the form and
+ *     excluded from required; per-field hints from manifest i18n / schema description. Generated
+ *     manifests can carry translations at manifest.i18n.{lang} ("{ns}.{field}", "{ns}.{field}.hint",
+ *     "type.{name}") — used for form labels, record read-view labels, space tab + section titles.
+ *   v1.23.0 — 2026-06-10 — Sources and Share are fixed workspace TABS (every workspace has them) —
+ *     both had sunk into Settings, which read as "dropped entirely". Share lazy-loads on first tab
+ *     open; Settings keeps form/spaces/chart/restructure/danger only. Fixed double-escaping: htm/
+ *     preact already escapes text nodes, so every ${'${'}escHtml(...)} printed literal & — all 75
+ *     wrappers removed (titles like "Design & Architecture" now render correctly).
+ *   v1.24.0 — 2026-06-10 — Members tab lists each member's agents (🤖 line, from the enriched members
+ *     route) — same-owner agents inherit the membership implicitly, so "who can act here" is now
+ *     visible instead of an unlisted-access audit gap.
+ *   v1.25.0 — 2026-06-10 — Settings no longer lies about the tab state: it REPLACES the tab content
+ *     (no tab highlighted while open; clicking a tab closes it via the dirty guard; breadcrumb gains
+ *     "/ Settings") in BOTH the workspace and the organism home. Workspace settings reordered:
+ *     savable form bounded in its own card (Identity + Agent policy + Save), Spaces gets an
+ *     immediate-actions hint, Process group title for the edit-flow chart + restructure, dividers
+ *     between groups, danger zone last with nothing after it. Autonomy options show meanings
+ *     ("L3 — balanced"). "For agents" menu → "Agent access" with verb items ("Copy chat prompt",
+ *     "Copy coding agent prompt") and a divider before "Create contract agent" (KebabMenu supports
+ *     { divider: true }). Space tab labels capitalized to match the fixed tabs.
+ *   v1.25.1 — 2026-06-10 — Manual space adding is DOCUMENT-ONLY (the "+" tab panel and the Settings
+ *     add form lost their document/records selects): a hand-added record type would have no usable
+ *     schema — record types are designed with AI via Settings → Process (restructure). The panel
+ *     text says so.
+ *   v1.25.2 — 2026-06-10 — Settings Cancel works again: it discards changes AND closes the panel
+ *     (both organism + workspace settings) — the dirty-only reset variant did nothing visible on a
+ *     clean form, which read as a dead button.
  */
 import { h } from 'preact';
 import { useState, useEffect, useCallback, useRef, useMemo } from 'preact/hooks';
 import htm from 'htm';
 const html = htm.bind(h);
 import { t, getLocale } from '/js/i18n.js';
-import { escHtml } from '/js/utils.js';
 import { Spinner, VisibilityPill } from './shared.js';
 import { useConfirm } from '/components/Modal.js';
 import { EmptyState } from '/components/EmptyState.js';
@@ -88,6 +152,9 @@ import { SearchBar } from '/components/SearchBar.js';
 import * as orgService from '/js/services/organisms.js';
 import * as memoryService from '/js/services/memory.js';
 import * as knowledgeService from '/js/services/knowledge.js';
+import { listAgents } from '/js/services/agents.js';
+import { getGhii } from '/js/services/auth.js';
+import { listPosts, createPost } from '/js/services/boards.js';
 import { OpenRouterSettings } from './generator-settings.js';
 import { copyToClipboard } from '/js/utils.js';
 import { dt, fmtBytes } from '/js/format.js';
@@ -99,6 +166,19 @@ 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. */
+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). */
 function orgInitials(name) {
   const s = String(name || '?').trim();
@@ -107,8 +187,9 @@ function orgInitials(name) {
   return ini.charAt(0).toUpperCase() + (ini.charAt(1) || '').toLowerCase();
 }
 
-/** "…" actions menu — items: { label, icon?, danger?, onClick } (falsy items are skipped). Closes on outside click. */
-function KebabMenu({ items, label }) {
+/** "…" actions menu — items: { label, icon?, danger?, onClick } (falsy items are skipped). Closes on
+ * outside click. Default trigger is a ⋮ icon button; pass trigger/btnClass for a labelled button. */
+function KebabMenu({ items, label, trigger, btnClass }) {
   const [open, setOpen] = useState(false);
   const ref = useRef(null);
   useEffect(() => {
@@ -121,17 +202,39 @@ function KebabMenu({ items, label }) {
   if (visible.length === 0) return null;
   return html`
     <div class="pj-menu" ref=${ref}>
-      <button class="pj-icon-btn pj-menu-btn" title=${label} aria-haspopup="menu" aria-expanded=${open}
-        onClick=${(e) => { e.stopPropagation(); setOpen(o => !o); }}>${'⋮'}</button>
+      <button class=${btnClass || 'pj-icon-btn pj-menu-btn'} title=${label} aria-haspopup="menu" aria-expanded=${open}
+        onClick=${(e) => { e.stopPropagation(); setOpen(o => !o); }}>${trigger || '⋮'}</button>
       ${open ? html`
         <div class="pj-menu-pop" role="menu" onClick=${(e) => e.stopPropagation()}>
-          ${visible.map(it => html`
+          ${visible.map((it, i) => it.divider
+            ? html`<div class="pj-menu-sep" key=${'sep' + i}></div>`
+            : html`
             <button class="pj-menu-item ${it.danger ? 'pj-menu-item-danger' : ''}" role="menuitem" key=${it.label}
               onClick=${() => { setOpen(false); it.onClick?.(); }}>${it.icon ? `${it.icon} ` : ''}${it.label}</button>`)}
         </div>` : null}
     </div>`;
 }
 
+/** Tag chips + inline input — Enter/comma adds, × or Backspace-on-empty removes, blur commits.
+ *  Shows immediately how the value parses (vs. a raw "comma separated" text field). */
+function TagInput({ tags, onChange, placeholder }) {
+  const [val, setVal] = useState('');
+  const add = () => { const v = val.trim().replace(/,+$/, ''); if (v && !tags.includes(v)) onChange([...tags, v]); setVal(''); };
+  const onKey = (e) => {
+    if (e.key === 'Enter' || e.key === ',') { e.preventDefault(); add(); }
+    else if (e.key === 'Backspace' && !val && tags.length) onChange(tags.slice(0, -1));
+  };
+  return html`
+    <div class="pj-taginput">
+      ${tags.map(tag => html`
+        <span class="file-tag pj-tag" key=${tag}>${(tag)}
+          <button class="pj-tag-x" title="×" onClick=${() => onChange(tags.filter(x => x !== tag))}>×</button>
+        </span>`)}
+      <input class="pj-taginput-field" value=${val} placeholder=${placeholder || 'Add…'}
+        onInput=${(e) => setVal(e.target.value)} onKeyDown=${onKey} onBlur=${add} />
+    </div>`;
+}
+
 /** Download a whole-organism ZIP backup (used from the list "…" menu and the home header). */
 async function exportOrganismZip(org, showToast) {
   try {
@@ -168,10 +271,9 @@ function OrgSearch({ orgId, onOpenWorkspace }) {
   };
 
   return html`
-    <div class="card-detail">
-      <div class="section-title">${t('organisms.searchContent') || 'Search content'}</div>
+    <div class="pj-orgsearch">
       <div class="flex-row-wrap">
-        <input class="input-field input-sm" placeholder=${t('organisms.searchPlaceholder') || 'Find records & documents…'} value=${q}
+        <input class="input-field input-sm pj-orgsearch-input" placeholder=${t('organisms.searchPlaceholder') || 'Find records & documents…'} value=${q}
           onInput=${(e) => setQ(e.target.value)} onKeyDown=${(e) => { if (e.key === 'Enter') doSearch(); }} />
         <button class="btn-outline btn-sm" disabled=${busy || q.trim().length < 2} onClick=${doSearch}>${t('organisms.search') || 'Search'}</button>
       </div>
@@ -179,9 +281,9 @@ function OrgSearch({ orgId, onOpenWorkspace }) {
       ${(results || []).map(r => html`
         <div class="pj-access-row card-clickable" key=${r.ws + '/' + r.space + '/' + r.id} role="button" onClick=${() => onOpenWorkspace?.(r.ws)}>
           <span>
-            <b>${escHtml(r.title)}</b>
-            <span class="pj-mini"> — ${escHtml(r.wsName || r.ws)} · ${escHtml(r.space)}</span>
-            <div class="pj-mini">${escHtml(r.snippet)}</div>
+            <b>${(r.title)}</b>
+            <span class="pj-mini"> — ${(r.wsName || r.ws)} · ${(r.space)}</span>
+            <div class="pj-mini">${(r.snippet)}</div>
           </span>
         </div>
       `)}
@@ -224,7 +326,7 @@ function IncomingInvitations({ showToast, onChanged }) {
       <div class="section-title">${t('organisms.youAreInvited') || 'You’re invited'}</div>
       ${invites.map(({ membership, organism }) => html`
         <div class="pj-access-row" key=${organism.id}>
-          <span><b>${escHtml(organism.name)}</b>${membership.invitedBy ? html` <span class="pj-mini">— ${(t('organisms.invitedByLabel') || 'invited by {who}').replace('{who}', escHtml(membership.invitedBy))}</span>` : null}</span>
+          <span><b>${(organism.name)}</b>${membership.invitedBy ? html` <span class="pj-mini">— ${(t('organisms.invitedByLabel') || 'invited by {who}').replace('{who}', (membership.invitedBy))}</span>` : null}</span>
           <span class="flex-row-wrap">
             <button class="btn-success btn-sm" disabled=${busy} onClick=${() => act(organism.id, true)}>${t('organisms.acceptInvite') || 'Accept'}</button>
             <button class="btn-ghost btn-sm" disabled=${busy} onClick=${() => act(organism.id, false)}>${t('organisms.declineInvite') || 'Decline'}</button>
@@ -243,8 +345,128 @@ function IncomingInvitations({ showToast, onChanged }) {
  * parent list via onChanged so member counts stay current.
  */
 /**
- * Member + agent management. `show` limits the rendered sections: 'members' (invite, pending
- * requests, roster, blocked) or 'agents' (attached agents); omitted = both (legacy layout).
+ * 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.
+ */
+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}</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}
+              </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>`;
+}
+
+/**
+ * Members tab — roster first (avatar rows with role badge, per-workspace access line, joined date,
+ * "…" menu for make-creator/remove/block), "+ Invite" toggles a compact invite row, and pending
+ * join requests render as highlighted rows only when there are any. Agents live in OrgAgentsPanel.
  */
 function OrgMemberManager({ org, ghii, canManage, isCreator, showToast, confirm, onChanged, show }) {
   const orgId = org.id;
@@ -253,8 +475,9 @@ function OrgMemberManager({ org, ghii, canManage, isCreator, showToast, confirm,
   const [banned, setBanned] = useState([]);
   const [invitations, setInvitations] = useState([]);
   const [inviteName, setInviteName] = useState('');
-  const [agentName, setAgentName] = useState('');
+  const [showInvite, setShowInvite] = useState(false);
   const [busy, setBusy] = useState(false);
+  const [wsAccess, setWsAccess] = useState(null);   // bare owner name → [{ ws, role }] (best effort)
 
   const load = useCallback(async () => {
     const tasks = [orgService.listMembers(orgId).catch(() => null)];
@@ -282,6 +505,32 @@ function OrgMemberManager({ org, ghii, canManage, isCreator, showToast, confirm,
     return () => window.removeEventListener('aimeat-live-update', handler);
   }, []);
 
+  // Per-member workspace access (best effort): workspace creators from discovery + access lists of
+  // the workspaces the viewer created. Keyed by bare owner name (memberships use bare names too).
+  useEffect(() => {
+    if (show !== 'members') return undefined;
+    let cancelled = false;
+    (async () => {
+      try {
+        const wss = await orgService.discoverWorkspaces(orgId);
+        const map = {};
+        const add = (who, wsName, role) => {
+          const bare = String(who || '').split('@')[0];
+          if (!bare) return;
+          const list = map[bare] || (map[bare] = []);
+          if (!list.some(x => x.ws === wsName)) list.push({ ws: wsName, role });
+        };
+        for (const w of wss) if (w.created_by) add(w.created_by, w.name || w.id, 'owner');
+        await Promise.all(wss.filter(w => w.access === 'owner').map(async (w) => {
+          const acc = await orgService.getWorkspaceAccess(orgId, w.id).catch(() => null);
+          for (const m of (acc?.members || [])) add(m.owner, w.name || w.id, m.role);
+        }));
+        if (!cancelled) setWsAccess(map);
+      } catch { /* the access line is optional */ }
+    })();
+    return () => { cancelled = true; };
+  }, [orgId, show]);
+
   const run = async (fn, okMsg, failKey) => {
     setBusy(true);
     try {
@@ -317,95 +566,93 @@ function OrgMemberManager({ org, ghii, canManage, isCreator, showToast, confirm,
     () => run(() => orgService.transferOwnership(orgId, toGhii), (t('organisms.ownershipTransferred') || 'Ownership transferred'), 'organisms.transferFailed'),
     { danger: true });
 
-  const attachAgent = () => {
-    const g = agentName.trim();
-    if (!g) return;
-    setAgentName('');
-    run(() => orgService.attachAgent(orgId, g), (t('organisms.agentAttached') || 'Agent attached'), 'organisms.agentFailed');
-  };
-  const detachAgent = (g) => run(() => orgService.detachAgent(orgId, g), (t('organisms.agentDetached') || 'Agent detached'), 'organisms.agentFailed');
-
   const pending = (requests || []).filter(r => r.status === 'pending');
-  const agents = org.agentGaiis || [];
-
   const showMembers = show !== 'agents';
-  const showAgents = show !== 'members';
+
+  // "Access: Marketing (contributor)" line — creator shows "all workspaces" (mirrors reality:
+  // the organism creator governs every workspace it owns; per-ws data may be partial for others).
+  const accessLine = (m) => {
+    if (m.role === 'creator') return t('organisms.accessAll') || 'all workspaces';
+    const list = wsAccess?.[String(m.ghii || '').split('@')[0]] || [];
+    if (!list.length) return '';
+    return list.map(x => `${x.ws} (${x.role})`).join(', ');
+  };
 
   return html`
     <div class="card-detail">
       ${showMembers ? html`
-      <div class="section-title">${canManage ? (t('organisms.manageMembers') || 'Manage members') : (t('organisms.membersRoster') || 'Members')}</div>
-      ${canManage ? html`<div class="section-desc">${t('organisms.manageMembersDesc') || 'Invite, approve, block and revoke member access.'}</div>` : null}
+      <div class="pj-tabhead">
+        <div class="section-desc pj-tabhead-desc">${t('organisms.membersDesc') || 'Members can join workspaces; their agents inherit the role.'}
+          ${' '}<span class="pj-members-cap">${(members || []).length}/${org.maxMembers || 500}</span></div>
+        ${canManage ? html`<button class="btn-primary btn-sm" onClick=${() => setShowInvite(s => !s)}>${'+ '}${t('organisms.invite') || 'Invite'}</button>` : null}
+      </div>
 
-      ${canManage ? html`
-        <div class="detail-label">${t('organisms.inviteMember') || 'Invite a member'}</div>
-        <div class="flex-row-wrap">
-          <input class="input-field input-sm" placeholder=${t('organisms.inviteePlaceholder') || 'owner name'} value=${inviteName}
+      ${canManage && showInvite ? html`
+        <div class="flex-row-wrap pj-invite-row">
+          <input class="input-field input-sm" autofocus placeholder=${t('organisms.inviteePlaceholder') || 'owner name'} value=${inviteName}
             onInput=${(e) => setInviteName(e.target.value)} onKeyDown=${(e) => { if (e.key === 'Enter') invite(); }} />
-          <button class="btn-primary btn-sm" disabled=${busy || !inviteName.trim()} onClick=${invite}>${t('organisms.invite') || 'Invite'}</button>
-        </div>
-        ${invitations.length > 0 ? html`
-          <div class="section-desc">${t('organisms.outstandingInvites') || 'Awaiting acceptance'}: ${invitations.map(m => escHtml(m.ghii)).join(', ')}</div>
-        ` : null}
-
-        <div class="detail-label">${t('organisms.pendingRequests') || 'Pending join requests'}</div>
-        ${requests === null
-          ? html`<div class="section-desc">…</div>`
-          : pending.length === 0
-            ? html`<div class="section-desc">${t('organisms.noPendingRequests') || 'No pending requests.'}</div>`
-            : pending.map(r => html`
-              <div class="pj-access-row" key=${r.id}>
-                <span>${escHtml(r.ghii)}${r.message ? html` <span class="pj-mini">— ${escHtml(r.message)}</span>` : null}</span>
-                <span class="flex-row-wrap">
-                  <button class="btn-success btn-sm" disabled=${busy} onClick=${() => review(r.id, 'approved')}>${t('organisms.approve') || 'Approve'}</button>
-                  <button class="btn-ghost btn-sm" disabled=${busy} onClick=${() => review(r.id, 'rejected')}>${t('organisms.reject') || 'Reject'}</button>
-                </span>
-              </div>
-            `)}
+          <button class="btn-outline btn-sm" disabled=${busy || !inviteName.trim()} onClick=${invite}>${t('organisms.invite') || 'Invite'}</button>
+          <button class="btn-ghost btn-sm" onClick=${() => setShowInvite(false)}>${t('organisms.cancel') || 'Cancel'}</button>
+        </div>` : null}
+      ${canManage && invitations.length > 0 ? html`
+        <div class="section-desc">${t('organisms.outstandingInvites') || 'Awaiting acceptance'}: ${invitations.map(m => (m.ghii)).join(', ')}</div>
       ` : null}
 
-      <div class="detail-label">${t('organisms.members') || 'Members'}</div>
-      ${(members || []).map(m => html`
-        <div class="pj-access-row" key=${m.ghii}>
-          <span>${escHtml(m.ghii)} <span class="badge ${m.role === 'creator' ? 'badge-success' : 'badge-info'} pj-mini">${escHtml(m.role || 'member')}</span></span>
-          ${canManage && m.role !== 'creator' && m.ghii !== ghii ? html`
-            <span class="flex-row-wrap">
-              ${isCreator ? html`<button class="btn-ghost btn-sm" disabled=${busy} onClick=${() => transfer(m.ghii)}>${t('organisms.makeCreator') || 'Make creator'}</button>` : null}
-              <button class="btn-outline btn-sm" disabled=${busy} onClick=${() => remove(m.ghii, false)}>${t('organisms.remove') || 'Remove'}</button>
-              <button class="btn-danger btn-sm" disabled=${busy} onClick=${() => remove(m.ghii, true)}>${t('organisms.block') || 'Block'}</button>
-            </span>
-          ` : null}
+      ${canManage && pending.length > 0 ? pending.map(r => html`
+        <div class="pj-org-row pj-req-row" key=${r.id}>
+          <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">${(r.ghii)}</span>
+              <span class="pj-org-desc">${t('organisms.wantsToJoin') || 'wants to join'}${r.createdAt ? ` · ${relTime(r.createdAt)}` : ''}</span>
+            </div>
+            ${r.message ? html`<div class="pj-org-desc">${(r.message)}</div>` : null}
+          </div>
+          <button class="btn-ghost btn-sm" disabled=${busy} onClick=${() => review(r.id, 'rejected')}>${t('organisms.decline') || 'Decline'}</button>
+          <button class="btn-success btn-sm" disabled=${busy} onClick=${() => review(r.id, 'approved')}>${t('organisms.approve') || 'Approve'}</button>
         </div>
-      `)}
+      `) : null}
+
+      <div class="pj-org-list">
+        ${(members || []).map(m => {
+          const acc = accessLine(m);
+          const menuItems = (canManage && m.role !== 'creator' && m.ghii !== ghii) ? [
+            isCreator && { label: t('organisms.makeCreator') || 'Make creator', icon: '👑', onClick: () => transfer(m.ghii) },
+            { label: t('organisms.remove') || 'Remove', danger: true, onClick: () => remove(m.ghii, false) },
+            { label: t('organisms.block') || 'Block', danger: true, onClick: () => remove(m.ghii, true) },
+          ] : [];
+          return html`
+            <div class="pj-org-row" key=${m.ghii}>
+              <div class="pj-org-avatar" aria-hidden="true">${orgInitials(m.ghii)}</div>
+              <div class="pj-org-main pj-org-main-static">
+                <div class="pj-org-titlerow">
+                  <span class="pj-org-name">${(m.ghii)}</span>
+                  <span class="badge ${m.role === 'creator' ? 'badge-success' : 'badge-info'}">${(m.role || 'member')}</span>
+                </div>
+                ${(acc || m.joinedAt) ? html`
+                  <div class="pj-org-desc">
+                    ${acc ? `${t('organisms.accessLabel') || 'Access'}: ${acc}` : ''}${acc && m.joinedAt ? ' · ' : ''}${m.joinedAt ? (t('organisms.joinedDate') || 'joined {date}').replace('{date}', fmtDate(m.joinedAt)) : ''}
+                  </div>` : null}
+                ${(m.agents || []).length ? html`
+                  <div class="pj-org-desc" title=${t('organisms.memberAgentsHint') || "This member's agents — they inherit the membership and can act in this organism"}>
+                    ${'🤖 '}${t('organisms.memberAgents') || 'Agents'}: ${m.agents.map(a => a.name || a.gaii).join(', ')}
+                  </div>` : null}
+              </div>
+              ${menuItems.length ? html`<${KebabMenu} label=${t('organisms.moreActions') || 'More actions'} items=${menuItems} />` : null}
+            </div>`;
+        })}
+      </div>
 
       ${canManage && banned.length > 0 ? html`
         <div class="detail-label">${t('organisms.blockedMembers') || 'Blocked'}</div>
         ${banned.map(m => html`
           <div class="pj-access-row" key=${'ban-' + m.ghii}>
-            <span>${escHtml(m.ghii)}</span>
+            <span>${(m.ghii)}</span>
             <button class="btn-ghost btn-sm" disabled=${busy} onClick=${() => unban(m.ghii)}>${t('organisms.unblock') || 'Unblock'}</button>
           </div>
         `)}
       ` : null}
       ` : null}
-
-      ${showAgents ? html`
-      <div class="detail-label">${t('organisms.attachedAgents') || 'Attached agents'}</div>
-      ${agents.length === 0 ? html`<div class="section-desc">${t('organisms.noAgents') || 'No agents attached.'}</div>` : null}
-      ${agents.map(g => html`
-        <div class="pj-access-row" key=${'ag-' + g}>
-          <span class="mono">${escHtml(g)}</span>
-          ${(canManage || g.includes('#' + ghii + '@'))
-            ? html`<button class="btn-ghost btn-sm" disabled=${busy} onClick=${() => detachAgent(g)}>${t('organisms.detach') || 'Detach'}</button>`
-            : null}
-        </div>
-      `)}
-      <div class="flex-row-wrap">
-        <input class="input-field input-sm" placeholder=${t('organisms.agentGaiiPlaceholder') || 'agent#you@node'} value=${agentName}
-          onInput=${(e) => setAgentName(e.target.value)} onKeyDown=${(e) => { if (e.key === 'Enter') attachAgent(); }} />
-        <button class="btn-outline btn-sm" disabled=${busy || !agentName.trim()} onClick=${attachAgent}>${t('organisms.attachAgent') || 'Attach agent'}</button>
-      </div>
-      ` : null}
     </div>
   `;
 }
@@ -640,7 +887,7 @@ export default function OrganismsTab({ session, showToast, onStats }) {
         <div class="detail-grid">
           <div class="detail-item">
             <span class="detail-label">${t('organisms.creator') || 'Creator'}</span>
-            <span class="detail-value">${escHtml(org.creatorGhii)}</span>
+            <span class="detail-value">${(org.creatorGhii)}</span>
           </div>
           <div class="detail-item">
             <span class="detail-label">${t('organisms.memberCount') || 'Members'}</span>
@@ -659,7 +906,7 @@ export default function OrganismsTab({ session, showToast, onStats }) {
         </div>
         ${(org.interests || []).length > 0 ? html`
           <div class="flex-row-wrap">
-            ${org.interests.map(tag => html`<span class="file-tag" key=${tag}>${escHtml(tag)}</span>`)}
+            ${org.interests.map(tag => html`<span class="file-tag" key=${tag}>${(tag)}</span>`)}
           </div>` : null}
       </div>`;
   };
@@ -696,11 +943,11 @@ export default function OrganismsTab({ session, showToast, onStats }) {
         <div class="pj-org-main" role="button" tabindex="0" onClick=${activate}
           onKeyDown=${(e) => { if (e.key === 'Enter') activate(); }}>
           <div class="pj-org-titlerow">
-            <span class="pj-org-name">${escHtml(org.name)}</span>
+            <span class="pj-org-name">${(org.name)}</span>
             <span class="badge badge-info">${typeLabel}</span>
             ${org.visibility !== 'public' ? html`<span class="pj-org-lock" title=${visLabel}>${'\uD83D\uDD12'}</span>` : null}
           </div>
-          ${org.description ? html`<div class="pj-org-desc">${escHtml(org.description)}</div>` : null}
+          ${org.description ? html`<div class="pj-org-desc">${(org.description)}</div>` : null}
         </div>
         <div class="pj-org-stats">
           ${isMine && wsCounts[org.id] !== undefined ? html`
@@ -723,7 +970,8 @@ export default function OrganismsTab({ session, showToast, onStats }) {
     // openWs chosen → that workspace; otherwise the organism's HOME page (tabs incl. workspaces).
     if (openWs) {
       return html`<${Workspace} org=${org} wsId=${openWs} session=${session} showToast=${showToast}
-        onBack=${() => { setOpenWs(null); }} />`;
+        onBack=${() => { setOpenWs(null); }}
+        onBackToList=${() => { setOpenWs(null); setOpenId(null); setOpenSettings(false); loadData(); }} />`;
     }
     return html`
       <${OrganismHome} org=${org} ghii=${ghii} showToast=${showToast}
@@ -731,8 +979,7 @@ export default function OrganismsTab({ session, showToast, onStats }) {
         onOpenWs=${(wsId) => setOpenWs(wsId)}
         onBack=${() => { setOpenId(null); setOpenSettings(false); loadData(); }}
         onChanged=${loadData}
-        onLeave=${() => handleLeave(org.id, org.name)}
-        onDelete=${() => handleDelete(org.id, org.name)} />
+        onLeave=${() => handleLeave(org.id, org.name)} />
       <${ConfirmUI} />`;
   }
 
@@ -826,17 +1073,81 @@ export default function OrganismsTab({ session, showToast, onStats }) {
   `;
 }
 
+/* Board tab — embedded preview of the organism's discussion board: latest posts + a composer,
+ * with "Open in Boards" for the full view. The raw board UUID hides behind a copy icon. */
+function BoardPreview({ boardId, showToast }) {
+  const [posts, setPosts] = useState(null);   // null = loading
+  const [text, setText] = useState('');
+  const [busy, setBusy] = useState(false);
+
+  const load = useCallback(() => {
+    listPosts(boardId).then(p => setPosts(Array.isArray(p) ? p : [])).catch(() => setPosts([]));
+  }, [boardId]);
+  useEffect(() => { load(); }, [load]);
+  const liveRef = useRef(load); liveRef.current = load;
+  useEffect(() => {
+    const h = () => liveRef.current();
+    window.addEventListener('aimeat-live-update', h);
+    return () => window.removeEventListener('aimeat-live-update', h);
+  }, []);
+
+  const send = async () => {
+    const body = text.trim();
+    if (!body) return;
+    setBusy(true);
+    try {
+      const r = await createPost(boardId, body);
+      if (r?.ok === false) showToast(r?.error?.message || 'Failed to post');
+      else { setText(''); load(); }
+    } catch (e) { showToast((e && e.message) || 'Failed to post'); }
+    finally { setBusy(false); }
+  };
+  const copyId = async () => {
+    const ok = await copyToClipboard(boardId);
+    showToast(ok ? (t('organisms.copied') || 'Copied') : (t('organisms.copyFailed') || 'Could not copy'));
+  };
+
+  const ts = (p) => p.created_at || p.createdAt || p.at || '';
+  const latest = [...(posts || [])].sort((a, b) => String(ts(b)).localeCompare(String(ts(a)))).slice(0, 5);
+
+  return html`
+    <div class="card-detail">
+      <div class="pj-tabhead">
+        <div class="section-desc pj-tabhead-desc">${t('organisms.boardPreviewDesc') || 'Latest messages on this organism’s board.'}</div>
+        <button class="pj-icon-btn" title=${(t('organisms.copyId') || 'Copy ID') + ': ' + boardId} onClick=${copyId}>${'📋'}</button>
+        <button class="btn-outline btn-sm" onClick=${() => window.dispatchEvent(new CustomEvent('aimeat-open-tab', { detail: { tabId: 'boards' } }))}>
+          ${t('organisms.openBoardsTab') || 'Open in Boards'}</button>
+      </div>
+      ${posts === null ? html`<${Spinner} />`
+        : latest.length === 0 ? html`<${EmptyState} icon="💬" text=${t('organisms.boardEmpty') || 'No messages yet — write the first one.'} />`
+        : latest.map(p => html`
+          <div class="pj-board-post" key=${p.id || ts(p)}>
+            <div class="pj-board-post-head">
+              <span class="pj-board-author">${(p.author_gaii || p.author || '?')}</span>
+              ${ts(p) ? html`<span class="pj-board-time">${relTime(ts(p))}</span>` : null}
+            </div>
+            <div class="pj-board-body">${(String(p.body || p.content || '').slice(0, 400))}</div>
+          </div>`)}
+      <div class="flex-row-wrap pj-board-composer">
+        <input class="input-field input-sm pj-board-input" placeholder=${t('organisms.writePost') || 'Write a message…'} value=${text}
+          onInput=${(e) => setText(e.target.value)} onKeyDown=${(e) => { if (e.key === 'Enter') send(); }} />
+        <button class="btn-outline btn-sm" disabled=${busy || !text.trim()} onClick=${send}>${t('organisms.send') || 'Send'}</button>
+      </div>
+    </div>`;
+}
+
 /* ───────────────── Organism home page ─────────────────
  * One home per organism: breadcrumb header (avatar, name, badges, description,
  * Export + Settings) and tabs — Workspaces (the workspace list + content search),
  * Members (invite/approve/roster/blocked), Agents (attach/detach), Board (link to
  * the Boards tab). The Settings panel hosts the edit form, the metadata that used
  * to live in the expanded list card, and the danger zone (leave / delete). */
-function OrganismHome({ org, ghii, showToast, initialSettings, onOpenWs, onBack, onChanged, onLeave, onDelete }) {
+function OrganismHome({ org, ghii, showToast, initialSettings, onOpenWs, onBack, onChanged, onLeave }) {
   const { confirm, ConfirmUI } = useConfirm();
   const [tab, setTab] = useState(() => { try { return sessionStorage.getItem('aimeat.org.tab') || 'workspaces'; } catch { return 'workspaces'; } });
   const [showSettings, setShowSettings] = useState(!!initialSettings);
   const [wsCount, setWsCount] = useState(null);
+  const [pendingJoin, setPendingJoin] = useState(0);   // Members tab pill — visible without opening the tab
   useEffect(() => { try { sessionStorage.setItem('aimeat.org.tab', tab); } catch { /* noop */ } }, [tab]);
 
   const isCreator = org.creatorGhii === ghii;
@@ -845,29 +1156,62 @@ function OrganismHome({ org, ghii, showToast, initialSettings, onOpenWs, onBack,
   const canEdit = isCreator || isAdmin;
   const typeLabel = t(`organisms.types.${org.type}`) || org.type;
 
-  /* ── Settings: edit form (admins), metadata, danger zone ── */
-  const [editForm, setEditForm] = useState(null);
+  useEffect(() => {
+    if (!canEdit) return undefined;
+    let cancelled = false;
+    const fetchIt = () => orgService.listJoinRequests(org.id)
+      .then(r => { if (!cancelled) setPendingJoin(((r?.data?.join_requests) || []).filter(x => x.status === 'pending').length); })
+      .catch(() => {});
+    fetchIt();
+    window.addEventListener('aimeat-live-update', fetchIt);
+    return () => { cancelled = true; window.removeEventListener('aimeat-live-update', fetchIt); };
+  }, [org.id, canEdit]);
+
+  /* ── Settings: labelled + grouped form (Identity / Access) with live dirty-check, a one-line
+   * read-only metadata row, per-choice access hints, and a clearly separated danger zone whose
+   * delete needs the organism's name typed and states exactly what gets removed. ── */
+  const baseline = useMemo(() => ({
+    name: org.name || '', description: org.description || '', type: org.type || 'community',
+    join_policy: org.joinPolicy || 'open', visibility: org.visibility || 'public',
+    interests: [...(org.interests || [])],
+  }), [org]);
+  const [form, setForm] = useState(baseline);
   const [saving, setSaving] = useState(false);
-  // Re-seed the form when another organism is opened (org.id), not on every reload of the same org.
-  useEffect(() => { setEditForm(null); }, [org.id]);
-  const seedForm = () => ({
-    name: org.name || '', description: org.description || '', type: org.type,
-    join_policy: org.joinPolicy, visibility: org.visibility, interests: (org.interests || []).join(', '),
-  });
+  // Sync the form whenever fresher org data arrives (e.g. the home mounted from an F5 with only a
+  // {id} stub before the list loaded) — but ONLY while the user hasn't touched the fields, so a
+  // live-update reload never clobbers typing.
+  const prevBaselineRef = useRef(baseline);
+  useEffect(() => {
+    const prev = prevBaselineRef.current;
+    const untouched = form.name === prev.name && form.description === prev.description
+      && form.type === prev.type && form.join_policy === prev.join_policy
+      && form.visibility === prev.visibility && form.interests.join(' ') === prev.interests.join(' ');
+    if (untouched) setForm(baseline);
+    prevBaselineRef.current = baseline;
+  }, [baseline]);   // eslint-disable-line react-hooks/exhaustive-deps
+  const dirty = form.name !== baseline.name || form.description !== baseline.description
+    || form.type !== baseline.type || form.join_policy !== baseline.join_policy
+    || form.visibility !== baseline.visibility
+    || form.interests.join('') !== baseline.interests.join('');
+  // Save doubles as the unsaved-changes indicator: enabled ⇔ something actually changed.
   const saveEdit = async () => {
-    if (!editForm?.name?.trim()) { showToast(t('organisms.nameRequired') || 'Name is required'); return; }
+    if (!form.name.trim()) { showToast(t('organisms.nameRequired') || 'Name is required'); return; }
     setSaving(true);
     try {
-      const interests = editForm.interests.split(',').map(s => s.trim()).filter(Boolean);
       const result = await orgService.updateOrganism(org.id, {
-        name: editForm.name.trim(), description: editForm.description.trim(),
-        type: editForm.type, join_policy: editForm.join_policy, visibility: editForm.visibility, interests,
+        name: form.name.trim(), description: form.description.trim(),
+        type: form.type, join_policy: form.join_policy, visibility: form.visibility, interests: form.interests,
       });
-      if (result?.ok !== false) { showToast(t('organisms.updated') || 'Organism updated'); setEditForm(null); onChanged?.(); }
+      if (result?.ok !== false) { showToast(t('organisms.updated') || 'Organism updated'); onChanged?.(); }
       else showToast(result?.error?.message || (t('organisms.updateError') || 'Failed to update'));
     } catch { showToast(t('organisms.updateError') || 'Failed to update'); }
     finally { setSaving(false); }
   };
+  // Leaving a dirty form (closing settings / breadcrumb back) asks before dropping the changes.
+  const guardDirty = (fn) => {
+    if (showSettings && dirty) confirm(t('organisms.discardChanges') || 'Discard unsaved changes?', () => { setForm(baseline); fn(); }, { danger: true });
+    else fn();
+  };
 
   const boardIdShort = org.boardId && org.boardId.length > 20
     ? `${org.boardId.slice(0, 12)}…${org.boardId.slice(-6)}` : (org.boardId || '');
@@ -876,157 +1220,198 @@ function OrganismHome({ org, ghii, showToast, initialSettings, onOpenWs, onBack,
     showToast(ok ? (t('organisms.copied') || 'Copied') : (t('organisms.copyFailed') || 'Could not copy'));
   };
 
+  // What a delete actually removes (counted from the accessible workspaces when settings opens).
+  const [delStats, setDelStats] = useState(null);   // { ws, recs, docs }
+  const [delOpen, setDelOpen] = useState(false);
+  const [delName, setDelName] = useState('');
+  useEffect(() => {
+    if (!showSettings || !isCreator) return undefined;
+    let cancelled = false;
+    (async () => {
+      try {
+        const wss = (await orgService.discoverWorkspaces(org.id)).filter(w => w.access !== 'none');
+        let recs = 0, docs = 0;
+        await Promise.all(wss.map(async (w) => {
+          const wsData = await orgService.getWorkspace(org.id, w.id).catch(() => null);
+          for (const ot of (wsData?.manifest?.objectTypes || []).filter(orgService.isMemorySpace)) {
+            const n = new Set([...(wsData.drafts?.[ot.name] || []), ...(wsData.objects?.[ot.name] || [])].map(d => d.id)).size;
+            if (orgService.isDocSpace(ot)) docs += n; else recs += n;
+          }
+        }));
+        if (!cancelled) setDelStats({ ws: wss.length, recs, docs });
+      } catch { /* the counts are a courtesy — the generic warning still shows */ }
+    })();
+    return () => { cancelled = true; };
+  }, [org.id, showSettings, isCreator]);
+  const delStatsText = delStats
+    ? (t('organisms.deleteOrganismStats') || 'Deletes {w} workspaces, {r} records and {d} documents. This cannot be undone.')
+        .replace('{w}', String(delStats.ws)).replace('{r}', String(delStats.recs)).replace('{d}', String(delStats.docs))
+    : (t('organisms.deleteWarnGeneric') || 'Deletes the organism with all its workspaces and content. This cannot be undone.');
+  const doDelete = () => {
+    confirm(`${(t('organisms.confirmDeleteName') || 'Delete “{name}”?').replace('{name}', org.name || org.id)} ${delStatsText}`, async () => {
+      try {
+        await orgService.deleteOrganism(org.id);
+        showToast(t('organisms.deleted') || 'Organism deleted');
+        onBack(); onChanged?.();
+      } catch { showToast(t('organisms.deleteError') || 'Failed to delete'); }
+    }, { danger: true, title: t('organisms.deleteOrganismTitle') || 'Delete this organism' });
+  };
+
+  const extraAdmins = (org.admins || []).filter(a => a !== org.creatorGhii);
+  const visHint = t(`organisms.visHint.${form.visibility}`);
+  const policyHint = t(`organisms.policyHint.${form.join_policy}`);
+  const hintText = [visHint, policyHint].filter(h => h && !h.startsWith('organisms.')).join(' ');
+
   const renderSettings = () => html`
     <div class="card-detail pj-org-settings">
-      <div class="detail-grid">
-        <div class="detail-item">
-          <span class="detail-label">${t('organisms.creator') || 'Creator'}</span>
-          <span class="detail-value">${escHtml(org.creatorGhii || '-')}</span>
-        </div>
-        <div class="detail-item">
-          <span class="detail-label">${t('organisms.admins') || 'Admins'}</span>
-          <span class="detail-value">${(org.admins || []).join(', ') || '-'}</span>
-        </div>
-        <div class="detail-item">
-          <span class="detail-label">${t('organisms.memberCount') || 'Members'}</span>
-          <span class="detail-value">${(org.members || []).length} / ${org.maxMembers || 500}</span>
-        </div>
-        ${org.createdAt ? html`
-          <div class="detail-item">
-            <span class="detail-label">${t('organisms.createdAt') || 'Created'}</span>
-            <span class="detail-value">${fmtDate(org.createdAt)}</span>
-          </div>` : null}
+      <div class="pj-meta-line">
+        ${org.createdAt ? html`<span>${t('organisms.createdAt') || 'Created'} ${fmtDate(org.createdAt)}</span>` : null}
+        <span>${t('organisms.creator') || 'Creator'} ${(org.creatorGhii || '-')}</span>
+        ${extraAdmins.length > 0 ? html`<span>${t('organisms.admins') || 'Admins'} ${(extraAdmins.join(', '))}</span>` : null}
         ${org.boardId ? html`
-          <div class="detail-item">
-            <span class="detail-label">${t('organisms.board') || 'Board'}</span>
-            <span class="detail-value mono" title=${escHtml(org.boardId)}>${escHtml(boardIdShort)}
-              <button class="pj-icon-btn" title=${t('organisms.copyId') || 'Copy ID'} onClick=${copyBoardId}>${'📋'}</button>
-            </span>
-          </div>` : null}
+          <span>${t('organisms.board') || 'Board'} <span class="mono" title=${(org.boardId)}>${(boardIdShort)}</span>
+            <button class="pj-icon-btn" title=${t('organisms.copyId') || 'Copy ID'} onClick=${copyBoardId}>${'📋'}</button>
+          </span>` : null}
       </div>
-      ${(org.interests || []).length > 0 ? html`
-        <div class="flex-row-wrap">
-          ${org.interests.map(tag => html`<span class="file-tag" key=${tag}>${escHtml(tag)}</span>`)}
-        </div>` : null}
 
-      ${canEdit ? (editForm ? html`
-        <div class="flex-col">
-          <input type="text" value=${editForm.name} onInput=${(e) => setEditForm(f => ({ ...f, name: e.target.value }))}
-            placeholder=${t('organisms.namePlaceholder') || 'Name'} class="input-field input-sm" />
-          <textarea value=${editForm.description} onInput=${(e) => setEditForm(f => ({ ...f, description: e.target.value }))} rows="2"
-            placeholder=${t('organisms.descPlaceholder') || 'Description'} class="input-field input-sm" />
-          <input type="text" value=${editForm.interests} onInput=${(e) => setEditForm(f => ({ ...f, interests: e.target.value }))}
-            placeholder=${t('organisms.interestsPlaceholder') || 'Interests (comma separated)'} class="input-field input-sm" />
-          <div class="flex-row-wrap">
-            <select value=${editForm.type} onChange=${(e) => setEditForm(f => ({ ...f, type: e.target.value }))} class="input-field input-sm">
+      ${canEdit ? html`
+        <div class="pj-form-group">${t('organisms.formIdentity') || 'Identity'}</div>
+        <label class="pj-field"><span>${t('organisms.fieldName') || 'Name'}</span>
+          <input type="text" class="input-field input-sm" value=${form.name} onInput=${(e) => setForm(f => ({ ...f, name: e.target.value }))} /></label>
+        <label class="pj-field"><span>${t('organisms.fieldDescription') || 'Description'}</span>
+          <textarea class="input-field input-sm" rows="2" value=${form.description} onInput=${(e) => setForm(f => ({ ...f, description: e.target.value }))}></textarea></label>
+        <div class="pj-field"><span>${t('organisms.fieldInterests') || 'Interests'}</span>
+          <${TagInput} tags=${form.interests} onChange=${(tags) => setForm(f => ({ ...f, interests: tags }))} placeholder=${t('organisms.addTag') || 'Add…'} /></div>
+
+        <div class="pj-form-group">${t('organisms.formAccess') || 'Access'}</div>
+        <div class="pj-form-row">
+          <label class="pj-field"><span>${t('organisms.fieldType') || 'Type'}</span>
+            <select class="input-field input-sm" value=${form.type} onChange=${(e) => setForm(f => ({ ...f, type: e.target.value }))}>
               <option value="community">${t('organisms.types.community') || 'Community'}</option>
               <option value="team">${t('organisms.types.team') || 'Team'}</option>
               <option value="club">${t('organisms.types.club') || 'Club'}</option>
               <option value="cooperative">${t('organisms.types.cooperative') || 'Cooperative'}</option>
               <option value="project">${t('organisms.types.project') || 'Project'}</option>
-            </select>
-            <select value=${editForm.join_policy} onChange=${(e) => setEditForm(f => ({ ...f, join_policy: e.target.value }))} class="input-field input-sm">
+            </select></label>
+          <label class="pj-field"><span>${t('organisms.policyLabel') || 'Join policy'}</span>
+            <select class="input-field input-sm" value=${form.join_policy} onChange=${(e) => setForm(f => ({ ...f, join_policy: e.target.value }))}>
               <option value="open">${t('organisms.policyOpen') || 'Open (anyone can join)'}</option>
               <option value="approval_required">${t('organisms.policyApproval') || 'Approval required'}</option>
               <option value="invite_only">${t('organisms.policyInvite') || 'Invite only'}</option>
-            </select>
-            <select value=${editForm.visibility} onChange=${(e) => setEditForm(f => ({ ...f, visibility: e.target.value }))} class="input-field input-sm">
+            </select></label>
+          <label class="pj-field"><span>${t('organisms.fieldVisibility') || 'Visibility'}</span>
+            <select class="input-field input-sm" value=${form.visibility} onChange=${(e) => setForm(f => ({ ...f, visibility: e.target.value }))}>
               <option value="public">${t('organisms.visPublic') || 'Public'}</option>
               <option value="listed">${t('organisms.visListed') || 'Listed'}</option>
               <option value="private">${t('organisms.visPrivate') || 'Private'}</option>
-            </select>
-          </div>
-          <div class="flex-row-wrap">
-            <button class="btn-primary btn-sm" onClick=${saveEdit} disabled=${saving}>${saving ? '...' : (t('organisms.save') || 'Save')}</button>
-            <button class="btn-ghost btn-sm" onClick=${() => setEditForm(null)}>${t('organisms.cancel') || 'Cancel'}</button>
-          </div>
+            </select></label>
         </div>
-      ` : html`
-        <div class="flex-row-wrap">
-          <button class="btn-outline btn-sm" onClick=${() => setEditForm(seedForm())}>${t('organisms.edit') || 'Edit'}</button>
+        ${hintText ? html`<div class="pj-form-hint">${hintText}</div>` : null}
+
+        <div class="form-actions">
+          <button class="btn-primary btn-sm" onClick=${saveEdit} disabled=${saving || !dirty || !form.name.trim()}>
+            ${saving ? '...' : (t('organisms.saveChanges') || 'Save changes')}</button>
+          <button class="btn-ghost btn-sm" onClick=${() => { setForm(baseline); setShowSettings(false); }}>${t('organisms.cancel') || 'Cancel'}</button>
         </div>
-      `) : null}
+      ` : null}
+    </div>
 
-      ${(isCreator || isMember) ? html`
-        <div class="detail-label">${t('organisms.dangerZone') || 'Danger zone'}</div>
-        <div class="flex-row-wrap">
-          ${isMember && !isCreator ? html`
-            <button class="btn-danger btn-sm" onClick=${onLeave}>${t('organisms.leave') || 'Leave'}</button>` : null}
-          ${isCreator ? html`
-            <button class="btn-danger btn-sm" onClick=${onDelete}>${t('organisms.delete') || 'Delete'}</button>` : null}
-        </div>` : null}
-    </div>`;
+    ${(isCreator || isMember) ? html`
+      <div class="pj-danger pj-danger-box">
+        ${isCreator ? html`
+          <div class="pj-danger-row">
+            <div class="pj-danger-text">
+              <div class="pj-danger-title">${t('organisms.deleteOrganismTitle') || 'Delete this organism'}</div>
+              <div class="pj-danger-sub">${delStatsText}</div>
+            </div>
+            <button class="btn-danger btn-sm" onClick=${() => { setDelOpen(o => !o); setDelName(''); }}>${t('organisms.deleteDots') || 'Delete…'}</button>
+          </div>
+          ${delOpen ? html`
+            <div class="pj-danger-confirm">
+              <label class="pj-field"><span>${(t('organisms.confirmTypeName') || 'Type the organism’s name to confirm') + ': ' + (org.name || '')}</span>
+                <input type="text" class="input-field input-sm" value=${delName} onInput=${(e) => setDelName(e.target.value)} placeholder=${org.name || ''} /></label>
+              <button class="btn-danger btn-sm" disabled=${delName.trim() !== (org.name || '').trim()} onClick=${doDelete}>${t('organisms.delete') || 'Delete'}</button>
+            </div>` : null}
+        ` : null}
+        ${isMember && !isCreator ? html`
+          <div class="pj-danger-row">
+            <div class="pj-danger-text">
+              <div class="pj-danger-title">${t('organisms.leave') || 'Leave'}</div>
+            </div>
+            <button class="btn-danger btn-sm" onClick=${onLeave}>${t('organisms.leave') || 'Leave'}</button>
+          </div>` : null}
+      </div>` : null}
+  `;
 
+  const reqPill = pendingJoin > 0
+    ? (pendingJoin === 1 ? (t('organisms.reqOne') || '1 request') : (t('organisms.reqMany') || '{n} requests').replace('{n}', String(pendingJoin)))
+    : null;
   const tabs = [
     { id: 'workspaces', label: t('organisms.tabWorkspaces') || 'Workspaces', count: wsCount },
-    { id: 'members', label: t('organisms.tabMembers') || 'Members', count: (org.members || []).length },
+    { id: 'members', label: t('organisms.tabMembers') || 'Members', count: (org.members || []).length, pill: reqPill },
     { id: 'agents', label: t('organisms.tabAgents') || 'Agents', count: (org.agentGaiis || []).length },
     { id: 'board', label: t('organisms.tabBoard') || 'Board', count: null },
   ];
 
+  // Settings REPLACES the tab content — while it is open no tab is highlighted (a lit tab above
+  // settings content lies about what the user is looking at), and the breadcrumb says so.
+  const activeHomeTab = showSettings ? '' : tab;
+  const pickHomeTab = (id) => guardDirty(() => { setShowSettings(false); setTab(id); });
+
   return html`
     <div class="pj-ws">
       <div class="pj-org-breadcrumb">
-        <button class="pj-org-crumb-link" onClick=${onBack}>${t('organisms.title') || 'Organisms'}</button>
+        <button class="pj-org-crumb-link" onClick=${() => guardDirty(onBack)}>${t('organisms.title') || 'Organisms'}</button>
         <span class="pj-org-crumb-sep">/</span>
-        <span>${escHtml(org.name || org.id)}</span>
+        ${showSettings ? html`
+          <button class="pj-org-crumb-link" onClick=${() => guardDirty(() => setShowSettings(false))}>${(org.name || org.id)}</button>
+          <span class="pj-org-crumb-sep">/</span>
+          <span>${t('organisms.settings') || 'Settings'}</span>
+        ` : html`<span>${(org.name || org.id)}</span>`}
       </div>
 
       <div class="pj-org-home-head">
         <div class="pj-org-avatar pj-org-avatar-lg" aria-hidden="true">${orgInitials(org.name)}</div>
         <div class="pj-org-home-title">
           <div class="pj-org-titlerow">
-            <span class="pj-org-home-name">${escHtml(org.name || org.id)}</span>
+            <span class="pj-org-home-name">${(org.name || org.id)}</span>
             <span class="badge badge-info">${typeLabel}</span>
             <span class="badge ${org.visibility === 'public' ? 'badge-success' : 'badge-warn'}">${org.visibility || ''}</span>
           </div>
-          ${org.description ? html`<div class="section-desc pj-org-home-desc">${escHtml(org.description)}</div>` : null}
+          ${org.description ? html`<div class="section-desc pj-org-home-desc">${(org.description)}</div>` : null}
         </div>
         <div class="pj-org-home-actions">
           <button class="btn-outline btn-sm" title=${t('organisms.exportOrgHint') || 'Download a ZIP backup of the whole organism (all workspaces)'}
             onClick=${() => exportOrganismZip(org, showToast)}>${'⬇ '}${t('organisms.exportOrg') || 'Export'}</button>
-          <button class="btn-outline btn-sm ${showSettings ? 'pj-org-btn-active' : ''}" onClick=${() => setShowSettings(s => !s)}>${'⚙ '}${t('organisms.settings') || 'Settings'}</button>
+          <button class="btn-outline btn-sm ${showSettings ? 'pj-org-btn-active' : ''}" onClick=${() => guardDirty(() => setShowSettings(s => !s))}>${'⚙ '}${t('organisms.settings') || 'Settings'}</button>
         </div>
       </div>
 
-      ${showSettings ? renderSettings() : null}
-
       <div class="pj-org-tabs" role="tablist">
         ${tabs.map(tb => html`
-          <button class="pj-org-tab ${tab === tb.id ? 'active' : ''}" role="tab" aria-selected=${tab === tb.id} key=${tb.id}
-            onClick=${() => setTab(tb.id)}>
+          <button class="pj-org-tab ${activeHomeTab === tb.id ? 'active' : ''}" role="tab" aria-selected=${activeHomeTab === tb.id} key=${tb.id}
+            onClick=${() => pickHomeTab(tb.id)}>
             ${tb.label}${tb.count !== null && tb.count !== undefined ? html`<span class="pj-org-tab-count">${tb.count}</span>` : null}
+            ${tb.pill ? html`<span class="pj-tab-pill">${tb.pill}</span>` : null}
           </button>`)}
       </div>
 
-      ${tab === 'workspaces' ? html`
+      ${showSettings ? renderSettings() : null}
+
+      ${activeHomeTab === 'workspaces' ? html`
         <${WorkspaceList} org=${org} showToast=${showToast} onOpen=${onOpenWs} onCount=${setWsCount} />
-        <${OrgSearch} orgId=${org.id} onOpenWorkspace=${(ws) => onOpenWs(ws)} />
       ` : null}
 
-      ${tab === 'members' ? html`
+      ${activeHomeTab === 'members' ? html`
         <${OrgMemberManager} org=${org} ghii=${ghii} canManage=${canEdit} isCreator=${isCreator}
           showToast=${showToast} confirm=${confirm} onChanged=${onChanged} show="members" />` : null}
 
-      ${tab === 'agents' ? html`
-        <${OrgMemberManager} org=${org} ghii=${ghii} canManage=${canEdit} isCreator=${isCreator}
-          showToast=${showToast} confirm=${confirm} onChanged=${onChanged} show="agents" />` : null}
-
-      ${tab === 'board' ? html`
-        <div class="card-detail">
-          <div class="section-title">${t('organisms.tabBoard') || 'Board'}</div>
-          ${org.boardId ? html`
-            <div class="section-desc">${t('organisms.boardDesc') || 'This organism has a discussion board. Open it in the Boards view.'}</div>
-            <div class="pj-org-boardrow">
-              <span class="mono" title=${escHtml(org.boardId)}>${escHtml(boardIdShort)}</span>
-              <button class="pj-icon-btn" title=${t('organisms.copyId') || 'Copy ID'} onClick=${copyBoardId}>${'📋'}</button>
-              <button class="btn-outline btn-sm" onClick=${() => window.dispatchEvent(new CustomEvent('aimeat-open-tab', { detail: { tabId: 'boards' } }))}>
-                ${t('organisms.openBoardsTab') || 'Open in Boards'}</button>
-            </div>
-          ` : html`
-            <div class="section-desc">${t('organisms.noBoard') || 'This organism has no board.'}</div>
-          `}
-        </div>` : null}
+      ${activeHomeTab === 'agents' ? html`
+        <${OrgAgentsPanel} org=${org} ghii=${ghii} canManage=${canEdit} showToast=${showToast} onChanged=${onChanged} />` : null}
+
+      ${activeHomeTab === 'board' ? (org.boardId
+        ? html`<${BoardPreview} boardId=${org.boardId} showToast=${showToast} />`
+        : html`<div class="card-detail"><div class="section-desc">${t('organisms.noBoard') || 'This organism has no board.'}</div></div>`) : null}
 
       <${ConfirmUI} />
     </div>`;
@@ -1053,16 +1438,42 @@ function WorkspaceList({ org, showToast, onOpen, onCount }) {
   const [newName, setNewName] = useState('');
   const [busy, setBusy] = useState(false);
   const [overview, setOverview] = useState('');           // organism dependency-overview chart (mermaid)
-  const [showOverview, setShowOverview] = useState(true);
+  const [showOverview, setShowOverview] = useState(false); // map hidden by default — the list is the content
   const [openReqWs, setOpenReqWs] = useState(null);       // which owned workspace's request-inbox is open
   const [reqInbox, setReqInbox] = useState([]);           // access requests for openReqWs
+  const [openPeopleWs, setOpenPeopleWs] = useState(null); // which workspace's inline participants list is open
+  const [wsStats, setWsStats] = useState({});             // wsId → { recs, docs, lastEv, hasManifest }
+  const [apprByWs, setApprByWs] = useState({});           // wsId → pending review count
 
   // Discovery: every workspace in the org (membership-gated) with this user's access status. A member
-  // sees workspaces they can't yet read (access:'none') so they can request access.
+  // sees workspaces they can't yet read (access:'none') so they can request access. Row enrichment
+  // (record/doc counts, last event, review counter) loads per workspace afterwards, best effort.
   const load = useCallback(async () => {
     const l = await orgService.discoverWorkspaces(orgId);
     setList(l);
     onCount?.(Array.isArray(l) ? l.length : 0);
+    orgService.listApprovals(orgId, 'pending').then(aps => {
+      const by = {};
+      for (const a of (aps || [])) { const w = a.arguments?.ws; if (w) by[w] = (by[w] || 0) + 1; }
+      setApprByWs(by);
+    }).catch(() => {});
+    for (const w of (l || []).filter(x => x.access !== 'none')) {
+      Promise.all([
+        orgService.getWorkspace(orgId, w.id).catch(() => null),
+        orgService.getWorkspaceActivity(orgId, w.id),
+        orgService.getWorkspaceParticipants(orgId, w.id).catch(() => null),
+      ]).then(([wsData, act, parts]) => {
+        let recs = 0, docs = 0;
+        for (const ot of (wsData?.manifest?.objectTypes || []).filter(orgService.isMemorySpace)) {
+          const n = new Set([...(wsData.drafts?.[ot.name] || []), ...(wsData.objects?.[ot.name] || [])].map(d => d.id)).size;
+          if (orgService.isDocSpace(ot)) docs += n; else recs += n;
+        }
+        const lastEv = (act?.events || []).reduce((b, e) => (!b || (e.at || '') > (b.at || '') ? e : b), null);
+        const owners = [];
+        for (const n of (parts?.nodes || [])) for (const o of (n.owners || [])) owners.push({ ...o, node: n.id, isLocalNode: n.isLocal });
+        setWsStats(s => ({ ...s, [w.id]: { recs, docs, lastEv, hasManifest: !!wsData?.manifest, owners } }));
+      }).catch(() => {});
+    }
   }, [orgId, onCount]);
   useEffect(() => { load(); }, [load]);
 
@@ -1147,21 +1558,28 @@ function WorkspaceList({ org, showToast, onOpen, onCount }) {
     } catch (e) { showToast((e && e.message) || 'Import failed'); }
     finally { setBusy(false); }
   };
+  // One enriched meta line per row: "{n} records · {n} docs · last: goal/x published 2 h ago".
+  const metaLine = (w) => {
+    const s = wsStats[w.id];
+    if (!s) return w.access === 'owner' ? (t('organisms.yours') || 'yours') : (t('organisms.byCreator') || 'by {creator}').replace('{creator}', w.created_by || '?');
+    if (!s.hasManifest) return t('organisms.wsNotSetUp') || 'new — set up when opened';
+    const parts = [
+      s.recs === 1 ? (t('organisms.recOne') || '1 record') : (t('organisms.recMany') || '{n} records').replace('{n}', String(s.recs)),
+      s.docs === 1 ? (t('organisms.docOne') || '1 document') : (t('organisms.docMany') || '{n} documents').replace('{n}', String(s.docs)),
+    ];
+    if (s.lastEv) {
+      const verb = s.lastEv.action === 'publish' ? (t('organisms.publishedVerb') || 'published') : (t('organisms.editedVerb') || 'edited');
+      parts.push(`${t('organisms.lastLabel') || 'last:'} ${s.lastEv.type}/${s.lastEv.instance} ${verb} ${relTime(s.lastEv.at)}`);
+    } else parts.push(t('organisms.noActivityYet') || 'no activity yet');
+    return parts.join(' · ');
+  };
+
   return html`
     <div class="pj-ws-embedded">
       <${ConfirmUI} />
       <input type="file" accept=".zip,application/zip" ref=${fileRef} style="display:none" onChange=${(e) => { const f = e.target.files && e.target.files[0]; e.target.value = ''; doImport(f); }} />
       <div class="section-desc">${t('organisms.workspacesDesc') || 'Workspaces in this organism — each is an independent space with its own documents, records and history.'}</div>
 
-      ${overview ? html`
-        <div class="pj-chart">
-          <div class="pj-chart-head">
-            <span class="pj-chart-title">${'🔗 '}${t('organisms.overview') || 'Overview — who & what uses this organism'}</span>
-            <button class="btn-ghost btn-sm" onClick=${() => setShowOverview(s => !s)}>${showOverview ? (t('organisms.hide') || 'Hide') : (t('organisms.show') || 'Show')}</button>
-          </div>
-          ${showOverview ? html`<${Mermaid} chart=${overview} />` : null}
-        </div>` : null}
-
       <div class="pj-ws-bar">
         ${creating ? html`
           <input class="input-field input-sm pj-ws-name-input" autofocus placeholder=${t('organisms.workspaceName') || 'Workspace name'}
@@ -1170,46 +1588,83 @@ function WorkspaceList({ org, showToast, onOpen, onCount }) {
           <button class="btn-ghost btn-sm" onClick=${() => { setCreating(false); setNewName(''); }}>${t('organisms.cancel') || 'Cancel'}</button>
         ` : html`
           <button class="btn-primary btn-sm" onClick=${() => setCreating(true)}>${'+ '}${t('organisms.newWorkspace') || 'New workspace'}</button>
-          <button class="btn-outline btn-sm" disabled=${busy} title=${t('organisms.importHint') || 'Restore a workspace from a .zip backup'} onClick=${() => fileRef.current && fileRef.current.click()}>${'⬆ '}${t('organisms.import') || 'Import'}</button>`}
+          <button class="btn-outline btn-sm" disabled=${busy} title=${t('organisms.importHint') || 'Restore a workspace from a .zip backup'} onClick=${() => fileRef.current && fileRef.current.click()}>${'⬆ '}${t('organisms.import') || 'Import'}</button>
+          ${overview ? html`<button class="btn-outline btn-sm ${showOverview ? 'pj-org-btn-active' : ''}" onClick=${() => setShowOverview(s => !s)}>${'🗺 '}${t('organisms.showMap') || 'Map'}</button>` : null}`}
       </div>
 
+      <${OrgSearch} orgId=${orgId} onOpenWorkspace=${(ws) => onOpen(ws)} />
+
       ${list === null ? html`<${Spinner} />`
         : list.length === 0 ? html`<${EmptyState} icon="🗂️" text=${t('organisms.noWorkspaces') || 'No workspaces yet — create one to get started.'} />`
         : html`
-          <div class="pj-ws-list-label">${t('organisms.currentWorkspaces') || 'Workspaces in this organism'}</div>
-          <div class="pj-ws-list">
-          ${list.map(w => html`
-            <div class="pj-ws-card" key=${w.id}>
-              ${w.access === 'none' ? html`
-                <div class="pj-ws-open pj-ws-locked">
-                  <span class="pj-ws-card-name">${'🔒 '}${escHtml(w.name || w.id)}</span>
-                  <span class="pj-ws-card-meta">${(t('organisms.byCreator') || 'by {creator}').replace('{creator}', w.created_by || '?')}</span>
+          <div class="pj-org-list">
+          ${list.map(w => {
+            const locked = w.access === 'none';
+            const reviews = apprByWs[w.id] || 0;
+            const menuItems = w.access === 'owner' ? [
+              { label: t('organisms.requests') || 'Access requests', icon: '👥', onClick: () => toggleInbox(w) },
+              { label: t('organisms.export') || 'Export backup (.zip)', icon: '⬇', onClick: () => doExport(w) },
+              { label: t('organisms.delete') || 'Delete', danger: true, onClick: () => remove(w.id, w.name || w.id) },
+            ] : [];
+            return html`
+            <div class="pj-org-row" key=${w.id}>
+              <div class="pj-org-avatar" aria-hidden="true">${'🗂'}</div>
+              <div class="pj-org-main ${locked ? 'pj-org-main-static' : ''}" role=${locked ? undefined : 'button'} tabindex=${locked ? undefined : '0'}
+                onClick=${locked ? undefined : (() => onOpen(w.id))}
+                onKeyDown=${locked ? undefined : ((e) => { if (e.key === 'Enter') onOpen(w.id); })}>
+                <div class="pj-org-titlerow">
+                  ${locked ? html`<span class="pj-org-lock">${'🔒'}</span>` : null}
+                  <span class="pj-org-name">${(w.name || w.id)}</span>
+                  ${reviews > 0 ? html`<span class="pj-tab-pill">${'📨 '}${(t('organisms.toReview') || '{n} to review').replace('{n}', String(reviews))}</span>` : null}
                 </div>
-                <button class="btn-outline btn-sm" disabled=${busy} onClick=${() => requestAccess(w)}>${t('organisms.requestAccess') || 'Request access'}</button>
-              ` : html`
-                <button class="pj-ws-open" onClick=${() => onOpen(w.id)}>
-                  <span class="pj-ws-card-name">${escHtml(w.name || w.id)}</span>
-                  <span class="pj-ws-card-meta">${w.access === 'owner' ? (t('organisms.yours') || 'yours') : (t('organisms.byCreator') || 'by {creator}').replace('{creator}', w.created_by || '?')}${w.created_at ? ' · ' + dt(w.created_at) : ''}</span>
-                </button>
-                ${w.access === 'owner' ? html`
-                  <button class="pj-icon-btn" title=${t('organisms.requests') || 'Access requests'} onClick=${() => toggleInbox(w)}>👥</button>
-                  <button class="pj-icon-btn" title=${t('organisms.export') || 'Export backup (.zip)'} onClick=${() => doExport(w)}>⬇</button>
-                  <button class="pj-icon-btn" title=${t('organisms.delete') || 'Delete'} disabled=${busy} onClick=${() => remove(w.id, w.name || w.id)}>✕</button>
-                ` : null}
-              `}
+                <div class="pj-org-desc">${locked
+                  ? (t('organisms.byCreator') || 'by {creator}').replace('{creator}', w.created_by || '?')
+                  : metaLine(w)}</div>
+              </div>
+              <div class="pj-org-stats">
+                ${(wsStats[w.id]?.owners || []).length > 0 ? html`
+                  <button class="pj-org-stat pj-stat-btn ${openPeopleWs === w.id ? 'active' : ''}" title=${t('organisms.participants') || 'Who works here'}
+                    onClick=${(e) => { e.stopPropagation(); setOpenPeopleWs(p => (p === w.id ? null : w.id)); }}>${'👥'} ${wsStats[w.id].owners.length}</button>` : null}
+                ${w.created_at ? html`<span class="pj-org-stat pj-org-date" title=${t('organisms.createdAt') || 'Created'}>${fmtDate(w.created_at)}</span>` : null}
+              </div>
+              ${locked
+                ? html`<button class="btn-outline btn-sm pj-org-openbtn" disabled=${busy} onClick=${() => requestAccess(w)}>${t('organisms.requestAccess') || 'Request access'}</button>`
+                : html`<button class="btn-outline btn-sm pj-org-openbtn" onClick=${() => onOpen(w.id)}>${t('organisms.open') || 'Open'}</button>`}
+              ${menuItems.length ? html`<${KebabMenu} label=${t('organisms.moreActions') || 'More actions'} items=${menuItems} />` : null}
+              ${openPeopleWs === w.id ? html`
+                <div class="pj-org-detail">
+                  ${(wsStats[w.id]?.owners || []).map(o => html`
+                    <div class="pj-ws-person" key=${'p-' + o.owner}>
+                      <span>${'👤 '}<strong>${(o.owner)}</strong></span>
+                      ${o.isCreator ? html`<span class="badge badge-success pj-mini">${t('organisms.creatorTag') || 'creator'}</span>` : null}
+                      ${o.isSelf ? html`<span class="badge badge-info pj-mini">${t('organisms.you') || 'you'}</span>` : null}
+                      ${!o.isLocalNode ? html`<span class="pj-mini">${'🌐 '}${(o.node)}</span>` : null}
+                      ${(o.agents || []).length > 0 ? html`<span class="pj-ws-person-agents">${'🤖'} ${(o.agents || []).length}</span>` : null}
+                    </div>`)}
+                </div>` : null}
               ${openReqWs === w.id ? html`
-                <div class="pj-ws-inbox">
+                <div class="pj-org-detail">
                   ${reqInbox.length === 0 ? html`<div class="pj-ws-inbox-empty">${t('organisms.noRequests') || 'No access requests.'}</div>`
                     : reqInbox.map(r => html`
                       <div class="pj-ws-req" key=${r.requester}>
-                        <span class="pj-ws-req-who">${escHtml(r.requester)}${r.message ? html` <span class="pj-ws-req-msg">— ${escHtml(r.message)}</span>` : null}</span>
+                        <span class="pj-ws-req-who">${(r.requester)}${r.message ? html` <span class="pj-ws-req-msg">— ${(r.message)}</span>` : null}</span>
                         ${r.status === 'approved'
                           ? html`<span class="pj-ws-req-ok">✓ ${t('organisms.approved') || 'approved'}</span><button class="btn-ghost btn-sm" disabled=${busy} onClick=${() => decide(w, r.requester, 'deny')}>${t('organisms.revoke') || 'Revoke'}</button>`
                           : html`<button class="btn-success btn-sm" disabled=${busy} onClick=${() => decide(w, r.requester, 'approve')}>${t('organisms.approve') || 'Approve'}</button><button class="btn-ghost btn-sm" disabled=${busy} onClick=${() => decide(w, r.requester, 'deny')}>${t('organisms.deny') || 'Deny'}</button>`}
                       </div>`)}
                 </div>` : null}
-            </div>`)}
+            </div>`;
+          })}
         </div>`}
+
+      ${overview && showOverview ? html`
+        <div class="pj-chart">
+          <div class="pj-chart-head">
+            <span class="pj-chart-title">${'🔗 '}${t('organisms.overview') || 'Overview — who & what uses this organism'}</span>
+            <button class="btn-ghost btn-sm" onClick=${() => setShowOverview(false)}>${t('organisms.hide') || 'Hide'}</button>
+          </div>
+          <${Mermaid} chart=${overview} />
+        </div>` : null}
     </div>`;
 }
 
@@ -1320,10 +1775,10 @@ function ActivityPanel({ orgId, wsId }) {
             ${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">${escHtml(e.actor)}</span>
-              ${e.agent ? html`<span class="pj-act-agent" title=${t('organisms.viaAgent') || 'via this agent'}>${'🤖 '}${escHtml(e.agent)}</span>` : null}
+              <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">${escHtml(e.mode === 'document' ? '📄' : '🗂')} ${escHtml(e.type)}${' / '}${escHtml(e.instance)}</span>
+              <span class="pj-act-what">${(e.mode === 'document' ? '📄' : '🗂')} ${(e.type)}${' / '}${(e.instance)}</span>
             </div>`)}
           </div>
         </div>` : null}
@@ -1373,18 +1828,18 @@ function ParticipantsPanel({ orgId, wsId }) {
           <div class="pj-parts-list">
             ${owners.map((o, i) => html`<div class="pj-part-owner" key=${i}>
               <div class="pj-part-human">
-                <span>${'👤 '}<strong>${escHtml(o.owner)}</strong></span>
+                <span>${'👤 '}<strong>${(o.owner)}</strong></span>
                 ${o.isSelf ? html`<span class="badge badge-info pj-mini">${t('organisms.you') || 'you'}</span>` : null}
                 ${o.isCreator ? html`<span class="badge badge-success pj-mini">${t('organisms.creatorTag') || 'creator'}</span>` : null}
                 ${!o.isMember && !o.isSelf ? html`<span class="badge badge-warn pj-mini">${t('organisms.guest') || 'guest'}</span>` : null}
-                ${!o.isLocalNode ? html`<span class="pj-part-node">${'🌐 '}${escHtml(o.node)}</span>` : null}
+                ${!o.isLocalNode ? html`<span class="pj-part-node">${'🌐 '}${(o.node)}</span>` : null}
                 ${o.contributions ? html`<span class="pj-part-count" title=${t('organisms.contributions') || 'contributions'}>${o.contributions}</span>` : null}
               </div>
               ${(o.agents || []).length ? html`<div class="pj-part-agents">
                 ${o.agents.map((a, j) => html`
                   <span class="pj-part-agent ${a.isOwn ? 'own' : 'ghost'}" key=${j}
                     title=${a.isOwn ? '' : (t('organisms.otherAgentHint') || 'Another owner’s agent — you see what it has done here, not its live status')}>
-                    ${'🤖 '}${escHtml(a.name)}<span class="pj-part-count">${a.contributions}</span>
+                    ${'🤖 '}${(a.name)}<span class="pj-part-count">${a.contributions}</span>
                   </span>`)}
               </div>` : null}
             </div>`)}
@@ -1393,7 +1848,7 @@ function ParticipantsPanel({ orgId, wsId }) {
             <div class="pj-access">
               <div class="pj-access-title">${t('organisms.manageAccess') || 'Manage who can work here'}</div>
               ${pending.map(r => html`<div class="pj-access-row" key=${'req-' + r.requester}>
-                <span class="pj-access-who">${'🙋 '}<strong>${escHtml(r.requester)}</strong> <span class="pj-access-note">${t('organisms.requestedAccess') || 'requested access'}</span></span>
+                <span class="pj-access-who">${'🙋 '}<strong>${(r.requester)}</strong> <span class="pj-access-note">${t('organisms.requestedAccess') || 'requested access'}</span></span>
                 <span class="pj-access-actions">
                   <button class="btn-success btn-sm" disabled=${busy} onClick=${() => doDecide(r.requester, 'contributor')}>${t('organisms.addAsContributor') || 'Add as contributor'}</button>
                   <button class="btn-outline btn-sm" disabled=${busy} onClick=${() => doDecide(r.requester, 'viewer')}>${t('organisms.addAsViewer') || 'as viewer'}</button>
@@ -1401,7 +1856,7 @@ function ParticipantsPanel({ orgId, wsId }) {
                 </span>
               </div>`)}
               ${members.map(m => html`<div class="pj-access-row" key=${'mem-' + m.owner}>
-                <span class="pj-access-who">${'👤 '}<strong>${escHtml(m.owner)}</strong> <span class="badge ${m.role === 'contributor' ? 'badge-success' : 'badge-info'} pj-mini">${m.role === 'contributor' ? (t('organisms.roleContributorShort') || 'contributor') : (t('organisms.roleViewerShort') || 'viewer')}</span></span>
+                <span class="pj-access-who">${'👤 '}<strong>${(m.owner)}</strong> <span class="badge ${m.role === 'contributor' ? 'badge-success' : 'badge-info'} pj-mini">${m.role === 'contributor' ? (t('organisms.roleContributorShort') || 'contributor') : (t('organisms.roleViewerShort') || 'viewer')}</span></span>
                 <span class="pj-access-actions">
                   ${m.role === 'viewer'
                     ? html`<button class="btn-outline btn-sm" disabled=${busy} onClick=${() => doGrant(m.owner, 'contributor')}>${t('organisms.makeContributor') || '→ can write'}</button>`
@@ -1483,13 +1938,13 @@ function WorkspaceComments({ orgId, ws, space, instanceId, showToast }) {
       ${list.map(c => html`
         <div class="pj-comment ${c.parentId ? 'pj-comment-reply' : ''}" key=${c.id}>
           <div class="pj-comment-head">
-            <b>${escHtml(c.author || '?')}</b>
+            <b>${(c.author || '?')}</b>
             ${c.parentId ? html`<span class="pj-mini"> · ${t('organisms.inReply') || 'reply'}</span>` : null}
-            ${c.anchor?.quote ? html`<span class="pj-mini"> · “${escHtml(String(c.anchor.quote).slice(0, 80))}”</span>` : null}
-            ${c.anchor?.section ? html`<span class="pj-mini"> · §${escHtml(c.anchor.section)}</span>` : null}
+            ${c.anchor?.quote ? html`<span class="pj-mini"> · “${(String(c.anchor.quote).slice(0, 80))}”</span>` : null}
+            ${c.anchor?.section ? html`<span class="pj-mini"> · §${(c.anchor.section)}</span>` : null}
             <span class="pj-mini"> · ${c.createdAt ? dt(c.createdAt) : ''}</span>
           </div>
-          <div class="pj-comment-body">${escHtml(c.body || '')}</div>
+          <div class="pj-comment-body">${(c.body || '')}</div>
           <div class="pj-comment-actions">
             <button class="btn-ghost btn-sm" disabled=${busy} onClick=${() => setReplyTo({ id: c.id, body: c.body })}>${t('organisms.reply') || 'Reply'}</button>
             ${mine(c.author) ? html`<button class="btn-ghost btn-sm" disabled=${busy} onClick=${() => remove(c)}>${t('organisms.delete') || 'Delete'}</button>` : null}
@@ -1497,7 +1952,7 @@ function WorkspaceComments({ orgId, ws, space, instanceId, showToast }) {
         </div>
       `)}
       <div class="pj-comment-compose">
-        ${replyTo ? html`<div class="pj-mini">${t('organisms.replyingTo') || 'Replying to'}: “${escHtml(String(replyTo.body || '').slice(0, 60))}” <button class="btn-ghost btn-sm" onClick=${() => setReplyTo(null)}>${t('organisms.cancel') || 'Cancel'}</button></div>` : null}
+        ${replyTo ? html`<div class="pj-mini">${t('organisms.replyingTo') || 'Replying to'}: “${(String(replyTo.body || '').slice(0, 60))}” <button class="btn-ghost btn-sm" onClick=${() => setReplyTo(null)}>${t('organisms.cancel') || 'Cancel'}</button></div>` : null}
         <input class="input-field input-sm" placeholder=${t('organisms.anchorQuotePlaceholder') || 'Optional: quote a passage to anchor the comment'} value=${anchorQuote} onInput=${(e) => setAnchorQuote(e.target.value)} />
         <textarea class="input-field input-sm" rows="2" placeholder=${t('organisms.commentPlaceholder') || 'Add a comment…'} value=${body} onInput=${(e) => setBody(e.target.value)}></textarea>
         <button class="btn-primary btn-sm" disabled=${busy || !body.trim()} onClick=${submit}>${t('organisms.postComment') || 'Comment'}</button>
@@ -1506,8 +1961,15 @@ function WorkspaceComments({ orgId, ws, space, instanceId, showToast }) {
   `;
 }
 
-function Workspace({ org, wsId, showToast, onBack }) {
+function Workspace({ org, wsId, showToast, onBack, onBackToList }) {
   const orgId = org.id;
+  // Registry name for the breadcrumb (the manifest's name can differ from the workspace's name).
+  const [wsName, setWsName] = useState('');
+  useEffect(() => {
+    let cancelled = false;
+    orgService.listWorkspaces(orgId).then(list => { if (!cancelled) setWsName((list.find(w => w.id === wsId)?.name) || ''); }).catch(() => {});
+    return () => { cancelled = true; };
+  }, [orgId, wsId]);
   // Pop a document out into its own window (served by doc-solo.js) so several can sit side by side,
   // each independent. The window name is unique per document, so re-clicking focuses the open one.
   const popOut = (typeName, docId) => {
@@ -1543,20 +2005,23 @@ function Workspace({ org, wsId, showToast, onBack }) {
     } catch (e) { /* noop */ }
     return null;
   });
+  // Active tab — one tab per manifest space + fixed Review/Activity/People. Persisted per workspace
+  // so an F5 (or back-and-forth) returns to the same tab. '' = not chosen yet → first space.
+  const tabStoreKey = 'aimeat.ws.' + orgId + '.' + wsId + '.tab';
+  const [tab, setTabState] = useState(() => { try { return sessionStorage.getItem(tabStoreKey) || ''; } catch (e) { return ''; } });
+  const setTab = (id) => { setTabState(id); try { sessionStorage.setItem(tabStoreKey, id); } catch (e) { /* noop */ } };
   const [sectionsByType, setSectionsByType] = useState({});  // { typeName: [{id,name,parentId,documents:[docId]}] }
   const [editingSec, setEditingSec] = useState(null);        // section id currently being renamed inline
   const draggedDoc = useRef(null);                            // { type, id } of the doc being dragged
   const [showRegenerate, setShowRegenerate] = useState(false);
   const [delConfirm, setDelConfirm] = useState('');   // typed-name confirmation for delete
   const [newSpaceName, setNewSpaceName] = useState('');
-  const [newSpaceMode, setNewSpaceMode] = useState('document');
   const [addingInitial, setAddingInitial] = useState(null);   // record being edited (null = new draft)
   const [addingId, setAddingId] = useState(null);             // its id, preserved so save overwrites
   const [expandedRec, setExpandedRec] = useState({});         // { "type:id": true } — records expanded to view fields
   const [showSpaces, setShowSpaces] = useState(false);        // inline add-space form at the workspace top
   const [showFlow, setShowFlow] = useState(true);             // the manifest-defined edit-flow chart (first item)
-  const [showShare, setShowShare] = useState(false);          // public-sharing panel
-  const [share, setShare] = useState(null);                   // { public, spaces, docs } — lazy-loaded when the panel opens
+  const [share, setShare] = useState(null);                   // { public, spaces, docs } — lazy-loaded when Settings opens
   const [shareBusy, setShareBusy] = useState(false);
 
   const load = useCallback(async () => {
@@ -1667,11 +2132,20 @@ function Workspace({ org, wsId, showToast, onBack }) {
   const cancelForm = () => { setAdding(null); setAddingSchema(null); setAddingInitial(null); setAddingId(null); };
   const toggleExpand = (ot, id) => setExpandedRec(s => ({ ...s, [ot.name + ':' + id]: !s[ot.name + ':' + id] }));
   // Read-only field view for a record (skips the underscore-prefixed metadata the read attaches).
-  const recordFields = (rec) => {
+  // Manifest-carried workspace translations (generated workspaces): field labels at
+  // "{namespace}.{field}", hints at "{namespace}.{field}.hint", space labels at "type.{name}".
+  // Resolution: active locale → en → '' (callers fall back to the raw key/name).
+  const wsT = useCallback((key) => {
+    const m = ws?.manifest?.i18n;
+    if (!m || typeof m !== 'object') return '';
+    const lang = getLocale();
+    return (m[lang] && m[lang][key]) || (m.en && m.en[key]) || '';
+  }, [ws]);
+  const recordFields = (ot, rec) => {
     const rows = Object.entries(rec || {}).filter(([k, v]) =>
       !k.startsWith('_') && v !== undefined && v !== null && v !== '' && !(Array.isArray(v) && v.length === 0));
     if (!rows.length) return html`<div class="pj-muted pj-rec-empty">${t('organisms.noFields') || 'No fields'}</div>`;
-    return rows.map(([k, v]) => html`<${KeyValueRow} key=${k} label=${k}
+    return rows.map(([k, v]) => html`<${KeyValueRow} key=${k} label=${wsT(`${ot.namespace}.${k}`) || k}
       value=${Array.isArray(v) ? v.join(', ') : (typeof v === 'object' ? JSON.stringify(v) : String(v))} />`);
   };
 
@@ -1777,14 +2251,40 @@ function Workspace({ org, wsId, showToast, onBack }) {
     finally { setBusy(false); }
   }, [orgId, gateOn, showToast]);
 
-  // Populate the settings fields from the manifest whenever the panel opens (incl. after generation).
+  // Populate the settings fields from the manifest when the panel opens (incl. after generation) or
+  // fresher data arrives — but only while the user hasn't touched the fields (seededRef compare), so
+  // a live-update reload never clobbers typing.
+  const seededRef = useRef(null);   // { name, summary, autonomy } last written into the fields
   useEffect(() => {
-    if (showSettings && ws?.manifest) {
-      setSName(ws.manifest.name || '');
-      setSSummary(ws.manifest.summary || '');
-      setSAutonomy(ws.manifest.policy?.agentAutonomy || 'L3');
+    if (!showSettings || !ws?.manifest) return;
+    const sv = seededRef.current;
+    const untouched = !sv || (sName === sv.name && sSummary === sv.summary && sAutonomy === sv.autonomy);
+    if (untouched) {
+      const next = { name: ws.manifest.name || '', summary: ws.manifest.summary || '', autonomy: ws.manifest.policy?.agentAutonomy || 'L3' };
+      setSName(next.name); setSSummary(next.summary); setSAutonomy(next.autonomy);
+      seededRef.current = next;
     }
-  }, [showSettings, ws]);
+  }, [showSettings, ws]);   // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Public sharing lives in its own tab — lazy-load the share state the first time it opens.
+  useEffect(() => {
+    if (tab === 'share' && share === null && ws?.manifest) loadShare();
+  }, [tab, ws]);   // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Dirty-check against the manifest: Save enables only on real changes (doubles as the
+  // unsaved-changes indicator), Cancel resets the fields, and closing a dirty panel asks first.
+  const wsDirty = !!ws?.manifest && (sName !== (ws.manifest.name || '')
+    || sSummary !== (ws.manifest.summary || '')
+    || sAutonomy !== (ws.manifest.policy?.agentAutonomy || 'L3'));
+  const resetSettingsForm = () => {
+    const next = { name: ws?.manifest?.name || '', summary: ws?.manifest?.summary || '', autonomy: ws?.manifest?.policy?.agentAutonomy || 'L3' };
+    setSName(next.name); setSSummary(next.summary); setSAutonomy(next.autonomy);
+    seededRef.current = next;
+  };
+  const guardWsDirty = (fn) => {
+    if (showSettings && wsDirty) confirm(t('organisms.discardChanges') || 'Discard unsaved changes?', () => { resetSettingsForm(); fn(); }, { danger: true });
+    else fn();
+  };
 
   const saveSettings = useCallback(async () => {
     setBusy(true);
@@ -1798,7 +2298,6 @@ function Workspace({ org, wsId, showToast, onBack }) {
       };
       await orgService.saveManifest(orgId, wsId, m);
       showToast(t('organisms.settingsSaved') || 'Settings saved');
-      setShowSettings(false);
       await load();
     } catch (e) { showToast((e && e.message) || 'Failed to save settings'); }
     finally { setBusy(false); }
@@ -1831,13 +2330,15 @@ function Workspace({ org, wsId, showToast, onBack }) {
     if (!newSpaceName.trim() || !ws?.manifest) return;
     setBusy(true);
     try {
-      await orgService.addSpace(orgId, wsId, ws.manifest, newSpaceName.trim(), newSpaceMode);
+      // Manual adds are document spaces ONLY — a record type needs a schema the user can't author
+      // by hand; those are designed with AI via Settings → Process (restructure).
+      await orgService.addSpace(orgId, wsId, ws.manifest, newSpaceName.trim(), 'document');
       showToast(t('organisms.spaceAdded') || 'Space added');
       setNewSpaceName(''); setShowSpaces(false);
       await load();
     } catch (e) { showToast((e && e.message) || 'Failed to add space'); }
     finally { setBusy(false); }
-  }, [newSpaceName, newSpaceMode, ws, wsId, orgId, showToast, load]);
+  }, [newSpaceName, ws, wsId, orgId, showToast, load]);
 
   const removeSpaceHandler = useCallback((typeName) => {
     confirm(
@@ -1905,14 +2406,14 @@ function Workspace({ org, wsId, showToast, onBack }) {
       ${genFail && html`
         <div class="pj-errors">
           <div class="pj-errors-title">${t('organisms.genFailed') || 'Generation failed — try again'}</div>
-          <div class="pj-error-line">${escHtml(genFail)}</div>
+          <div class="pj-error-line">${(genFail)}</div>
         </div>
       `}
 
       ${genErrors.length > 0 && html`
         <div class="pj-errors">
           <div class="pj-errors-title">${t('organisms.fixNeeded') || 'This needs fixing before it can be saved:'}</div>
-          ${genErrors.map((e, i) => html`<div class="pj-error-line" key=${i}>${escHtml(e)}</div>`)}
+          ${genErrors.map((e, i) => html`<div class="pj-error-line" key=${i}>${(e)}</div>`)}
           <div class="form-actions">
             <button class="btn-outline btn-sm" onClick=${copyFixPrompt}>${t('organisms.copyFixPrompt') || 'Copy fix prompt for the AI'}</button>
           </div>
@@ -1927,11 +2428,19 @@ function Workspace({ org, wsId, showToast, onBack }) {
     </div>
   `;
 
+  // Same breadcrumb pattern as the organism home: Organisms / {org} / {workspace} — both ancestors
+  // are links, so the list is one click away from inside a workspace too.
   const back = html`
-    <div class="pj-ws-crumbs">
-      <button class="btn-ghost btn-sm" onClick=${onBack}>${'← '}${t('organisms.backToWorkspaces') || 'Workspaces'}</button>
-      <span class="pj-crumb-sep">/</span>
-      <span class="pj-crumb-org" title=${t('organisms.workspaceOrganism') || 'Organism'}>${'🧬 '}${escHtml(org.name || '')}</span>
+    <div class="pj-org-breadcrumb">
+      <button class="pj-org-crumb-link" onClick=${onBackToList || onBack}>${t('organisms.title') || 'Organisms'}</button>
+      <span class="pj-org-crumb-sep">/</span>
+      <button class="pj-org-crumb-link" onClick=${onBack}>${(org.name || org.id || '')}</button>
+      <span class="pj-org-crumb-sep">/</span>
+      ${showSettings ? html`
+        <button class="pj-org-crumb-link" onClick=${() => guardWsDirty(() => setShowSettings(false))}>${(wsName || ws?.manifest?.name || '…')}</button>
+        <span class="pj-org-crumb-sep">/</span>
+        <span>${t('organisms.settings') || 'Settings'}</span>
+      ` : html`<span>${(wsName || ws?.manifest?.name || '…')}</span>`}
     </div>`;
 
   if (ws === undefined) return html`<div>${back}<${Spinner} text=${t('organisms.loading') || 'Loading...'} /></div>`;
@@ -1940,7 +2449,7 @@ function Workspace({ org, wsId, showToast, onBack }) {
     return html`
       <div class="pj-ws">
         ${back}
-        <div class="section-title">${escHtml(org.name || 'Organism')}</div>
+        <div class="section-title">${(org.name || 'Organism')}</div>
         <div class="section-desc">${t('organisms.noWorkspace') || 'This organism has no workspace yet. Set one up to track goals, plans, deliverables and decisions — versioned on publish.'}</div>
         <button class="btn-primary" onClick=${setup} disabled=${busy || genBusy}>${busy ? '...' : (t('organisms.setupWorkspace') || 'Set up workspace (project template)')}</button>
         ${renderGenerator()}
@@ -1954,7 +2463,6 @@ function Workspace({ org, wsId, showToast, onBack }) {
   // documents once became unfindable: writes succeeded, every list surface skipped the space).
   const allTypes = ws.manifest?.objectTypes || [];
   const types = allTypes.filter(orgService.isMemorySpace);
-  const otherTypes = allTypes.filter(ot => !orgService.isMemorySpace(ot));
   const isDocSpace = orgService.isDocSpace;
   const draftsFor = (name) => (ws.drafts && ws.drafts[name]) || [];
   const objectsFor = (name) => (ws.objects && ws.objects[name]) || [];
@@ -2032,7 +2540,7 @@ function Workspace({ org, wsId, showToast, onBack }) {
             ? html`<input class="input-field input-xs pj-sec-name" autofocus placeholder=${t('organisms.sectionName') || 'Section name'}
                 value=${sec.name} onInput=${e => setSecName(ot.name, sec.id, e.target.value)}
                 onBlur=${() => commitSecName(ot.name)} onKeyDown=${e => { if (e.key === 'Enter') e.target.blur(); }} />`
-            : html`<span class="pj-sec-name-text" onDblClick=${() => setEditingSec(sec.id)}>${escHtml(sec.name || t('organisms.unnamed') || '(unnamed)')}</span>`}
+            : html`<span class="pj-sec-name-text" onDblClick=${() => setEditingSec(sec.id)}>${(sec.name || t('organisms.unnamed') || '(unnamed)')}</span>`}
           <button class="pj-icon-btn" title=${t('organisms.rename') || 'Rename'} onClick=${() => setEditingSec(sec.id)}>✎</button>
           <button class="pj-icon-btn" title=${t('organisms.newDocHere') || 'New document here'} onClick=${() => setActiveDoc({ type: ot.name, mode: 'edit', page: { id: '', title: '', markdown: '' }, sectionId: sec.id })}>+</button>
           <button class="pj-icon-btn" title=${t('organisms.addSubsection') || 'Sub-section'} onClick=${() => addSection(ot.name, sec.id)}>⊕</button>
@@ -2045,7 +2553,7 @@ function Workspace({ org, wsId, showToast, onBack }) {
     return html`
       <div class="pj-section" key=${ot.name}>
         <div class="pj-section-head">
-          <span class="pj-section-title">${escHtml(ot.name)}<span class="pj-doc-tag">${t('organisms.docs') || 'docs'}</span></span>
+          <span class="pj-section-title">${(ot.name)}<span class="pj-doc-tag">${t('organisms.docs') || 'docs'}</span></span>
           <button class="btn-outline btn-sm" onClick=${() => addSection(ot.name, null)}>${'+ '}${t('organisms.section') || 'Section'}</button>
           <button class="btn-outline btn-sm" onClick=${() => setActiveDoc({ type: ot.name, mode: 'edit', page: { id: '', title: '', markdown: '' } })}>${'+ '}${t('organisms.newPage') || 'New document'}</button>
         </div>
@@ -2087,130 +2595,193 @@ function Workspace({ org, wsId, showToast, onBack }) {
       </div>`;
   };
 
+  // A record-space tab: schema-form add/edit + draft and published record lists (with comments).
+  const renderRecordSpace = (ot) => html`
+    <div class="pj-section" key=${ot.name}>
+      <div class="pj-section-head">
+        <span class="pj-section-title">${(wsT('type.' + ot.name) || ot.name)}</span>
+        ${ot.append ? null : html`<button class="btn-outline btn-sm" onClick=${() => startAdd(ot)}>${'+ '}${t('organisms.addDraft') || 'Add draft'}</button>`}
+      </div>
+
+      ${adding === ot.name && (addingSchema
+        ? html`<${SchemaForm} key=${'sf-' + (addingId || 'new')} schema=${addingSchema} busy=${busy} initial=${addingInitial}
+            idPrefix=${ot.name} namespace=${ot.namespace} wsT=${wsT}
+            onSave=${(v) => saveDraft(ot, addingId ? { ...v, id: addingId } : v)} onCancel=${cancelForm} />`
+        : html`<${Spinner} />`)}
+
+      ${draftsFor(ot.name).map((d, i) => html`
+        <div class="pj-rec" key=${'d' + i}>
+          <div class="pj-item pj-item-draft">
+            <span class="badge badge-warn">${t('organisms.draft') || 'draft'}</span>
+            <button class="pj-rec-title" onClick=${() => toggleExpand(ot, d.id)}>${String(d[PRIMARY_FIELD[ot.name] || 'title'] || d.id || '')}</button>
+            <button class="btn-ghost btn-sm" onClick=${() => startEdit(ot, d)} disabled=${busy}>${t('organisms.edit') || 'Edit'}</button>
+            <button class="btn-primary btn-sm" onClick=${() => publish(ot, d.id)} disabled=${busy}>${t('organisms.publish') || 'Publish'}</button>
+            <button class="pj-icon-btn" title=${t('organisms.delete') || 'Delete'} disabled=${busy} onClick=${() => removeObject(ot.namespace, d.id, String(d[PRIMARY_FIELD[ot.name] || 'title'] || d.id))}>🗑</button>
+          </div>
+          ${expandedRec[ot.name + ':' + d.id] ? html`<div class="pj-rec-fields">${recordFields(ot, d)}</div><${WorkspaceComments} orgId=${orgId} ws=${wsId} space=${ot.name} instanceId=${d.id} showToast=${showToast} />` : null}
+        </div>
+      `)}
+
+      ${objectsFor(ot.name).length === 0 && draftsFor(ot.name).length === 0
+        ? html`<${EmptyState} text=${t('organisms.noneYet') || 'none yet'} />`
+        : objectsFor(ot.name).map((o, i) => html`
+          <div class="pj-rec" key=${'o' + i}>
+            <div class="pj-item">
+              <button class="pj-rec-title" onClick=${() => toggleExpand(ot, o.id)}>${String(o[PRIMARY_FIELD[ot.name] || 'title'] || o.summary || o.id || '')}</button>
+              ${o.status ? html`<span class="badge badge-info">${(o.status)}</span>` : null}
+              <button class="pj-icon-btn" title=${t('organisms.delete') || 'Delete'} disabled=${busy} onClick=${() => removeObject(ot.namespace, o.id, String(o[PRIMARY_FIELD[ot.name] || 'title'] || o.id))}>🗑</button>
+            </div>
+            ${expandedRec[ot.name + ':' + o.id] ? html`<div class="pj-rec-fields">${recordFields(ot, o)}</div><${WorkspaceComments} orgId=${orgId} ws=${wsId} space=${ot.name} instanceId=${o.id} showToast=${showToast} />` : null}
+          </div>
+        `)
+      }
+    </div>`;
+
+  // A declared space whose backing isn't memory — never silently hidden, its tab shows a notice.
+  const renderSpaceNotice = (ot) => html`
+    <div class="pj-section" key=${ot.name}>
+      <div class="pj-section-head">
+        <span class="pj-section-title">${(ot.name)}</span>
+        <span class="badge badge-warn">${(String(ot.backing))}</span>
+      </div>
+      <div class="pj-space-notice">${ot.backing === 'tasks'
+        ? (t('organisms.spaceTasksBacked') || 'This space points at the task system — its items are tasks, not workspace records. Manage them in the Tasks views.')
+        : (t('organisms.spaceBackingUnsupported') || 'This space’s backing is not supported, so its content is not shown here. Edit the workspace (manifest) and set this space’s backing to "memory" to restore it — files and knowledge packages attach via Sources or document images instead.')}</div>
+    </div>`;
+
+  // ── Tabs: one per declared manifest space (memory-backed or not), then the fixed tabs.
+  // The "+" pseudo-tab opens the add-space form, so adding spaces stays one click away.
+  // Space labels are capitalized so the row reads uniformly next to the fixed tabs.
+  const cap = (s) => (s ? s.charAt(0).toUpperCase() + s.slice(1) : s);
+  const spaceCount = (name) => new Set([...draftsFor(name), ...objectsFor(name)].map(d => d.id)).size;
+  const spaceTabs = allTypes.map(ot => ({
+    id: 'space:' + ot.name, ot, label: cap(wsT('type.' + ot.name) || ot.name),
+    count: orgService.isMemorySpace(ot) ? spaceCount(ot.name) : null,
+  }));
+  const fixedTabs = [
+    { id: 'sources', label: t('organisms.sources') || 'Sources', count: null },
+    { id: 'share', label: t('organisms.share') || 'Share', count: null },
+    { id: 'review', label: t('organisms.tabReview') || 'Review', count: approvals.length || null },
+    { id: 'activity', label: t('organisms.activity') || 'Activity', count: null },
+    { id: 'people', label: t('organisms.tabPeople') || 'People', count: null },
+  ];
+  const wsTabs = [...spaceTabs, ...fixedTabs];
+  // Settings REPLACES the tab content: while it is open no tab is active (the previous state — a
+  // highlighted tab above settings content — lied about what the user was looking at).
+  const activeTab = showSettings ? '' : (wsTabs.some(tb => tb.id === tab) ? tab : (spaceTabs[0]?.id || 'review'));
+  const activeSpace = activeTab.startsWith('space:') ? allTypes.find(ot => ot.name === activeTab.slice(6)) : null;
+  const pickTab = (id) => guardWsDirty(() => { setShowSettings(false); setTab(id); });
+
+  // Menu items are VERBS (a click copies to the clipboard; the toast confirms). The contract-agent
+  // builder is a different category from the two copy actions, so a divider separates it.
+  const agentMenuItems = [
+    { label: t('organisms.copyChatPrompt') || 'Copy chat prompt', icon: '💬', onClick: () => copyAccessPrompt('human') },
+    { label: t('organisms.copyCodingPrompt') || 'Copy coding agent prompt', icon: '⌨', onClick: () => copyAccessPrompt('agent') },
+    { divider: true },
+    { label: t('organisms.contractPrompt') || 'Create contract agent', icon: '⚙️', onClick: copyContractPrompt },
+  ];
+
   return html`
     <div class="pj-ws">
       <${ConfirmUI} />
       ${back}
       <div class="pj-ws-titlerow">
-        <span class="section-title pj-ws-title">${escHtml(ws.manifest?.name || org.name || 'Workspace')}</span>
-        <span class="badge badge-success">${escHtml(ws.manifest?.status || 'active')}</span>
-      </div>
-      ${ws.manifest?.summary ? html`<div class="section-desc">${escHtml(ws.manifest.summary)}</div>` : null}
-
-      <div class="pj-divider"></div>
-
-      <div class="pj-toolbar">
-        <button class="btn-ghost btn-sm" onClick=${() => setShowSettings(s => !s)}>${'⚙ '}${t('organisms.settings') || 'Settings'}</button>
-        <button class="btn-ghost btn-sm" onClick=${() => setShowSpaces(s => !s)}>${'+ '}${t('organisms.addSpaceBtn') || 'Document space'}</button>
-        ${docTypes.length > 0 ? html`<button class="btn-ghost btn-sm" title=${t('organisms.shareHint') || 'Publish document pages to a public, no-login link'} onClick=${() => { const n = !showShare; setShowShare(n); if (n && share === null) loadShare(); }}>${'🌐 '}${t('organisms.share') || 'Share'}</button>` : null}
-        <span class="pj-toolbar-sep"></span>
-        <span class="pj-ai-prompt">
-          <span class="pj-ai-prompt-label">${'🤖 '}${t('organisms.aiPrompt') || 'AI access prompt:'}</span>
-          <button class="btn-ghost btn-sm" onClick=${() => copyAccessPrompt('human')}>${t('organisms.aiPromptHuman') || 'For chat'}</button>
-          <button class="btn-ghost btn-sm" onClick=${() => copyAccessPrompt('agent')}>${t('organisms.aiPromptAgent') || 'For coding agent'}</button>
-          <button class="btn-ghost btn-sm" title=${t('organisms.contractPromptHint') || 'Copy a prompt to build an agent that processes this workspace (reads requests → writes results)'} onClick=${copyContractPrompt}>${'⚙️ '}${t('organisms.contractPrompt') || 'Create contract agent'}</button>
+        <span class="section-title pj-ws-title">${(ws.manifest?.name || org.name || 'Workspace')}</span>
+        <span class="badge badge-success">${(ws.manifest?.status || 'active')}</span>
+        <span class="pj-ws-head-actions">
+          <${KebabMenu} label=${t('organisms.forAgentsHint') || 'Copy a ready prompt that teaches an AI to use this workspace'}
+            btnClass="btn-outline btn-sm" trigger=${'🤖 ' + (t('organisms.agentAccess') || 'Agent access') + ' ▾'} items=${agentMenuItems} />
+          <button class="btn-outline btn-sm ${showSettings ? 'pj-org-btn-active' : ''}" onClick=${() => guardWsDirty(() => setShowSettings(s => !s))}>${'⚙ '}${t('organisms.settings') || 'Settings'}</button>
         </span>
-        <span class="pj-toolbar-sep"></span>
-        <label class="pj-gate-label pj-toolbar-gate" title=${t('organisms.publishGateHint') || 'When on, an agent’s publish is held for your review instead of going live'}>
-          <input type="checkbox" checked=${gateOn} onChange=${toggleGate} disabled=${busy} />
-          ${'🔒 '}${t('organisms.publishGate') || 'Require review before publishing'}
-        </label>
+      </div>
+      ${ws.manifest?.summary ? html`<div class="section-desc">${(ws.manifest.summary)}</div>` : null}
+
+      ${approvals.length > 0 && activeTab !== 'review' ? html`
+        <div class="pj-ws-banner" role="status">
+          <span class="pj-ws-banner-text">
+            <b>${(t('organisms.reviewBanner') || '{n} waiting for review').replace('{n}', String(approvals.length))}</b>
+            <span class="pj-ws-banner-sub">${t('organisms.reviewBannerSub') || 'Publishes are gated and need a human decision.'}</span>
+          </span>
+          <button class="btn-outline btn-sm" onClick=${() => setTab('review')}>${t('organisms.reviewQueue') || 'Review queue'}</button>
+        </div>` : null}
+
+      <div class="pj-org-tabs" role="tablist">
+        ${wsTabs.map(tb => html`
+          <button class="pj-org-tab ${activeTab === tb.id ? 'active' : ''}" role="tab" aria-selected=${activeTab === tb.id} key=${tb.id}
+            onClick=${() => pickTab(tb.id)}>
+            ${(tb.label)}${tb.count !== null && tb.count !== undefined ? html`<span class="pj-org-tab-count">${tb.count}</span>` : null}
+          </button>`)}
+        <button class="pj-org-tab pj-ws-tab-add" title=${t('organisms.addDocSpaceTitle') || 'Add a document space'} onClick=${() => guardWsDirty(() => { setShowSettings(false); setShowSpaces(s => !s); })}>+</button>
       </div>
 
       ${showSpaces && html`
         <div class="pj-inbox pj-spaces-add">
-          <div class="card-h3">${t('organisms.addSpaceTitle') || 'Add a space'}</div>
-          <div class="section-desc">${t('organisms.addSpaceDesc') || 'A document space is a free-form wiki (sections + markdown pages). A record space is a schema-locked list (forms). You can remove spaces in Settings.'}</div>
+          <div class="card-h3">${t('organisms.addDocSpaceTitle') || 'Add a document space'}</div>
+          <div class="section-desc">${t('organisms.addDocSpaceDesc') || 'A document space is a free-form wiki (sections + markdown pages). Record types need a schema, so they are designed with AI in Settings → Process (restructure).'}</div>
           <div class="pj-space-row">
             <input type="text" class="input-field input-sm" placeholder=${t('organisms.spaceName') || 'New space name'} value=${newSpaceName} onInput=${e => setNewSpaceName(e.target.value)} onKeyDown=${e => { if (e.key === 'Enter') addSpaceHandler(); }} />
-            <select class="input-field input-sm" value=${newSpaceMode} onChange=${e => setNewSpaceMode(e.target.value)}>
-              <option value="document">${t('organisms.modeDocument') || 'Document (wiki)'}</option>
-              <option value="records">${t('organisms.modeRecords') || 'Records (form)'}</option>
-            </select>
             <button class="btn-primary btn-sm" onClick=${addSpaceHandler} disabled=${busy || !newSpaceName.trim()}>${t('organisms.addSpace') || '+ Add'}</button>
             <button class="btn-ghost btn-sm" onClick=${() => setShowSpaces(false)}>${t('organisms.cancel') || 'Cancel'}</button>
           </div>
         </div>`}
 
-      ${showShare && html`
-        <div class="pj-inbox">
-          <div class="card-h3">${'🌐 '}${t('organisms.sharePublicTitle') || 'Public sharing'}</div>
-          <div class="section-desc">${t('organisms.sharePublicDesc') || 'Make published document-space pages readable by anyone with the link — no login required. Drafts are never shared.'}</div>
-          ${!share && shareBusy ? html`<div class="pj-empty">${t('organisms.loading') || 'Loading…'}</div>` : null}
-          ${share && docTypes.length === 0 ? html`<div class="pj-empty">${t('organisms.noDocSpaces') || 'This workspace has no document spaces to share.'}</div>` : null}
-          ${share ? docTypes.map(ot => {
-            const docs = objectsFor(ot.name);
-            const spaceOn = !!(share.spaces && share.spaces[ot.name]);
-            return html`
-              <div class="pj-share-space" key=${'sh' + ot.name}>
-                <label class="pj-share-row">
-                  <input type="checkbox" checked=${spaceOn} disabled=${shareBusy} onChange=${e => patchShare({ spaces: { [ot.name]: e.target.checked } })} />
-                  <span class="pj-space-name">${escHtml(ot.name)}</span>
-                  <span class="pj-doc-tag">${docs.length} ${t('organisms.docs') || 'docs'}</span>
-                </label>
-                ${docs.length === 0
-                  ? html`<div class="pj-empty pj-share-empty">${t('organisms.noPublishedDocs') || 'No published documents yet — publish a page to share it.'}</div>`
-                  : html`<div class="pj-share-docs">
-                      ${docs.map(d => {
-                        const on = isDocPublic(ot.name, d.id);
-                        return html`
-                          <label class="pj-share-doc" key=${'shd' + d.id}>
-                            <input type="checkbox" checked=${on} disabled=${shareBusy} onChange=${e => patchShare({ docs: { [`${ot.name}/${d.id}`]: e.target.checked } })} />
-                            <span class="pj-share-doc-title">${escHtml(d.title || d.id)}</span>
-                            ${on ? html`<a class="pj-share-link" href=${orgService.publicViewerUrl(orgId, wsId, { type: ot.name, id: d.id })} target="_blank" rel="noopener">${t('organisms.openLink') || 'open ↗'}</a>` : null}
-                          </label>`;
-                      })}
-                    </div>`}
-              </div>`;
-          }) : null}
-          ${anythingPublic() ? html`
-            <div class="pj-divider"></div>
-            <div class="pj-share-actions">
-              <a class="btn-outline btn-sm" href=${orgService.publicViewerUrl(orgId, wsId)} target="_blank" rel="noopener">${'🔗 '}${t('organisms.openPublicViewer') || 'Open public viewer'}</a>
-              <button class="btn-ghost btn-sm" onClick=${() => copyShareLink(orgService.publicViewerUrl(orgId, wsId))}>${t('organisms.copyLink') || 'Copy link'}</button>
-            </div>` : null}
-        </div>`}
-
       ${showSettings && html`
         <div class="pj-inbox">
-          <div class="card-h3">${t('organisms.settings') || 'Workspace settings'}</div>
-          <label class="pj-field"><span>${t('organisms.wsName') || 'Name'}</span>
-            <input type="text" class="input-field input-sm" value=${sName} onInput=${e => setSName(e.target.value)} /></label>
-          <label class="pj-field"><span>${t('organisms.wsSummary') || 'Summary'}</span>
-            <textarea class="input-field input-sm" rows="2" value=${sSummary} onInput=${e => setSSummary(e.target.value)}></textarea></label>
-          <label class="pj-field"><span>${t('organisms.autonomy') || 'AI autonomy (L1 cautious → L5 free)'}</span>
-            <select class="input-field input-sm" value=${sAutonomy} onChange=${e => setSAutonomy(e.target.value)}>
-              ${['L1', 'L2', 'L3', 'L4', 'L5'].map(l => html`<option value=${l} key=${l}>${l}</option>`)}
-            </select></label>
-          <div class="pj-empty">${t('organisms.template') || 'Template'}: ${escHtml(ws.manifest?.kind || '')}</div>
-          <div class="form-actions">
-            <button class="btn-primary btn-sm" onClick=${saveSettings} disabled=${busy}>${t('organisms.save') || 'Save'}</button>
-            <button class="btn-ghost btn-sm" onClick=${() => setShowSettings(false)}>${t('organisms.cancel') || 'Cancel'}</button>
+          <div class="pj-meta-line">
+            <span>${t('organisms.template') || 'Template'} ${(ws.manifest?.kind || '-')}</span>
+            ${ws.manifest?.updatedAt ? html`<span>${t('organisms.lastSaved') || 'Last saved'} ${fmtDate(ws.manifest.updatedAt)}</span>` : null}
+          </div>
+
+          <div class="pj-form-card">
+            <div class="pj-form-group">${t('organisms.formIdentity') || 'Identity'}</div>
+            <label class="pj-field"><span>${t('organisms.wsName') || 'Name'}</span>
+              <input type="text" class="input-field input-sm" value=${sName} onInput=${e => setSName(e.target.value)} /></label>
+            <label class="pj-field"><span>${t('organisms.wsSummary') || 'Summary'}</span>
+              <textarea class="input-field input-sm" rows="2" value=${sSummary} onInput=${e => setSSummary(e.target.value)}></textarea></label>
+
+            <div class="pj-form-group">${t('organisms.formAgentPolicy') || 'Agent policy'}</div>
+            <label class="pj-field"><span>${t('organisms.autonomy') || 'AI autonomy (L1 cautious → L5 free)'}</span>
+              <select class="input-field input-sm" value=${sAutonomy} onChange=${e => setSAutonomy(e.target.value)}>
+                ${['L1', 'L2', 'L3', 'L4', 'L5'].map(l => html`<option value=${l} key=${l}>${l} — ${t(`organisms.autonomyLevels.${l}`) || ''}</option>`)}
+              </select></label>
+            <div class="pj-form-hint">${t('organisms.autonomyHint') || 'Guidance for agents working here — L1 asks before nearly everything, L5 acts freely. The publish gate (Review tab) still applies regardless.'}</div>
+
+            <div class="form-actions">
+              <button class="btn-primary btn-sm" onClick=${saveSettings} disabled=${busy || !wsDirty}>${t('organisms.saveChanges') || 'Save changes'}</button>
+              <button class="btn-ghost btn-sm" onClick=${() => { resetSettingsForm(); setShowSettings(false); }}>${t('organisms.cancel') || 'Cancel'}</button>
+            </div>
           </div>
 
           <div class="pj-divider"></div>
-          <div class="card-h3">${t('organisms.spaces') || 'Spaces'}</div>
+          <div class="pj-form-group">${t('organisms.spaces') || 'Spaces'}</div>
+          <div class="pj-form-hint">${t('organisms.spacesRemoveHint') || 'These actions apply immediately. Removing a space hides its section — the data stays in memory and comes back if a space with the same name is added again.'}</div>
           ${(ws.manifest?.objectTypes || []).map(ot => html`
             <div class="pj-doc-row" key=${'sp' + ot.name}>
-              <span class="pj-space-name">${escHtml(ot.name)}<span class="pj-doc-tag">${isDocSpace(ot) ? (t('organisms.docs') || 'docs') : (t('organisms.recordsMode') || 'records')}</span></span>
+              <span class="pj-space-name">${(ot.name)}<span class="pj-doc-tag">${isDocSpace(ot) ? (t('organisms.docs') || 'docs') : (t('organisms.recordsMode') || 'records')}</span></span>
               <button class="btn-ghost btn-sm" onClick=${() => removeSpaceHandler(ot.name)} disabled=${busy}>${t('organisms.remove') || 'Remove'}</button>
             </div>
           `)}
           <div class="form-actions">
-            <input type="text" class="input-field input-sm" placeholder=${t('organisms.spaceName') || 'New space name'} value=${newSpaceName} onInput=${e => setNewSpaceName(e.target.value)} />
-            <select class="input-field input-sm" value=${newSpaceMode} onChange=${e => setNewSpaceMode(e.target.value)}>
-              <option value="document">${t('organisms.docsSpace') || 'document space'}</option>
-              <option value="records">${t('organisms.recordsSpace') || 'records type'}</option>
-            </select>
+            <input type="text" class="input-field input-sm" placeholder=${t('organisms.docSpaceNamePlaceholder') || 'New document space name'} value=${newSpaceName} onInput=${e => setNewSpaceName(e.target.value)} />
             <button class="btn-outline btn-sm" onClick=${addSpaceHandler} disabled=${busy || !newSpaceName.trim()}>${t('organisms.addSpace') || '+ Add'}</button>
           </div>
 
           <div class="pj-divider"></div>
+          <div class="pj-form-group">${t('organisms.formProcess') || 'Process'}</div>
+          ${ws.manifest ? html`
+            <div class="pj-chart">
+              <div class="pj-chart-head">
+                <span class="pj-chart-title">${'🔄 '}${t('organisms.editFlow') || 'How editing works here'}</span>
+                <button class="btn-ghost btn-sm" onClick=${() => setShowFlow(s => !s)}>${showFlow ? (t('organisms.hide') || 'Hide') : (t('organisms.show') || 'Show')}</button>
+              </div>
+              ${showFlow ? html`<${Mermaid} chart=${orgService.buildEditFlowMermaid(ws.manifest, gateOn)} />` : null}
+            </div>` : null}
           <button class="btn-outline btn-sm" onClick=${() => setShowRegenerate(s => !s)}>
             ${showRegenerate ? (t('organisms.cancel') || 'Cancel') : (t('organisms.restructure') || '✨ Restructure / add types with AI')}
           </button>
           ${showRegenerate && renderGenerator()}
 
+          <div class="pj-divider"></div>
           <div class="pj-danger">
             <div class="pj-danger-title">${t('organisms.dangerZone') || 'Danger zone'}</div>
             <div class="section-desc">${t('organisms.deleteWarn') || 'Deleting the workspace removes the manifest and ALL its data — drafts, published records, version history — and its schemas. The organism stays. This cannot be undone.'}</div>
@@ -2222,101 +2793,84 @@ function Workspace({ org, wsId, showToast, onBack }) {
         </div>
       `}
 
-      ${approvals.length > 0 && html`
-        <div class="pj-inbox">
-          <div class="card-h3">${t('organisms.needsDecision') || 'Needs your decision'} (${approvals.length})</div>
-          ${approvals.map(a => html`
-            <div class="pj-approval" key=${a.id}>
-              <div class="pj-approval-text">${escHtml(a.prompt || a.action)}</div>
-              <div class="card-actions">
-                <button class="btn-success btn-sm" onClick=${() => resolve(a.id, 'approve')} disabled=${busy}>${t('organisms.approve') || 'Approve'}</button>
-                <button class="btn-danger btn-sm" onClick=${() => resolve(a.id, 'reject')} disabled=${busy}>${t('organisms.reject') || 'Reject'}</button>
-              </div>
-            </div>
-          `)}
-        </div>
-      `}
-
-      <div class="pj-divider"></div>
+      ${activeSpace
+        ? (!orgService.isMemorySpace(activeSpace)
+          ? renderSpaceNotice(activeSpace)
+          : (isDocSpace(activeSpace) ? renderDocSpace(activeSpace) : renderRecordSpace(activeSpace)))
+        : null}
 
-      <${ParticipantsPanel} orgId=${orgId} wsId=${wsId} />
+      ${activeTab === 'sources' ? html`<${SourcesPanel} orgId=${orgId} wsId=${wsId} showToast=${showToast} />` : null}
 
-      ${ws.manifest ? html`
-        <div class="pj-chart">
-          <div class="pj-chart-head">
-            <span class="pj-chart-title">${'🔄 '}${t('organisms.editFlow') || 'How editing works here'}</span>
-            <button class="btn-ghost btn-sm" onClick=${() => setShowFlow(s => !s)}>${showFlow ? (t('organisms.hide') || 'Hide') : (t('organisms.show') || 'Show')}</button>
-          </div>
-          ${showFlow ? html`<${Mermaid} chart=${orgService.buildEditFlowMermaid(ws.manifest, gateOn)} />` : null}
+      ${activeTab === 'share' ? html`
+        <div class="pj-section">
+          <div class="section-desc">${t('organisms.sharePublicDesc') || 'Make published document-space pages readable by anyone with the link — no login required. Drafts are never shared.'}</div>
+          ${docTypes.length === 0 ? html`<${EmptyState} icon="🌐" text=${t('organisms.noDocSpaces') || 'This workspace has no document spaces to share.'} />` : html`
+            ${!share && shareBusy ? html`<div class="pj-empty">${t('organisms.loading') || 'Loading…'}</div>` : null}
+            ${share ? docTypes.map(ot => {
+              const docs = objectsFor(ot.name);
+              const spaceOn = !!(share.spaces && share.spaces[ot.name]);
+              return html`
+                <div class="pj-share-space" key=${'sh' + ot.name}>
+                  <label class="pj-share-row">
+                    <input type="checkbox" checked=${spaceOn} disabled=${shareBusy} onChange=${e => patchShare({ spaces: { [ot.name]: e.target.checked } })} />
+                    <span class="pj-space-name">${wsT('type.' + ot.name) || ot.name}</span>
+                    <span class="pj-doc-tag">${docs.length} ${t('organisms.docs') || 'docs'}</span>
+                  </label>
+                  ${docs.length === 0
+                    ? html`<div class="pj-empty pj-share-empty">${t('organisms.noPublishedDocs') || 'No published documents yet — publish a page to share it.'}</div>`
+                    : html`<div class="pj-share-docs">
+                        ${docs.map(d => {
+                          const on = isDocPublic(ot.name, d.id);
+                          return html`
+                            <label class="pj-share-doc" key=${'shd' + d.id}>
+                              <input type="checkbox" checked=${on} disabled=${shareBusy} onChange=${e => patchShare({ docs: { [`${ot.name}/${d.id}`]: e.target.checked } })} />
+                              <span class="pj-share-doc-title">${d.title || d.id}</span>
+                              ${on ? html`<a class="pj-share-link" href=${orgService.publicViewerUrl(orgId, wsId, { type: ot.name, id: d.id })} target="_blank" rel="noopener">${t('organisms.openLink') || 'open ↗'}</a>` : null}
+                            </label>`;
+                        })}
+                      </div>`}
+                </div>`;
+            }) : null}
+            ${anythingPublic() ? html`
+              <div class="pj-share-actions">
+                <a class="btn-outline btn-sm" href=${orgService.publicViewerUrl(orgId, wsId)} target="_blank" rel="noopener">${'🔗 '}${t('organisms.openPublicViewer') || 'Open public viewer'}</a>
+                <button class="btn-ghost btn-sm" onClick=${() => copyShareLink(orgService.publicViewerUrl(orgId, wsId))}>${t('organisms.copyLink') || 'Copy link'}</button>
+              </div>` : null}
+          `}
         </div>` : null}
 
-      <${ActivityPanel} orgId=${orgId} wsId=${wsId} />
-
-      ${types.length > 0 ? html`<div class="pj-divider"></div>` : null}
-
-      ${types.map(ot => isDocSpace(ot) ? renderDocSpace(ot) : html`
-        <div class="pj-section" key=${ot.name}>
-          <div class="pj-section-head">
-            <span class="pj-section-title">${escHtml(ot.name)}</span>
-            ${ot.append ? null : html`<button class="btn-outline btn-sm" onClick=${() => startAdd(ot)}>${'+ '}${t('organisms.addDraft') || 'Add draft'}</button>`}
-          </div>
-
-          ${adding === ot.name && (addingSchema
-            ? html`<${SchemaForm} key=${'sf-' + (addingId || 'new')} schema=${addingSchema} busy=${busy} initial=${addingInitial}
-                onSave=${(v) => saveDraft(ot, addingId ? { ...v, id: addingId } : v)} onCancel=${cancelForm} />`
-            : html`<${Spinner} />`)}
-
-          ${draftsFor(ot.name).map((d, i) => html`
-            <div class="pj-rec" key=${'d' + i}>
-              <div class="pj-item pj-item-draft">
-                <span class="badge badge-warn">${t('organisms.draft') || 'draft'}</span>
-                <button class="pj-rec-title" onClick=${() => toggleExpand(ot, d.id)}>${String(d[PRIMARY_FIELD[ot.name] || 'title'] || d.id || '')}</button>
-                <button class="btn-ghost btn-sm" onClick=${() => startEdit(ot, d)} disabled=${busy}>${t('organisms.edit') || 'Edit'}</button>
-                <button class="btn-primary btn-sm" onClick=${() => publish(ot, d.id)} disabled=${busy}>${t('organisms.publish') || 'Publish'}</button>
-                <button class="pj-icon-btn" title=${t('organisms.delete') || 'Delete'} disabled=${busy} onClick=${() => removeObject(ot.namespace, d.id, String(d[PRIMARY_FIELD[ot.name] || 'title'] || d.id))}>🗑</button>
-              </div>
-              ${expandedRec[ot.name + ':' + d.id] ? html`<div class="pj-rec-fields">${recordFields(d)}</div><${WorkspaceComments} orgId=${orgId} ws=${wsId} space=${ot.name} instanceId=${d.id} showToast=${showToast} />` : null}
-            </div>
-          `)}
-
-          ${objectsFor(ot.name).length === 0 && draftsFor(ot.name).length === 0
-            ? html`<${EmptyState} text=${t('organisms.noneYet') || 'none yet'} />`
-            : objectsFor(ot.name).map((o, i) => html`
-              <div class="pj-rec" key=${'o' + i}>
-                <div class="pj-item">
-                  <button class="pj-rec-title" onClick=${() => toggleExpand(ot, o.id)}>${String(o[PRIMARY_FIELD[ot.name] || 'title'] || o.summary || o.id || '')}</button>
-                  ${o.status ? html`<span class="badge badge-info">${escHtml(o.status)}</span>` : null}
-                  <button class="pj-icon-btn" title=${t('organisms.delete') || 'Delete'} disabled=${busy} onClick=${() => removeObject(ot.namespace, o.id, String(o[PRIMARY_FIELD[ot.name] || 'title'] || o.id))}>🗑</button>
+      ${activeTab === 'review' ? html`
+        <div class="pj-section">
+          <label class="pj-gate-label" title=${t('organisms.publishGateHint') || 'When on, an agent’s publish is held for your review instead of going live'}>
+            <input type="checkbox" checked=${gateOn} onChange=${toggleGate} disabled=${busy} />
+            ${'🔒 '}${t('organisms.publishGate') || 'Require review before publishing'}
+          </label>
+          ${approvals.length === 0
+            ? html`<${EmptyState} icon="📭" text=${t('organisms.reviewEmpty') || 'Nothing waiting for review.'} />`
+            : html`
+              <div class="card-h3">${t('organisms.needsDecision') || 'Needs your decision'} (${approvals.length})</div>
+              ${approvals.map(a => html`
+                <div class="pj-approval" key=${a.id}>
+                  <div class="pj-approval-text">${(a.prompt || a.action)}</div>
+                  <div class="card-actions">
+                    <button class="btn-success btn-sm" onClick=${() => resolve(a.id, 'approve')} disabled=${busy}>${t('organisms.approve') || 'Approve'}</button>
+                    <button class="btn-danger btn-sm" onClick=${() => resolve(a.id, 'reject')} disabled=${busy}>${t('organisms.reject') || 'Reject'}</button>
+                  </div>
                 </div>
-                ${expandedRec[ot.name + ':' + o.id] ? html`<div class="pj-rec-fields">${recordFields(o)}</div><${WorkspaceComments} orgId=${orgId} ws=${wsId} space=${ot.name} instanceId=${o.id} showToast=${showToast} />` : null}
-              </div>
-            `)
-          }
-        </div>
-      `)}
-
-      ${otherTypes.map(ot => html`
-        <div class="pj-section" key=${ot.name}>
-          <div class="pj-section-head">
-            <span class="pj-section-title">${escHtml(ot.name)}</span>
-            <span class="badge badge-warn">${escHtml(String(ot.backing))}</span>
-          </div>
-          <div class="pj-space-notice">${ot.backing === 'tasks'
-            ? (t('organisms.spaceTasksBacked') || 'This space points at the task system — its items are tasks, not workspace records. Manage them in the Tasks views.')
-            : (t('organisms.spaceBackingUnsupported') || 'This space’s backing is not supported, so its content is not shown here. Edit the workspace (manifest) and set this space’s backing to "memory" to restore it — files and knowledge packages attach via Sources or document images instead.')}</div>
-        </div>
-      `)}
+              `)}`}
+        </div>` : null}
 
-      <${SourcesPanel} orgId=${orgId} wsId=${wsId} showToast=${showToast} />
+      ${activeTab === 'activity' ? html`
+        <${ActivityPanel} orgId=${orgId} wsId=${wsId} />
+        ${(ws.decisions || []).length > 0 ? html`
+          <div class="pj-section">
+            <div class="pj-section-title">${t('organisms.decisions') || 'Recent decisions'}</div>
+            ${ws.decisions.slice(-8).reverse().map((d, i) => html`
+              <div class="pj-item pj-decision" key=${'dec' + i}><span class="pj-item-text">${(String(d.summary || ''))}</span></div>
+            `)}
+          </div>` : null}` : null}
 
-      ${(ws.decisions || []).length > 0 && html`
-        <div class="pj-section">
-          <div class="pj-section-title">${t('organisms.decisions') || 'Recent decisions'}</div>
-          ${ws.decisions.slice(-8).reverse().map((d, i) => html`
-            <div class="pj-item pj-decision" key=${'dec' + i}><span class="pj-item-text">${escHtml(String(d.summary || ''))}</span></div>
-          `)}
-        </div>
-      `}
+      ${activeTab === 'people' ? html`<${ParticipantsPanel} orgId=${orgId} wsId=${wsId} />` : null}
     </div>
   `;
 }
@@ -2411,8 +2965,8 @@ function SourcesPanel({ orgId, wsId, showToast }) {
     else { label = scope === 'mine' ? (item.value?.name || item.key) : (item.name || item.package_id); meta = (scope === 'mine' ? (item.value?.entries?.length || 0) : (item.entries_count || 0)) + ' ' + (t('organisms.entries') || 'entries'); }
     return html`
       <div class="pj-src-result" key=${'r' + i}>
-        <span class="pj-src-result-label" title=${String(label)}>${escHtml(String(label))}</span>
-        <span class="pj-src-result-meta">${escHtml(String(meta))}</span>
+        <span class="pj-src-result-label" title=${String(label)}>${(String(label))}</span>
+        <span class="pj-src-result-meta">${(String(meta))}</span>
         <button class="btn-ghost btn-sm" disabled=${busy} onClick=${() => attach(item)}>${t('organisms.attach') || 'Attach'}</button>
       </div>`;
   };
@@ -2453,7 +3007,7 @@ function SourcesPanel({ orgId, wsId, showToast }) {
           ${sources.map(s => html`
             <div class="pj-src-item" key=${s.id}>
               <span class="pj-src-icon">${SRC_ICON[s.type] || '•'}</span>
-              <span class="pj-src-label" title=${s.key || s.packageId || ''}>${escHtml(String(s.label || s.key || s.packageId || ''))}</span>
+              <span class="pj-src-label" title=${s.key || s.packageId || ''}>${(String(s.label || s.key || s.packageId || ''))}</span>
               ${s.external ? html`<span class="badge badge-muted pj-mini">${t('organisms.external') || 'external'}</span>` : null}
               <span class="badge badge-info pj-mini">${t('organisms.src_' + s.type) || s.type}</span>
               <button class="pj-icon-btn" title=${t('organisms.remove') || 'Remove'} onClick=${() => removeSource(s.id)}>✕</button>
@@ -2464,11 +3018,17 @@ function SourcesPanel({ orgId, wsId, showToast }) {
 
 /* A form rendered from a JSON Schema — typed inputs (enum→select, integer→number,
  * array→lines, boolean→checkbox, else text). Works for any objectType, including ones a
- * generated manifest declares. `id` is auto-generated when blank, so it's never required here. */
-function SchemaForm({ schema, busy, onSave, onCancel, initial }) {
+ * generated manifest declares. New records pre-fill `id` (editable) and requester-style
+ * fields ("x-default": "currentUser", or a requested_by/created_by-shaped name) with the
+ * signed-in GHII. readOnly properties are agent-filled results — hidden here, shown only in
+ * the record view. Labels/hints resolve manifest i18n (wsT) → schema description → raw key.
+ * Save is always clickable: a failed attempt outlines the still-empty required fields. */
+function SchemaForm({ schema, busy, onSave, onCancel, initial, idPrefix, namespace, wsT }) {
   const props = (schema && schema.properties) || {};
-  const required = new Set(((schema && schema.required) || []).filter(k => k !== 'id'));
-  const fieldNames = Object.keys(props);
+  const editable = Object.entries(props).filter(([, def]) => !(def && def.readOnly));
+  const required = new Set(((schema && schema.required) || []).filter(k => k !== 'id' && !(props[k] && props[k].readOnly)));
+  const fieldNames = editable.map(([k]) => k);
+  const [missing, setMissing] = useState(null); // required keys empty at the last save attempt
   // Seed from an existing record when editing (arrays → newline text for the textarea inputs).
   const [vals, setVals] = useState(() => {
     const out = {};
@@ -2477,6 +3037,14 @@ function SchemaForm({ schema, busy, onSave, onCancel, initial }) {
       if (v === undefined || v === null) continue;
       out[k] = Array.isArray(v) ? v.join('\n') : (def.type === 'boolean' ? !!v : String(v));
     }
+    if (!initial) {
+      if (props.id && out.id === undefined) out.id = `${idPrefix || 'rec'}-${Date.now().toString(36)}`;
+      const me = getGhii() || '';
+      for (const [k, def] of editable) {
+        if (out[k] !== undefined || def.type !== 'string' || def.enum) continue;
+        if (def['x-default'] === 'currentUser' || /^(requested_by|created_by|requester|author)$/i.test(k)) out[k] = me;
+      }
+    }
     return out;
   });
   const set = (k, v) => setVals(s => ({ ...s, [k]: v }));
@@ -2494,38 +3062,52 @@ function SchemaForm({ schema, busy, onSave, onCancel, initial }) {
     return out;
   };
 
-  const canSave = [...required].every(k => vals[k] !== undefined && String(vals[k]).trim() !== '');
+  const isEmpty = (k) => vals[k] === undefined || String(vals[k]).trim() === '';
+  // Of the fields flagged at the last attempt, only the ones STILL empty stay outlined.
+  const stillMissing = (missing || []).filter(isEmpty);
+  const trySave = () => {
+    const miss = [...required].filter(isEmpty);
+    setMissing(miss.length ? miss : null);
+    if (!miss.length) onSave(buildValue());
+  };
+
+  const labelOf = (k) => (wsT && wsT(`${namespace}.${k}`)) || k;
+  const hintOf = (k, def) => (wsT && wsT(`${namespace}.${k}.hint`)) || def.description
+    || (k === 'id' && !initial ? (t('organisms.autoIdHint') || 'Pre-filled automatically — change it if you want a memorable id.') : '');
 
-  const field = (k, def) => {
-    const label = k + (required.has(k) ? ' *' : '');
+  const control = (k, def) => {
     if (def.type === 'string' && Array.isArray(def.enum)) {
-      return html`<label class="pj-field" key=${k}><span>${label}</span>
-        <select class="input-field input-sm" value=${vals[k] ?? ''} onChange=${e => set(k, e.target.value)}>
+      return html`<select class="input-field input-sm" value=${vals[k] ?? ''} onChange=${e => set(k, e.target.value)}>
           <option value="">—</option>${def.enum.map(o => html`<option value=${o} key=${o}>${o}</option>`)}
-        </select></label>`;
+        </select>`;
     }
     // Date / datetime fields → native pickers (by schema format, or a name ending in _date).
     if (def.format === 'date-time') {
-      return html`<label class="pj-field" key=${k}><span>${label}</span>
-        <input type="datetime-local" class="input-field input-sm" value=${vals[k] ?? ''} onInput=${e => set(k, e.target.value)} /></label>`;
+      return html`<input type="datetime-local" class="input-field input-sm" value=${vals[k] ?? ''} onInput=${e => set(k, e.target.value)} />`;
     }
     if (def.format === 'date' || (def.type === 'string' && !def.enum && /(_date$|^date$)/i.test(k))) {
-      return html`<label class="pj-field" key=${k}><span>${label}</span>
-        <input type="date" class="input-field input-sm" value=${vals[k] ?? ''} onInput=${e => set(k, e.target.value)} /></label>`;
+      return html`<input type="date" class="input-field input-sm" value=${vals[k] ?? ''} onInput=${e => set(k, e.target.value)} />`;
     }
     if (def.type === 'integer' || def.type === 'number') {
-      return html`<label class="pj-field" key=${k}><span>${label}</span>
-        <input type="number" class="input-field input-sm" value=${vals[k] ?? ''} onInput=${e => set(k, e.target.value)} /></label>`;
+      return html`<input type="number" class="input-field input-sm" value=${vals[k] ?? ''} onInput=${e => set(k, e.target.value)} />`;
     }
+    if (def.type === 'array') {
+      return html`<textarea class="input-field input-sm" rows="2" value=${vals[k] ?? ''} onInput=${e => set(k, e.target.value)}></textarea>`;
+    }
+    return html`<input type="text" class="input-field input-sm" value=${vals[k] ?? ''} onInput=${e => set(k, e.target.value)} />`;
+  };
+
+  const field = (k, def) => {
+    const label = labelOf(k) + (required.has(k) ? ' *' : '');
     if (def.type === 'boolean') {
       return html`<label class="pj-field pj-field-inline" key=${k}><input type="checkbox" checked=${!!vals[k]} onChange=${e => set(k, e.target.checked)} /><span>${label}</span></label>`;
     }
-    if (def.type === 'array') {
-      return html`<label class="pj-field" key=${k}><span>${label} ${'(' + (t('organisms.onePerLine') || 'one per line') + ')'}</span>
-        <textarea class="input-field input-sm" rows="2" value=${vals[k] ?? ''} onInput=${e => set(k, e.target.value)}></textarea></label>`;
-    }
-    return html`<label class="pj-field" key=${k}><span>${label}</span>
-      <input type="text" class="input-field input-sm" value=${vals[k] ?? ''} onInput=${e => set(k, e.target.value)} /></label>`;
+    const hint = hintOf(k, def);
+    const suffix = def.type === 'array' ? ' (' + (t('organisms.onePerLine') || 'one per line') + ')' : '';
+    return html`<label class="pj-field ${stillMissing.includes(k) ? 'pj-field-invalid' : ''}" key=${k}>
+      <span>${label}${suffix}</span>
+      ${hint ? html`<span class="pj-field-hint">${hint}</span>` : null}
+      ${control(k, def)}</label>`;
   };
 
   return html`
@@ -2534,8 +3116,10 @@ function SchemaForm({ schema, busy, onSave, onCancel, initial }) {
         ${fieldNames.length === 0
           ? html`<div class="pj-empty">${t('organisms.loading') || 'Loading...'}</div>`
           : fieldNames.map(k => field(k, props[k]))}
+        ${stillMissing.length ? html`<div class="pj-form-error">${(t('organisms.fillRequired') || 'Please fill in the required fields: {fields}')
+            .replace('{fields}', stillMissing.map(labelOf).join(', '))}</div>` : null}
         <div class="form-actions">
-          <button class="btn-primary btn-sm" onClick=${() => onSave(buildValue())} disabled=${busy || !canSave}>${t('organisms.saveDraft') || 'Save draft'}</button>
+          <button class="btn-primary btn-sm" onClick=${trySave} disabled=${busy}>${t('organisms.saveDraft') || 'Save draft'}</button>
           <button class="btn-ghost btn-sm" onClick=${onCancel}>${t('organisms.cancel') || 'Cancel'}</button>
         </div>
       </div>
@@ -2777,7 +3361,7 @@ export function DocumentEditor({ orgId, page, busy, onSave, onCancel }) {
           </div>
           ${images.map(i => html`
             <div class="pj-img-vis-row" key=${i.key}>
-              <span class="pj-img-vis-name" title=${i.key}>${escHtml(i.alt)}</span>
+              <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}