From 9c652c745709766a22126497e30e706057610f74 Mon Sep 17 00:00:00 2001
From: Cyber Preacher <72062250+Cyber-preacher@users.noreply.github.com>
Date: Tue, 30 Jun 2026 20:03:35 +0400
Subject: [PATCH 1/9] Deduplicate Initiative workspace details

---
 src/lib/initiativeUi.ts                       | 14 ++++++++
 src/pages/initiatives/Initiative.tsx          | 13 ++++++-
 .../components/InitiativeSettingsSection.tsx  | 35 +++++++++++++++++--
 tests/unit/initiative-ui.test.ts              | 19 ++++++++++
 4 files changed, 77 insertions(+), 4 deletions(-)

diff --git a/src/lib/initiativeUi.ts b/src/lib/initiativeUi.ts
index dcb95e4..46d17c2 100644
--- a/src/lib/initiativeUi.ts
+++ b/src/lib/initiativeUi.ts
@@ -106,6 +106,20 @@ export function initiativeSummaryPreview(value: string, maxLength = 150) {
   return normalized.slice(0, cutAt).trim();
 }
 
+export function initiativeDistinctDescription(
+  summary: string,
+  description: string,
+) {
+  const normalizedSummary = summary.replace(/\s+/g, " ").trim();
+  const normalizedDescription = description.replace(/\s+/g, " ").trim();
+
+  if (!normalizedDescription || normalizedDescription === normalizedSummary) {
+    return "";
+  }
+
+  return description.trim();
+}
+
 export function initiativeOptionsWithSelection(
   options: Array<{ value: string; label: string }>,
   selectedId?: string,
diff --git a/src/pages/initiatives/Initiative.tsx b/src/pages/initiatives/Initiative.tsx
index 358ebca..b5f1833 100644
--- a/src/pages/initiatives/Initiative.tsx
+++ b/src/pages/initiatives/Initiative.tsx
@@ -13,6 +13,7 @@ import { formatLoadError } from "@/lib/errorFormatting";
 import {
   canManageInitiative,
   defaultInitiativeBoardColumns,
+  initiativeDistinctDescription,
   initiativeRoleLabel,
   initiativeStatusLabel,
   initiativeStatusTone,
@@ -70,6 +71,10 @@ const Initiative: React.FC = () => {
   const viewerRole = initiative.viewerRole
     ? initiativeRoleLabel[initiative.viewerRole]
     : "Observer";
+  const description = initiativeDistinctDescription(
+    initiative.summary,
+    initiative.description,
+  );
 
   return (
     <div className="flex flex-col gap-6">
@@ -80,7 +85,7 @@ const Initiative: React.FC = () => {
       <PageHeader
         title={initiative.title}
         titleClassName="text-2xl"
-        description={initiative.description || initiative.summary}
+        description={initiative.summary}
         descriptionClassName="max-w-4xl leading-relaxed"
         right={
           <div className="flex flex-wrap items-center justify-end gap-2">
@@ -92,6 +97,12 @@ const Initiative: React.FC = () => {
         }
       />
 
+      {description ? (
+        <p className="max-w-4xl text-sm leading-relaxed whitespace-pre-line text-text">
+          {description}
+        </p>
+      ) : null}
+
       <div className="flex flex-wrap items-center justify-between gap-3 text-xs text-muted">
         <div className="flex flex-wrap gap-2">
           {initiative.tags.map((tag) => (
diff --git a/src/pages/initiatives/components/InitiativeSettingsSection.tsx b/src/pages/initiatives/components/InitiativeSettingsSection.tsx
index 4c9b5c7..9a48edd 100644
--- a/src/pages/initiatives/components/InitiativeSettingsSection.tsx
+++ b/src/pages/initiatives/components/InitiativeSettingsSection.tsx
@@ -1,5 +1,5 @@
 import type { FormEvent } from "react";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import { GlassySection } from "@/components/GlassySection";
 import { Textarea } from "@/components/Textarea";
@@ -24,12 +24,13 @@ export function InitiativeSettingsSection({
   const [description, setDescription] = useState(initiative.description);
   const [tags, setTags] = useState(initiative.tags.join(", "));
   const [status, setStatus] = useState<InitiativeStatusDto>(initiative.status);
+  const [editing, setEditing] = useState(false);
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const archivedReadOnly =
     initiative.status === "archived" && status !== "active";
 
-  useEffect(() => {
+  const resetDraft = useCallback(() => {
     setTitle(initiative.title);
     setSummary(initiative.summary);
     setDescription(initiative.description);
@@ -37,6 +38,16 @@ export function InitiativeSettingsSection({
     setStatus(initiative.status);
   }, [initiative]);
 
+  useEffect(() => {
+    resetDraft();
+  }, [resetDraft]);
+
+  function cancelEditing() {
+    resetDraft();
+    setError(null);
+    setEditing(false);
+  }
+
   async function updateInitiative(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
     if (!title.trim() || !summary.trim()) return;
@@ -52,6 +63,7 @@ export function InitiativeSettingsSection({
         status,
       });
       await onChanged();
+      setEditing(false);
     } catch (err) {
       setError((err as Error).message);
     } finally {
@@ -59,8 +71,25 @@ export function InitiativeSettingsSection({
     }
   }
 
+  if (!editing) {
+    return (
+      <div className="flex justify-end">
+        <Button type="button" size="sm" onClick={() => setEditing(true)}>
+          Edit initiative
+        </Button>
+      </div>
+    );
+  }
+
   return (
-    <GlassySection title="Settings">
+    <GlassySection
+      title="Settings"
+      action={
+        <Button type="button" size="sm" variant="ghost" onClick={cancelEditing}>
+          Cancel
+        </Button>
+      }
+    >
       <form className="grid gap-3" onSubmit={updateInitiative}>
         <div className="grid gap-3 md:grid-cols-2">
           <Input
diff --git a/tests/unit/initiative-ui.test.ts b/tests/unit/initiative-ui.test.ts
index 04c7cb7..123184b 100644
--- a/tests/unit/initiative-ui.test.ts
+++ b/tests/unit/initiative-ui.test.ts
@@ -5,6 +5,7 @@ import {
   defaultInitiativeBoardColumns,
   initiativeBoardCardCreatePath,
   initiativeCardsForColumn,
+  initiativeDistinctDescription,
   initiativeOptionsWithSelection,
   initiativePath,
   parseInitiativeTags,
@@ -106,3 +107,21 @@ test("initiative tags are normalized and deduplicated", () => {
     parseInitiativeTags("research, governance, research,  governance "),
   ).toEqual(["research", "governance"]);
 });
+
+test("initiative descriptions omit empty and summary-equivalent content", () => {
+  expect(
+    initiativeDistinctDescription(
+      "Coordinate public work.",
+      " Coordinate   public work. ",
+    ),
+  ).toBe("");
+  expect(initiativeDistinctDescription("Coordinate public work.", "  ")).toBe(
+    "",
+  );
+  expect(
+    initiativeDistinctDescription(
+      "Coordinate public work.",
+      "Publish evidence and assign owners.",
+    ),
+  ).toBe("Publish evidence and assign owners.");
+});

From f377d0b624b1a4c4221b3f229b35af072f7253b3 Mon Sep 17 00:00:00 2001
From: Cyber Preacher <72062250+Cyber-preacher@users.noreply.github.com>
Date: Tue, 30 Jun 2026 20:25:35 +0400
Subject: [PATCH 2/9] Align Initiative edit and board actions

---
 src/pages/initiatives/Initiative.tsx          | 23 ++++++++++++++++---
 .../components/InitiativeBoardSection.tsx     | 20 +++++++++++-----
 .../components/InitiativeSettingsSection.tsx  | 17 ++++----------
 3 files changed, 38 insertions(+), 22 deletions(-)

diff --git a/src/pages/initiatives/Initiative.tsx b/src/pages/initiatives/Initiative.tsx
index b5f1833..f67e34c 100644
--- a/src/pages/initiatives/Initiative.tsx
+++ b/src/pages/initiatives/Initiative.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { Link, useParams } from "react-router";
 
 import { Chip } from "@/components/Chip";
@@ -30,6 +30,7 @@ import { useInitiativePageData } from "./hooks/useInitiativePageData";
 const Initiative: React.FC = () => {
   const { id } = useParams<{ id: string }>();
   const { initiative, loadError, reload } = useInitiativePageData(id);
+  const [editing, setEditing] = useState(false);
 
   const boardColumns = useMemo(() => {
     if (!initiative) return [];
@@ -124,8 +125,12 @@ const Initiative: React.FC = () => {
         <MetricTile label="Proposals" value={proposals.length} />
       </section>
 
-      {canAdmin ? (
-        <InitiativeSettingsSection initiative={initiative} onChanged={reload} />
+      {canAdmin && editing ? (
+        <InitiativeSettingsSection
+          initiative={initiative}
+          onChanged={reload}
+          onClose={() => setEditing(false)}
+        />
       ) : null}
       <InitiativeBoardSection
         cards={cards}
@@ -133,6 +138,18 @@ const Initiative: React.FC = () => {
         columns={boardColumns}
         initiativeId={initiative.id}
         onChanged={reload}
+        secondaryAction={
+          canAdmin && !editing ? (
+            <Button
+              type="button"
+              size="sm"
+              variant="outline"
+              onClick={() => setEditing(true)}
+            >
+              Edit initiative
+            </Button>
+          ) : null
+        }
       />
       <InitiativeThreadsSection
         canModerate={canManage}
diff --git a/src/pages/initiatives/components/InitiativeBoardSection.tsx b/src/pages/initiatives/components/InitiativeBoardSection.tsx
index c00ce6f..944e24a 100644
--- a/src/pages/initiatives/components/InitiativeBoardSection.tsx
+++ b/src/pages/initiatives/components/InitiativeBoardSection.tsx
@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 import { useMemo, useState } from "react";
 import { Link } from "react-router";
 
@@ -26,6 +27,7 @@ type InitiativeBoardSectionProps = {
   columns: InitiativeBoardColumnDto[];
   initiativeId: string;
   onChanged: () => Promise<void> | void;
+  secondaryAction?: ReactNode;
 };
 
 export function InitiativeBoardSection({
@@ -34,6 +36,7 @@ export function InitiativeBoardSection({
   columns,
   initiativeId,
   onChanged,
+  secondaryAction,
 }: InitiativeBoardSectionProps) {
   const [updatingCardId, setUpdatingCardId] = useState<string | null>(null);
   const [confirmDeleteCardId, setConfirmDeleteCardId] = useState<string | null>(
@@ -84,12 +87,17 @@ export function InitiativeBoardSection({
     <GlassySection
       title="Board"
       action={
-        canManage ? (
-          <Button asChild size="sm">
-            <Link to={initiativeBoardCardCreatePath({ id: initiativeId })}>
-              Create card
-            </Link>
-          </Button>
+        secondaryAction || canManage ? (
+          <div className="flex flex-wrap items-center justify-end gap-2">
+            {secondaryAction}
+            {canManage ? (
+              <Button asChild size="sm">
+                <Link to={initiativeBoardCardCreatePath({ id: initiativeId })}>
+                  Create card
+                </Link>
+              </Button>
+            ) : null}
+          </div>
         ) : null
       }
     >
diff --git a/src/pages/initiatives/components/InitiativeSettingsSection.tsx b/src/pages/initiatives/components/InitiativeSettingsSection.tsx
index 9a48edd..ecca238 100644
--- a/src/pages/initiatives/components/InitiativeSettingsSection.tsx
+++ b/src/pages/initiatives/components/InitiativeSettingsSection.tsx
@@ -13,18 +13,19 @@ import type { InitiativeDto, InitiativeStatusDto } from "@/types/api";
 type InitiativeSettingsSectionProps = {
   initiative: InitiativeDto;
   onChanged: () => Promise<void> | void;
+  onClose: () => void;
 };
 
 export function InitiativeSettingsSection({
   initiative,
   onChanged,
+  onClose,
 }: InitiativeSettingsSectionProps) {
   const [title, setTitle] = useState(initiative.title);
   const [summary, setSummary] = useState(initiative.summary);
   const [description, setDescription] = useState(initiative.description);
   const [tags, setTags] = useState(initiative.tags.join(", "));
   const [status, setStatus] = useState<InitiativeStatusDto>(initiative.status);
-  const [editing, setEditing] = useState(false);
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const archivedReadOnly =
@@ -45,7 +46,7 @@ export function InitiativeSettingsSection({
   function cancelEditing() {
     resetDraft();
     setError(null);
-    setEditing(false);
+    onClose();
   }
 
   async function updateInitiative(event: FormEvent<HTMLFormElement>) {
@@ -63,7 +64,7 @@ export function InitiativeSettingsSection({
         status,
       });
       await onChanged();
-      setEditing(false);
+      onClose();
     } catch (err) {
       setError((err as Error).message);
     } finally {
@@ -71,16 +72,6 @@ export function InitiativeSettingsSection({
     }
   }
 
-  if (!editing) {
-    return (
-      <div className="flex justify-end">
-        <Button type="button" size="sm" onClick={() => setEditing(true)}>
-          Edit initiative
-        </Button>
-      </div>
-    );
-  }
-
   return (
     <GlassySection
       title="Settings"

From 7f9047c0cfacbeded323142c37b57b87183db19f Mon Sep 17 00:00:00 2001
From: Cyber Preacher <72062250+Cyber-preacher@users.noreply.github.com>
Date: Wed, 1 Jul 2026 00:59:50 +0400
Subject: [PATCH 3/9] Rebuild Initiative workspace header

---
 src/pages/initiatives/Initiative.tsx          | 113 +++++++++++-------
 .../components/InitiativeBoardSection.tsx     |  23 +---
 tests/unit/initiative-layout-contract.test.ts |  30 +++++
 3 files changed, 99 insertions(+), 67 deletions(-)
 create mode 100644 tests/unit/initiative-layout-contract.test.ts

diff --git a/src/pages/initiatives/Initiative.tsx b/src/pages/initiatives/Initiative.tsx
index f67e34c..01578c5 100644
--- a/src/pages/initiatives/Initiative.tsx
+++ b/src/pages/initiatives/Initiative.tsx
@@ -6,13 +6,13 @@ import { GlassyCard } from "@/components/GlassyCard";
 import { GlassyStatusChip } from "@/components/GlassySection";
 import { MetricTile } from "@/components/MetricTile";
 import { NoDataYetBar } from "@/components/NoDataYetBar";
-import { PageHeader } from "@/components/PageHeader";
 import { Button } from "@/components/primitives/button";
 import { formatDateTime } from "@/lib/dateTime";
 import { formatLoadError } from "@/lib/errorFormatting";
 import {
   canManageInitiative,
   defaultInitiativeBoardColumns,
+  initiativeBoardCardCreatePath,
   initiativeDistinctDescription,
   initiativeRoleLabel,
   initiativeStatusLabel,
@@ -27,6 +27,8 @@ import { InitiativeSettingsSection } from "./components/InitiativeSettingsSectio
 import { InitiativeThreadsSection } from "./components/InitiativeThreadsSection";
 import { useInitiativePageData } from "./hooks/useInitiativePageData";
 
+const initiativeActionButtonClassName = "min-w-32 opacity-90 hover:opacity-100";
+
 const Initiative: React.FC = () => {
   const { id } = useParams<{ id: string }>();
   const { initiative, loadError, reload } = useInitiativePageData(id);
@@ -79,44 +81,77 @@ const Initiative: React.FC = () => {
 
   return (
     <div className="flex flex-col gap-6">
-      <Button asChild variant="ghost" size="sm" className="w-fit">
-        <Link to="/app/initiatives">Back to initiatives</Link>
-      </Button>
-
-      <PageHeader
-        title={initiative.title}
-        titleClassName="text-2xl"
-        description={initiative.summary}
-        descriptionClassName="max-w-4xl leading-relaxed"
-        right={
-          <div className="flex flex-wrap items-center justify-end gap-2">
+      <header className="grid gap-5 border-b border-[color:var(--surface-glass-border)] pb-5 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-start">
+        <div className="min-w-0 space-y-4">
+          <div className="max-w-4xl space-y-2">
+            <h1 className="text-2xl leading-tight font-semibold text-text sm:text-3xl">
+              {initiative.title}
+            </h1>
+            <p className="text-base leading-relaxed text-muted">
+              {initiative.summary}
+            </p>
+          </div>
+
+          {description ? (
+            <p className="max-w-4xl text-sm leading-7 whitespace-pre-line text-text">
+              {description}
+            </p>
+          ) : null}
+
+          <div className="flex flex-wrap items-center gap-2">
             <GlassyStatusChip tone={initiativeStatusTone(initiative.status)}>
               {initiativeStatusLabel[initiative.status]}
             </GlassyStatusChip>
-            <Chip className="stage-chip stage-chip--system">{viewerRole}</Chip>
+            <GlassyStatusChip tone="neutral">{viewerRole}</GlassyStatusChip>
+            {initiative.tags.length > 0 ? (
+              <span
+                aria-hidden="true"
+                className="mx-1 h-4 w-px bg-[color:var(--surface-glass-border)]"
+              />
+            ) : null}
+            {initiative.tags.length > 0
+              ? initiative.tags.map((tag) => (
+                  <Chip key={tag} className="stage-chip stage-chip--system">
+                    {tag}
+                  </Chip>
+                ))
+              : null}
           </div>
-        }
-      />
 
-      {description ? (
-        <p className="max-w-4xl text-sm leading-relaxed whitespace-pre-line text-text">
-          {description}
-        </p>
-      ) : null}
-
-      <div className="flex flex-wrap items-center justify-between gap-3 text-xs text-muted">
-        <div className="flex flex-wrap gap-2">
-          {initiative.tags.map((tag) => (
-            <Chip key={tag} className="stage-chip stage-chip--system">
-              {tag}
-            </Chip>
-          ))}
-        </div>
-        <div className="flex flex-wrap items-center gap-x-4 gap-y-1">
-          <span>Created by {shortAddress(initiative.createdByAddress)}</span>
-          <span>Updated {formatDateTime(initiative.updatedAt)}</span>
+          <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted">
+            <span>Created by {shortAddress(initiative.createdByAddress)}</span>
+            <span>Updated {formatDateTime(initiative.updatedAt)}</span>
+          </div>
         </div>
-      </div>
+
+        {canAdmin || canManage ? (
+          <div className="flex flex-wrap items-center gap-2 lg:justify-end">
+            {canAdmin ? (
+              <Button
+                type="button"
+                size="sm"
+                variant="outline"
+                className={initiativeActionButtonClassName}
+                onClick={() => setEditing(true)}
+              >
+                Edit initiative
+              </Button>
+            ) : null}
+            {canManage ? (
+              <Button
+                asChild
+                size="sm"
+                variant="outline"
+                className={initiativeActionButtonClassName}
+              >
+                <Link to={initiativeBoardCardCreatePath({ id: initiative.id })}>
+                  Create card
+                </Link>
+              </Button>
+            ) : null}
+          </div>
+        ) : null}
+      </header>
 
       <section className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
         <MetricTile label="Members" value={initiative.memberCount} />
@@ -138,18 +173,6 @@ const Initiative: React.FC = () => {
         columns={boardColumns}
         initiativeId={initiative.id}
         onChanged={reload}
-        secondaryAction={
-          canAdmin && !editing ? (
-            <Button
-              type="button"
-              size="sm"
-              variant="outline"
-              onClick={() => setEditing(true)}
-            >
-              Edit initiative
-            </Button>
-          ) : null
-        }
       />
       <InitiativeThreadsSection
         canModerate={canManage}
diff --git a/src/pages/initiatives/components/InitiativeBoardSection.tsx b/src/pages/initiatives/components/InitiativeBoardSection.tsx
index 944e24a..62d9c63 100644
--- a/src/pages/initiatives/components/InitiativeBoardSection.tsx
+++ b/src/pages/initiatives/components/InitiativeBoardSection.tsx
@@ -1,6 +1,4 @@
-import type { ReactNode } from "react";
 import { useMemo, useState } from "react";
-import { Link } from "react-router";
 
 import { GlassySection, GlassyStatusChip } from "@/components/GlassySection";
 import { Button } from "@/components/primitives/button";
@@ -11,7 +9,6 @@ import {
 } from "@/lib/apiClient";
 import { formatDateTime } from "@/lib/dateTime";
 import {
-  initiativeBoardCardCreatePath,
   initiativeBoardStatusLabel,
   initiativeCardsForColumn,
 } from "@/lib/initiativeUi";
@@ -27,7 +24,6 @@ type InitiativeBoardSectionProps = {
   columns: InitiativeBoardColumnDto[];
   initiativeId: string;
   onChanged: () => Promise<void> | void;
-  secondaryAction?: ReactNode;
 };
 
 export function InitiativeBoardSection({
@@ -36,7 +32,6 @@ export function InitiativeBoardSection({
   columns,
   initiativeId,
   onChanged,
-  secondaryAction,
 }: InitiativeBoardSectionProps) {
   const [updatingCardId, setUpdatingCardId] = useState<string | null>(null);
   const [confirmDeleteCardId, setConfirmDeleteCardId] = useState<string | null>(
@@ -84,23 +79,7 @@ export function InitiativeBoardSection({
   }
 
   return (
-    <GlassySection
-      title="Board"
-      action={
-        secondaryAction || canManage ? (
-          <div className="flex flex-wrap items-center justify-end gap-2">
-            {secondaryAction}
-            {canManage ? (
-              <Button asChild size="sm">
-                <Link to={initiativeBoardCardCreatePath({ id: initiativeId })}>
-                  Create card
-                </Link>
-              </Button>
-            ) : null}
-          </div>
-        ) : null
-      }
-    >
+    <GlassySection title="Board">
       {error ? <p className="text-sm text-destructive">{error}</p> : null}
 
       <div className="grid gap-3 xl:grid-cols-5">
diff --git a/tests/unit/initiative-layout-contract.test.ts b/tests/unit/initiative-layout-contract.test.ts
new file mode 100644
index 0000000..9ac73ee
--- /dev/null
+++ b/tests/unit/initiative-layout-contract.test.ts
@@ -0,0 +1,30 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { test } from "@rstest/core";
+
+const initiativeSource = readFileSync(
+  join(process.cwd(), "src/pages/initiatives/Initiative.tsx"),
+  "utf8",
+);
+const boardSource = readFileSync(
+  join(
+    process.cwd(),
+    "src/pages/initiatives/components/InitiativeBoardSection.tsx",
+  ),
+  "utf8",
+);
+
+test("Initiative header owns aligned edit and card creation actions", () => {
+  assert.doesNotMatch(initiativeSource, /Back to initiatives/);
+  assert.doesNotMatch(initiativeSource, /<GlassyCard as="article"/);
+  assert.doesNotMatch(initiativeSource, /Action plan/);
+  assert.match(initiativeSource, />\s*Edit initiative\s*</);
+  assert.match(initiativeSource, />\s*Create card\s*</);
+  assert.equal(
+    initiativeSource.match(/className=\{initiativeActionButtonClassName\}/g)
+      ?.length,
+    2,
+  );
+  assert.doesNotMatch(boardSource, /Create card|initiativeBoardCardCreatePath/);
+});

From 0e93ad2e4cb665b1ba35ae7bfaf5e243cc41c007 Mon Sep 17 00:00:00 2001
From: Cyber Preacher <72062250+Cyber-preacher@users.noreply.github.com>
Date: Wed, 1 Jul 2026 01:27:10 +0400
Subject: [PATCH 4/9] Unify Initiative header actions and details

---
 src/lib/initiativeUi.ts                       |  7 ++
 src/pages/initiatives/Initiative.tsx          | 97 ++++++++++---------
 .../components/InitiativeHeaderAction.tsx     | 25 +++++
 tests/unit/initiative-layout-contract.test.ts | 19 ++--
 tests/unit/initiative-ui.test.ts              | 14 +++
 5 files changed, 108 insertions(+), 54 deletions(-)
 create mode 100644 src/pages/initiatives/components/InitiativeHeaderAction.tsx

diff --git a/src/lib/initiativeUi.ts b/src/lib/initiativeUi.ts
index 46d17c2..3da4668 100644
--- a/src/lib/initiativeUi.ts
+++ b/src/lib/initiativeUi.ts
@@ -120,6 +120,13 @@ export function initiativeDistinctDescription(
   return description.trim();
 }
 
+export function initiativeDescriptionParagraphs(description: string) {
+  return description
+    .split(/\n\s*\n/)
+    .map((paragraph) => paragraph.replace(/\s*\n\s*/g, " ").trim())
+    .filter(Boolean);
+}
+
 export function initiativeOptionsWithSelection(
   options: Array<{ value: string; label: string }>,
   selectedId?: string,
diff --git a/src/pages/initiatives/Initiative.tsx b/src/pages/initiatives/Initiative.tsx
index 01578c5..f757ebb 100644
--- a/src/pages/initiatives/Initiative.tsx
+++ b/src/pages/initiatives/Initiative.tsx
@@ -1,18 +1,18 @@
 import { useMemo, useState } from "react";
-import { Link, useParams } from "react-router";
+import { useNavigate, useParams } from "react-router";
 
 import { Chip } from "@/components/Chip";
 import { GlassyCard } from "@/components/GlassyCard";
 import { GlassyStatusChip } from "@/components/GlassySection";
 import { MetricTile } from "@/components/MetricTile";
 import { NoDataYetBar } from "@/components/NoDataYetBar";
-import { Button } from "@/components/primitives/button";
 import { formatDateTime } from "@/lib/dateTime";
 import { formatLoadError } from "@/lib/errorFormatting";
 import {
   canManageInitiative,
   defaultInitiativeBoardColumns,
   initiativeBoardCardCreatePath,
+  initiativeDescriptionParagraphs,
   initiativeDistinctDescription,
   initiativeRoleLabel,
   initiativeStatusLabel,
@@ -21,16 +21,16 @@ import {
 import { shortAddress } from "@/lib/profileUi";
 import { InitiativeBoardSection } from "./components/InitiativeBoardSection";
 import { InitiativeChatSection } from "./components/InitiativeChatSection";
+import { InitiativeHeaderAction } from "./components/InitiativeHeaderAction";
 import { InitiativeMembersSection } from "./components/InitiativeMembersSection";
 import { InitiativeProposalsSection } from "./components/InitiativeProposalsSection";
 import { InitiativeSettingsSection } from "./components/InitiativeSettingsSection";
 import { InitiativeThreadsSection } from "./components/InitiativeThreadsSection";
 import { useInitiativePageData } from "./hooks/useInitiativePageData";
 
-const initiativeActionButtonClassName = "min-w-32 opacity-90 hover:opacity-100";
-
 const Initiative: React.FC = () => {
   const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
   const { initiative, loadError, reload } = useInitiativePageData(id);
   const [editing, setEditing] = useState(false);
 
@@ -78,12 +78,13 @@ const Initiative: React.FC = () => {
     initiative.summary,
     initiative.description,
   );
+  const descriptionParagraphs = initiativeDescriptionParagraphs(description);
 
   return (
     <div className="flex flex-col gap-6">
-      <header className="grid gap-5 border-b border-[color:var(--surface-glass-border)] pb-5 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-start">
-        <div className="min-w-0 space-y-4">
-          <div className="max-w-4xl space-y-2">
+      <GlassyCard as="article" className="p-5 sm:p-6">
+        <header className="grid gap-5 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-start">
+          <div className="max-w-4xl min-w-0 space-y-2">
             <h1 className="text-2xl leading-tight font-semibold text-text sm:text-3xl">
               {initiative.title}
             </h1>
@@ -92,12 +93,42 @@ const Initiative: React.FC = () => {
             </p>
           </div>
 
-          {description ? (
-            <p className="max-w-4xl text-sm leading-7 whitespace-pre-line text-text">
-              {description}
-            </p>
+          {canAdmin || canManage ? (
+            <div className="flex flex-wrap items-center gap-2 lg:justify-end">
+              {canAdmin ? (
+                <InitiativeHeaderAction onClick={() => setEditing(true)}>
+                  Edit initiative
+                </InitiativeHeaderAction>
+              ) : null}
+              {canManage ? (
+                <InitiativeHeaderAction
+                  onClick={() =>
+                    navigate(
+                      initiativeBoardCardCreatePath({ id: initiative.id }),
+                    )
+                  }
+                >
+                  Create card
+                </InitiativeHeaderAction>
+              ) : null}
+            </div>
           ) : null}
+        </header>
+
+        {descriptionParagraphs.length > 0 ? (
+          <div className="mt-5 max-w-4xl space-y-3 border-t border-[color:var(--surface-glass-border)] pt-5">
+            {descriptionParagraphs.map((paragraph, index) => (
+              <p
+                key={`${index}-${paragraph}`}
+                className="border-l-2 border-[color:var(--surface-glass-border)] pl-3 text-sm leading-7 text-text"
+              >
+                {paragraph}
+              </p>
+            ))}
+          </div>
+        ) : null}
 
+        <footer className="mt-5 flex flex-col gap-4 border-t border-[color:var(--surface-glass-border)] pt-4 lg:flex-row lg:items-center lg:justify-between">
           <div className="flex flex-wrap items-center gap-2">
             <GlassyStatusChip tone={initiativeStatusTone(initiative.status)}>
               {initiativeStatusLabel[initiative.status]}
@@ -109,49 +140,19 @@ const Initiative: React.FC = () => {
                 className="mx-1 h-4 w-px bg-[color:var(--surface-glass-border)]"
               />
             ) : null}
-            {initiative.tags.length > 0
-              ? initiative.tags.map((tag) => (
-                  <Chip key={tag} className="stage-chip stage-chip--system">
-                    {tag}
-                  </Chip>
-                ))
-              : null}
+            {initiative.tags.map((tag) => (
+              <Chip key={tag} className="stage-chip stage-chip--system">
+                {tag}
+              </Chip>
+            ))}
           </div>
 
           <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted">
             <span>Created by {shortAddress(initiative.createdByAddress)}</span>
             <span>Updated {formatDateTime(initiative.updatedAt)}</span>
           </div>
-        </div>
-
-        {canAdmin || canManage ? (
-          <div className="flex flex-wrap items-center gap-2 lg:justify-end">
-            {canAdmin ? (
-              <Button
-                type="button"
-                size="sm"
-                variant="outline"
-                className={initiativeActionButtonClassName}
-                onClick={() => setEditing(true)}
-              >
-                Edit initiative
-              </Button>
-            ) : null}
-            {canManage ? (
-              <Button
-                asChild
-                size="sm"
-                variant="outline"
-                className={initiativeActionButtonClassName}
-              >
-                <Link to={initiativeBoardCardCreatePath({ id: initiative.id })}>
-                  Create card
-                </Link>
-              </Button>
-            ) : null}
-          </div>
-        ) : null}
-      </header>
+        </footer>
+      </GlassyCard>
 
       <section className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
         <MetricTile label="Members" value={initiative.memberCount} />
diff --git a/src/pages/initiatives/components/InitiativeHeaderAction.tsx b/src/pages/initiatives/components/InitiativeHeaderAction.tsx
new file mode 100644
index 0000000..cc37fd5
--- /dev/null
+++ b/src/pages/initiatives/components/InitiativeHeaderAction.tsx
@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+
+import { Button } from "@/components/primitives/button";
+
+type InitiativeHeaderActionProps = {
+  children: ReactNode;
+  onClick: () => void;
+};
+
+export function InitiativeHeaderAction({
+  children,
+  onClick,
+}: InitiativeHeaderActionProps) {
+  return (
+    <Button
+      type="button"
+      size="sm"
+      variant="outline"
+      className="w-36 text-sm font-semibold opacity-90 hover:opacity-100"
+      onClick={onClick}
+    >
+      {children}
+    </Button>
+  );
+}
diff --git a/tests/unit/initiative-layout-contract.test.ts b/tests/unit/initiative-layout-contract.test.ts
index 9ac73ee..57ee4c5 100644
--- a/tests/unit/initiative-layout-contract.test.ts
+++ b/tests/unit/initiative-layout-contract.test.ts
@@ -14,17 +14,24 @@ const boardSource = readFileSync(
   ),
   "utf8",
 );
+const headerActionSource = readFileSync(
+  join(
+    process.cwd(),
+    "src/pages/initiatives/components/InitiativeHeaderAction.tsx",
+  ),
+  "utf8",
+);
 
 test("Initiative header owns aligned edit and card creation actions", () => {
   assert.doesNotMatch(initiativeSource, /Back to initiatives/);
-  assert.doesNotMatch(initiativeSource, /<GlassyCard as="article"/);
   assert.doesNotMatch(initiativeSource, /Action plan/);
   assert.match(initiativeSource, />\s*Edit initiative\s*</);
   assert.match(initiativeSource, />\s*Create card\s*</);
-  assert.equal(
-    initiativeSource.match(/className=\{initiativeActionButtonClassName\}/g)
-      ?.length,
-    2,
-  );
+  assert.equal(initiativeSource.match(/<InitiativeHeaderAction/g)?.length, 2);
   assert.doesNotMatch(boardSource, /Create card|initiativeBoardCardCreatePath/);
+  assert.match(headerActionSource, /type="button"/);
+  assert.match(headerActionSource, /size="sm"/);
+  assert.match(headerActionSource, /variant="outline"/);
+  assert.match(headerActionSource, /className="w-36[^"]*opacity-90/);
+  assert.doesNotMatch(headerActionSource, /asChild/);
 });
diff --git a/tests/unit/initiative-ui.test.ts b/tests/unit/initiative-ui.test.ts
index 123184b..a0ccbb1 100644
--- a/tests/unit/initiative-ui.test.ts
+++ b/tests/unit/initiative-ui.test.ts
@@ -5,6 +5,7 @@ import {
   defaultInitiativeBoardColumns,
   initiativeBoardCardCreatePath,
   initiativeCardsForColumn,
+  initiativeDescriptionParagraphs,
   initiativeDistinctDescription,
   initiativeOptionsWithSelection,
   initiativePath,
@@ -125,3 +126,16 @@ test("initiative descriptions omit empty and summary-equivalent content", () =>
     ),
   ).toBe("Publish evidence and assign owners.");
 });
+
+test("initiative descriptions preserve distinct paragraphs without blank rows", () => {
+  expect(
+    initiativeDescriptionParagraphs(
+      "Analyze voting patterns.\n\nCollect evidence.\n\nReport findings.",
+    ),
+  ).toEqual([
+    "Analyze voting patterns.",
+    "Collect evidence.",
+    "Report findings.",
+  ]);
+  expect(initiativeDescriptionParagraphs("")).toEqual([]);
+});

From 1e8ffe497999406cf68fe72b4b747e2e1daadbc6 Mon Sep 17 00:00:00 2001
From: Cyber Preacher <72062250+Cyber-preacher@users.noreply.github.com>
Date: Wed, 1 Jul 2026 01:32:52 +0400
Subject: [PATCH 5/9] Revert "Unify Initiative header actions and details"

This reverts commit 0e93ad2e4cb665b1ba35ae7bfaf5e243cc41c007.
---
 src/lib/initiativeUi.ts                       |  7 --
 src/pages/initiatives/Initiative.tsx          | 97 +++++++++----------
 .../components/InitiativeHeaderAction.tsx     | 25 -----
 tests/unit/initiative-layout-contract.test.ts | 19 ++--
 tests/unit/initiative-ui.test.ts              | 14 ---
 5 files changed, 54 insertions(+), 108 deletions(-)
 delete mode 100644 src/pages/initiatives/components/InitiativeHeaderAction.tsx

diff --git a/src/lib/initiativeUi.ts b/src/lib/initiativeUi.ts
index 3da4668..46d17c2 100644
--- a/src/lib/initiativeUi.ts
+++ b/src/lib/initiativeUi.ts
@@ -120,13 +120,6 @@ export function initiativeDistinctDescription(
   return description.trim();
 }
 
-export function initiativeDescriptionParagraphs(description: string) {
-  return description
-    .split(/\n\s*\n/)
-    .map((paragraph) => paragraph.replace(/\s*\n\s*/g, " ").trim())
-    .filter(Boolean);
-}
-
 export function initiativeOptionsWithSelection(
   options: Array<{ value: string; label: string }>,
   selectedId?: string,
diff --git a/src/pages/initiatives/Initiative.tsx b/src/pages/initiatives/Initiative.tsx
index f757ebb..01578c5 100644
--- a/src/pages/initiatives/Initiative.tsx
+++ b/src/pages/initiatives/Initiative.tsx
@@ -1,18 +1,18 @@
 import { useMemo, useState } from "react";
-import { useNavigate, useParams } from "react-router";
+import { Link, useParams } from "react-router";
 
 import { Chip } from "@/components/Chip";
 import { GlassyCard } from "@/components/GlassyCard";
 import { GlassyStatusChip } from "@/components/GlassySection";
 import { MetricTile } from "@/components/MetricTile";
 import { NoDataYetBar } from "@/components/NoDataYetBar";
+import { Button } from "@/components/primitives/button";
 import { formatDateTime } from "@/lib/dateTime";
 import { formatLoadError } from "@/lib/errorFormatting";
 import {
   canManageInitiative,
   defaultInitiativeBoardColumns,
   initiativeBoardCardCreatePath,
-  initiativeDescriptionParagraphs,
   initiativeDistinctDescription,
   initiativeRoleLabel,
   initiativeStatusLabel,
@@ -21,16 +21,16 @@ import {
 import { shortAddress } from "@/lib/profileUi";
 import { InitiativeBoardSection } from "./components/InitiativeBoardSection";
 import { InitiativeChatSection } from "./components/InitiativeChatSection";
-import { InitiativeHeaderAction } from "./components/InitiativeHeaderAction";
 import { InitiativeMembersSection } from "./components/InitiativeMembersSection";
 import { InitiativeProposalsSection } from "./components/InitiativeProposalsSection";
 import { InitiativeSettingsSection } from "./components/InitiativeSettingsSection";
 import { InitiativeThreadsSection } from "./components/InitiativeThreadsSection";
 import { useInitiativePageData } from "./hooks/useInitiativePageData";
 
+const initiativeActionButtonClassName = "min-w-32 opacity-90 hover:opacity-100";
+
 const Initiative: React.FC = () => {
   const { id } = useParams<{ id: string }>();
-  const navigate = useNavigate();
   const { initiative, loadError, reload } = useInitiativePageData(id);
   const [editing, setEditing] = useState(false);
 
@@ -78,13 +78,12 @@ const Initiative: React.FC = () => {
     initiative.summary,
     initiative.description,
   );
-  const descriptionParagraphs = initiativeDescriptionParagraphs(description);
 
   return (
     <div className="flex flex-col gap-6">
-      <GlassyCard as="article" className="p-5 sm:p-6">
-        <header className="grid gap-5 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-start">
-          <div className="max-w-4xl min-w-0 space-y-2">
+      <header className="grid gap-5 border-b border-[color:var(--surface-glass-border)] pb-5 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-start">
+        <div className="min-w-0 space-y-4">
+          <div className="max-w-4xl space-y-2">
             <h1 className="text-2xl leading-tight font-semibold text-text sm:text-3xl">
               {initiative.title}
             </h1>
@@ -93,42 +92,12 @@ const Initiative: React.FC = () => {
             </p>
           </div>
 
-          {canAdmin || canManage ? (
-            <div className="flex flex-wrap items-center gap-2 lg:justify-end">
-              {canAdmin ? (
-                <InitiativeHeaderAction onClick={() => setEditing(true)}>
-                  Edit initiative
-                </InitiativeHeaderAction>
-              ) : null}
-              {canManage ? (
-                <InitiativeHeaderAction
-                  onClick={() =>
-                    navigate(
-                      initiativeBoardCardCreatePath({ id: initiative.id }),
-                    )
-                  }
-                >
-                  Create card
-                </InitiativeHeaderAction>
-              ) : null}
-            </div>
+          {description ? (
+            <p className="max-w-4xl text-sm leading-7 whitespace-pre-line text-text">
+              {description}
+            </p>
           ) : null}
-        </header>
-
-        {descriptionParagraphs.length > 0 ? (
-          <div className="mt-5 max-w-4xl space-y-3 border-t border-[color:var(--surface-glass-border)] pt-5">
-            {descriptionParagraphs.map((paragraph, index) => (
-              <p
-                key={`${index}-${paragraph}`}
-                className="border-l-2 border-[color:var(--surface-glass-border)] pl-3 text-sm leading-7 text-text"
-              >
-                {paragraph}
-              </p>
-            ))}
-          </div>
-        ) : null}
 
-        <footer className="mt-5 flex flex-col gap-4 border-t border-[color:var(--surface-glass-border)] pt-4 lg:flex-row lg:items-center lg:justify-between">
           <div className="flex flex-wrap items-center gap-2">
             <GlassyStatusChip tone={initiativeStatusTone(initiative.status)}>
               {initiativeStatusLabel[initiative.status]}
@@ -140,19 +109,49 @@ const Initiative: React.FC = () => {
                 className="mx-1 h-4 w-px bg-[color:var(--surface-glass-border)]"
               />
             ) : null}
-            {initiative.tags.map((tag) => (
-              <Chip key={tag} className="stage-chip stage-chip--system">
-                {tag}
-              </Chip>
-            ))}
+            {initiative.tags.length > 0
+              ? initiative.tags.map((tag) => (
+                  <Chip key={tag} className="stage-chip stage-chip--system">
+                    {tag}
+                  </Chip>
+                ))
+              : null}
           </div>
 
           <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted">
             <span>Created by {shortAddress(initiative.createdByAddress)}</span>
             <span>Updated {formatDateTime(initiative.updatedAt)}</span>
           </div>
-        </footer>
-      </GlassyCard>
+        </div>
+
+        {canAdmin || canManage ? (
+          <div className="flex flex-wrap items-center gap-2 lg:justify-end">
+            {canAdmin ? (
+              <Button
+                type="button"
+                size="sm"
+                variant="outline"
+                className={initiativeActionButtonClassName}
+                onClick={() => setEditing(true)}
+              >
+                Edit initiative
+              </Button>
+            ) : null}
+            {canManage ? (
+              <Button
+                asChild
+                size="sm"
+                variant="outline"
+                className={initiativeActionButtonClassName}
+              >
+                <Link to={initiativeBoardCardCreatePath({ id: initiative.id })}>
+                  Create card
+                </Link>
+              </Button>
+            ) : null}
+          </div>
+        ) : null}
+      </header>
 
       <section className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
         <MetricTile label="Members" value={initiative.memberCount} />
diff --git a/src/pages/initiatives/components/InitiativeHeaderAction.tsx b/src/pages/initiatives/components/InitiativeHeaderAction.tsx
deleted file mode 100644
index cc37fd5..0000000
--- a/src/pages/initiatives/components/InitiativeHeaderAction.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { ReactNode } from "react";
-
-import { Button } from "@/components/primitives/button";
-
-type InitiativeHeaderActionProps = {
-  children: ReactNode;
-  onClick: () => void;
-};
-
-export function InitiativeHeaderAction({
-  children,
-  onClick,
-}: InitiativeHeaderActionProps) {
-  return (
-    <Button
-      type="button"
-      size="sm"
-      variant="outline"
-      className="w-36 text-sm font-semibold opacity-90 hover:opacity-100"
-      onClick={onClick}
-    >
-      {children}
-    </Button>
-  );
-}
diff --git a/tests/unit/initiative-layout-contract.test.ts b/tests/unit/initiative-layout-contract.test.ts
index 57ee4c5..9ac73ee 100644
--- a/tests/unit/initiative-layout-contract.test.ts
+++ b/tests/unit/initiative-layout-contract.test.ts
@@ -14,24 +14,17 @@ const boardSource = readFileSync(
   ),
   "utf8",
 );
-const headerActionSource = readFileSync(
-  join(
-    process.cwd(),
-    "src/pages/initiatives/components/InitiativeHeaderAction.tsx",
-  ),
-  "utf8",
-);
 
 test("Initiative header owns aligned edit and card creation actions", () => {
   assert.doesNotMatch(initiativeSource, /Back to initiatives/);
+  assert.doesNotMatch(initiativeSource, /<GlassyCard as="article"/);
   assert.doesNotMatch(initiativeSource, /Action plan/);
   assert.match(initiativeSource, />\s*Edit initiative\s*</);
   assert.match(initiativeSource, />\s*Create card\s*</);
-  assert.equal(initiativeSource.match(/<InitiativeHeaderAction/g)?.length, 2);
+  assert.equal(
+    initiativeSource.match(/className=\{initiativeActionButtonClassName\}/g)
+      ?.length,
+    2,
+  );
   assert.doesNotMatch(boardSource, /Create card|initiativeBoardCardCreatePath/);
-  assert.match(headerActionSource, /type="button"/);
-  assert.match(headerActionSource, /size="sm"/);
-  assert.match(headerActionSource, /variant="outline"/);
-  assert.match(headerActionSource, /className="w-36[^"]*opacity-90/);
-  assert.doesNotMatch(headerActionSource, /asChild/);
 });
diff --git a/tests/unit/initiative-ui.test.ts b/tests/unit/initiative-ui.test.ts
index a0ccbb1..123184b 100644
--- a/tests/unit/initiative-ui.test.ts
+++ b/tests/unit/initiative-ui.test.ts
@@ -5,7 +5,6 @@ import {
   defaultInitiativeBoardColumns,
   initiativeBoardCardCreatePath,
   initiativeCardsForColumn,
-  initiativeDescriptionParagraphs,
   initiativeDistinctDescription,
   initiativeOptionsWithSelection,
   initiativePath,
@@ -126,16 +125,3 @@ test("initiative descriptions omit empty and summary-equivalent content", () =>
     ),
   ).toBe("Publish evidence and assign owners.");
 });
-
-test("initiative descriptions preserve distinct paragraphs without blank rows", () => {
-  expect(
-    initiativeDescriptionParagraphs(
-      "Analyze voting patterns.\n\nCollect evidence.\n\nReport findings.",
-    ),
-  ).toEqual([
-    "Analyze voting patterns.",
-    "Collect evidence.",
-    "Report findings.",
-  ]);
-  expect(initiativeDescriptionParagraphs("")).toEqual([]);
-});

From cb5c4d9a5d6d1ac317a48eb9b69165abda9c76b3 Mon Sep 17 00:00:00 2001
From: Cyber Preacher <72062250+Cyber-preacher@users.noreply.github.com>
Date: Wed, 1 Jul 2026 01:32:52 +0400
Subject: [PATCH 6/9] Revert "Rebuild Initiative workspace header"

This reverts commit 7f9047c0cfacbeded323142c37b57b87183db19f.
---
 src/pages/initiatives/Initiative.tsx          | 113 +++++++-----------
 .../components/InitiativeBoardSection.tsx     |  23 +++-
 tests/unit/initiative-layout-contract.test.ts |  30 -----
 3 files changed, 67 insertions(+), 99 deletions(-)
 delete mode 100644 tests/unit/initiative-layout-contract.test.ts

diff --git a/src/pages/initiatives/Initiative.tsx b/src/pages/initiatives/Initiative.tsx
index 01578c5..f67e34c 100644
--- a/src/pages/initiatives/Initiative.tsx
+++ b/src/pages/initiatives/Initiative.tsx
@@ -6,13 +6,13 @@ import { GlassyCard } from "@/components/GlassyCard";
 import { GlassyStatusChip } from "@/components/GlassySection";
 import { MetricTile } from "@/components/MetricTile";
 import { NoDataYetBar } from "@/components/NoDataYetBar";
+import { PageHeader } from "@/components/PageHeader";
 import { Button } from "@/components/primitives/button";
 import { formatDateTime } from "@/lib/dateTime";
 import { formatLoadError } from "@/lib/errorFormatting";
 import {
   canManageInitiative,
   defaultInitiativeBoardColumns,
-  initiativeBoardCardCreatePath,
   initiativeDistinctDescription,
   initiativeRoleLabel,
   initiativeStatusLabel,
@@ -27,8 +27,6 @@ import { InitiativeSettingsSection } from "./components/InitiativeSettingsSectio
 import { InitiativeThreadsSection } from "./components/InitiativeThreadsSection";
 import { useInitiativePageData } from "./hooks/useInitiativePageData";
 
-const initiativeActionButtonClassName = "min-w-32 opacity-90 hover:opacity-100";
-
 const Initiative: React.FC = () => {
   const { id } = useParams<{ id: string }>();
   const { initiative, loadError, reload } = useInitiativePageData(id);
@@ -81,77 +79,44 @@ const Initiative: React.FC = () => {
 
   return (
     <div className="flex flex-col gap-6">
-      <header className="grid gap-5 border-b border-[color:var(--surface-glass-border)] pb-5 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-start">
-        <div className="min-w-0 space-y-4">
-          <div className="max-w-4xl space-y-2">
-            <h1 className="text-2xl leading-tight font-semibold text-text sm:text-3xl">
-              {initiative.title}
-            </h1>
-            <p className="text-base leading-relaxed text-muted">
-              {initiative.summary}
-            </p>
-          </div>
-
-          {description ? (
-            <p className="max-w-4xl text-sm leading-7 whitespace-pre-line text-text">
-              {description}
-            </p>
-          ) : null}
-
-          <div className="flex flex-wrap items-center gap-2">
+      <Button asChild variant="ghost" size="sm" className="w-fit">
+        <Link to="/app/initiatives">Back to initiatives</Link>
+      </Button>
+
+      <PageHeader
+        title={initiative.title}
+        titleClassName="text-2xl"
+        description={initiative.summary}
+        descriptionClassName="max-w-4xl leading-relaxed"
+        right={
+          <div className="flex flex-wrap items-center justify-end gap-2">
             <GlassyStatusChip tone={initiativeStatusTone(initiative.status)}>
               {initiativeStatusLabel[initiative.status]}
             </GlassyStatusChip>
-            <GlassyStatusChip tone="neutral">{viewerRole}</GlassyStatusChip>
-            {initiative.tags.length > 0 ? (
-              <span
-                aria-hidden="true"
-                className="mx-1 h-4 w-px bg-[color:var(--surface-glass-border)]"
-              />
-            ) : null}
-            {initiative.tags.length > 0
-              ? initiative.tags.map((tag) => (
-                  <Chip key={tag} className="stage-chip stage-chip--system">
-                    {tag}
-                  </Chip>
-                ))
-              : null}
+            <Chip className="stage-chip stage-chip--system">{viewerRole}</Chip>
           </div>
+        }
+      />
 
-          <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted">
-            <span>Created by {shortAddress(initiative.createdByAddress)}</span>
-            <span>Updated {formatDateTime(initiative.updatedAt)}</span>
-          </div>
-        </div>
+      {description ? (
+        <p className="max-w-4xl text-sm leading-relaxed whitespace-pre-line text-text">
+          {description}
+        </p>
+      ) : null}
 
-        {canAdmin || canManage ? (
-          <div className="flex flex-wrap items-center gap-2 lg:justify-end">
-            {canAdmin ? (
-              <Button
-                type="button"
-                size="sm"
-                variant="outline"
-                className={initiativeActionButtonClassName}
-                onClick={() => setEditing(true)}
-              >
-                Edit initiative
-              </Button>
-            ) : null}
-            {canManage ? (
-              <Button
-                asChild
-                size="sm"
-                variant="outline"
-                className={initiativeActionButtonClassName}
-              >
-                <Link to={initiativeBoardCardCreatePath({ id: initiative.id })}>
-                  Create card
-                </Link>
-              </Button>
-            ) : null}
-          </div>
-        ) : null}
-      </header>
+      <div className="flex flex-wrap items-center justify-between gap-3 text-xs text-muted">
+        <div className="flex flex-wrap gap-2">
+          {initiative.tags.map((tag) => (
+            <Chip key={tag} className="stage-chip stage-chip--system">
+              {tag}
+            </Chip>
+          ))}
+        </div>
+        <div className="flex flex-wrap items-center gap-x-4 gap-y-1">
+          <span>Created by {shortAddress(initiative.createdByAddress)}</span>
+          <span>Updated {formatDateTime(initiative.updatedAt)}</span>
+        </div>
+      </div>
 
       <section className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
         <MetricTile label="Members" value={initiative.memberCount} />
@@ -173,6 +138,18 @@ const Initiative: React.FC = () => {
         columns={boardColumns}
         initiativeId={initiative.id}
         onChanged={reload}
+        secondaryAction={
+          canAdmin && !editing ? (
+            <Button
+              type="button"
+              size="sm"
+              variant="outline"
+              onClick={() => setEditing(true)}
+            >
+              Edit initiative
+            </Button>
+          ) : null
+        }
       />
       <InitiativeThreadsSection
         canModerate={canManage}
diff --git a/src/pages/initiatives/components/InitiativeBoardSection.tsx b/src/pages/initiatives/components/InitiativeBoardSection.tsx
index 62d9c63..944e24a 100644
--- a/src/pages/initiatives/components/InitiativeBoardSection.tsx
+++ b/src/pages/initiatives/components/InitiativeBoardSection.tsx
@@ -1,4 +1,6 @@
+import type { ReactNode } from "react";
 import { useMemo, useState } from "react";
+import { Link } from "react-router";
 
 import { GlassySection, GlassyStatusChip } from "@/components/GlassySection";
 import { Button } from "@/components/primitives/button";
@@ -9,6 +11,7 @@ import {
 } from "@/lib/apiClient";
 import { formatDateTime } from "@/lib/dateTime";
 import {
+  initiativeBoardCardCreatePath,
   initiativeBoardStatusLabel,
   initiativeCardsForColumn,
 } from "@/lib/initiativeUi";
@@ -24,6 +27,7 @@ type InitiativeBoardSectionProps = {
   columns: InitiativeBoardColumnDto[];
   initiativeId: string;
   onChanged: () => Promise<void> | void;
+  secondaryAction?: ReactNode;
 };
 
 export function InitiativeBoardSection({
@@ -32,6 +36,7 @@ export function InitiativeBoardSection({
   columns,
   initiativeId,
   onChanged,
+  secondaryAction,
 }: InitiativeBoardSectionProps) {
   const [updatingCardId, setUpdatingCardId] = useState<string | null>(null);
   const [confirmDeleteCardId, setConfirmDeleteCardId] = useState<string | null>(
@@ -79,7 +84,23 @@ export function InitiativeBoardSection({
   }
 
   return (
-    <GlassySection title="Board">
+    <GlassySection
+      title="Board"
+      action={
+        secondaryAction || canManage ? (
+          <div className="flex flex-wrap items-center justify-end gap-2">
+            {secondaryAction}
+            {canManage ? (
+              <Button asChild size="sm">
+                <Link to={initiativeBoardCardCreatePath({ id: initiativeId })}>
+                  Create card
+                </Link>
+              </Button>
+            ) : null}
+          </div>
+        ) : null
+      }
+    >
       {error ? <p className="text-sm text-destructive">{error}</p> : null}
 
       <div className="grid gap-3 xl:grid-cols-5">
diff --git a/tests/unit/initiative-layout-contract.test.ts b/tests/unit/initiative-layout-contract.test.ts
deleted file mode 100644
index 9ac73ee..0000000
--- a/tests/unit/initiative-layout-contract.test.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import assert from "node:assert/strict";
-import { readFileSync } from "node:fs";
-import { join } from "node:path";
-import { test } from "@rstest/core";
-
-const initiativeSource = readFileSync(
-  join(process.cwd(), "src/pages/initiatives/Initiative.tsx"),
-  "utf8",
-);
-const boardSource = readFileSync(
-  join(
-    process.cwd(),
-    "src/pages/initiatives/components/InitiativeBoardSection.tsx",
-  ),
-  "utf8",
-);
-
-test("Initiative header owns aligned edit and card creation actions", () => {
-  assert.doesNotMatch(initiativeSource, /Back to initiatives/);
-  assert.doesNotMatch(initiativeSource, /<GlassyCard as="article"/);
-  assert.doesNotMatch(initiativeSource, /Action plan/);
-  assert.match(initiativeSource, />\s*Edit initiative\s*</);
-  assert.match(initiativeSource, />\s*Create card\s*</);
-  assert.equal(
-    initiativeSource.match(/className=\{initiativeActionButtonClassName\}/g)
-      ?.length,
-    2,
-  );
-  assert.doesNotMatch(boardSource, /Create card|initiativeBoardCardCreatePath/);
-});

From 2a8a4677dab9c7dee943a4ce9fd739d75765c2b5 Mon Sep 17 00:00:00 2001
From: Cyber Preacher <72062250+Cyber-preacher@users.noreply.github.com>
Date: Wed, 1 Jul 2026 01:38:57 +0400
Subject: [PATCH 7/9] Share workspace headers across Initiatives and factions

---
 src/components/WorkspaceHeader.tsx            |  91 ++++++++++++
 src/lib/initiativeUi.ts                       |   7 +
 src/pages/factions/components/FactionHero.tsx | 139 +++++++++---------
 src/pages/initiatives/Initiative.tsx          | 102 +++++++------
 .../components/InitiativeBoardSection.tsx     |  23 +--
 tests/unit/initiative-ui.test.ts              |  14 ++
 tests/unit/workspace-header-contract.test.ts  |  36 +++++
 7 files changed, 276 insertions(+), 136 deletions(-)
 create mode 100644 src/components/WorkspaceHeader.tsx
 create mode 100644 tests/unit/workspace-header-contract.test.ts

diff --git a/src/components/WorkspaceHeader.tsx b/src/components/WorkspaceHeader.tsx
new file mode 100644
index 0000000..1935613
--- /dev/null
+++ b/src/components/WorkspaceHeader.tsx
@@ -0,0 +1,91 @@
+import type { ReactNode } from "react";
+
+import { GlassyCard } from "@/components/GlassyCard";
+import { Button } from "@/components/primitives/button";
+
+type WorkspaceHeaderProps = {
+  actions?: ReactNode;
+  details?: string[];
+  markers?: ReactNode;
+  meta?: ReactNode;
+  summary: ReactNode;
+  title: ReactNode;
+};
+
+type WorkspaceHeaderActionProps = {
+  children: ReactNode;
+  disabled?: boolean;
+  onClick: () => void;
+};
+
+export function WorkspaceHeader({
+  actions,
+  details = [],
+  markers,
+  meta,
+  summary,
+  title,
+}: WorkspaceHeaderProps) {
+  return (
+    <GlassyCard as="article" className="p-5 sm:p-6">
+      <header className="grid gap-5 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-start">
+        <div className="max-w-4xl min-w-0 space-y-2">
+          <h1 className="text-2xl leading-tight font-semibold text-text sm:text-3xl">
+            {title}
+          </h1>
+          <div className="text-base leading-relaxed text-muted">{summary}</div>
+        </div>
+        {actions ? (
+          <div className="flex flex-wrap items-center gap-2 lg:justify-end">
+            {actions}
+          </div>
+        ) : null}
+      </header>
+
+      {details.length > 0 ? (
+        <div className="mt-5 max-w-4xl space-y-3 border-t border-[color:var(--surface-glass-border)] pt-5">
+          {details.map((detail, index) => (
+            <p
+              key={`${index}-${detail}`}
+              className="border-l-2 border-[color:var(--surface-glass-border)] pl-3 text-sm leading-7 text-text"
+            >
+              {detail}
+            </p>
+          ))}
+        </div>
+      ) : null}
+
+      {markers || meta ? (
+        <footer className="mt-5 flex flex-col gap-4 border-t border-[color:var(--surface-glass-border)] pt-4 lg:flex-row lg:items-center lg:justify-between">
+          {markers ? (
+            <div className="flex flex-wrap items-center gap-2">{markers}</div>
+          ) : null}
+          {meta ? (
+            <div className="flex flex-wrap items-center gap-x-4 gap-y-2 text-xs text-muted">
+              {meta}
+            </div>
+          ) : null}
+        </footer>
+      ) : null}
+    </GlassyCard>
+  );
+}
+
+export function WorkspaceHeaderAction({
+  children,
+  disabled = false,
+  onClick,
+}: WorkspaceHeaderActionProps) {
+  return (
+    <Button
+      type="button"
+      size="sm"
+      variant="outline"
+      className="w-36 text-sm font-semibold opacity-90 hover:opacity-100"
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {children}
+    </Button>
+  );
+}
diff --git a/src/lib/initiativeUi.ts b/src/lib/initiativeUi.ts
index 46d17c2..3da4668 100644
--- a/src/lib/initiativeUi.ts
+++ b/src/lib/initiativeUi.ts
@@ -120,6 +120,13 @@ export function initiativeDistinctDescription(
   return description.trim();
 }
 
+export function initiativeDescriptionParagraphs(description: string) {
+  return description
+    .split(/\n\s*\n/)
+    .map((paragraph) => paragraph.replace(/\s*\n\s*/g, " ").trim())
+    .filter(Boolean);
+}
+
 export function initiativeOptionsWithSelection(
   options: Array<{ value: string; label: string }>,
   selectedId?: string,
diff --git a/src/pages/factions/components/FactionHero.tsx b/src/pages/factions/components/FactionHero.tsx
index be32dc3..e7385ad 100644
--- a/src/pages/factions/components/FactionHero.tsx
+++ b/src/pages/factions/components/FactionHero.tsx
@@ -1,9 +1,11 @@
-import { Kicker } from "@/components/Kicker";
-import { StatTile } from "@/components/StatTile";
+import { Chip } from "@/components/Chip";
+import { GlassyStatusChip } from "@/components/GlassySection";
 import { HintLabel } from "@/components/Hint";
-import { Badge } from "@/components/primitives/badge";
-import { Button } from "@/components/primitives/button";
-import { Card, CardContent } from "@/components/primitives/card";
+import { MetricTile } from "@/components/MetricTile";
+import {
+  WorkspaceHeader,
+  WorkspaceHeaderAction,
+} from "@/components/WorkspaceHeader";
 import type { FactionDto } from "@/types/api";
 
 type FactionHeroProps = {
@@ -35,25 +37,22 @@ export const FactionHero: React.FC<FactionHeroProps> = ({
   viewerMembershipActive,
   viewerRole,
 }) => {
+  const roleLabel = viewerRole
+    ? viewerRole.charAt(0).toUpperCase() + viewerRole.slice(1)
+    : "Observer";
+  const pendingJoin =
+    viewerJoinRequest?.status === "pending" && !viewerMembershipActive;
+
   return (
     <>
-      <Card>
-        <CardContent className="p-4 sm:p-5">
-          <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
-            <div className="min-w-0 space-y-3">
-              <Kicker>{faction.focus}</Kicker>
-              <h1 className="text-2xl leading-tight font-semibold text-text sm:text-3xl">
-                {faction.name}
-              </h1>
-              <p className="max-w-4xl text-sm leading-relaxed text-muted sm:text-base">
-                {faction.description}
-              </p>
-            </div>
-
-            <div className="flex shrink-0 flex-wrap items-center gap-2 lg:justify-end">
+      <WorkspaceHeader
+        title={faction.name}
+        summary={faction.description}
+        actions={
+          canJoin || canLeave || isFounderAdmin ? (
+            <>
               {canJoin ? (
-                <Button
-                  size="sm"
+                <WorkspaceHeaderAction
                   disabled={mutating || viewerJoinRequest?.status === "pending"}
                   onClick={onJoin}
                 >
@@ -62,63 +61,69 @@ export const FactionHero: React.FC<FactionHeroProps> = ({
                       ? "Request pending"
                       : "Request to join"
                     : "Join faction"}
-                </Button>
+                </WorkspaceHeaderAction>
               ) : null}
               {canLeave ? (
-                <Button
-                  size="sm"
-                  variant="outline"
-                  disabled={mutating}
-                  onClick={onLeave}
-                >
+                <WorkspaceHeaderAction disabled={mutating} onClick={onLeave}>
                   Leave faction
-                </Button>
+                </WorkspaceHeaderAction>
               ) : null}
               {isFounderAdmin ? (
-                <Button size="sm" variant="outline" onClick={onEditToggle}>
+                <WorkspaceHeaderAction onClick={onEditToggle}>
                   {editOpen ? "Close edit" : "Edit faction"}
-                </Button>
+                </WorkspaceHeaderAction>
               ) : null}
-            </div>
-          </div>
-
-          {viewerRole === "founder" ? (
-            <div className="mt-3">
-              <Badge variant="outline">
-                Founder leave disabled until transfer
-              </Badge>
-            </div>
-          ) : null}
-          {viewerJoinRequest?.status === "pending" &&
-          !viewerMembershipActive ? (
-            <div className="mt-3">
-              <Badge variant="outline">
-                Private faction join request pending
-              </Badge>
-            </div>
-          ) : null}
-        </CardContent>
-      </Card>
+            </>
+          ) : undefined
+        }
+        markers={
+          <>
+            <GlassyStatusChip
+              tone={faction.visibility === "public" ? "ok" : "neutral"}
+            >
+              {faction.visibility === "public" ? "Public" : "Private"}
+            </GlassyStatusChip>
+            <GlassyStatusChip tone="neutral">{roleLabel}</GlassyStatusChip>
+            <Chip className="stage-chip stage-chip--faction">
+              {faction.focus}
+            </Chip>
+          </>
+        }
+        meta={
+          viewerRole === "founder" || pendingJoin ? (
+            <>
+              {viewerRole === "founder" ? (
+                <GlassyStatusChip tone="warn">
+                  Founder leave requires transfer
+                </GlassyStatusChip>
+              ) : null}
+              {pendingJoin ? (
+                <GlassyStatusChip tone="warn">
+                  Join request pending
+                </GlassyStatusChip>
+              ) : null}
+            </>
+          ) : undefined
+        }
+      />
 
-      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
-        <StatTile
-          label="Members"
-          value={String(faction.members)}
-          align="center"
-        />
-        <StatTile
+      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+        <MetricTile label="Members" value={String(faction.members)} />
+        <MetricTile
           label={<HintLabel termId="acm" prefix="Members'" termText="ACM" />}
           value={String(faction.acm)}
-          align="center"
         />
-        <StatTile
-          label="Role"
-          value={
-            viewerRole
-              ? viewerRole.charAt(0).toUpperCase() + viewerRole.slice(1)
-              : "None"
-          }
-          align="center"
+        <MetricTile
+          label="Channels"
+          value={String(faction.channels?.length ?? 0)}
+        />
+        <MetricTile
+          label="Initiatives"
+          value={String(
+            faction.initiativesDetailed?.length ??
+              faction.initiatives?.length ??
+              0,
+          )}
         />
       </div>
     </>
diff --git a/src/pages/initiatives/Initiative.tsx b/src/pages/initiatives/Initiative.tsx
index f67e34c..611bef5 100644
--- a/src/pages/initiatives/Initiative.tsx
+++ b/src/pages/initiatives/Initiative.tsx
@@ -1,18 +1,22 @@
 import { useMemo, useState } from "react";
-import { Link, useParams } from "react-router";
+import { useNavigate, useParams } from "react-router";
 
 import { Chip } from "@/components/Chip";
 import { GlassyCard } from "@/components/GlassyCard";
 import { GlassyStatusChip } from "@/components/GlassySection";
 import { MetricTile } from "@/components/MetricTile";
 import { NoDataYetBar } from "@/components/NoDataYetBar";
-import { PageHeader } from "@/components/PageHeader";
-import { Button } from "@/components/primitives/button";
+import {
+  WorkspaceHeader,
+  WorkspaceHeaderAction,
+} from "@/components/WorkspaceHeader";
 import { formatDateTime } from "@/lib/dateTime";
 import { formatLoadError } from "@/lib/errorFormatting";
 import {
   canManageInitiative,
   defaultInitiativeBoardColumns,
+  initiativeBoardCardCreatePath,
+  initiativeDescriptionParagraphs,
   initiativeDistinctDescription,
   initiativeRoleLabel,
   initiativeStatusLabel,
@@ -29,6 +33,7 @@ import { useInitiativePageData } from "./hooks/useInitiativePageData";
 
 const Initiative: React.FC = () => {
   const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
   const { initiative, loadError, reload } = useInitiativePageData(id);
   const [editing, setEditing] = useState(false);
 
@@ -76,48 +81,63 @@ const Initiative: React.FC = () => {
     initiative.summary,
     initiative.description,
   );
+  const descriptionParagraphs = initiativeDescriptionParagraphs(description);
 
   return (
     <div className="flex flex-col gap-6">
-      <Button asChild variant="ghost" size="sm" className="w-fit">
-        <Link to="/app/initiatives">Back to initiatives</Link>
-      </Button>
-
-      <PageHeader
+      <WorkspaceHeader
         title={initiative.title}
-        titleClassName="text-2xl"
-        description={initiative.summary}
-        descriptionClassName="max-w-4xl leading-relaxed"
-        right={
-          <div className="flex flex-wrap items-center justify-end gap-2">
+        summary={initiative.summary}
+        details={descriptionParagraphs}
+        actions={
+          canAdmin || canManage ? (
+            <>
+              {canAdmin ? (
+                <WorkspaceHeaderAction onClick={() => setEditing(true)}>
+                  Edit initiative
+                </WorkspaceHeaderAction>
+              ) : null}
+              {canManage ? (
+                <WorkspaceHeaderAction
+                  onClick={() =>
+                    navigate(
+                      initiativeBoardCardCreatePath({ id: initiative.id }),
+                    )
+                  }
+                >
+                  Create card
+                </WorkspaceHeaderAction>
+              ) : null}
+            </>
+          ) : undefined
+        }
+        markers={
+          <>
             <GlassyStatusChip tone={initiativeStatusTone(initiative.status)}>
               {initiativeStatusLabel[initiative.status]}
             </GlassyStatusChip>
-            <Chip className="stage-chip stage-chip--system">{viewerRole}</Chip>
-          </div>
+            <GlassyStatusChip tone="neutral">{viewerRole}</GlassyStatusChip>
+            {initiative.tags.length > 0 ? (
+              <span
+                aria-hidden="true"
+                className="mx-1 h-4 w-px bg-[color:var(--surface-glass-border)]"
+              />
+            ) : null}
+            {initiative.tags.map((tag) => (
+              <Chip key={tag} className="stage-chip stage-chip--system">
+                {tag}
+              </Chip>
+            ))}
+          </>
+        }
+        meta={
+          <>
+            <span>Created by {shortAddress(initiative.createdByAddress)}</span>
+            <span>Updated {formatDateTime(initiative.updatedAt)}</span>
+          </>
         }
       />
 
-      {description ? (
-        <p className="max-w-4xl text-sm leading-relaxed whitespace-pre-line text-text">
-          {description}
-        </p>
-      ) : null}
-
-      <div className="flex flex-wrap items-center justify-between gap-3 text-xs text-muted">
-        <div className="flex flex-wrap gap-2">
-          {initiative.tags.map((tag) => (
-            <Chip key={tag} className="stage-chip stage-chip--system">
-              {tag}
-            </Chip>
-          ))}
-        </div>
-        <div className="flex flex-wrap items-center gap-x-4 gap-y-1">
-          <span>Created by {shortAddress(initiative.createdByAddress)}</span>
-          <span>Updated {formatDateTime(initiative.updatedAt)}</span>
-        </div>
-      </div>
-
       <section className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
         <MetricTile label="Members" value={initiative.memberCount} />
         <MetricTile label="Board" value={cards.length} />
@@ -138,18 +158,6 @@ const Initiative: React.FC = () => {
         columns={boardColumns}
         initiativeId={initiative.id}
         onChanged={reload}
-        secondaryAction={
-          canAdmin && !editing ? (
-            <Button
-              type="button"
-              size="sm"
-              variant="outline"
-              onClick={() => setEditing(true)}
-            >
-              Edit initiative
-            </Button>
-          ) : null
-        }
       />
       <InitiativeThreadsSection
         canModerate={canManage}
diff --git a/src/pages/initiatives/components/InitiativeBoardSection.tsx b/src/pages/initiatives/components/InitiativeBoardSection.tsx
index 944e24a..62d9c63 100644
--- a/src/pages/initiatives/components/InitiativeBoardSection.tsx
+++ b/src/pages/initiatives/components/InitiativeBoardSection.tsx
@@ -1,6 +1,4 @@
-import type { ReactNode } from "react";
 import { useMemo, useState } from "react";
-import { Link } from "react-router";
 
 import { GlassySection, GlassyStatusChip } from "@/components/GlassySection";
 import { Button } from "@/components/primitives/button";
@@ -11,7 +9,6 @@ import {
 } from "@/lib/apiClient";
 import { formatDateTime } from "@/lib/dateTime";
 import {
-  initiativeBoardCardCreatePath,
   initiativeBoardStatusLabel,
   initiativeCardsForColumn,
 } from "@/lib/initiativeUi";
@@ -27,7 +24,6 @@ type InitiativeBoardSectionProps = {
   columns: InitiativeBoardColumnDto[];
   initiativeId: string;
   onChanged: () => Promise<void> | void;
-  secondaryAction?: ReactNode;
 };
 
 export function InitiativeBoardSection({
@@ -36,7 +32,6 @@ export function InitiativeBoardSection({
   columns,
   initiativeId,
   onChanged,
-  secondaryAction,
 }: InitiativeBoardSectionProps) {
   const [updatingCardId, setUpdatingCardId] = useState<string | null>(null);
   const [confirmDeleteCardId, setConfirmDeleteCardId] = useState<string | null>(
@@ -84,23 +79,7 @@ export function InitiativeBoardSection({
   }
 
   return (
-    <GlassySection
-      title="Board"
-      action={
-        secondaryAction || canManage ? (
-          <div className="flex flex-wrap items-center justify-end gap-2">
-            {secondaryAction}
-            {canManage ? (
-              <Button asChild size="sm">
-                <Link to={initiativeBoardCardCreatePath({ id: initiativeId })}>
-                  Create card
-                </Link>
-              </Button>
-            ) : null}
-          </div>
-        ) : null
-      }
-    >
+    <GlassySection title="Board">
       {error ? <p className="text-sm text-destructive">{error}</p> : null}
 
       <div className="grid gap-3 xl:grid-cols-5">
diff --git a/tests/unit/initiative-ui.test.ts b/tests/unit/initiative-ui.test.ts
index 123184b..a0ccbb1 100644
--- a/tests/unit/initiative-ui.test.ts
+++ b/tests/unit/initiative-ui.test.ts
@@ -5,6 +5,7 @@ import {
   defaultInitiativeBoardColumns,
   initiativeBoardCardCreatePath,
   initiativeCardsForColumn,
+  initiativeDescriptionParagraphs,
   initiativeDistinctDescription,
   initiativeOptionsWithSelection,
   initiativePath,
@@ -125,3 +126,16 @@ test("initiative descriptions omit empty and summary-equivalent content", () =>
     ),
   ).toBe("Publish evidence and assign owners.");
 });
+
+test("initiative descriptions preserve distinct paragraphs without blank rows", () => {
+  expect(
+    initiativeDescriptionParagraphs(
+      "Analyze voting patterns.\n\nCollect evidence.\n\nReport findings.",
+    ),
+  ).toEqual([
+    "Analyze voting patterns.",
+    "Collect evidence.",
+    "Report findings.",
+  ]);
+  expect(initiativeDescriptionParagraphs("")).toEqual([]);
+});
diff --git a/tests/unit/workspace-header-contract.test.ts b/tests/unit/workspace-header-contract.test.ts
new file mode 100644
index 0000000..43c1783
--- /dev/null
+++ b/tests/unit/workspace-header-contract.test.ts
@@ -0,0 +1,36 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { test } from "@rstest/core";
+
+function source(path: string) {
+  return readFileSync(join(process.cwd(), path), "utf8");
+}
+
+const header = source("src/components/WorkspaceHeader.tsx");
+const initiative = source("src/pages/initiatives/Initiative.tsx");
+const board = source(
+  "src/pages/initiatives/components/InitiativeBoardSection.tsx",
+);
+const faction = source("src/pages/factions/components/FactionHero.tsx");
+
+test("Initiatives and factions share one workspace header grammar", () => {
+  assert.match(header, /<GlassyCard as="article"/);
+  assert.match(header, /type="button"/);
+  assert.match(header, /size="sm"/);
+  assert.match(header, /variant="outline"/);
+  assert.match(header, /className="w-36[^"]*opacity-90/);
+  assert.doesNotMatch(header, /asChild/);
+
+  assert.match(initiative, /<WorkspaceHeader/);
+  assert.equal(initiative.match(/<WorkspaceHeaderAction/g)?.length, 2);
+  assert.doesNotMatch(initiative, /Back to initiatives|<PageHeader/);
+  assert.doesNotMatch(board, /Create card|initiativeBoardCardCreatePath/);
+
+  assert.match(faction, /<WorkspaceHeader/);
+  assert.match(faction, /<WorkspaceHeaderAction/);
+  assert.doesNotMatch(faction, /<Card|<Kicker|<Badge|<StatTile/);
+  assert.doesNotMatch(faction, /label="Role"/);
+  assert.match(faction, /label="Channels"/);
+  assert.match(faction, /label="Initiatives"/);
+});

From e6060a432eeca07b5456591f85798444074b5639 Mon Sep 17 00:00:00 2001
From: Cyber Preacher <72062250+Cyber-preacher@users.noreply.github.com>
Date: Wed, 1 Jul 2026 13:16:44 +0400
Subject: [PATCH 8/9] Bound Initiative chat history and move it last

---
 src/pages/initiatives/Initiative.tsx          |  12 +-
 .../components/InitiativeChatSection.tsx      | 123 ++++++++++++------
 .../initiative-chat-layout-contract.test.ts   |  37 ++++++
 3 files changed, 126 insertions(+), 46 deletions(-)
 create mode 100644 tests/unit/initiative-chat-layout-contract.test.ts

diff --git a/src/pages/initiatives/Initiative.tsx b/src/pages/initiatives/Initiative.tsx
index 611bef5..079e580 100644
--- a/src/pages/initiatives/Initiative.tsx
+++ b/src/pages/initiatives/Initiative.tsx
@@ -166,12 +166,6 @@ const Initiative: React.FC = () => {
         onChanged={reload}
         threads={threads}
       />
-      <InitiativeChatSection
-        canPost={canParticipate}
-        initiativeId={initiative.id}
-        messages={chatMessages}
-        onChanged={reload}
-      />
       <InitiativeProposalsSection proposals={proposals} />
       <InitiativeMembersSection
         canAdmin={isOperational && canAdmin}
@@ -179,6 +173,12 @@ const Initiative: React.FC = () => {
         memberships={memberships}
         onChanged={reload}
       />
+      <InitiativeChatSection
+        canPost={canParticipate}
+        initiativeId={initiative.id}
+        messages={chatMessages}
+        onChanged={reload}
+      />
     </div>
   );
 };
diff --git a/src/pages/initiatives/components/InitiativeChatSection.tsx b/src/pages/initiatives/components/InitiativeChatSection.tsx
index 7801a6b..3d8389a 100644
--- a/src/pages/initiatives/components/InitiativeChatSection.tsx
+++ b/src/pages/initiatives/components/InitiativeChatSection.tsx
@@ -1,10 +1,9 @@
 import type { FormEvent } from "react";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
-import { NoDataYetBar } from "@/components/NoDataYetBar";
 import { GlassySection } from "@/components/GlassySection";
+import { Textarea } from "@/components/Textarea";
 import { Button } from "@/components/primitives/button";
-import { Input } from "@/components/primitives/input";
 import { apiInitiativeChatPost } from "@/lib/apiClient";
 import { formatDateTime } from "@/lib/dateTime";
 import { shortAddress } from "@/lib/profileUi";
@@ -26,6 +25,22 @@ export function InitiativeChatSection({
   const [body, setBody] = useState("");
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const messageViewportRef = useRef<HTMLDivElement>(null);
+  const stickToBottomRef = useRef(true);
+
+  useEffect(() => {
+    const viewport = messageViewportRef.current;
+    if (!viewport || !stickToBottomRef.current) return;
+    viewport.scrollTop = viewport.scrollHeight;
+  }, [messages.length]);
+
+  function trackScrollPosition() {
+    const viewport = messageViewportRef.current;
+    if (!viewport) return;
+    const distanceFromBottom =
+      viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight;
+    stickToBottomRef.current = distanceFromBottom < 48;
+  }
 
   async function postMessage(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
@@ -33,6 +48,7 @@ export function InitiativeChatSection({
     if (!message) return;
     setSubmitting(true);
     setError(null);
+    stickToBottomRef.current = true;
     try {
       await apiInitiativeChatPost({ initiativeId, body: message });
       setBody("");
@@ -45,45 +61,72 @@ export function InitiativeChatSection({
   }
 
   return (
-    <GlassySection title="Chat">
-      <div className="max-h-96 space-y-2 overflow-y-auto">
-        {messages.length === 0 ? (
-          <NoDataYetBar label="chat messages" />
-        ) : (
-          messages.map((message) => (
-            <article
-              key={message.id}
-              className="rounded-xl border border-[color:var(--surface-glass-border)] bg-[color:var(--surface-glass-bg)] px-3 py-2"
+    <GlassySection
+      title="Chat"
+      action={
+        <span className="text-xs text-muted">
+          {messages.length} {messages.length === 1 ? "message" : "messages"}
+        </span>
+      }
+    >
+      <div className="overflow-hidden rounded-2xl border border-[color:var(--surface-glass-border)] bg-[color:var(--surface-glass-bg)] shadow-[var(--shadow-tile)] supports-[backdrop-filter]:backdrop-blur-md">
+        <div
+          ref={messageViewportRef}
+          role="log"
+          aria-live="polite"
+          aria-label="Initiative chat history"
+          onScroll={trackScrollPosition}
+          className="h-[clamp(18rem,52vh,30rem)] overflow-y-auto overscroll-contain"
+        >
+          {messages.length === 0 ? (
+            <div className="flex h-full items-center justify-center px-5 text-center text-sm text-muted">
+              No chat messages yet.
+            </div>
+          ) : (
+            <div className="divide-y divide-[color:var(--surface-glass-border)]">
+              {messages.map((message) => (
+                <article key={message.id} className="px-4 py-3 sm:px-5">
+                  <div className="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 text-xs">
+                    <span className="font-semibold text-text">
+                      {shortAddress(message.authorAddress)}
+                    </span>
+                    <time className="text-muted" dateTime={message.createdAt}>
+                      {formatDateTime(message.createdAt)}
+                    </time>
+                  </div>
+                  <p className="mt-1.5 text-sm leading-relaxed [overflow-wrap:anywhere] whitespace-pre-wrap text-text">
+                    {message.body}
+                  </p>
+                </article>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {canPost ? (
+          <form
+            className="flex flex-col gap-2 border-t border-[color:var(--surface-glass-border)] bg-[color:var(--control-glass-bg)] p-3 sm:flex-row sm:items-end"
+            onSubmit={postMessage}
+          >
+            <Textarea
+              value={body}
+              onChange={(event) => setBody(event.target.value)}
+              placeholder="Write a message"
+              aria-label="Initiative chat message"
+              rows={2}
+              className="max-h-40 min-h-20 resize-y"
+            />
+            <Button
+              type="submit"
+              size="md"
+              className="w-full sm:w-24"
+              disabled={submitting || !body.trim()}
             >
-              <div className="flex flex-wrap justify-between gap-2 text-xs">
-                <span className="font-semibold text-text">
-                  {shortAddress(message.authorAddress)}
-                </span>
-                <span className="text-muted">
-                  {formatDateTime(message.createdAt)}
-                </span>
-              </div>
-              <p className="mt-1 text-sm leading-relaxed text-muted">
-                {message.body}
-              </p>
-            </article>
-          ))
-        )}
+              Send
+            </Button>
+          </form>
+        ) : null}
       </div>
-
-      {canPost ? (
-        <form className="mt-3 flex gap-2" onSubmit={postMessage}>
-          <Input
-            value={body}
-            onChange={(event) => setBody(event.target.value)}
-            placeholder="Write a message"
-            aria-label="Initiative chat message"
-          />
-          <Button type="submit" size="sm" disabled={submitting || !body.trim()}>
-            Send
-          </Button>
-        </form>
-      ) : null}
       {error ? <p className="mt-2 text-sm text-destructive">{error}</p> : null}
     </GlassySection>
   );
diff --git a/tests/unit/initiative-chat-layout-contract.test.ts b/tests/unit/initiative-chat-layout-contract.test.ts
new file mode 100644
index 0000000..6a78f84
--- /dev/null
+++ b/tests/unit/initiative-chat-layout-contract.test.ts
@@ -0,0 +1,37 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { test } from "@rstest/core";
+
+const chat = readFileSync(
+  join(
+    process.cwd(),
+    "src/pages/initiatives/components/InitiativeChatSection.tsx",
+  ),
+  "utf8",
+);
+const initiative = readFileSync(
+  join(process.cwd(), "src/pages/initiatives/Initiative.tsx"),
+  "utf8",
+);
+
+test("Initiative chat is bounded, scroll-aware, and rendered last", () => {
+  assert.match(chat, /h-\[clamp\(18rem,52vh,30rem\)\]/);
+  assert.match(chat, /overflow-y-auto/);
+  assert.match(chat, /overscroll-contain/);
+  assert.match(chat, /messageViewportRef/);
+  assert.match(chat, /stickToBottomRef/);
+  assert.match(chat, /<Textarea/);
+  assert.doesNotMatch(chat, /<Input/);
+  assert.match(chat, /whitespace-pre-wrap/);
+  assert.match(chat, /\[overflow-wrap:anywhere\]/);
+
+  assert.ok(
+    initiative.lastIndexOf("<InitiativeChatSection") >
+      initiative.lastIndexOf("<InitiativeMembersSection"),
+  );
+  assert.ok(
+    initiative.lastIndexOf("<InitiativeChatSection") >
+      initiative.lastIndexOf("<InitiativeProposalsSection"),
+  );
+});

From 5332e1bbae90ee27bc7e771c144baba6fea4c6a1 Mon Sep 17 00:00:00 2001
From: Cyber Preacher <72062250+Cyber-preacher@users.noreply.github.com>
Date: Wed, 1 Jul 2026 18:28:48 +0400
Subject: [PATCH 9/9] Add moderated Initiative membership

---
 .../useActionRunner.ts}                       | 26 +++---
 src/lib/api/initiatives.ts                    | 80 +++++++++++++++++
 src/lib/initiativeUi.ts                       | 31 +++++++
 src/pages/factions/Faction.tsx                |  4 +-
 src/pages/initiatives/Initiative.tsx          | 88 +++++++++++++++++--
 src/pages/initiatives/InitiativeCreate.tsx    | 28 ++++++
 .../initiatives/components/InitiativeCard.tsx |  5 ++
 .../InitiativeJoinRequestsSection.tsx         | 71 +++++++++++++++
 .../components/InitiativeSettingsSection.tsx  | 24 ++++-
 src/types/api.ts                              | 16 ++++
 tests/api/api-client-runtime.test.js          | 52 +++++++++++
 ...tiative-membership-layout-contract.test.ts | 27 ++++++
 tests/unit/initiative-ui.test.ts              | 60 +++++++++++++
 tests/unit/workspace-header-contract.test.ts  |  5 +-
 14 files changed, 493 insertions(+), 24 deletions(-)
 rename src/{pages/factions/hooks/useFactionActionRunner.ts => hooks/useActionRunner.ts} (51%)
 create mode 100644 src/pages/initiatives/components/InitiativeJoinRequestsSection.tsx
 create mode 100644 tests/unit/initiative-membership-layout-contract.test.ts

diff --git a/src/pages/factions/hooks/useFactionActionRunner.ts b/src/hooks/useActionRunner.ts
similarity index 51%
rename from src/pages/factions/hooks/useFactionActionRunner.ts
rename to src/hooks/useActionRunner.ts
index 173e5b3..1bd6e2e 100644
--- a/src/pages/factions/hooks/useFactionActionRunner.ts
+++ b/src/hooks/useActionRunner.ts
@@ -1,34 +1,32 @@
-import { useState } from "react";
+import { useRef, useState } from "react";
 
 import { getApiErrorPayload } from "@/lib/apiClient";
 
-type UseFactionActionRunnerInput = {
+type UseActionRunnerInput = {
   reload: () => Promise<void>;
 };
 
-export function useFactionActionRunner({
-  reload,
-}: UseFactionActionRunnerInput) {
+export function useActionRunner({ reload }: UseActionRunnerInput) {
   const [actionError, setActionError] = useState<string | null>(null);
   const [mutating, setMutating] = useState(false);
-
-  const setCommandError = (error: unknown) => {
-    const payload = getApiErrorPayload(error);
-    const message =
-      payload?.error?.message ??
-      (error instanceof Error ? error.message : "Action failed");
-    setActionError(message);
-  };
+  const actionInFlight = useRef(false);
 
   const runAction = async (fn: () => Promise<void>) => {
+    if (actionInFlight.current) return;
+    actionInFlight.current = true;
     setActionError(null);
     setMutating(true);
     try {
       await fn();
       await reload();
     } catch (error) {
-      setCommandError(error);
+      const payload = getApiErrorPayload(error);
+      setActionError(
+        payload?.error?.message ??
+          (error instanceof Error ? error.message : "Action failed"),
+      );
     } finally {
+      actionInFlight.current = false;
       setMutating(false);
     }
   };
diff --git a/src/lib/api/initiatives.ts b/src/lib/api/initiatives.ts
index 138a8a4..670d9d4 100644
--- a/src/lib/api/initiatives.ts
+++ b/src/lib/api/initiatives.ts
@@ -5,6 +5,7 @@ import type {
   InitiativeRoleDto,
   InitiativeStatusDto,
   InitiativeThreadStatusDto,
+  InitiativeVisibilityDto,
 } from "@/types/api";
 import { apiCommand } from "./command";
 import { apiGet } from "./http";
@@ -23,6 +24,7 @@ export async function apiInitiativeCreate(input: {
   title: string;
   summary: string;
   description?: string;
+  visibility?: InitiativeVisibilityDto;
   tags?: string[];
   idempotencyKey?: string;
 }): Promise<{
@@ -38,6 +40,7 @@ export async function apiInitiativeCreate(input: {
       ...(input.description !== undefined
         ? { description: input.description }
         : {}),
+      ...(input.visibility ? { visibility: input.visibility } : {}),
       ...(input.tags && input.tags.length > 0 ? { tags: input.tags } : {}),
     },
     idempotencyKey: input.idempotencyKey,
@@ -49,6 +52,7 @@ export async function apiInitiativeUpdate(input: {
   title?: string;
   summary?: string;
   description?: string;
+  visibility?: InitiativeVisibilityDto;
   status?: InitiativeStatusDto;
   tags?: string[];
   idempotencyKey?: string;
@@ -67,6 +71,7 @@ export async function apiInitiativeUpdate(input: {
       ...(input.description !== undefined
         ? { description: input.description }
         : {}),
+      ...(input.visibility ? { visibility: input.visibility } : {}),
       ...(input.status ? { status: input.status } : {}),
       ...(input.tags ? { tags: input.tags } : {}),
     },
@@ -74,6 +79,81 @@ export async function apiInitiativeUpdate(input: {
   });
 }
 
+export async function apiInitiativeJoin(input: {
+  initiativeId: string;
+  idempotencyKey?: string;
+}): Promise<{
+  ok: true;
+  type: "initiative.join";
+  initiativeId: string;
+  joined: boolean;
+  pending: boolean;
+}> {
+  return await apiCommand({
+    type: "initiative.join",
+    payload: { initiativeId: input.initiativeId },
+    idempotencyKey: input.idempotencyKey,
+  });
+}
+
+export async function apiInitiativeJoinRequestApprove(input: {
+  initiativeId: string;
+  address: string;
+  idempotencyKey?: string;
+}): Promise<{
+  ok: true;
+  type: "initiative.join.request.approve";
+  initiativeId: string;
+  address: string;
+  accepted: boolean;
+}> {
+  return await apiCommand({
+    type: "initiative.join.request.approve",
+    payload: {
+      initiativeId: input.initiativeId,
+      address: input.address,
+    },
+    idempotencyKey: input.idempotencyKey,
+  });
+}
+
+export async function apiInitiativeJoinRequestDecline(input: {
+  initiativeId: string;
+  address: string;
+  idempotencyKey?: string;
+}): Promise<{
+  ok: true;
+  type: "initiative.join.request.decline";
+  initiativeId: string;
+  address: string;
+  accepted: boolean;
+}> {
+  return await apiCommand({
+    type: "initiative.join.request.decline",
+    payload: {
+      initiativeId: input.initiativeId,
+      address: input.address,
+    },
+    idempotencyKey: input.idempotencyKey,
+  });
+}
+
+export async function apiInitiativeLeave(input: {
+  initiativeId: string;
+  idempotencyKey?: string;
+}): Promise<{
+  ok: true;
+  type: "initiative.leave";
+  initiativeId: string;
+  left: boolean;
+}> {
+  return await apiCommand({
+    type: "initiative.leave",
+    payload: { initiativeId: input.initiativeId },
+    idempotencyKey: input.idempotencyKey,
+  });
+}
+
 export async function apiInitiativeMemberRoleSet(input: {
   initiativeId: string;
   address: string;
diff --git a/src/lib/initiativeUi.ts b/src/lib/initiativeUi.ts
index 3da4668..a51e459 100644
--- a/src/lib/initiativeUi.ts
+++ b/src/lib/initiativeUi.ts
@@ -17,6 +17,20 @@ type InitiativeManageability = {
   viewerCanSteward?: boolean;
 };
 
+type InitiativeAuthState = {
+  enabled: boolean;
+  loading: boolean;
+  authenticated: boolean;
+  eligible: boolean;
+};
+
+type InitiativeViewerState = InitiativeManageability & {
+  viewerRole?: InitiativeRoleDto | null;
+  viewerCanAdmin?: boolean;
+  viewerCanJoin?: boolean;
+  viewerCanLeave?: boolean;
+};
+
 export const initiativeRoleLabel: Record<InitiativeRoleDto, string> = {
   admin: "Admin",
   steward: "Steward",
@@ -98,6 +112,23 @@ export function canManageInitiative(
   return initiative.status === "active" && Boolean(initiative.viewerCanSteward);
 }
 
+export function getInitiativeViewerCapabilities(
+  initiative: InitiativeViewerState,
+  auth: InitiativeAuthState,
+) {
+  const canAct =
+    !auth.enabled || (auth.authenticated && auth.eligible && !auth.loading);
+  const isOperational = initiative.status === "active";
+
+  return {
+    canAdmin: canAct && Boolean(initiative.viewerCanAdmin),
+    canJoin: canAct && Boolean(initiative.viewerCanJoin),
+    canLeave: canAct && Boolean(initiative.viewerCanLeave),
+    canManage: canAct && canManageInitiative(initiative),
+    canParticipate: canAct && isOperational && initiative.viewerRole != null,
+  };
+}
+
 export function initiativeSummaryPreview(value: string, maxLength = 150) {
   const normalized = value.replace(/\s+/g, " ").trim();
   if (normalized.length <= maxLength) return normalized;
diff --git a/src/pages/factions/Faction.tsx b/src/pages/factions/Faction.tsx
index b74b456..b012b05 100644
--- a/src/pages/factions/Faction.tsx
+++ b/src/pages/factions/Faction.tsx
@@ -17,6 +17,7 @@ import {
 } from "@/lib/apiClient";
 import { formatLoadError } from "@/lib/errorFormatting";
 import { getFactionViewerPermissions } from "@/lib/factionUi";
+import { useActionRunner } from "@/hooks/useActionRunner";
 import { FactionChannelsSection } from "./components/FactionChannelsSection";
 import { FactionEditCard } from "./components/FactionEditCard";
 import { FactionHero } from "./components/FactionHero";
@@ -24,7 +25,6 @@ import { FactionInitiativesSection } from "./components/FactionInitiativesSectio
 import { FactionMembersSection } from "./components/FactionMembersSection";
 import { FactionModerationQueues } from "./components/FactionModerationQueues";
 import { useFactionChannelDraft } from "./hooks/useFactionChannelDraft";
-import { useFactionActionRunner } from "./hooks/useFactionActionRunner";
 import { useFactionEditForm } from "./hooks/useFactionEditForm";
 import { useFactionLegacyThreadRedirect } from "./hooks/useFactionLegacyThreadRedirect";
 import { useFactionPageData } from "./hooks/useFactionPageData";
@@ -41,7 +41,7 @@ const Faction: React.FC = () => {
 
   const channelDraft = useFactionChannelDraft();
   const editForm = useFactionEditForm(faction);
-  const { actionError, mutating, runAction } = useFactionActionRunner({
+  const { actionError, mutating, runAction } = useActionRunner({
     reload: reloadFaction,
   });
 
diff --git a/src/pages/initiatives/Initiative.tsx b/src/pages/initiatives/Initiative.tsx
index 079e580..90fc0b1 100644
--- a/src/pages/initiatives/Initiative.tsx
+++ b/src/pages/initiatives/Initiative.tsx
@@ -1,6 +1,7 @@
 import { useMemo, useState } from "react";
 import { useNavigate, useParams } from "react-router";
 
+import { useAuth } from "@/app/auth/AuthContext";
 import { Chip } from "@/components/Chip";
 import { GlassyCard } from "@/components/GlassyCard";
 import { GlassyStatusChip } from "@/components/GlassySection";
@@ -10,11 +11,18 @@ import {
   WorkspaceHeader,
   WorkspaceHeaderAction,
 } from "@/components/WorkspaceHeader";
+import { useActionRunner } from "@/hooks/useActionRunner";
+import {
+  apiInitiativeJoin,
+  apiInitiativeJoinRequestApprove,
+  apiInitiativeJoinRequestDecline,
+  apiInitiativeLeave,
+} from "@/lib/apiClient";
 import { formatDateTime } from "@/lib/dateTime";
 import { formatLoadError } from "@/lib/errorFormatting";
 import {
-  canManageInitiative,
   defaultInitiativeBoardColumns,
+  getInitiativeViewerCapabilities,
   initiativeBoardCardCreatePath,
   initiativeDescriptionParagraphs,
   initiativeDistinctDescription,
@@ -25,6 +33,7 @@ import {
 import { shortAddress } from "@/lib/profileUi";
 import { InitiativeBoardSection } from "./components/InitiativeBoardSection";
 import { InitiativeChatSection } from "./components/InitiativeChatSection";
+import { InitiativeJoinRequestsSection } from "./components/InitiativeJoinRequestsSection";
 import { InitiativeMembersSection } from "./components/InitiativeMembersSection";
 import { InitiativeProposalsSection } from "./components/InitiativeProposalsSection";
 import { InitiativeSettingsSection } from "./components/InitiativeSettingsSection";
@@ -34,8 +43,10 @@ import { useInitiativePageData } from "./hooks/useInitiativePageData";
 const Initiative: React.FC = () => {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
+  const auth = useAuth();
   const { initiative, loadError, reload } = useInitiativePageData(id);
   const [editing, setEditing] = useState(false);
+  const { actionError, mutating, runAction } = useActionRunner({ reload });
 
   const boardColumns = useMemo(() => {
     if (!initiative) return [];
@@ -71,9 +82,14 @@ const Initiative: React.FC = () => {
   const proposals = initiative.proposals ?? [];
   const chatMessages = initiative.chatMessages ?? [];
   const isOperational = initiative.status === "active";
-  const canManage = canManageInitiative(initiative);
-  const canAdmin = Boolean(initiative.viewerCanAdmin);
-  const canParticipate = isOperational && initiative.viewerRole != null;
+  const {
+    canAdmin,
+    canJoin: viewerCanJoin,
+    canLeave: viewerCanLeave,
+    canManage,
+    canParticipate,
+  } = getInitiativeViewerCapabilities(initiative, auth);
+  const pendingJoinRequest = initiative.viewerJoinRequest?.status === "pending";
   const viewerRole = initiative.viewerRole
     ? initiativeRoleLabel[initiative.viewerRole]
     : "Observer";
@@ -90,8 +106,40 @@ const Initiative: React.FC = () => {
         summary={initiative.summary}
         details={descriptionParagraphs}
         actions={
-          canAdmin || canManage ? (
+          canAdmin ||
+          canManage ||
+          viewerCanJoin ||
+          viewerCanLeave ||
+          pendingJoinRequest ? (
             <>
+              {viewerCanJoin || pendingJoinRequest ? (
+                <WorkspaceHeaderAction
+                  disabled={mutating || pendingJoinRequest}
+                  onClick={() =>
+                    void runAction(async () => {
+                      await apiInitiativeJoin({ initiativeId: initiative.id });
+                    })
+                  }
+                >
+                  {pendingJoinRequest
+                    ? "Request pending"
+                    : initiative.visibility === "private"
+                      ? "Request to join"
+                      : "Join initiative"}
+                </WorkspaceHeaderAction>
+              ) : null}
+              {viewerCanLeave ? (
+                <WorkspaceHeaderAction
+                  disabled={mutating}
+                  onClick={() =>
+                    void runAction(async () => {
+                      await apiInitiativeLeave({ initiativeId: initiative.id });
+                    })
+                  }
+                >
+                  Leave initiative
+                </WorkspaceHeaderAction>
+              ) : null}
               {canAdmin ? (
                 <WorkspaceHeaderAction onClick={() => setEditing(true)}>
                   Edit initiative
@@ -116,6 +164,11 @@ const Initiative: React.FC = () => {
             <GlassyStatusChip tone={initiativeStatusTone(initiative.status)}>
               {initiativeStatusLabel[initiative.status]}
             </GlassyStatusChip>
+            <GlassyStatusChip
+              tone={initiative.visibility === "public" ? "ok" : "neutral"}
+            >
+              {initiative.visibility === "public" ? "Public" : "Private"}
+            </GlassyStatusChip>
             <GlassyStatusChip tone="neutral">{viewerRole}</GlassyStatusChip>
             {initiative.tags.length > 0 ? (
               <span
@@ -138,6 +191,10 @@ const Initiative: React.FC = () => {
         }
       />
 
+      {actionError ? (
+        <p className="text-sm text-destructive">{actionError}</p>
+      ) : null}
+
       <section className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
         <MetricTile label="Members" value={initiative.memberCount} />
         <MetricTile label="Board" value={cards.length} />
@@ -152,6 +209,27 @@ const Initiative: React.FC = () => {
           onClose={() => setEditing(false)}
         />
       ) : null}
+      <InitiativeJoinRequestsSection
+        canModerate={isOperational && canManage}
+        joinRequests={initiative.joinRequests ?? []}
+        mutating={mutating}
+        onApprove={(address) =>
+          void runAction(async () => {
+            await apiInitiativeJoinRequestApprove({
+              initiativeId: initiative.id,
+              address,
+            });
+          })
+        }
+        onDecline={(address) =>
+          void runAction(async () => {
+            await apiInitiativeJoinRequestDecline({
+              initiativeId: initiative.id,
+              address,
+            });
+          })
+        }
+      />
       <InitiativeBoardSection
         cards={cards}
         canManage={canManage}
diff --git a/src/pages/initiatives/InitiativeCreate.tsx b/src/pages/initiatives/InitiativeCreate.tsx
index 6cd42a6..9f00be7 100644
--- a/src/pages/initiatives/InitiativeCreate.tsx
+++ b/src/pages/initiatives/InitiativeCreate.tsx
@@ -8,9 +8,11 @@ import { NoDataYetBar } from "@/components/NoDataYetBar";
 import { Textarea } from "@/components/Textarea";
 import { Button } from "@/components/primitives/button";
 import { Input } from "@/components/primitives/input";
+import { Select } from "@/components/primitives/select";
 import { apiInitiativeCreate } from "@/lib/apiClient";
 import { formatLoadError } from "@/lib/errorFormatting";
 import { initiativePath, parseInitiativeTags } from "@/lib/initiativeUi";
+import type { InitiativeVisibilityDto } from "@/types/api";
 
 const InitiativeCreate: React.FC = () => {
   const auth = useAuth();
@@ -19,6 +21,8 @@ const InitiativeCreate: React.FC = () => {
   const [summary, setSummary] = useState("");
   const [description, setDescription] = useState("");
   const [tags, setTags] = useState("");
+  const [visibility, setVisibility] =
+    useState<InitiativeVisibilityDto>("public");
   const [submitting, setSubmitting] = useState(false);
   const [submitError, setSubmitError] = useState<string | null>(null);
 
@@ -36,6 +40,7 @@ const InitiativeCreate: React.FC = () => {
         summary: trimmedSummary,
         description: description.trim(),
         tags: parseInitiativeTags(tags),
+        visibility,
       });
       navigate(initiativePath(res.initiative));
     } catch (error) {
@@ -85,6 +90,29 @@ const InitiativeCreate: React.FC = () => {
               />
             </div>
 
+            <div className="grid gap-2">
+              <label
+                className="text-sm font-semibold text-text"
+                htmlFor="initiative-visibility"
+              >
+                Access
+              </label>
+              <Select
+                id="initiative-visibility"
+                value={visibility}
+                onChange={(event) =>
+                  setVisibility(event.target.value as InitiativeVisibilityDto)
+                }
+              >
+                <option value="public">
+                  Public - active Human Nodes join immediately
+                </option>
+                <option value="private">
+                  Private - admins or stewards approve requests
+                </option>
+              </Select>
+            </div>
+
             <div className="grid gap-2">
               <label
                 className="text-sm font-semibold text-text"
diff --git a/src/pages/initiatives/components/InitiativeCard.tsx b/src/pages/initiatives/components/InitiativeCard.tsx
index 47cae8a..58ae4b8 100644
--- a/src/pages/initiatives/components/InitiativeCard.tsx
+++ b/src/pages/initiatives/components/InitiativeCard.tsx
@@ -42,6 +42,11 @@ export function InitiativeCard({ initiative }: InitiativeCardProps) {
       </div>
 
       <div className="mt-4 flex flex-wrap gap-2">
+        <GlassyStatusChip
+          tone={initiative.visibility === "public" ? "ok" : "neutral"}
+        >
+          {initiative.visibility === "public" ? "Public" : "Private"}
+        </GlassyStatusChip>
         {initiative.tags.slice(0, 4).map((tag) => (
           <Chip key={tag} className="stage-chip stage-chip--system">
             {tag}
diff --git a/src/pages/initiatives/components/InitiativeJoinRequestsSection.tsx b/src/pages/initiatives/components/InitiativeJoinRequestsSection.tsx
new file mode 100644
index 0000000..1a66534
--- /dev/null
+++ b/src/pages/initiatives/components/InitiativeJoinRequestsSection.tsx
@@ -0,0 +1,71 @@
+import { AddressInline } from "@/components/AddressInline";
+import { GlassySection } from "@/components/GlassySection";
+import { Button } from "@/components/primitives/button";
+import { formatDateTime } from "@/lib/dateTime";
+import type { InitiativeJoinRequestDto } from "@/types/api";
+
+type InitiativeJoinRequestsSectionProps = {
+  canModerate: boolean;
+  joinRequests: InitiativeJoinRequestDto[];
+  mutating: boolean;
+  onApprove: (address: string) => void;
+  onDecline: (address: string) => void;
+};
+
+export function InitiativeJoinRequestsSection({
+  canModerate,
+  joinRequests,
+  mutating,
+  onApprove,
+  onDecline,
+}: InitiativeJoinRequestsSectionProps) {
+  const pending = joinRequests.filter(
+    (request) => request.status === "pending",
+  );
+  if (!canModerate || pending.length === 0) return null;
+
+  return (
+    <GlassySection title="Join requests">
+      <div className="grid gap-3">
+        {pending.map((request) => (
+          <article
+            key={`${request.address}-${request.requestedAt}`}
+            className="flex flex-col gap-3 rounded-md border border-[color:var(--surface-glass-border)] bg-[color:var(--surface-glass-bg)] p-4 sm:flex-row sm:items-center sm:justify-between"
+          >
+            <div className="min-w-0">
+              <AddressInline
+                address={request.address}
+                className="text-text"
+                textClassName="text-sm font-semibold [overflow-wrap:anywhere] break-words"
+              />
+              <p className="mt-1 text-xs text-muted">
+                Requested {formatDateTime(request.requestedAt)}
+              </p>
+            </div>
+            <div className="flex items-center gap-2">
+              <Button
+                type="button"
+                size="sm"
+                aria-label={`Accept join request from ${request.address}`}
+                disabled={mutating}
+                onClick={() => onApprove(request.address)}
+              >
+                Accept
+              </Button>
+              <Button
+                type="button"
+                size="sm"
+                variant="outline"
+                aria-label={`Decline join request from ${request.address}`}
+                disabled={mutating}
+                onClick={() => onDecline(request.address)}
+              >
+                Decline
+              </Button>
+            </div>
+          </article>
+        ))}
+      </div>
+    </GlassySection>
+  );
+}
diff --git a/src/pages/initiatives/components/InitiativeSettingsSection.tsx b/src/pages/initiatives/components/InitiativeSettingsSection.tsx
index ecca238..76dc31e 100644
--- a/src/pages/initiatives/components/InitiativeSettingsSection.tsx
+++ b/src/pages/initiatives/components/InitiativeSettingsSection.tsx
@@ -8,7 +8,11 @@ import { Input } from "@/components/primitives/input";
 import { Select } from "@/components/primitives/select";
 import { apiInitiativeUpdate } from "@/lib/apiClient";
 import { initiativeStatusLabel, parseInitiativeTags } from "@/lib/initiativeUi";
-import type { InitiativeDto, InitiativeStatusDto } from "@/types/api";
+import type {
+  InitiativeDto,
+  InitiativeStatusDto,
+  InitiativeVisibilityDto,
+} from "@/types/api";
 
 type InitiativeSettingsSectionProps = {
   initiative: InitiativeDto;
@@ -26,6 +30,9 @@ export function InitiativeSettingsSection({
   const [description, setDescription] = useState(initiative.description);
   const [tags, setTags] = useState(initiative.tags.join(", "));
   const [status, setStatus] = useState<InitiativeStatusDto>(initiative.status);
+  const [visibility, setVisibility] = useState<InitiativeVisibilityDto>(
+    initiative.visibility,
+  );
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const archivedReadOnly =
@@ -37,6 +44,7 @@ export function InitiativeSettingsSection({
     setDescription(initiative.description);
     setTags(initiative.tags.join(", "));
     setStatus(initiative.status);
+    setVisibility(initiative.visibility);
   }, [initiative]);
 
   useEffect(() => {
@@ -62,6 +70,7 @@ export function InitiativeSettingsSection({
         description: description.trim(),
         tags: parseInitiativeTags(tags),
         status,
+        visibility,
       });
       await onChanged();
       onClose();
@@ -105,7 +114,7 @@ export function InitiativeSettingsSection({
           placeholder="Initiative description"
           aria-label="Initiative description"
         />
-        <div className="grid gap-3 md:grid-cols-[minmax(0,1fr)_12rem_auto]">
+        <div className="grid gap-3 md:grid-cols-[minmax(0,1fr)_12rem_12rem_auto]">
           <Input
             disabled={archivedReadOnly}
             value={tags}
@@ -113,6 +122,17 @@ export function InitiativeSettingsSection({
             placeholder="Comma-separated tags"
             aria-label="Initiative tags"
           />
+          <Select
+            disabled={archivedReadOnly}
+            value={visibility}
+            onChange={(event) =>
+              setVisibility(event.target.value as InitiativeVisibilityDto)
+            }
+            aria-label="Initiative visibility"
+          >
+            <option value="public">Public</option>
+            <option value="private">Private</option>
+          </Select>
           <Select
             value={status}
             onChange={(event) =>
diff --git a/src/types/api.ts b/src/types/api.ts
index c620bf4..442d0e5 100644
--- a/src/types/api.ts
+++ b/src/types/api.ts
@@ -211,6 +211,17 @@ export type InitiativeReferenceDto = {
   id: string;
   title: string;
 };
+export type InitiativeVisibilityDto = "public" | "private";
+export type InitiativeJoinRequestStatusDto =
+  | "pending"
+  | "accepted"
+  | "declined";
+export type InitiativeJoinRequestDto = {
+  address: string;
+  status: InitiativeJoinRequestStatusDto;
+  requestedAt: string;
+  respondedAt?: string | null;
+};
 export type InitiativeThreadDto = {
   id: string;
   title: string;
@@ -234,6 +245,7 @@ export type InitiativeDto = {
   title: string;
   summary: string;
   description: string;
+  visibility: InitiativeVisibilityDto;
   status: InitiativeStatusDto;
   tags: string[];
   createdByAddress: string;
@@ -248,6 +260,10 @@ export type InitiativeDto = {
   viewerRole?: InitiativeRoleDto | null;
   viewerCanAdmin?: boolean;
   viewerCanSteward?: boolean;
+  viewerCanJoin?: boolean;
+  viewerCanLeave?: boolean;
+  viewerJoinRequest?: InitiativeJoinRequestDto | null;
+  joinRequests?: InitiativeJoinRequestDto[];
   boardColumns?: InitiativeBoardColumnDto[];
   boardCards?: InitiativeBoardCardDto[];
   threads?: InitiativeThreadDto[];
diff --git a/tests/api/api-client-runtime.test.js b/tests/api/api-client-runtime.test.js
index 6f4d9b8..875ef9e 100644
--- a/tests/api/api-client-runtime.test.js
+++ b/tests/api/api-client-runtime.test.js
@@ -6,6 +6,10 @@ import {
   apiInitiative,
   apiInitiativeBoardCardDelete,
   apiInitiativeBoardCardUpdate,
+  apiInitiativeJoin,
+  apiInitiativeJoinRequestApprove,
+  apiInitiativeJoinRequestDecline,
+  apiInitiativeLeave,
   apiInitiativeUpdate,
   apiPoolVote,
   apiProposals,
@@ -159,3 +163,51 @@ test("initiative client preserves explicit empty edits and encodes detail ids",
 
   global.fetch = originalFetch;
 });
+
+test("initiative membership commands preserve the shared API contract", async () => {
+  const originalFetch = global.fetch;
+  const calls = [];
+
+  global.fetch = async (input, init) => {
+    calls.push({ input, init });
+    return new Response(JSON.stringify({ ok: true }), {
+      status: 200,
+      headers: { "content-type": "application/json" },
+    });
+  };
+
+  await apiInitiativeJoin({ initiativeId: "initiative-1" });
+  await apiInitiativeJoinRequestApprove({
+    initiativeId: "initiative-1",
+    address: "member-1",
+  });
+  await apiInitiativeJoinRequestDecline({
+    initiativeId: "initiative-1",
+    address: "member-2",
+  });
+  await apiInitiativeLeave({ initiativeId: "initiative-1" });
+
+  assert.deepEqual(
+    calls.map((call) => JSON.parse(call.init.body)),
+    [
+      {
+        type: "initiative.join",
+        payload: { initiativeId: "initiative-1" },
+      },
+      {
+        type: "initiative.join.request.approve",
+        payload: { initiativeId: "initiative-1", address: "member-1" },
+      },
+      {
+        type: "initiative.join.request.decline",
+        payload: { initiativeId: "initiative-1", address: "member-2" },
+      },
+      {
+        type: "initiative.leave",
+        payload: { initiativeId: "initiative-1" },
+      },
+    ],
+  );
+
+  global.fetch = originalFetch;
+});
diff --git a/tests/unit/initiative-membership-layout-contract.test.ts b/tests/unit/initiative-membership-layout-contract.test.ts
new file mode 100644
index 0000000..b74f800
--- /dev/null
+++ b/tests/unit/initiative-membership-layout-contract.test.ts
@@ -0,0 +1,27 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { test } from "@rstest/core";
+
+function source(path: string) {
+  return readFileSync(join(process.cwd(), path), "utf8");
+}
+
+test("Initiative membership actions stay concise and actionable", () => {
+  const page = source("src/pages/initiatives/Initiative.tsx");
+  const queue = source(
+    "src/pages/initiatives/components/InitiativeJoinRequestsSection.tsx",
+  );
+  const runner = source("src/hooks/useActionRunner.ts");
+
+  assert.ok(
+    page.indexOf("<InitiativeJoinRequestsSection") <
+      page.indexOf("<InitiativeBoardSection"),
+    "Join requests should appear before the potentially long board",
+  );
+  assert.match(queue, /pending\.length === 0\) return null/);
+  assert.doesNotMatch(queue, /NoDataYetBar/);
+  assert.match(queue, /aria-label=\{`Accept join request from/);
+  assert.match(queue, /aria-label=\{`Decline join request from/);
+  assert.match(runner, /actionInFlight\.current/);
+});
diff --git a/tests/unit/initiative-ui.test.ts b/tests/unit/initiative-ui.test.ts
index a0ccbb1..2b21e2a 100644
--- a/tests/unit/initiative-ui.test.ts
+++ b/tests/unit/initiative-ui.test.ts
@@ -7,6 +7,7 @@ import {
   initiativeCardsForColumn,
   initiativeDescriptionParagraphs,
   initiativeDistinctDescription,
+  getInitiativeViewerCapabilities,
   initiativeOptionsWithSelection,
   initiativePath,
   parseInitiativeTags,
@@ -88,6 +89,65 @@ test("initiative management requires an active workspace and steward authority",
   ).toBe(false);
 });
 
+test("initiative write capabilities require an eligible authenticated viewer", () => {
+  const initiative = {
+    status: "active" as const,
+    viewerRole: "steward" as const,
+    viewerCanAdmin: false,
+    viewerCanSteward: true,
+    viewerCanJoin: false,
+    viewerCanLeave: true,
+  };
+
+  expect(
+    getInitiativeViewerCapabilities(initiative, {
+      enabled: true,
+      loading: false,
+      authenticated: true,
+      eligible: false,
+    }),
+  ).toEqual({
+    canAdmin: false,
+    canJoin: false,
+    canLeave: false,
+    canManage: false,
+    canParticipate: false,
+  });
+
+  expect(
+    getInitiativeViewerCapabilities(initiative, {
+      enabled: true,
+      loading: false,
+      authenticated: true,
+      eligible: true,
+    }),
+  ).toEqual({
+    canAdmin: false,
+    canJoin: false,
+    canLeave: true,
+    canManage: true,
+    canParticipate: true,
+  });
+});
+
+test("initiative development mode can act without the auth gate", () => {
+  expect(
+    getInitiativeViewerCapabilities(
+      {
+        status: "active",
+        viewerRole: null,
+        viewerCanJoin: true,
+      },
+      {
+        enabled: false,
+        loading: false,
+        authenticated: false,
+        eligible: false,
+      },
+    ),
+  ).toMatchObject({ canJoin: true });
+});
+
 test("proposal drafts retain an Initiative selection that is no longer available", () => {
   expect(
     initiativeOptionsWithSelection(
diff --git a/tests/unit/workspace-header-contract.test.ts b/tests/unit/workspace-header-contract.test.ts
index 43c1783..fbfc023 100644
--- a/tests/unit/workspace-header-contract.test.ts
+++ b/tests/unit/workspace-header-contract.test.ts
@@ -23,7 +23,10 @@ test("Initiatives and factions share one workspace header grammar", () => {
   assert.doesNotMatch(header, /asChild/);
 
   assert.match(initiative, /<WorkspaceHeader/);
-  assert.equal(initiative.match(/<WorkspaceHeaderAction/g)?.length, 2);
+  assert.match(initiative, /Join initiative/);
+  assert.match(initiative, /Leave initiative/);
+  assert.match(initiative, /Edit initiative/);
+  assert.match(initiative, /Create card/);
   assert.doesNotMatch(initiative, /Back to initiatives|<PageHeader/);
   assert.doesNotMatch(board, /Create card|initiativeBoardCardCreatePath/);