aimeat 1.25.0 → 1.26.0

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

@@ -0,0 +1,315 @@
+/**
+ * @file home.js
+ * @description Organism home page — breadcrumb header (avatar, name, badges, description, Export +
+ *   Settings) and tabs (Workspaces / Members / Agents / Board). The Settings panel hosts the
+ *   labelled+grouped edit form, the read-only metadata line, and the danger zone (leave / delete).
+ *   Extracted from organisms-tab.js with no behaviour change.
+ * @structure OrganismHome
+ * @usage import { OrganismHome } from '/views/profile/organisms/home.js';
+ * @version-history
+ *   v1.0.0 — 2026-06-19 — Extracted from organisms-tab.js during the module split.
+ */
+import { h } from 'preact';
+import { useState, useEffect, useMemo, useRef } from 'preact/hooks';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+import { TagInput } from '/views/profile/shared.js';
+import { useConfirm } from '/components/Modal.js';
+import * as orgService from '/js/services/organisms.js';
+import { copyToClipboard } from '/js/utils.js';
+import { recordRecent } from '/js/recents.js';
+import { fmtDate, orgInitials, exportOrganismZip } from '/views/profile/organisms/helpers.js';
+import { StructureOverview } from '/views/profile/organisms/widgets.js';
+import { WorkspaceList } from '/views/profile/organisms/workspace-list.js';
+import { OrgMemberManager } from '/views/profile/organisms/members.js';
+import { OrgAgentsPanel } from '/views/profile/organisms/agents.js';
+import { BoardPreview } from '/views/profile/organisms/panels.js';
+
+/* ───────────────── 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). */
+export 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;
+  const isAdmin = org.admins?.includes(ghii);
+  const isMember = org.members?.includes(ghii);
+  const canEdit = isCreator || isAdmin;
+  const typeLabel = t(`organisms.types.${org.type}`) || org.type;
+
+  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]);
+
+  // Feed the home page's "Continue" list (only once the real name is known, not the {id} stub).
+  useEffect(() => {
+    if (org.name) recordRecent({ type: 'organism', id: org.id, label: org.name, data: { orgId: org.id } });
+  }, [org.id, org.name]);
+
+  /* ── 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);
+  // 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]);  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 (!form.name.trim()) { showToast(t('organisms.nameRequired') || 'Name is required'); return; }
+    setSaving(true);
+    try {
+      const result = await orgService.updateOrganism(org.id, {
+        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'); 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 || '');
+  const copyBoardId = async () => {
+    const ok = await copyToClipboard(org.boardId);
+    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="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`
+          <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>
+
+      ${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></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></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></label>
+        </div>
+        ${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}
+    </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, 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=${() => guardDirty(onBack)}>${t('organisms.title') || 'Organisms'}</button>
+        <span class="pj-org-crumb-sep">/</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">${(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">${(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=${() => guardDirty(() => setShowSettings(s => !s))}>${'⚙ '}${t('organisms.settings') || 'Settings'}</button>
+        </div>
+      </div>
+
+      <${StructureOverview} label=${t('organisms.structureOverviewOrg') || 'Organism structure overview'}
+        load=${() => orgService.getOrganismOverview(org.id)} />
+
+      <div class="pj-org-tabs" role="tablist">
+        ${tabs.map(tb => html`
+          <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>
+
+      ${showSettings ? renderSettings() : null}
+
+      ${activeHomeTab === 'workspaces' ? html`
+        <${WorkspaceList} org=${org} showToast=${showToast} onOpen=${onOpenWs} onCount=${setWsCount} />
+      ` : null}
+
+      ${activeHomeTab === 'members' ? html`
+        <${OrgMemberManager} org=${org} ghii=${ghii} canManage=${canEdit} isCreator=${isCreator}
+          showToast=${showToast} confirm=${confirm} onChanged=${onChanged} show="members" />` : 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>`;
+}

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

@@ -0,0 +1,220 @@
+/**
+ * @file members.js
+ * @description Organism Members tab — roster first (avatar rows with role badge, per-workspace
+ *   access line, joined date, "…" menu for make-creator/remove/block), "+ Invite" toggle, and
+ *   pending join requests when present. For a regular member it is a read-only roster. Extracted
+ *   from organisms-tab.js, no behaviour change.
+ * @structure OrgMemberManager
+ * @usage import { OrgMemberManager } from '/views/profile/organisms/members.js';
+ * @version-history
+ *   v1.0.0 — 2026-06-19 — Extracted from organisms-tab.js during the module split.
+ */
+import { h } from 'preact';
+import { useState, useEffect, useCallback, useRef } from 'preact/hooks';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+import { KebabMenu } from '/views/profile/shared.js';
+import { PresenceDot } from '/components/PresenceDot.js';
+import * as orgService from '/js/services/organisms.js';
+import { fmtDate, orgInitials, relTime } from '/views/profile/organisms/helpers.js';
+
+/**
+ * Organism member panel. For creator/admin (`canManage`) it is a full manager: approve/reject
+ * join requests, invite by name, remove/block members, lift bans, transfer ownership (creator
+ * only), and attach/detach agents. For a regular member it renders a read-only roster + agent
+ * list. Backend: /:id/{join-requests,invitations,members,transfer,agents}. Refreshes the
+ * parent list via onChanged so member counts stay current.
+ */
+export function OrgMemberManager({ org, ghii, canManage, isCreator, showToast, confirm, onChanged, show }) {
+  const orgId = org.id;
+  // Membership is keyed by bare owner name; presence needs a full GHII. Local members
+  // resolve via this node; an already-qualified (federated) ghii is passed through.
+  const myNode = (window.AIMEAT?.auth?.getSession?.()?.ghii || '').split('@')[1] || '';
+  const toGhii = (id) => (id && !id.includes('@')) ? (myNode ? `${id}@${myNode}` : '') : (id || '');
+  const [requests, setRequests] = useState(null);
+  const [members, setMembers] = useState(null);
+  const [banned, setBanned] = useState([]);
+  const [invitations, setInvitations] = useState([]);
+  const [inviteName, setInviteName] = 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)];
+    if (canManage) {
+      tasks.push(
+        orgService.listJoinRequests(orgId).catch(() => null),
+        orgService.listMembers(orgId, 'banned').catch(() => null),
+        orgService.listInvitations(orgId).catch(() => null),
+      );
+    }
+    const [mb, rq, bn, inv] = await Promise.all(tasks);
+    setMembers(mb?.data?.members || []);
+    if (canManage) {
+      setRequests(rq?.data?.join_requests || []);
+      setBanned(bn?.data?.members || []);
+      setInvitations(inv?.data?.invitations || []);
+    }
+  }, [orgId, canManage]);
+
+  useEffect(() => { load(); }, [load]);
+  const liveRef = useRef(load); liveRef.current = load;
+  useEffect(() => {
+    const handler = () => liveRef.current();
+    window.addEventListener('aimeat-live-update', handler);
+    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 {
+      const r = await fn();
+      if (r?.ok === false) showToast(r?.error?.message || (t(failKey) || 'Failed'));
+      else if (okMsg) showToast(okMsg);
+      await load(); onChanged?.();
+    } catch (e) { showToast((e && e.message) || (t(failKey) || 'Failed')); }
+    finally { setBusy(false); }
+  };
+
+  const review = (rid, decision) => run(
+    () => orgService.reviewJoinRequest(orgId, rid, decision),
+    decision === 'approved' ? (t('organisms.joinApproved') || 'Request approved') : (t('organisms.joinRejected') || 'Request declined'),
+    'organisms.reviewFailed');
+
+  const invite = () => {
+    const name = inviteName.trim();
+    if (!name) return;
+    setInviteName('');
+    run(() => orgService.inviteMember(orgId, name), (t('organisms.invitationSent') || 'Invitation sent'), 'organisms.inviteFailed');
+  };
+
+  const remove = (memberGhii, ban) => confirm(
+    (ban ? (t('organisms.confirmBlockMember') || 'Block {member} and remove them from this organism?') : (t('organisms.confirmRemoveMember') || 'Revoke {member}’s access to this organism?')).replace('{member}', memberGhii),
+    () => run(() => orgService.removeMember(orgId, memberGhii, ban), ban ? (t('organisms.memberBlocked') || 'Member blocked') : (t('organisms.memberRemoved') || 'Member removed'), 'organisms.removeFailed'),
+    { danger: true });
+
+  const unban = (memberGhii) => run(() => orgService.unbanMember(orgId, memberGhii), (t('organisms.banLifted') || 'Block lifted'), 'organisms.removeFailed');
+
+  const transfer = (toWhom) => confirm(
+    (t('organisms.confirmTransfer') || 'Make {member} the creator? You will become an admin.').replace('{member}', toWhom),
+    () => run(() => orgService.transferOwnership(orgId, toWhom), (t('organisms.ownershipTransferred') || 'Ownership transferred'), 'organisms.transferFailed'),
+    { danger: true });
+
+  const pending = (requests || []).filter(r => r.status === 'pending');
+  const showMembers = show !== 'agents';
+
+  // "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="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 && 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-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}
+
+      ${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)} <${PresenceDot} ghii=${toGhii(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>${(m.ghii)}</span>
+            <button class="btn-ghost btn-sm" disabled=${busy} onClick=${() => unban(m.ghii)}>${t('organisms.unblock') || 'Unblock'}</button>
+          </div>
+        `)}
+      ` : null}
+      ` : null}
+    </div>
+  `;
+}