From 210ed7a3528b1c33f2a441919b7255d4800a55da Mon Sep 17 00:00:00 2001
From: Cyber Preacher <72062250+Cyber-preacher@users.noreply.github.com>
Date: Mon, 29 Jun 2026 17:23:46 +0400
Subject: [PATCH] Build Initiative workspaces

---
 src/app/AppRoutes.tsx                         |   6 +
 src/app/AppSidebar.tsx                        |   2 +
 src/components/GlassyRecordCard.css           |  13 +
 src/components/GlassyRecordCard.tsx           |   7 +
 src/components/ProposalPageHeader.tsx         |  11 +
 src/components/StageChip.css                  |  24 ++
 src/components/StageChip.tsx                  |   1 +
 src/components/Textarea.tsx                   |  18 ++
 src/data/vortexopedia.ts                      |  35 +++
 src/lib/api/initiatives.ts                    | 240 +++++++++++++++++
 src/lib/apiClient.ts                          |   2 +
 src/lib/initiativeUi.ts                       | 111 ++++++++
 src/pages/feed/components/FeedListSection.tsx |   5 +
 src/pages/initiatives/Initiative.tsx          | 203 ++++++++++++++
 src/pages/initiatives/InitiativeCreate.tsx    | 155 +++++++++++
 src/pages/initiatives/Initiatives.tsx         | 193 +++++++++++++
 .../components/InitiativeBoardSection.tsx     | 216 +++++++++++++++
 .../initiatives/components/InitiativeCard.tsx |  83 ++++++
 .../components/InitiativeChatSection.tsx      |  90 +++++++
 .../components/InitiativeMembersSection.tsx   | 124 +++++++++
 .../components/InitiativeProposalsSection.tsx |  42 +++
 .../components/InitiativeSettingsSection.tsx  | 123 +++++++++
 .../components/InitiativeThreadsSection.tsx   | 255 ++++++++++++++++++
 src/pages/proposals/ProposalCreation.tsx      |  37 ++-
 src/pages/proposals/list/ProposalListCard.tsx |   5 +
 .../ProposalCreationStepCard.tsx              |   6 +
 .../proposalCreation/steps/EssentialsStep.tsx |  27 ++
 .../proposalCreation/steps/ReviewStep.tsx     |   7 +
 .../proposals/proposalCreation/toApiForm.ts   |   1 +
 src/pages/proposals/proposalCreation/types.ts |   2 +
 .../useProposalCreationReferenceData.ts       |  43 ++-
 src/types/api.ts                              |  99 +++++++
 src/types/stages.ts                           |   4 +
 tests/api/api-client-runtime.test.js          |  33 +++
 tests/api/cross-repo-contract.test.js         |   1 +
 tests/unit/initiative-ui.test.ts              |  72 +++++
 tests/unit/phase89-visual-contract.test.ts    |   2 +-
 37 files changed, 2282 insertions(+), 16 deletions(-)
 create mode 100644 src/components/Textarea.tsx
 create mode 100644 src/lib/api/initiatives.ts
 create mode 100644 src/lib/initiativeUi.ts
 create mode 100644 src/pages/initiatives/Initiative.tsx
 create mode 100644 src/pages/initiatives/InitiativeCreate.tsx
 create mode 100644 src/pages/initiatives/Initiatives.tsx
 create mode 100644 src/pages/initiatives/components/InitiativeBoardSection.tsx
 create mode 100644 src/pages/initiatives/components/InitiativeCard.tsx
 create mode 100644 src/pages/initiatives/components/InitiativeChatSection.tsx
 create mode 100644 src/pages/initiatives/components/InitiativeMembersSection.tsx
 create mode 100644 src/pages/initiatives/components/InitiativeProposalsSection.tsx
 create mode 100644 src/pages/initiatives/components/InitiativeSettingsSection.tsx
 create mode 100644 src/pages/initiatives/components/InitiativeThreadsSection.tsx
 create mode 100644 tests/unit/initiative-ui.test.ts

diff --git a/src/app/AppRoutes.tsx b/src/app/AppRoutes.tsx
index 668f4bb..c35d0cb 100644
--- a/src/app/AppRoutes.tsx
+++ b/src/app/AppRoutes.tsx
@@ -36,6 +36,9 @@ import Landing from "../pages/Landing";
 import Paper from "../pages/Paper";
 import Guide from "../pages/Guide";
 import Settings from "../pages/settings/Settings";
+import Initiatives from "../pages/initiatives/Initiatives";
+import Initiative from "../pages/initiatives/Initiative";
+import InitiativeCreate from "../pages/initiatives/InitiativeCreate";
 
 const AppRoutes: React.FC = () => {
   return (
@@ -110,6 +113,9 @@ const AppRoutes: React.FC = () => {
         <Route path="chambers" element={<Chambers />} />
         <Route path="chambers/:id" element={<Chamber />} />
         <Route path="formation" element={<Formation />} />
+        <Route path="initiatives" element={<Initiatives />} />
+        <Route path="initiatives/new" element={<InitiativeCreate />} />
+        <Route path="initiatives/:id" element={<Initiative />} />
         <Route path="invision" element={<Invision />} />
         <Route path="vortexopedia" element={<Vortexopedia />} />
         <Route path="settings" element={<Settings />} />
diff --git a/src/app/AppSidebar.tsx b/src/app/AppSidebar.tsx
index 3984e6e..e6dc94d 100644
--- a/src/app/AppSidebar.tsx
+++ b/src/app/AppSidebar.tsx
@@ -10,6 +10,7 @@ import {
   Gavel,
   Landmark,
   Lightbulb,
+  Network,
   Rocket,
   Scale,
   Settings,
@@ -49,6 +50,7 @@ const AppSidebar: React.FC<React.PropsWithChildren> = ({ children }) => {
         { to: "/app/my-governance", label: "My governance", Icon: Gavel },
         { to: "/app/proposals", label: "Proposals", Icon: FileText },
         { to: "/app/formation", label: "Formation", Icon: Rocket },
+        { to: "/app/initiatives", label: "Initiatives", Icon: Network },
       ],
     },
     {
diff --git a/src/components/GlassyRecordCard.css b/src/components/GlassyRecordCard.css
index 268871e..28ad14f 100644
--- a/src/components/GlassyRecordCard.css
+++ b/src/components/GlassyRecordCard.css
@@ -163,6 +163,19 @@
   overflow-wrap: anywhere;
 }
 
+.glassy-record-card__association {
+  align-self: flex-start;
+  max-width: 100%;
+  color: var(--record-meta-text);
+  background: var(--record-meta-bg);
+}
+
+.glassy-record-card__association > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .glassy-record-card__stage {
   width: 100%;
   min-width: 0;
diff --git a/src/components/GlassyRecordCard.tsx b/src/components/GlassyRecordCard.tsx
index b85f947..d74e658 100644
--- a/src/components/GlassyRecordCard.tsx
+++ b/src/components/GlassyRecordCard.tsx
@@ -11,6 +11,7 @@ import type { Stage } from "@/types/stages";
 import "./GlassyRecordCard.css";
 
 type GlassyRecordCardProps = {
+  association?: ReactNode;
   children: ReactNode;
   className?: string;
   dateText?: ReactNode;
@@ -25,6 +26,7 @@ type GlassyRecordCardProps = {
 };
 
 export function GlassyRecordCard({
+  association,
   children,
   className,
   dateText,
@@ -62,6 +64,11 @@ export function GlassyRecordCard({
             <span className="glassy-record-card__title">{title}</span>
           </span>
           <span className="glassy-record-card__summary">{renderedSummary}</span>
+          {association ? (
+            <Chip className="glassy-record-card__association">
+              {association}
+            </Chip>
+          ) : null}
         </span>
         <span className="glassy-record-card__aside">
           {meta ? (
diff --git a/src/components/ProposalPageHeader.tsx b/src/components/ProposalPageHeader.tsx
index 514f997..3833adc 100644
--- a/src/components/ProposalPageHeader.tsx
+++ b/src/components/ProposalPageHeader.tsx
@@ -1,5 +1,7 @@
 import { useEffect, useMemo, useState, type ReactNode } from "react";
+import { Link } from "react-router";
 
+import { Chip } from "@/components/Chip";
 import {
   buildProposalStageLinks,
   ProposalStageBar,
@@ -74,6 +76,15 @@ export function ProposalPageHeader({
   return (
     <section className="space-y-4">
       <h1 className="text-center text-2xl font-semibold text-text">{title}</h1>
+      {status?.initiative ? (
+        <div className="flex justify-center">
+          <Link to={`/app/initiatives/${status.initiative.id}`}>
+            <Chip className="stage-chip stage-chip--system">
+              Initiative · {status.initiative.title}
+            </Chip>
+          </Link>
+        </div>
+      ) : null}
       <ProposalStageBar
         current={stage}
         liveStage={liveStage}
diff --git a/src/components/StageChip.css b/src/components/StageChip.css
index 83c0d5a..d399cb6 100644
--- a/src/components/StageChip.css
+++ b/src/components/StageChip.css
@@ -75,6 +75,12 @@
   --stage-chip-text: #9c3c7b;
 }
 
+.stage-chip--initiative {
+  --stage-chip-bg: #e6f7f4;
+  --stage-chip-border: rgba(30, 137, 122, 0.24);
+  --stage-chip-text: #197d70;
+}
+
 .stage-chip--system {
   --stage-chip-bg: #eef2f6;
   --stage-chip-border: rgba(75, 85, 99, 0.22);
@@ -141,6 +147,12 @@
   --stage-chip-text: #933873;
 }
 
+:root[data-theme="light"] .stage-chip--initiative {
+  --stage-chip-bg: #e9f8f5;
+  --stage-chip-border: rgba(30, 137, 122, 0.28);
+  --stage-chip-text: #176f65;
+}
+
 :root[data-theme="light"] .stage-chip--system {
   --stage-chip-bg: #f1f4f7;
   --stage-chip-border: rgba(75, 85, 99, 0.24);
@@ -207,6 +219,12 @@
   --stage-chip-text: #fbcfe8;
 }
 
+:root[data-theme="night"] .stage-chip--initiative {
+  --stage-chip-bg: rgba(74, 222, 190, 0.15);
+  --stage-chip-border: rgba(74, 222, 190, 0.34);
+  --stage-chip-text: #a7f3df;
+}
+
 :root[data-theme="night"] .stage-chip--system {
   --stage-chip-bg: rgba(203, 213, 225, 0.14);
   --stage-chip-border: rgba(203, 213, 225, 0.3);
@@ -273,6 +291,12 @@
   --stage-chip-text: #ffc1ad;
 }
 
+:root[data-theme="fire"] .stage-chip--initiative {
+  --stage-chip-bg: rgba(255, 181, 71, 0.16);
+  --stage-chip-border: rgba(255, 181, 71, 0.38);
+  --stage-chip-text: #ffd39a;
+}
+
 :root[data-theme="fire"] .stage-chip--system {
   --stage-chip-bg: rgba(255, 226, 194, 0.13);
   --stage-chip-border: rgba(255, 226, 194, 0.3);
diff --git a/src/components/StageChip.tsx b/src/components/StageChip.tsx
index a68709f..08b06f5 100644
--- a/src/components/StageChip.tsx
+++ b/src/components/StageChip.tsx
@@ -22,6 +22,7 @@ const chipClasses: Record<StageChipKind, string> = {
   thread: "stage-chip--thread",
   courts: "stage-chip--courts",
   faction: "stage-chip--faction",
+  initiative: "stage-chip--initiative",
   system: "stage-chip--system",
 };
 
diff --git a/src/components/Textarea.tsx b/src/components/Textarea.tsx
new file mode 100644
index 0000000..e6ef2cd
--- /dev/null
+++ b/src/components/Textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const base =
+  "flex min-h-28 w-full rounded-xl border border-[color:var(--surface-glass-border)] bg-[color:var(--control-glass-bg)] px-3 py-2 text-sm text-[var(--text)] shadow-[var(--shadow-control)] transition supports-[backdrop-filter]:backdrop-blur-md " +
+  "placeholder:text-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--primary-dim)] focus-visible:ring-offset-2 focus-visible:ring-offset-panel focus-visible:shadow-[var(--shadow-tile)] " +
+  "hover:border-[color:var(--surface-glass-hover-border)] hover:bg-[color:var(--control-glass-hover-bg)] disabled:cursor-not-allowed disabled:opacity-60";
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return <textarea className={cn(base, className)} ref={ref} {...props} />;
+  },
+);
+Textarea.displayName = "Textarea";
diff --git a/src/data/vortexopedia.ts b/src/data/vortexopedia.ts
index 025f877..0854310 100644
--- a/src/data/vortexopedia.ts
+++ b/src/data/vortexopedia.ts
@@ -1795,4 +1795,39 @@ export const vortexopediaTerms: VortexopediaTerm[] = [
     source: "App UX: Invision decentralization bands",
     updated: "2026-06-26",
   },
+  {
+    ref: 62,
+    id: "initiative",
+    name: "Initiative",
+    category: "governance",
+    short:
+      "A public coordination workspace where active Human Nodes organize board work, discussion, and proposals without gaining extra governance power.",
+    long: [
+      "An Initiative is created by an active Human Node and operated by an admin, steward, and member roster.",
+      "Its board, durable threads, and chat support work before, during, and after proposal creation.",
+      "Admins and stewards can associate a proposal with an active Initiative. The association records provenance only: it does not change voting eligibility, quorum weight, chamber membership, CM, MM, tier progress, or proposal lifecycle.",
+      "System-wide Initiatives are distinct from faction initiatives. A faction initiative coordinates work inside one faction; a system-wide Initiative is a public Vortex workspace.",
+    ],
+    tags: [
+      "initiative",
+      "coordination",
+      "proposal",
+      "board",
+      "threads",
+      "provenance",
+    ],
+    related: ["proposal-pools", "formation", "faction", "human_node"],
+    examples: [
+      "A research Initiative can coordinate evidence and then visibly associate the resulting policy proposal.",
+    ],
+    stages: ["global", "pool", "chamber", "formation"],
+    links: [
+      {
+        label: "Initiatives",
+        url: "/app/initiatives",
+      },
+    ],
+    source: "Vortex Simulator Phase 90",
+    updated: "2026-06-27",
+  },
 ];
diff --git a/src/lib/api/initiatives.ts b/src/lib/api/initiatives.ts
new file mode 100644
index 0000000..de05646
--- /dev/null
+++ b/src/lib/api/initiatives.ts
@@ -0,0 +1,240 @@
+import type {
+  GetInitiativesResponse,
+  InitiativeBoardCardStatusDto,
+  InitiativeDto,
+  InitiativeRoleDto,
+  InitiativeStatusDto,
+  InitiativeThreadStatusDto,
+} from "@/types/api";
+import { apiCommand } from "./command";
+import { apiGet } from "./http";
+
+export async function apiInitiatives(): Promise<GetInitiativesResponse> {
+  return await apiGet<GetInitiativesResponse>("/api/initiatives");
+}
+
+export async function apiInitiative(id: string): Promise<InitiativeDto> {
+  return await apiGet<InitiativeDto>(
+    `/api/initiatives/${encodeURIComponent(id)}`,
+  );
+}
+
+export async function apiInitiativeCreate(input: {
+  title: string;
+  summary: string;
+  description?: string;
+  tags?: string[];
+  idempotencyKey?: string;
+}): Promise<{
+  ok: true;
+  type: "initiative.create";
+  initiative: { id: string; slug: string; title: string };
+}> {
+  return await apiCommand({
+    type: "initiative.create",
+    payload: {
+      title: input.title,
+      summary: input.summary,
+      ...(input.description !== undefined
+        ? { description: input.description }
+        : {}),
+      ...(input.tags && input.tags.length > 0 ? { tags: input.tags } : {}),
+    },
+    idempotencyKey: input.idempotencyKey,
+  });
+}
+
+export async function apiInitiativeUpdate(input: {
+  initiativeId: string;
+  title?: string;
+  summary?: string;
+  description?: string;
+  status?: InitiativeStatusDto;
+  tags?: string[];
+  idempotencyKey?: string;
+}): Promise<{
+  ok: true;
+  type: "initiative.update";
+  initiativeId: string;
+  updated: boolean;
+}> {
+  return await apiCommand({
+    type: "initiative.update",
+    payload: {
+      initiativeId: input.initiativeId,
+      ...(input.title ? { title: input.title } : {}),
+      ...(input.summary ? { summary: input.summary } : {}),
+      ...(input.description !== undefined
+        ? { description: input.description }
+        : {}),
+      ...(input.status ? { status: input.status } : {}),
+      ...(input.tags ? { tags: input.tags } : {}),
+    },
+    idempotencyKey: input.idempotencyKey,
+  });
+}
+
+export async function apiInitiativeMemberRoleSet(input: {
+  initiativeId: string;
+  address: string;
+  role: InitiativeRoleDto;
+  idempotencyKey?: string;
+}): Promise<{
+  ok: true;
+  type: "initiative.member.role.set";
+  initiativeId: string;
+  member: { address: string; role: InitiativeRoleDto };
+}> {
+  return await apiCommand({
+    type: "initiative.member.role.set",
+    payload: {
+      initiativeId: input.initiativeId,
+      address: input.address,
+      role: input.role,
+    },
+    idempotencyKey: input.idempotencyKey,
+  });
+}
+
+export async function apiInitiativeBoardCardCreate(input: {
+  initiativeId: string;
+  columnId?: string;
+  title: string;
+  body?: string;
+  ownerAddress?: string;
+  idempotencyKey?: string;
+}): Promise<{
+  ok: true;
+  type: "initiative.board.card.create";
+  initiativeId: string;
+  card: { id: string; title: string };
+}> {
+  return await apiCommand({
+    type: "initiative.board.card.create",
+    payload: {
+      initiativeId: input.initiativeId,
+      title: input.title,
+      ...(input.columnId ? { columnId: input.columnId } : {}),
+      ...(input.body !== undefined ? { body: input.body } : {}),
+      ...(input.ownerAddress ? { ownerAddress: input.ownerAddress } : {}),
+    },
+    idempotencyKey: input.idempotencyKey,
+  });
+}
+
+export async function apiInitiativeBoardCardUpdate(input: {
+  initiativeId: string;
+  cardId: string;
+  title?: string;
+  body?: string;
+  status?: InitiativeBoardCardStatusDto;
+  ownerAddress?: string | null;
+  idempotencyKey?: string;
+}): Promise<{
+  ok: true;
+  type: "initiative.board.card.update";
+  initiativeId: string;
+  card: { id: string; status: InitiativeBoardCardStatusDto };
+}> {
+  return await apiCommand({
+    type: "initiative.board.card.update",
+    payload: {
+      initiativeId: input.initiativeId,
+      cardId: input.cardId,
+      ...(input.title ? { title: input.title } : {}),
+      ...(input.body !== undefined ? { body: input.body } : {}),
+      ...(input.status ? { status: input.status } : {}),
+      ...(input.ownerAddress !== undefined
+        ? { ownerAddress: input.ownerAddress }
+        : {}),
+    },
+    idempotencyKey: input.idempotencyKey,
+  });
+}
+
+export async function apiInitiativeThreadCreate(input: {
+  initiativeId: string;
+  title: string;
+  body: string;
+  idempotencyKey?: string;
+}): Promise<{
+  ok: true;
+  type: "initiative.thread.create";
+  initiativeId: string;
+  thread: { id: string; title: string };
+}> {
+  return await apiCommand({
+    type: "initiative.thread.create",
+    payload: {
+      initiativeId: input.initiativeId,
+      title: input.title,
+      body: input.body,
+    },
+    idempotencyKey: input.idempotencyKey,
+  });
+}
+
+export async function apiInitiativeThreadReply(input: {
+  initiativeId: string;
+  threadId: string;
+  body: string;
+  idempotencyKey?: string;
+}): Promise<{
+  ok: true;
+  type: "initiative.thread.reply";
+  initiativeId: string;
+  threadId: string;
+  messageId: string;
+}> {
+  return await apiCommand({
+    type: "initiative.thread.reply",
+    payload: {
+      initiativeId: input.initiativeId,
+      threadId: input.threadId,
+      body: input.body,
+    },
+    idempotencyKey: input.idempotencyKey,
+  });
+}
+
+export async function apiInitiativeThreadTransition(input: {
+  initiativeId: string;
+  threadId: string;
+  status: InitiativeThreadStatusDto;
+  idempotencyKey?: string;
+}): Promise<{
+  ok: true;
+  type: "initiative.thread.transition";
+  initiativeId: string;
+  thread: { id: string; status: InitiativeThreadStatusDto };
+}> {
+  return await apiCommand({
+    type: "initiative.thread.transition",
+    payload: {
+      initiativeId: input.initiativeId,
+      threadId: input.threadId,
+      status: input.status,
+    },
+    idempotencyKey: input.idempotencyKey,
+  });
+}
+
+export async function apiInitiativeChatPost(input: {
+  initiativeId: string;
+  body: string;
+  idempotencyKey?: string;
+}): Promise<{
+  ok: true;
+  type: "initiative.chat.post";
+  initiativeId: string;
+  messageId: string;
+}> {
+  return await apiCommand({
+    type: "initiative.chat.post",
+    payload: {
+      initiativeId: input.initiativeId,
+      body: input.body,
+    },
+    idempotencyKey: input.idempotencyKey,
+  });
+}
diff --git a/src/lib/apiClient.ts b/src/lib/apiClient.ts
index 7058518..2f26c32 100644
--- a/src/lib/apiClient.ts
+++ b/src/lib/apiClient.ts
@@ -35,6 +35,7 @@ import type {
   PoolProposalPageDto,
 } from "@/types/api";
 export * from "@/lib/api/factions";
+export * from "@/lib/api/initiatives";
 export {
   apiGet,
   apiPost,
@@ -803,6 +804,7 @@ export type ProposalDraftFormPayload = {
   templateId?: "project" | "system";
   presetId?: string;
   resubmitsProposalId?: string;
+  initiativeId?: string;
   formationEligible?: boolean;
   title: string;
   chamberId: string;
diff --git a/src/lib/initiativeUi.ts b/src/lib/initiativeUi.ts
new file mode 100644
index 0000000..231bcd4
--- /dev/null
+++ b/src/lib/initiativeUi.ts
@@ -0,0 +1,111 @@
+import type {
+  InitiativeBoardCardDto,
+  InitiativeBoardColumnDto,
+  InitiativeBoardCardStatusDto,
+  InitiativeRoleDto,
+  InitiativeStatusDto,
+  InitiativeThreadStatusDto,
+} from "@/types/api";
+
+export const initiativeRoleLabel: Record<InitiativeRoleDto, string> = {
+  admin: "Admin",
+  steward: "Steward",
+  member: "Member",
+};
+
+export const initiativeStatusLabel: Record<InitiativeStatusDto, string> = {
+  active: "Active",
+  paused: "Paused",
+  archived: "Archived",
+};
+
+export const initiativeThreadStatusLabel: Record<
+  InitiativeThreadStatusDto,
+  string
+> = {
+  open: "Open",
+  resolved: "Resolved",
+  locked: "Locked",
+};
+
+export const initiativeBoardStatusLabel: Record<
+  InitiativeBoardCardStatusDto,
+  string
+> = {
+  backlog: "Backlog",
+  doing: "In progress",
+  proposal: "Proposal ready",
+  blocked: "Blocked",
+  done: "Done",
+};
+
+export function initiativeStatusTone(
+  status: InitiativeStatusDto,
+): "neutral" | "ok" | "warn" {
+  if (status === "active") return "ok";
+  if (status === "paused") return "warn";
+  return "neutral";
+}
+
+export function initiativeThreadStatusTone(
+  status: InitiativeThreadStatusDto,
+): "neutral" | "ok" | "warn" {
+  if (status === "open") return "ok";
+  if (status === "locked") return "warn";
+  return "neutral";
+}
+
+export function initiativeSummaryPreview(value: string, maxLength = 150) {
+  const normalized = value.replace(/\s+/g, " ").trim();
+  if (normalized.length <= maxLength) return normalized;
+  const boundary = normalized.lastIndexOf(" ", maxLength - 1);
+  const cutAt = boundary > 80 ? boundary : maxLength;
+  return normalized.slice(0, cutAt).trim();
+}
+
+export function initiativeOptionsWithSelection(
+  options: Array<{ value: string; label: string }>,
+  selectedId?: string,
+) {
+  if (!selectedId || options.some((option) => option.value === selectedId)) {
+    return options;
+  }
+  return [
+    ...options,
+    {
+      value: selectedId,
+      label: "Unavailable or no longer managed",
+    },
+  ];
+}
+
+export function initiativeCardsForColumn(
+  cards: InitiativeBoardCardDto[],
+  column: InitiativeBoardColumnDto,
+): InitiativeBoardCardDto[] {
+  const matches = cards.filter(
+    (card) =>
+      card.columnId === column.id ||
+      card.columnId === column.key ||
+      (!card.columnId && card.status === column.key),
+  );
+
+  return Array.from(
+    new Map(matches.map((card) => [card.id, card])).values(),
+  ).sort(
+    (a, b) =>
+      a.sortOrder - b.sortOrder ||
+      new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime(),
+  );
+}
+
+export function parseInitiativeTags(value: string) {
+  return Array.from(
+    new Set(
+      value
+        .split(",")
+        .map((tag) => tag.trim())
+        .filter(Boolean),
+    ),
+  ).slice(0, 8);
+}
diff --git a/src/pages/feed/components/FeedListSection.tsx b/src/pages/feed/components/FeedListSection.tsx
index ac4d864..c18d514 100644
--- a/src/pages/feed/components/FeedListSection.tsx
+++ b/src/pages/feed/components/FeedListSection.tsx
@@ -117,6 +117,11 @@ export function FeedListSection({
         return (
           <GlassyRecordCard
             key={itemKey}
+            association={
+              item.initiative
+                ? `Initiative · ${item.initiative.title}`
+                : undefined
+            }
             expanded={expanded}
             onToggle={() => onToggle(itemKey)}
             rail={rail}
diff --git a/src/pages/initiatives/Initiative.tsx b/src/pages/initiatives/Initiative.tsx
new file mode 100644
index 0000000..6cc9578
--- /dev/null
+++ b/src/pages/initiatives/Initiative.tsx
@@ -0,0 +1,203 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Link, useParams } from "react-router";
+
+import { Chip } from "@/components/Chip";
+import { GlassyCard } from "@/components/GlassyCard";
+import { GlassyStatusChip } from "@/components/GlassySection";
+import { NoDataYetBar } from "@/components/NoDataYetBar";
+import { Button } from "@/components/primitives/button";
+import { apiInitiative } from "@/lib/apiClient";
+import { formatDateTime } from "@/lib/dateTime";
+import { formatLoadError } from "@/lib/errorFormatting";
+import {
+  initiativeBoardStatusLabel,
+  initiativeRoleLabel,
+  initiativeStatusLabel,
+  initiativeStatusTone,
+} from "@/lib/initiativeUi";
+import { shortAddress } from "@/lib/profileUi";
+import type { InitiativeBoardColumnDto, InitiativeDto } from "@/types/api";
+import { InitiativeBoardSection } from "./components/InitiativeBoardSection";
+import { InitiativeChatSection } from "./components/InitiativeChatSection";
+import { InitiativeMembersSection } from "./components/InitiativeMembersSection";
+import { InitiativeProposalsSection } from "./components/InitiativeProposalsSection";
+import { InitiativeSettingsSection } from "./components/InitiativeSettingsSection";
+import { InitiativeThreadsSection } from "./components/InitiativeThreadsSection";
+
+const Initiative: React.FC = () => {
+  const { id } = useParams<{ id: string }>();
+  const [initiative, setInitiative] = useState<InitiativeDto | null>(null);
+  const [loadError, setLoadError] = useState<string | null>(null);
+
+  const loadInitiative = useCallback(async () => {
+    if (!id) return;
+    try {
+      const res = await apiInitiative(id);
+      setInitiative(res);
+      setLoadError(null);
+    } catch (error) {
+      setInitiative(null);
+      setLoadError((error as Error).message);
+    }
+  }, [id]);
+
+  useEffect(() => {
+    void loadInitiative();
+  }, [loadInitiative]);
+
+  const boardColumns = useMemo(() => {
+    if (!initiative) return [];
+    if (initiative.boardColumns && initiative.boardColumns.length > 0) {
+      return initiative.boardColumns;
+    }
+
+    const statuses = Array.from(
+      new Set((initiative.boardCards ?? []).map((card) => card.status)),
+    );
+    return statuses.map<InitiativeBoardColumnDto>((status, index) => ({
+      id: status,
+      key: status,
+      title: initiativeBoardStatusLabel[status],
+      sortOrder: index,
+    }));
+  }, [initiative]);
+
+  if (!id) {
+    return <NoDataYetBar label="initiative id" />;
+  }
+
+  if (loadError) {
+    return (
+      <GlassyCard className="px-4 py-6 text-center text-sm text-destructive">
+        Initiative unavailable: {formatLoadError(loadError)}
+      </GlassyCard>
+    );
+  }
+
+  if (!initiative) {
+    return (
+      <GlassyCard className="px-4 py-6 text-center text-sm text-muted">
+        Loading initiative...
+      </GlassyCard>
+    );
+  }
+
+  const cards = initiative.boardCards ?? [];
+  const threads = initiative.threads ?? [];
+  const memberships = initiative.memberships ?? [];
+  const proposals = initiative.proposals ?? [];
+  const chatMessages = initiative.chatMessages ?? [];
+  const isOperational = initiative.status === "active";
+  const canManage = isOperational && Boolean(initiative.viewerCanSteward);
+  const canAdmin = Boolean(initiative.viewerCanAdmin);
+  const canParticipate = isOperational && initiative.viewerRole != null;
+  const viewerRole = initiative.viewerRole
+    ? initiativeRoleLabel[initiative.viewerRole]
+    : "Observer";
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex justify-start">
+        <Button asChild variant="ghost" size="sm">
+          <Link to="/app/initiatives">Back to initiatives</Link>
+        </Button>
+      </div>
+
+      <GlassyCard as="article" className="p-5">
+        <div className="flex flex-col gap-5 lg:flex-row lg:items-start lg:justify-between">
+          <div className="min-w-0 space-y-3">
+            <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>
+            </div>
+            <h1 className="text-2xl leading-tight font-semibold text-text">
+              {initiative.title}
+            </h1>
+            <p className="max-w-4xl text-sm leading-relaxed text-muted">
+              {initiative.description || initiative.summary}
+            </p>
+          </div>
+
+          <dl className="grid min-w-64 grid-cols-2 gap-2 text-sm">
+            <HeroMetric label="Members" value={initiative.memberCount} />
+            <HeroMetric label="Board" value={cards.length} />
+            <HeroMetric label="Threads" value={threads.length} />
+            <HeroMetric label="Proposals" value={proposals.length} />
+          </dl>
+        </div>
+
+        <div className="mt-5 flex flex-wrap gap-2">
+          {initiative.tags.map((tag) => (
+            <Chip key={tag} className="stage-chip stage-chip--system">
+              {tag}
+            </Chip>
+          ))}
+        </div>
+
+        <div className="mt-5 flex flex-wrap justify-between gap-3 border-t border-[color:var(--surface-glass-border)] pt-4 text-xs text-muted">
+          <span>Created by {shortAddress(initiative.createdByAddress)}</span>
+          <span>Updated {formatDateTime(initiative.updatedAt)}</span>
+        </div>
+      </GlassyCard>
+
+      {canAdmin ? (
+        <InitiativeSettingsSection
+          initiative={initiative}
+          onChanged={loadInitiative}
+        />
+      ) : null}
+      <InitiativeBoardSection
+        cards={cards}
+        canManage={canManage}
+        columns={boardColumns}
+        initiativeId={initiative.id}
+        onChanged={loadInitiative}
+      />
+      <InitiativeThreadsSection
+        canModerate={canManage}
+        canPost={canParticipate}
+        initiativeId={initiative.id}
+        onChanged={loadInitiative}
+        threads={threads}
+      />
+      <InitiativeChatSection
+        canPost={canParticipate}
+        initiativeId={initiative.id}
+        messages={chatMessages}
+        onChanged={loadInitiative}
+      />
+      <InitiativeProposalsSection proposals={proposals} />
+      <InitiativeMembersSection
+        canAdmin={isOperational && canAdmin}
+        initiativeId={initiative.id}
+        memberships={memberships}
+        onChanged={loadInitiative}
+      />
+    </div>
+  );
+};
+
+function HeroMetric({
+  label,
+  value,
+}: {
+  label: string;
+  value: number | string;
+}) {
+  return (
+    <div className="rounded-xl border border-[color:var(--surface-glass-border)] bg-[color:var(--surface-glass-bg)] px-3 py-2 text-center">
+      <dt className="text-[0.68rem] leading-none font-semibold tracking-wide text-muted uppercase">
+        {label}
+      </dt>
+      <dd className="mt-1 text-base leading-none font-semibold text-text">
+        {value}
+      </dd>
+    </div>
+  );
+}
+
+export default Initiative;
diff --git a/src/pages/initiatives/InitiativeCreate.tsx b/src/pages/initiatives/InitiativeCreate.tsx
new file mode 100644
index 0000000..eca9814
--- /dev/null
+++ b/src/pages/initiatives/InitiativeCreate.tsx
@@ -0,0 +1,155 @@
+import type { FormEvent } from "react";
+import { useState } from "react";
+import { Link, useNavigate } from "react-router";
+
+import { useAuth } from "@/app/auth/AuthContext";
+import { GlassyCard } from "@/components/GlassyCard";
+import { NoDataYetBar } from "@/components/NoDataYetBar";
+import { Textarea } from "@/components/Textarea";
+import { Button } from "@/components/primitives/button";
+import { Input } from "@/components/primitives/input";
+import { apiInitiativeCreate } from "@/lib/apiClient";
+import { formatLoadError } from "@/lib/errorFormatting";
+import { parseInitiativeTags } from "@/lib/initiativeUi";
+
+const InitiativeCreate: React.FC = () => {
+  const auth = useAuth();
+  const navigate = useNavigate();
+  const [title, setTitle] = useState("");
+  const [summary, setSummary] = useState("");
+  const [description, setDescription] = useState("");
+  const [tags, setTags] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+
+  async function submitInitiative(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const trimmedTitle = title.trim();
+    const trimmedSummary = summary.trim();
+    if (!trimmedTitle || !trimmedSummary) return;
+
+    setSubmitting(true);
+    setSubmitError(null);
+    try {
+      const res = await apiInitiativeCreate({
+        title: trimmedTitle,
+        summary: trimmedSummary,
+        description: description.trim(),
+        tags: parseInitiativeTags(tags),
+      });
+      navigate(`/app/initiatives/${res.initiative.slug || res.initiative.id}`);
+    } catch (error) {
+      setSubmitError((error as Error).message);
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  const canCreate = auth.authenticated && auth.eligible;
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex justify-start">
+        <Button asChild variant="ghost" size="sm">
+          <Link to="/app/initiatives">Back to initiatives</Link>
+        </Button>
+      </div>
+
+      {!auth.loading && !canCreate ? (
+        <NoDataYetBar
+          label="initiative access"
+          description="Only active Human Nodes can create initiatives."
+        />
+      ) : null}
+
+      {auth.loading ? (
+        <GlassyCard className="px-4 py-6 text-center text-sm text-muted">
+          Checking Initiative access...
+        </GlassyCard>
+      ) : canCreate ? (
+        <GlassyCard as="article" className="p-5">
+          <form className="grid gap-4" onSubmit={submitInitiative}>
+            <div className="grid gap-2">
+              <label
+                className="text-sm font-semibold text-text"
+                htmlFor="initiative-title"
+              >
+                Title
+              </label>
+              <Input
+                id="initiative-title"
+                value={title}
+                onChange={(event) => setTitle(event.target.value)}
+                placeholder="Initiative title"
+                required
+              />
+            </div>
+
+            <div className="grid gap-2">
+              <label
+                className="text-sm font-semibold text-text"
+                htmlFor="initiative-summary"
+              >
+                Summary
+              </label>
+              <Input
+                id="initiative-summary"
+                value={summary}
+                onChange={(event) => setSummary(event.target.value)}
+                placeholder="One sentence that explains the work"
+                required
+              />
+            </div>
+
+            <div className="grid gap-2">
+              <label
+                className="text-sm font-semibold text-text"
+                htmlFor="initiative-description"
+              >
+                Description
+              </label>
+              <Textarea
+                id="initiative-description"
+                value={description}
+                onChange={(event) => setDescription(event.target.value)}
+                placeholder="Scope, context, and expected outcomes"
+              />
+            </div>
+
+            <div className="grid gap-2">
+              <label
+                className="text-sm font-semibold text-text"
+                htmlFor="initiative-tags"
+              >
+                Tags
+              </label>
+              <Input
+                id="initiative-tags"
+                value={tags}
+                onChange={(event) => setTags(event.target.value)}
+                placeholder="Comma-separated tags"
+              />
+            </div>
+
+            {submitError ? (
+              <p className="text-sm text-destructive">
+                {formatLoadError(submitError)}
+              </p>
+            ) : null}
+
+            <div className="flex justify-end">
+              <Button
+                type="submit"
+                disabled={submitting || !title.trim() || !summary.trim()}
+              >
+                Create initiative
+              </Button>
+            </div>
+          </form>
+        </GlassyCard>
+      ) : null}
+    </div>
+  );
+};
+
+export default InitiativeCreate;
diff --git a/src/pages/initiatives/Initiatives.tsx b/src/pages/initiatives/Initiatives.tsx
new file mode 100644
index 0000000..883dfc9
--- /dev/null
+++ b/src/pages/initiatives/Initiatives.tsx
@@ -0,0 +1,193 @@
+import { useEffect, useMemo, useState } from "react";
+import { Link } from "react-router";
+
+import { useAuth } from "@/app/auth/AuthContext";
+import { GlassyCard } from "@/components/GlassyCard";
+import { GlassyMetricTile } from "@/components/GlassySection";
+import { NoDataYetBar } from "@/components/NoDataYetBar";
+import { SearchBar } from "@/components/SearchBar";
+import { Button } from "@/components/primitives/button";
+import { apiInitiatives } from "@/lib/apiClient";
+import { formatLoadError } from "@/lib/errorFormatting";
+import { initiativeStatusLabel } from "@/lib/initiativeUi";
+import type { InitiativeDto, InitiativeStatusDto } from "@/types/api";
+import { InitiativeCard } from "./components/InitiativeCard";
+
+type InitiativeFilters = {
+  status: "any" | InitiativeStatusDto;
+  sortBy: "updated" | "members" | "threads";
+};
+
+const defaultFilters: InitiativeFilters = {
+  status: "any",
+  sortBy: "updated",
+};
+
+const Initiatives: React.FC = () => {
+  const auth = useAuth();
+  const [initiatives, setInitiatives] = useState<InitiativeDto[] | null>(null);
+  const [serverTotals, setServerTotals] = useState<{
+    active: number;
+    paused: number;
+    archived: number;
+  } | null>(null);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [query, setQuery] = useState("");
+  const [filters, setFilters] = useState<InitiativeFilters>(defaultFilters);
+
+  useEffect(() => {
+    let active = true;
+    (async () => {
+      try {
+        const initiativeRes = await apiInitiatives();
+        if (!active) return;
+        setInitiatives(initiativeRes.items);
+        setServerTotals(initiativeRes.totals ?? null);
+        setLoadError(null);
+      } catch (error) {
+        if (!active) return;
+        setInitiatives([]);
+        setServerTotals(null);
+        setLoadError((error as Error).message);
+      }
+    })();
+    return () => {
+      active = false;
+    };
+  }, []);
+
+  const totals = useMemo(() => {
+    const list = initiatives ?? [];
+    return {
+      active:
+        serverTotals?.active ??
+        list.filter((initiative) => initiative.status === "active").length,
+      paused:
+        serverTotals?.paused ??
+        list.filter((initiative) => initiative.status === "paused").length,
+      archived:
+        serverTotals?.archived ??
+        list.filter((initiative) => initiative.status === "archived").length,
+      members: list.reduce(
+        (sum, initiative) => sum + initiative.memberCount,
+        0,
+      ),
+    };
+  }, [initiatives, serverTotals]);
+
+  const filtered = useMemo(() => {
+    const term = query.trim().toLowerCase();
+    return [...(initiatives ?? [])]
+      .filter((initiative) => {
+        const matchesTerm =
+          term.length === 0 ||
+          initiative.title.toLowerCase().includes(term) ||
+          initiative.summary.toLowerCase().includes(term) ||
+          initiative.description.toLowerCase().includes(term) ||
+          initiative.tags.some((tag) => tag.toLowerCase().includes(term));
+        const matchesStatus =
+          filters.status === "any" || initiative.status === filters.status;
+        return matchesTerm && matchesStatus;
+      })
+      .sort((a, b) => {
+        if (filters.sortBy === "members") return b.memberCount - a.memberCount;
+        if (filters.sortBy === "threads") {
+          return (
+            (b.threadCount ?? b.threads?.length ?? 0) -
+            (a.threadCount ?? a.threads?.length ?? 0)
+          );
+        }
+        return (
+          new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
+        );
+      });
+  }, [filters.sortBy, filters.status, initiatives, query]);
+
+  const canCreate = auth.authenticated && auth.eligible;
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex justify-end">
+        {canCreate ? (
+          <Button asChild>
+            <Link to="/app/initiatives/new">Create initiative</Link>
+          </Button>
+        ) : null}
+      </div>
+
+      {initiatives === null ? (
+        <GlassyCard className="px-4 py-6 text-center text-sm text-muted">
+          Loading initiatives...
+        </GlassyCard>
+      ) : null}
+
+      {loadError ? (
+        <GlassyCard className="px-4 py-6 text-center text-sm text-destructive">
+          Initiatives unavailable: {formatLoadError(loadError)}
+        </GlassyCard>
+      ) : null}
+
+      {initiatives !== null && initiatives.length === 0 && !loadError ? (
+        <NoDataYetBar
+          label="initiatives"
+          description="Active Human Nodes can create the first public coordination workspace."
+        />
+      ) : null}
+
+      {initiatives !== null && initiatives.length > 0 ? (
+        <>
+          <section className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+            <GlassyMetricTile label="Active" value={totals.active} />
+            <GlassyMetricTile label="Paused" value={totals.paused} />
+            <GlassyMetricTile label="Archived" value={totals.archived} />
+            <GlassyMetricTile label="Memberships" value={totals.members} />
+          </section>
+
+          <SearchBar
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+            placeholder="Search initiatives by title, summary, or tag..."
+            ariaLabel="Search initiatives"
+            filtersConfig={[
+              {
+                key: "status",
+                label: "Status",
+                options: [
+                  { value: "any", label: "Any status" },
+                  { value: "active", label: initiativeStatusLabel.active },
+                  { value: "paused", label: initiativeStatusLabel.paused },
+                  { value: "archived", label: initiativeStatusLabel.archived },
+                ],
+              },
+              {
+                key: "sortBy",
+                label: "Sort by",
+                options: [
+                  { value: "updated", label: "Recently updated" },
+                  { value: "members", label: "Members" },
+                  { value: "threads", label: "Threads" },
+                ],
+              },
+            ]}
+            filtersState={filters}
+            onFiltersChange={setFilters}
+          />
+
+          <section className="grid gap-5 lg:grid-cols-2" aria-live="polite">
+            {filtered.length === 0 ? (
+              <GlassyCard className="px-4 py-6 text-center text-sm text-muted lg:col-span-2">
+                No initiatives match this filter set.
+              </GlassyCard>
+            ) : (
+              filtered.map((initiative) => (
+                <InitiativeCard key={initiative.id} initiative={initiative} />
+              ))
+            )}
+          </section>
+        </>
+      ) : null}
+    </div>
+  );
+};
+
+export default Initiatives;
diff --git a/src/pages/initiatives/components/InitiativeBoardSection.tsx b/src/pages/initiatives/components/InitiativeBoardSection.tsx
new file mode 100644
index 0000000..d99b020
--- /dev/null
+++ b/src/pages/initiatives/components/InitiativeBoardSection.tsx
@@ -0,0 +1,216 @@
+import type { FormEvent } from "react";
+import { useMemo, useState } from "react";
+
+import { NoDataYetBar } from "@/components/NoDataYetBar";
+import { GlassySection, GlassyStatusChip } from "@/components/GlassySection";
+import { Textarea } from "@/components/Textarea";
+import { Button } from "@/components/primitives/button";
+import { Input } from "@/components/primitives/input";
+import { Select } from "@/components/primitives/select";
+import {
+  apiInitiativeBoardCardCreate,
+  apiInitiativeBoardCardUpdate,
+} from "@/lib/apiClient";
+import { formatDateTime } from "@/lib/dateTime";
+import {
+  initiativeBoardStatusLabel,
+  initiativeCardsForColumn,
+} from "@/lib/initiativeUi";
+import { shortAddress } from "@/lib/profileUi";
+import type {
+  InitiativeBoardCardDto,
+  InitiativeBoardColumnDto,
+} from "@/types/api";
+
+type InitiativeBoardSectionProps = {
+  cards: InitiativeBoardCardDto[];
+  canManage: boolean;
+  columns: InitiativeBoardColumnDto[];
+  initiativeId: string;
+  onChanged: () => Promise<void> | void;
+};
+
+export function InitiativeBoardSection({
+  cards,
+  canManage,
+  columns,
+  initiativeId,
+  onChanged,
+}: InitiativeBoardSectionProps) {
+  const [title, setTitle] = useState("");
+  const [body, setBody] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [updatingCardId, setUpdatingCardId] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const sortedColumns = useMemo(
+    () => [...columns].sort((a, b) => a.sortOrder - b.sortOrder),
+    [columns],
+  );
+
+  async function submitCard(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const trimmedTitle = title.trim();
+    if (!trimmedTitle) return;
+    setSubmitting(true);
+    setError(null);
+    try {
+      await apiInitiativeBoardCardCreate({
+        initiativeId,
+        title: trimmedTitle,
+        body: body.trim(),
+      });
+      setTitle("");
+      setBody("");
+      await onChanged();
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  async function moveCard(
+    cardId: string,
+    status: InitiativeBoardCardDto["status"],
+  ) {
+    setUpdatingCardId(cardId);
+    setError(null);
+    try {
+      await apiInitiativeBoardCardUpdate({
+        initiativeId,
+        cardId,
+        status,
+      });
+      await onChanged();
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setUpdatingCardId(null);
+    }
+  }
+
+  return (
+    <GlassySection title="Board">
+      {canManage ? (
+        <form
+          className="mb-4 grid gap-3 lg:grid-cols-[1fr_2fr_auto]"
+          onSubmit={submitCard}
+        >
+          <Input
+            value={title}
+            onChange={(event) => setTitle(event.target.value)}
+            placeholder="Card title"
+            aria-label="Initiative board card title"
+          />
+          <Textarea
+            value={body}
+            onChange={(event) => setBody(event.target.value)}
+            placeholder="Work note"
+            aria-label="Initiative board card note"
+            className="min-h-10 lg:min-h-10"
+          />
+          <Button
+            type="submit"
+            size="sm"
+            disabled={submitting || !title.trim()}
+          >
+            Add card
+          </Button>
+          {error ? (
+            <p className="text-sm text-destructive lg:col-span-3">{error}</p>
+          ) : null}
+        </form>
+      ) : null}
+
+      {cards.length === 0 ? (
+        <NoDataYetBar
+          label="board cards"
+          description="Admins and stewards can add the first work item."
+        />
+      ) : (
+        <div className="grid gap-3 xl:grid-cols-5">
+          {sortedColumns.map((column) => {
+            const columnCards = initiativeCardsForColumn(cards, column);
+
+            return (
+              <div
+                key={column.id}
+                className="rounded-2xl border border-[color:var(--surface-glass-border)] bg-[color:var(--surface-glass-bg)] p-3"
+              >
+                <div className="mb-3 flex items-center justify-between gap-2">
+                  <h3 className="text-sm font-semibold text-text">
+                    {column.title}
+                  </h3>
+                  <span className="text-xs text-muted">
+                    {columnCards.length}
+                  </span>
+                </div>
+                <div className="space-y-2">
+                  {columnCards.length === 0 ? (
+                    <p className="rounded-xl border border-dashed border-[color:var(--surface-glass-border)] px-3 py-4 text-center text-xs text-muted">
+                      Empty
+                    </p>
+                  ) : (
+                    columnCards.map((card) => (
+                      <article
+                        key={card.id}
+                        className="rounded-xl border border-[color:var(--surface-glass-border)] bg-[color:var(--panel)] p-3 text-sm shadow-[var(--shadow-control)]"
+                      >
+                        <div className="flex items-start justify-between gap-2">
+                          <h4 className="font-semibold text-text">
+                            {card.title}
+                          </h4>
+                          <GlassyStatusChip tone="neutral">
+                            {initiativeBoardStatusLabel[card.status]}
+                          </GlassyStatusChip>
+                        </div>
+                        {card.body ? (
+                          <p className="mt-2 leading-relaxed text-muted">
+                            {card.body}
+                          </p>
+                        ) : null}
+                        <div className="mt-3 flex flex-wrap justify-between gap-2 text-xs text-muted">
+                          <span>
+                            {card.ownerAddress
+                              ? shortAddress(card.ownerAddress)
+                              : "Unassigned"}
+                          </span>
+                          <span>{formatDateTime(card.updatedAt)}</span>
+                        </div>
+                        {canManage ? (
+                          <Select
+                            className="mt-3 h-8 text-xs"
+                            aria-label={`Move ${card.title}`}
+                            value={card.status}
+                            disabled={updatingCardId === card.id}
+                            onChange={(event) =>
+                              void moveCard(
+                                card.id,
+                                event.target
+                                  .value as InitiativeBoardCardDto["status"],
+                              )
+                            }
+                          >
+                            {sortedColumns.map((targetColumn) => (
+                              <option
+                                key={targetColumn.key}
+                                value={targetColumn.key}
+                              >
+                                {targetColumn.title}
+                              </option>
+                            ))}
+                          </Select>
+                        ) : null}
+                      </article>
+                    ))
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </GlassySection>
+  );
+}
diff --git a/src/pages/initiatives/components/InitiativeCard.tsx b/src/pages/initiatives/components/InitiativeCard.tsx
new file mode 100644
index 0000000..e8d3982
--- /dev/null
+++ b/src/pages/initiatives/components/InitiativeCard.tsx
@@ -0,0 +1,83 @@
+import { Link } from "react-router";
+
+import { Chip } from "@/components/Chip";
+import { GlassyCard } from "@/components/GlassyCard";
+import { GlassyStatusChip } from "@/components/GlassySection";
+import { Button } from "@/components/primitives/button";
+import { formatDateTime } from "@/lib/dateTime";
+import {
+  initiativeStatusLabel,
+  initiativeStatusTone,
+  initiativeSummaryPreview,
+} from "@/lib/initiativeUi";
+import { shortAddress } from "@/lib/profileUi";
+import type { InitiativeDto } from "@/types/api";
+
+type InitiativeCardProps = {
+  initiative: InitiativeDto;
+};
+
+export function InitiativeCard({ initiative }: InitiativeCardProps) {
+  const boardCount =
+    initiative.boardCardCount ?? initiative.boardCards?.length ?? 0;
+  const threadCount = initiative.threadCount ?? initiative.threads?.length ?? 0;
+  const proposalCount =
+    initiative.proposalCount ?? initiative.proposals?.length ?? 0;
+
+  return (
+    <GlassyCard as="article" className="flex h-full flex-col p-5">
+      <div className="flex items-start justify-between gap-3">
+        <div className="min-w-0 space-y-2">
+          <h2 className="text-lg leading-tight font-semibold text-text">
+            {initiative.title}
+          </h2>
+          <p className="text-sm leading-relaxed text-muted">
+            {initiativeSummaryPreview(initiative.summary)}
+          </p>
+        </div>
+        <GlassyStatusChip tone={initiativeStatusTone(initiative.status)}>
+          {initiativeStatusLabel[initiative.status]}
+        </GlassyStatusChip>
+      </div>
+
+      <div className="mt-4 flex flex-wrap gap-2">
+        {initiative.tags.slice(0, 4).map((tag) => (
+          <Chip key={tag} className="stage-chip stage-chip--system">
+            {tag}
+          </Chip>
+        ))}
+      </div>
+
+      <dl className="mt-5 grid grid-cols-2 gap-2 text-sm sm:grid-cols-4">
+        <Metric label="Members" value={initiative.memberCount} />
+        <Metric label="Board" value={boardCount} />
+        <Metric label="Threads" value={threadCount} />
+        <Metric label="Proposals" value={proposalCount} />
+      </dl>
+
+      <div className="mt-5 flex flex-wrap items-center justify-between gap-3 border-t border-[color:var(--surface-glass-border)] pt-4 text-xs text-muted">
+        <span>Created by {shortAddress(initiative.createdByAddress)}</span>
+        <span>Updated {formatDateTime(initiative.updatedAt)}</span>
+      </div>
+
+      <Button asChild size="sm" className="mt-4 w-full">
+        <Link to={`/app/initiatives/${initiative.slug || initiative.id}`}>
+          Open initiative
+        </Link>
+      </Button>
+    </GlassyCard>
+  );
+}
+
+function Metric({ label, value }: { label: string; value: number | string }) {
+  return (
+    <div className="rounded-xl border border-[color:var(--surface-glass-border)] bg-[color:var(--surface-glass-bg)] px-3 py-2 text-center">
+      <dt className="text-[0.68rem] leading-none font-semibold tracking-wide text-muted uppercase">
+        {label}
+      </dt>
+      <dd className="mt-1 text-base leading-none font-semibold text-text">
+        {value}
+      </dd>
+    </div>
+  );
+}
diff --git a/src/pages/initiatives/components/InitiativeChatSection.tsx b/src/pages/initiatives/components/InitiativeChatSection.tsx
new file mode 100644
index 0000000..7801a6b
--- /dev/null
+++ b/src/pages/initiatives/components/InitiativeChatSection.tsx
@@ -0,0 +1,90 @@
+import type { FormEvent } from "react";
+import { useState } from "react";
+
+import { NoDataYetBar } from "@/components/NoDataYetBar";
+import { GlassySection } from "@/components/GlassySection";
+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";
+import type { InitiativeThreadMessageDto } from "@/types/api";
+
+type InitiativeChatSectionProps = {
+  canPost: boolean;
+  initiativeId: string;
+  messages: InitiativeThreadMessageDto[];
+  onChanged: () => Promise<void> | void;
+};
+
+export function InitiativeChatSection({
+  canPost,
+  initiativeId,
+  messages,
+  onChanged,
+}: InitiativeChatSectionProps) {
+  const [body, setBody] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function postMessage(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const message = body.trim();
+    if (!message) return;
+    setSubmitting(true);
+    setError(null);
+    try {
+      await apiInitiativeChatPost({ initiativeId, body: message });
+      setBody("");
+      await onChanged();
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  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"
+            >
+              <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>
+          ))
+        )}
+      </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/src/pages/initiatives/components/InitiativeMembersSection.tsx b/src/pages/initiatives/components/InitiativeMembersSection.tsx
new file mode 100644
index 0000000..27812ff
--- /dev/null
+++ b/src/pages/initiatives/components/InitiativeMembersSection.tsx
@@ -0,0 +1,124 @@
+import type { FormEvent } from "react";
+import { useState } from "react";
+import { Link } from "react-router";
+
+import { NoDataYetBar } from "@/components/NoDataYetBar";
+import { GlassySection, GlassyStatusChip } from "@/components/GlassySection";
+import { Button } from "@/components/primitives/button";
+import { Input } from "@/components/primitives/input";
+import { Select } from "@/components/primitives/select";
+import { apiInitiativeMemberRoleSet } from "@/lib/apiClient";
+import { formatDateTime } from "@/lib/dateTime";
+import { initiativeRoleLabel } from "@/lib/initiativeUi";
+import { shortAddress } from "@/lib/profileUi";
+import type { InitiativeMembershipDto, InitiativeRoleDto } from "@/types/api";
+
+type InitiativeMembersSectionProps = {
+  canAdmin: boolean;
+  initiativeId: string;
+  memberships: InitiativeMembershipDto[];
+  onChanged: () => Promise<void> | void;
+};
+
+export function InitiativeMembersSection({
+  canAdmin,
+  initiativeId,
+  memberships,
+  onChanged,
+}: InitiativeMembersSectionProps) {
+  const [address, setAddress] = useState("");
+  const [role, setRole] = useState<InitiativeRoleDto>("member");
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function setMemberRole(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const targetAddress = address.trim();
+    if (!targetAddress) return;
+    setSubmitting(true);
+    setError(null);
+    try {
+      await apiInitiativeMemberRoleSet({
+        initiativeId,
+        address: targetAddress,
+        role,
+      });
+      setAddress("");
+      setRole("member");
+      await onChanged();
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <GlassySection title="Members">
+      {canAdmin ? (
+        <form
+          className="mb-4 grid gap-3 md:grid-cols-[minmax(0,1fr)_10rem_auto]"
+          onSubmit={setMemberRole}
+        >
+          <Input
+            value={address}
+            onChange={(event) => setAddress(event.target.value)}
+            placeholder="Human Node address"
+            aria-label="Initiative member address"
+          />
+          <Select
+            value={role}
+            onChange={(event) =>
+              setRole(event.target.value as InitiativeRoleDto)
+            }
+            aria-label="Initiative member role"
+          >
+            {Object.entries(initiativeRoleLabel).map(([value, label]) => (
+              <option key={value} value={value}>
+                {label}
+              </option>
+            ))}
+          </Select>
+          <Button
+            type="submit"
+            size="sm"
+            disabled={submitting || !address.trim()}
+          >
+            Set role
+          </Button>
+          {error ? (
+            <p className="text-sm text-destructive md:col-span-3">{error}</p>
+          ) : null}
+        </form>
+      ) : null}
+
+      {memberships.length === 0 ? (
+        <NoDataYetBar label="initiative members" />
+      ) : (
+        <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+          {memberships.map((membership) => (
+            <article
+              key={membership.address}
+              className="rounded-2xl border border-[color:var(--surface-glass-border)] bg-[color:var(--surface-glass-bg)] p-4 shadow-[var(--shadow-tile)]"
+            >
+              <div className="flex items-start justify-between gap-3">
+                <Link
+                  to={`/app/human-nodes/${membership.address}`}
+                  className="min-w-0 text-sm font-semibold text-text underline-offset-4 hover:underline"
+                >
+                  {shortAddress(membership.address, 6)}
+                </Link>
+                <GlassyStatusChip tone={membership.isActive ? "ok" : "neutral"}>
+                  {initiativeRoleLabel[membership.role]}
+                </GlassyStatusChip>
+              </div>
+              <p className="mt-2 text-xs text-muted">
+                Joined {formatDateTime(membership.joinedAt)}
+              </p>
+            </article>
+          ))}
+        </div>
+      )}
+    </GlassySection>
+  );
+}
diff --git a/src/pages/initiatives/components/InitiativeProposalsSection.tsx b/src/pages/initiatives/components/InitiativeProposalsSection.tsx
new file mode 100644
index 0000000..68c4026
--- /dev/null
+++ b/src/pages/initiatives/components/InitiativeProposalsSection.tsx
@@ -0,0 +1,42 @@
+import { Link } from "react-router";
+
+import { NoDataYetBar } from "@/components/NoDataYetBar";
+import { GlassySection } from "@/components/GlassySection";
+import { StageChip } from "@/components/StageChip";
+import type { InitiativeProposalLinkDto } from "@/types/api";
+
+type InitiativeProposalsSectionProps = {
+  proposals: InitiativeProposalLinkDto[];
+};
+
+export function InitiativeProposalsSection({
+  proposals,
+}: InitiativeProposalsSectionProps) {
+  return (
+    <GlassySection title="Associated proposals">
+      {proposals.length === 0 ? (
+        <NoDataYetBar
+          label="associated proposals"
+          description="When an initiative admin or steward creates a proposal from an initiative, it should appear here as provenance."
+        />
+      ) : (
+        <div className="grid gap-3 lg:grid-cols-2">
+          {proposals.map((proposal) => (
+            <Link
+              key={proposal.proposalId}
+              to={proposal.href}
+              className="rounded-2xl border border-[color:var(--surface-glass-border)] bg-[color:var(--surface-glass-bg)] p-4 shadow-[var(--shadow-tile)] transition hover:border-[color:var(--surface-glass-hover-border)]"
+            >
+              <div className="flex items-start justify-between gap-3">
+                <h3 className="text-sm font-semibold text-text">
+                  {proposal.title}
+                </h3>
+                <StageChip stage={proposal.stage} />
+              </div>
+            </Link>
+          ))}
+        </div>
+      )}
+    </GlassySection>
+  );
+}
diff --git a/src/pages/initiatives/components/InitiativeSettingsSection.tsx b/src/pages/initiatives/components/InitiativeSettingsSection.tsx
new file mode 100644
index 0000000..4c9b5c7
--- /dev/null
+++ b/src/pages/initiatives/components/InitiativeSettingsSection.tsx
@@ -0,0 +1,123 @@
+import type { FormEvent } from "react";
+import { useEffect, useState } from "react";
+
+import { GlassySection } from "@/components/GlassySection";
+import { Textarea } from "@/components/Textarea";
+import { Button } from "@/components/primitives/button";
+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";
+
+type InitiativeSettingsSectionProps = {
+  initiative: InitiativeDto;
+  onChanged: () => Promise<void> | void;
+};
+
+export function InitiativeSettingsSection({
+  initiative,
+  onChanged,
+}: 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 [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const archivedReadOnly =
+    initiative.status === "archived" && status !== "active";
+
+  useEffect(() => {
+    setTitle(initiative.title);
+    setSummary(initiative.summary);
+    setDescription(initiative.description);
+    setTags(initiative.tags.join(", "));
+    setStatus(initiative.status);
+  }, [initiative]);
+
+  async function updateInitiative(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (!title.trim() || !summary.trim()) return;
+    setSubmitting(true);
+    setError(null);
+    try {
+      await apiInitiativeUpdate({
+        initiativeId: initiative.id,
+        title: title.trim(),
+        summary: summary.trim(),
+        description: description.trim(),
+        tags: parseInitiativeTags(tags),
+        status,
+      });
+      await onChanged();
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <GlassySection title="Settings">
+      <form className="grid gap-3" onSubmit={updateInitiative}>
+        <div className="grid gap-3 md:grid-cols-2">
+          <Input
+            disabled={archivedReadOnly}
+            value={title}
+            onChange={(event) => setTitle(event.target.value)}
+            placeholder="Initiative title"
+            aria-label="Initiative title"
+          />
+          <Input
+            disabled={archivedReadOnly}
+            value={summary}
+            onChange={(event) => setSummary(event.target.value)}
+            placeholder="Initiative summary"
+            aria-label="Initiative summary"
+          />
+        </div>
+        <Textarea
+          disabled={archivedReadOnly}
+          value={description}
+          onChange={(event) => setDescription(event.target.value)}
+          placeholder="Initiative description"
+          aria-label="Initiative description"
+        />
+        <div className="grid gap-3 md:grid-cols-[minmax(0,1fr)_12rem_auto]">
+          <Input
+            disabled={archivedReadOnly}
+            value={tags}
+            onChange={(event) => setTags(event.target.value)}
+            placeholder="Comma-separated tags"
+            aria-label="Initiative tags"
+          />
+          <Select
+            value={status}
+            onChange={(event) =>
+              setStatus(event.target.value as InitiativeStatusDto)
+            }
+            aria-label="Initiative status"
+          >
+            {Object.entries(initiativeStatusLabel).map(([value, label]) => (
+              <option key={value} value={value}>
+                {label}
+              </option>
+            ))}
+          </Select>
+          <Button
+            type="submit"
+            size="sm"
+            disabled={
+              submitting || archivedReadOnly || !title.trim() || !summary.trim()
+            }
+          >
+            Save
+          </Button>
+        </div>
+        {error ? <p className="text-sm text-destructive">{error}</p> : null}
+      </form>
+    </GlassySection>
+  );
+}
diff --git a/src/pages/initiatives/components/InitiativeThreadsSection.tsx b/src/pages/initiatives/components/InitiativeThreadsSection.tsx
new file mode 100644
index 0000000..a490341
--- /dev/null
+++ b/src/pages/initiatives/components/InitiativeThreadsSection.tsx
@@ -0,0 +1,255 @@
+import type { FormEvent } from "react";
+import { useState } from "react";
+
+import { NoDataYetBar } from "@/components/NoDataYetBar";
+import { GlassySection, GlassyStatusChip } from "@/components/GlassySection";
+import { Textarea } from "@/components/Textarea";
+import { Button } from "@/components/primitives/button";
+import { Input } from "@/components/primitives/input";
+import {
+  apiInitiativeThreadCreate,
+  apiInitiativeThreadReply,
+  apiInitiativeThreadTransition,
+} from "@/lib/apiClient";
+import { formatDateTime } from "@/lib/dateTime";
+import {
+  initiativeThreadStatusLabel,
+  initiativeThreadStatusTone,
+} from "@/lib/initiativeUi";
+import { shortAddress } from "@/lib/profileUi";
+import type { InitiativeThreadDto } from "@/types/api";
+
+type InitiativeThreadsSectionProps = {
+  canModerate: boolean;
+  canPost: boolean;
+  initiativeId: string;
+  onChanged: () => Promise<void> | void;
+  threads: InitiativeThreadDto[];
+};
+
+export function InitiativeThreadsSection({
+  canModerate,
+  canPost,
+  initiativeId,
+  onChanged,
+  threads,
+}: InitiativeThreadsSectionProps) {
+  const [title, setTitle] = useState("");
+  const [body, setBody] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [replyByThread, setReplyByThread] = useState<Record<string, string>>(
+    {},
+  );
+  const [busyThreadId, setBusyThreadId] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  async function submitThread(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const trimmedTitle = title.trim();
+    const trimmedBody = body.trim();
+    if (!trimmedTitle || !trimmedBody) return;
+    setSubmitting(true);
+    setError(null);
+    try {
+      await apiInitiativeThreadCreate({
+        initiativeId,
+        title: trimmedTitle,
+        body: trimmedBody,
+      });
+      setTitle("");
+      setBody("");
+      await onChanged();
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  async function replyToThread(threadId: string) {
+    const body = replyByThread[threadId]?.trim();
+    if (!body) return;
+    setBusyThreadId(threadId);
+    setError(null);
+    try {
+      await apiInitiativeThreadReply({ initiativeId, threadId, body });
+      setReplyByThread((current) => ({ ...current, [threadId]: "" }));
+      await onChanged();
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setBusyThreadId(null);
+    }
+  }
+
+  async function transitionThread(
+    threadId: string,
+    status: InitiativeThreadDto["status"],
+  ) {
+    setBusyThreadId(threadId);
+    setError(null);
+    try {
+      await apiInitiativeThreadTransition({
+        initiativeId,
+        threadId,
+        status,
+      });
+      await onChanged();
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setBusyThreadId(null);
+    }
+  }
+
+  return (
+    <GlassySection title="Threads">
+      {canPost ? (
+        <form className="mb-4 grid gap-3" onSubmit={submitThread}>
+          <Input
+            value={title}
+            onChange={(event) => setTitle(event.target.value)}
+            placeholder="Thread title"
+            aria-label="Initiative thread title"
+          />
+          <Textarea
+            value={body}
+            onChange={(event) => setBody(event.target.value)}
+            placeholder="Start a thread"
+            aria-label="Initiative thread body"
+          />
+          <div className="flex justify-end">
+            <Button
+              type="submit"
+              size="sm"
+              disabled={submitting || !title.trim() || !body.trim()}
+            >
+              Start thread
+            </Button>
+          </div>
+          {error ? <p className="text-sm text-destructive">{error}</p> : null}
+        </form>
+      ) : null}
+
+      {threads.length === 0 ? (
+        <NoDataYetBar
+          label="threads"
+          description="Initiative members can start the first durable discussion."
+        />
+      ) : (
+        <div className="grid gap-3 lg:grid-cols-2">
+          {threads.map((thread) => (
+            <article
+              key={thread.id}
+              className="rounded-2xl border border-[color:var(--surface-glass-border)] bg-[color:var(--surface-glass-bg)] p-4 shadow-[var(--shadow-tile)]"
+            >
+              <div className="flex items-start justify-between gap-3">
+                <div className="min-w-0">
+                  <h3 className="text-base leading-tight font-semibold text-text">
+                    {thread.title}
+                  </h3>
+                  <p className="mt-1 text-xs text-muted">
+                    {shortAddress(thread.authorAddress)} ·{" "}
+                    {formatDateTime(thread.updatedAt)}
+                  </p>
+                </div>
+                <GlassyStatusChip
+                  tone={initiativeThreadStatusTone(thread.status)}
+                >
+                  {initiativeThreadStatusLabel[thread.status]}
+                </GlassyStatusChip>
+              </div>
+              <p className="mt-3 text-sm leading-relaxed text-muted">
+                {thread.body}
+              </p>
+              <p className="mt-3 text-xs font-semibold text-muted">
+                {thread.replies} replies
+              </p>
+              {thread.messages?.length ? (
+                <div className="mt-3 space-y-2 border-t border-[color:var(--surface-glass-border)] pt-3">
+                  {thread.messages.map((message) => (
+                    <div
+                      key={message.id}
+                      className="rounded-xl bg-[color:var(--surface-glass-bg)] px-3 py-2"
+                    >
+                      <p className="text-xs font-semibold text-text">
+                        {shortAddress(message.authorAddress)}
+                      </p>
+                      <p className="mt-1 text-sm leading-relaxed text-muted">
+                        {message.body}
+                      </p>
+                    </div>
+                  ))}
+                </div>
+              ) : null}
+              {canPost && thread.status !== "locked" ? (
+                <div className="mt-3 flex gap-2">
+                  <Input
+                    value={replyByThread[thread.id] ?? ""}
+                    onChange={(event) =>
+                      setReplyByThread((current) => ({
+                        ...current,
+                        [thread.id]: event.target.value,
+                      }))
+                    }
+                    placeholder="Reply"
+                    aria-label={`Reply to ${thread.title}`}
+                  />
+                  <Button
+                    type="button"
+                    size="sm"
+                    disabled={
+                      busyThreadId === thread.id ||
+                      !(replyByThread[thread.id] ?? "").trim()
+                    }
+                    onClick={() => void replyToThread(thread.id)}
+                  >
+                    Reply
+                  </Button>
+                </div>
+              ) : null}
+              {canModerate ? (
+                <div className="mt-3 flex flex-wrap gap-2">
+                  {thread.status !== "open" ? (
+                    <Button
+                      type="button"
+                      size="sm"
+                      variant="ghost"
+                      disabled={busyThreadId === thread.id}
+                      onClick={() => void transitionThread(thread.id, "open")}
+                    >
+                      Reopen
+                    </Button>
+                  ) : (
+                    <Button
+                      type="button"
+                      size="sm"
+                      variant="ghost"
+                      disabled={busyThreadId === thread.id}
+                      onClick={() =>
+                        void transitionThread(thread.id, "resolved")
+                      }
+                    >
+                      Resolve
+                    </Button>
+                  )}
+                  {thread.status !== "locked" ? (
+                    <Button
+                      type="button"
+                      size="sm"
+                      variant="ghost"
+                      disabled={busyThreadId === thread.id}
+                      onClick={() => void transitionThread(thread.id, "locked")}
+                    >
+                      Lock
+                    </Button>
+                  ) : null}
+                </div>
+              ) : null}
+            </article>
+          ))}
+        </div>
+      )}
+    </GlassySection>
+  );
+}
diff --git a/src/pages/proposals/ProposalCreation.tsx b/src/pages/proposals/ProposalCreation.tsx
index 24d302e..1a5cd09 100644
--- a/src/pages/proposals/ProposalCreation.tsx
+++ b/src/pages/proposals/ProposalCreation.tsx
@@ -1,9 +1,10 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useNavigate, useSearchParams } from "react-router";
 import { PageHint } from "@/components/PageHint";
 import { SIM_AUTH_ENABLED } from "@/lib/featureFlags";
 import { useAuth } from "@/app/auth/AuthContext";
 import { formatProposalSubmitError } from "@/lib/proposalSubmitErrors";
+import { initiativeOptionsWithSelection } from "@/lib/initiativeUi";
 import { toTimestampMs } from "@/lib/dateTime";
 import {
   apiProposalDraftDelete,
@@ -63,11 +64,16 @@ const ProposalCreation: React.FC = () => {
   const [saveError, setSaveError] = useState<string | null>(null);
   const [submitting, setSubmitting] = useState(false);
   const [submitError, setSubmitError] = useState<string | null>(null);
-  const { chamberOptions, chambers, tierProgress } =
-    useProposalCreationReferenceData({
-      authEnabled: auth.enabled,
-      authenticated: auth.authenticated,
-    });
+  const {
+    chamberOptions,
+    chambers,
+    initiativeOptions,
+    initiatives,
+    tierProgress,
+  } = useProposalCreationReferenceData({
+    authEnabled: auth.enabled,
+    authenticated: auth.authenticated,
+  });
   const requestedDraftId = (searchParams.get("draftId") ?? "").trim();
   const requestedResubmitsProposalId = (
     searchParams.get("resubmitsProposalId") ?? ""
@@ -133,6 +139,23 @@ const ProposalCreation: React.FC = () => {
 
   const step: StepKey = desiredStep;
 
+  const selectedInitiative = useMemo(() => {
+    if (!draft.initiativeId) return null;
+    const initiative = initiatives.find(
+      (item) => item.id === draft.initiativeId,
+    );
+    return initiative
+      ? { id: initiative.id, title: initiative.title }
+      : {
+          id: draft.initiativeId,
+          title: "Unavailable or no longer managed",
+        };
+  }, [draft.initiativeId, initiatives]);
+  const visibleInitiativeOptions = useMemo(
+    () => initiativeOptionsWithSelection(initiativeOptions, draft.initiativeId),
+    [draft.initiativeId, initiativeOptions],
+  );
+
   useEffect(() => {
     if (requestedDraftId) return;
     setDraft((prev) => {
@@ -319,6 +342,7 @@ const ProposalCreation: React.FC = () => {
         currentTier={currentTier}
         draft={draft}
         guardedComputed={guardedComputed}
+        initiativeOptions={visibleInitiativeOptions}
         loadDraftError={loadDraftError}
         loadingDraftId={loadingDraftId}
         onBack={onBack}
@@ -335,6 +359,7 @@ const ProposalCreation: React.FC = () => {
         requiredTier={requiredTier}
         saveError={saveError}
         selectedChamber={selectedChamber}
+        selectedInitiative={selectedInitiative}
         setDraft={setDraft}
         step={step}
         submitDisabled={submitDisabled}
diff --git a/src/pages/proposals/list/ProposalListCard.tsx b/src/pages/proposals/list/ProposalListCard.tsx
index 34138d5..047d75b 100644
--- a/src/pages/proposals/list/ProposalListCard.tsx
+++ b/src/pages/proposals/list/ProposalListCard.tsx
@@ -81,6 +81,11 @@ export function ProposalListCard({
 
   return (
     <GlassyRecordCard
+      association={
+        proposal.initiative
+          ? `Initiative · ${proposal.initiative.title}`
+          : undefined
+      }
       expanded={expanded}
       onToggle={onToggle}
       rail={expanded ? "action" : "idle"}
diff --git a/src/pages/proposals/proposalCreation/ProposalCreationStepCard.tsx b/src/pages/proposals/proposalCreation/ProposalCreationStepCard.tsx
index c1b6947..1ca39a1 100644
--- a/src/pages/proposals/proposalCreation/ProposalCreationStepCard.tsx
+++ b/src/pages/proposals/proposalCreation/ProposalCreationStepCard.tsx
@@ -22,6 +22,7 @@ type ProposalCreationStepCardProps = {
   currentTier: string | null;
   draft: ProposalDraftForm;
   guardedComputed: WizardComputed;
+  initiativeOptions: Array<{ value: string; label: string }>;
   loadDraftError: string | null;
   loadingDraftId: string | null;
   onBack: () => void;
@@ -33,6 +34,7 @@ type ProposalCreationStepCardProps = {
   requiredTier: string;
   saveError: string | null;
   selectedChamber: ChamberDto | null;
+  selectedInitiative?: { id: string; title: string } | null;
   setDraft: React.Dispatch<React.SetStateAction<ProposalDraftForm>>;
   step: StepKey;
   submitDisabled: boolean;
@@ -57,6 +59,7 @@ export function ProposalCreationStepCard({
   currentTier,
   draft,
   guardedComputed,
+  initiativeOptions,
   loadDraftError,
   loadingDraftId,
   onBack,
@@ -70,6 +73,7 @@ export function ProposalCreationStepCard({
   requiredTier,
   saveError,
   selectedChamber,
+  selectedInitiative,
   setDraft,
   step,
   submitDisabled,
@@ -109,6 +113,7 @@ export function ProposalCreationStepCard({
             attemptedNext={attemptedNext}
             chamberOptions={chamberOptions}
             draft={draft}
+            initiativeOptions={initiativeOptions}
             setDraft={setDraft}
             templateId={templateKind}
             onTemplateChange={onTemplateChange}
@@ -154,6 +159,7 @@ export function ProposalCreationStepCard({
             mode={template.id}
             proposerAddress={proposerAddress}
             selectedChamber={selectedChamber}
+            selectedInitiative={selectedInitiative}
             setDraft={setDraft}
             textareaClassName={textareaClassName}
           />
diff --git a/src/pages/proposals/proposalCreation/steps/EssentialsStep.tsx b/src/pages/proposals/proposalCreation/steps/EssentialsStep.tsx
index 18c33b4..694940b 100644
--- a/src/pages/proposals/proposalCreation/steps/EssentialsStep.tsx
+++ b/src/pages/proposals/proposalCreation/steps/EssentialsStep.tsx
@@ -61,6 +61,7 @@ export function EssentialsStep(props: {
   attemptedNext: boolean;
   chamberOptions: { value: string; label: string }[];
   draft: ProposalDraftForm;
+  initiativeOptions: { value: string; label: string }[];
   setDraft: React.Dispatch<React.SetStateAction<ProposalDraftForm>>;
   templateId: "project" | "system";
   onTemplateChange: (templateId: "project" | "system") => void;
@@ -76,6 +77,7 @@ export function EssentialsStep(props: {
     attemptedNext,
     chamberOptions,
     draft,
+    initiativeOptions,
     setDraft,
     templateId,
     onTemplateChange,
@@ -481,6 +483,31 @@ export function EssentialsStep(props: {
         </div>
       </div>
 
+      <div className="space-y-2">
+        <Label htmlFor="proposal-initiative">Initiative association</Label>
+        <Select
+          id="proposal-initiative"
+          value={draft.initiativeId ?? ""}
+          onChange={(e) =>
+            setDraft((prev) => ({
+              ...prev,
+              initiativeId: e.target.value || undefined,
+            }))
+          }
+        >
+          <option value="">No initiative</option>
+          {initiativeOptions.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </Select>
+        <p className="text-xs text-muted">
+          Optional provenance tag. It does not change quorum, voting power, CM,
+          MM, chamber membership, or proposal lifecycle rules.
+        </p>
+      </div>
+
       {isSystemProposal ? (
         <div className="space-y-3 rounded-xl border border-border bg-panel-alt p-4">
           <p className="text-sm font-semibold text-text">System change</p>
diff --git a/src/pages/proposals/proposalCreation/steps/ReviewStep.tsx b/src/pages/proposals/proposalCreation/steps/ReviewStep.tsx
index be31a7e..c8e8685 100644
--- a/src/pages/proposals/proposalCreation/steps/ReviewStep.tsx
+++ b/src/pages/proposals/proposalCreation/steps/ReviewStep.tsx
@@ -27,6 +27,7 @@ export function ReviewStep(props: {
   mode: "project" | "system";
   proposerAddress: string | null;
   selectedChamber: ChamberDto | null;
+  selectedInitiative?: { id: string; title: string } | null;
   setDraft: React.Dispatch<React.SetStateAction<ProposalDraftForm>>;
   textareaClassName: string;
 }) {
@@ -39,6 +40,7 @@ export function ReviewStep(props: {
     mode,
     proposerAddress,
     selectedChamber,
+    selectedInitiative,
     setDraft,
     textareaClassName,
   } = props;
@@ -97,6 +99,11 @@ export function ReviewStep(props: {
             <p className="mt-1 text-xs text-muted">
               Proposal type: {proposalTypeLabel[draft.proposalType]}
             </p>
+            {selectedInitiative ? (
+              <p className="mt-1 text-xs text-muted">
+                Initiative: {selectedInitiative.title}
+              </p>
+            ) : null}
           </div>
           {mode === "system" ? (
             <>
diff --git a/src/pages/proposals/proposalCreation/toApiForm.ts b/src/pages/proposals/proposalCreation/toApiForm.ts
index bf72ad2..dc20802 100644
--- a/src/pages/proposals/proposalCreation/toApiForm.ts
+++ b/src/pages/proposals/proposalCreation/toApiForm.ts
@@ -32,6 +32,7 @@ export function draftToApiForm(
     ...(draft.resubmitsProposalId
       ? { resubmitsProposalId: draft.resubmitsProposalId }
       : {}),
+    ...(draft.initiativeId ? { initiativeId: draft.initiativeId } : {}),
     ...(typeof draft.formationEligible === "boolean"
       ? { formationEligible: draft.formationEligible }
       : {}),
diff --git a/src/pages/proposals/proposalCreation/types.ts b/src/pages/proposals/proposalCreation/types.ts
index 79c3a59..d791353 100644
--- a/src/pages/proposals/proposalCreation/types.ts
+++ b/src/pages/proposals/proposalCreation/types.ts
@@ -29,6 +29,7 @@ export type ProposalDraftForm = {
   title: string;
   chamberId: string;
   resubmitsProposalId?: string;
+  initiativeId?: string;
   summary: string;
   what: string;
   why: string;
@@ -69,6 +70,7 @@ export const DEFAULT_DRAFT: ProposalDraftForm = {
   title: "",
   chamberId: "",
   resubmitsProposalId: undefined,
+  initiativeId: undefined,
   summary: "",
   what: "",
   why: "",
diff --git a/src/pages/proposals/proposalCreation/useProposalCreationReferenceData.ts b/src/pages/proposals/proposalCreation/useProposalCreationReferenceData.ts
index 9e9fc41..0514d34 100644
--- a/src/pages/proposals/proposalCreation/useProposalCreationReferenceData.ts
+++ b/src/pages/proposals/proposalCreation/useProposalCreationReferenceData.ts
@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from "react";
 
-import { apiChambers, apiMyGovernance } from "@/lib/apiClient";
-import type { ChamberDto, TierProgressDto } from "@/types/api";
+import { apiChambers, apiInitiatives, apiMyGovernance } from "@/lib/apiClient";
+import type { ChamberDto, InitiativeDto, TierProgressDto } from "@/types/api";
 
 type UseProposalCreationReferenceDataInput = {
   authEnabled: boolean;
@@ -16,6 +16,7 @@ export function useProposalCreationReferenceData({
   const [tierProgress, setTierProgress] = useState<TierProgressDto | null>(
     null,
   );
+  const [initiatives, setInitiatives] = useState<InitiativeDto[]>([]);
 
   useEffect(() => {
     let active = true;
@@ -37,17 +38,30 @@ export function useProposalCreationReferenceData({
   useEffect(() => {
     if (!authEnabled || !authenticated) {
       setTierProgress(null);
+      setInitiatives([]);
       return;
     }
     let active = true;
     (async () => {
-      try {
-        const res = await apiMyGovernance();
-        if (!active) return;
-        setTierProgress(res.tier ?? null);
-      } catch {
-        if (!active) return;
-        setTierProgress(null);
+      const [governanceResult, initiativesResult] = await Promise.allSettled([
+        apiMyGovernance(),
+        apiInitiatives(),
+      ]);
+      if (!active) return;
+      setTierProgress(
+        governanceResult.status === "fulfilled"
+          ? (governanceResult.value.tier ?? null)
+          : null,
+      );
+      if (initiativesResult.status === "fulfilled") {
+        setInitiatives(
+          initiativesResult.value.items.filter(
+            (initiative) =>
+              initiative.status === "active" && initiative.viewerCanSteward,
+          ),
+        );
+      } else {
+        setInitiatives([]);
       }
     })();
     return () => {
@@ -62,9 +76,20 @@ export function useProposalCreationReferenceData({
       .map((chamber) => ({ value: chamber.id, label: chamber.name }));
   }, [chambers]);
 
+  const initiativeOptions = useMemo(() => {
+    return [...initiatives]
+      .sort((a, b) => a.title.localeCompare(b.title))
+      .map((initiative) => ({
+        value: initiative.id,
+        label: initiative.title,
+      }));
+  }, [initiatives]);
+
   return {
     chamberOptions,
     chambers,
+    initiativeOptions,
+    initiatives,
     tierProgress,
   };
 }
diff --git a/src/types/api.ts b/src/types/api.ts
index 529d38c..c620bf4 100644
--- a/src/types/api.ts
+++ b/src/types/api.ts
@@ -168,6 +168,102 @@ export type GetFactionsResponse = {
   };
 };
 
+export type InitiativeRoleDto = "admin" | "steward" | "member";
+export type InitiativeStatusDto = "active" | "paused" | "archived";
+export type InitiativeBoardCardStatusDto =
+  | "backlog"
+  | "doing"
+  | "proposal"
+  | "blocked"
+  | "done";
+export type InitiativeThreadStatusDto = "open" | "resolved" | "locked";
+export type InitiativeMembershipDto = {
+  address: string;
+  role: InitiativeRoleDto;
+  isActive: boolean;
+  joinedAt: string;
+};
+export type InitiativeBoardColumnDto = {
+  id: string;
+  key: InitiativeBoardCardStatusDto;
+  title: string;
+  sortOrder: number;
+};
+export type InitiativeBoardCardDto = {
+  id: string;
+  columnId: string;
+  title: string;
+  body: string;
+  status: InitiativeBoardCardStatusDto;
+  ownerAddress: string | null;
+  sortOrder: number;
+  createdAt: string;
+  updatedAt: string;
+};
+export type InitiativeThreadMessageDto = {
+  id: string;
+  authorAddress: string;
+  body: string;
+  createdAt: string;
+  updatedAt: string;
+};
+export type InitiativeReferenceDto = {
+  id: string;
+  title: string;
+};
+export type InitiativeThreadDto = {
+  id: string;
+  title: string;
+  body: string;
+  status: InitiativeThreadStatusDto;
+  authorAddress: string;
+  replies: number;
+  createdAt: string;
+  updatedAt: string;
+  messages?: InitiativeThreadMessageDto[];
+};
+export type InitiativeProposalLinkDto = {
+  proposalId: string;
+  title: string;
+  stage: ProposalStageDto;
+  href: string;
+};
+export type InitiativeDto = {
+  id: string;
+  slug: string;
+  title: string;
+  summary: string;
+  description: string;
+  status: InitiativeStatusDto;
+  tags: string[];
+  createdByAddress: string;
+  createdAt: string;
+  updatedAt: string;
+  admins: string[];
+  stewards: string[];
+  memberCount: number;
+  boardCardCount?: number;
+  threadCount?: number;
+  proposalCount?: number;
+  viewerRole?: InitiativeRoleDto | null;
+  viewerCanAdmin?: boolean;
+  viewerCanSteward?: boolean;
+  boardColumns?: InitiativeBoardColumnDto[];
+  boardCards?: InitiativeBoardCardDto[];
+  threads?: InitiativeThreadDto[];
+  chatMessages?: InitiativeThreadMessageDto[];
+  memberships?: InitiativeMembershipDto[];
+  proposals?: InitiativeProposalLinkDto[];
+};
+export type GetInitiativesResponse = {
+  items: InitiativeDto[];
+  totals?: {
+    active: number;
+    paused: number;
+    archived: number;
+  };
+};
+
 export type ChamberProposalStageDto = "upcoming" | "live" | "ended";
 export type ChamberProposalDto = {
   id: string;
@@ -515,6 +611,7 @@ export type ProposalListItemDto = {
   href?: string;
   ctaPrimary: string;
   ctaSecondary: string;
+  initiative?: InitiativeReferenceDto;
 };
 export type GetProposalsResponse = { items: ProposalListItemDto[] };
 
@@ -556,6 +653,7 @@ export type ProposalStatusDto = {
     | "ready_to_finish"
     | "completed";
   pendingMilestoneIndex?: number | null;
+  initiative?: InitiativeReferenceDto;
   updatedAt: string;
 };
 
@@ -1054,6 +1152,7 @@ export type FeedItemDto = {
   stats?: FeedStatDto[];
   proposer?: string;
   proposerId?: string;
+  initiative?: InitiativeReferenceDto;
   ctaPrimary?: string;
   ctaSecondary?: string;
   href?: string;
diff --git a/src/types/stages.ts b/src/types/stages.ts
index 4f74920..a97e6dc 100644
--- a/src/types/stages.ts
+++ b/src/types/stages.ts
@@ -21,6 +21,7 @@ export const feedStages = [
   "thread",
   "courts",
   "faction",
+  "initiative",
   "system",
 ] as const;
 
@@ -39,6 +40,7 @@ export type StageChipKind =
   | "thread"
   | "courts"
   | "faction"
+  | "initiative"
   | "system";
 
 export const stageToChipKind = {
@@ -52,6 +54,7 @@ export const stageToChipKind = {
   thread: "thread",
   courts: "courts",
   faction: "faction",
+  initiative: "initiative",
   system: "system",
 } as const satisfies Record<Stage, StageChipKind>;
 
@@ -66,6 +69,7 @@ export const stageLabel = {
   thread: "Thread",
   courts: "Courts",
   faction: "Faction",
+  initiative: "Initiative",
   system: "System",
 } as const satisfies Record<Stage, string>;
 
diff --git a/tests/api/api-client-runtime.test.js b/tests/api/api-client-runtime.test.js
index dd35cb9..7e0ba6a 100644
--- a/tests/api/api-client-runtime.test.js
+++ b/tests/api/api-client-runtime.test.js
@@ -3,6 +3,9 @@ import { test } from "@rstest/core";
 
 import {
   apiChambers,
+  apiInitiative,
+  apiInitiativeBoardCardUpdate,
+  apiInitiativeUpdate,
   apiPoolVote,
   apiProposals,
 } from "../../src/lib/apiClient.ts";
@@ -114,3 +117,33 @@ test("apiGet throws a structured error for non-2xx responses", async () => {
   global.fetch = originalFetch;
   global.window = originalWindow;
 });
+
+test("initiative client preserves explicit empty edits and encodes detail ids", 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 apiInitiativeUpdate({
+    initiativeId: "initiative-1",
+    description: "",
+  });
+  await apiInitiativeBoardCardUpdate({
+    initiativeId: "initiative-1",
+    cardId: "card-1",
+    body: "",
+  });
+  await apiInitiative("initiative/with spaces");
+
+  assert.equal(JSON.parse(calls[0].init.body).payload.description, "");
+  assert.equal(JSON.parse(calls[1].init.body).payload.body, "");
+  assert.equal(calls[2].input, "/api/initiatives/initiative%2Fwith%20spaces");
+
+  global.fetch = originalFetch;
+});
diff --git a/tests/api/cross-repo-contract.test.js b/tests/api/cross-repo-contract.test.js
index d944fcb..804d3ee 100644
--- a/tests/api/cross-repo-contract.test.js
+++ b/tests/api/cross-repo-contract.test.js
@@ -50,6 +50,7 @@ const resourceFilesByRouter = {
   health: "api/resources/health.ts",
   humans: "api/resources/humans.ts",
   invision: "api/resources/invision.ts",
+  initiatives: "api/resources/initiatives.ts",
   myGovernance: "api/resources/myGovernance.ts",
   proposals: "api/resources/proposals.ts",
 };
diff --git a/tests/unit/initiative-ui.test.ts b/tests/unit/initiative-ui.test.ts
new file mode 100644
index 0000000..8273fa9
--- /dev/null
+++ b/tests/unit/initiative-ui.test.ts
@@ -0,0 +1,72 @@
+import { expect, test } from "@rstest/core";
+
+import {
+  initiativeCardsForColumn,
+  initiativeOptionsWithSelection,
+  parseInitiativeTags,
+} from "../../src/lib/initiativeUi";
+import type {
+  InitiativeBoardCardDto,
+  InitiativeBoardColumnDto,
+} from "../../src/types/api";
+
+const column: InitiativeBoardColumnDto = {
+  id: "doing",
+  key: "doing",
+  title: "In progress",
+  sortOrder: 1,
+};
+
+const card: InitiativeBoardCardDto = {
+  id: "card-1",
+  columnId: "doing",
+  title: "Map contributor pathway",
+  body: "",
+  status: "doing",
+  ownerAddress: null,
+  sortOrder: 0,
+  createdAt: "2026-06-29T10:00:00.000Z",
+  updatedAt: "2026-06-29T10:00:00.000Z",
+};
+
+test("initiative board returns a card once when column id and key match", () => {
+  expect(initiativeCardsForColumn([card], column)).toEqual([card]);
+});
+
+test("initiative board accepts status-key fallback for legacy card columns", () => {
+  const legacyCard = { ...card, columnId: "" };
+  expect(initiativeCardsForColumn([legacyCard], column)).toEqual([legacyCard]);
+});
+
+test("initiative board uses creation time as a stable sort-order tie break", () => {
+  const laterCard = {
+    ...card,
+    id: "card-2",
+    createdAt: "2026-06-29T11:00:00.000Z",
+  };
+  expect(initiativeCardsForColumn([laterCard, card], column)).toEqual([
+    card,
+    laterCard,
+  ]);
+});
+
+test("proposal drafts retain an Initiative selection that is no longer available", () => {
+  expect(
+    initiativeOptionsWithSelection(
+      [{ value: "initiative-1", label: "First" }],
+      "initiative-2",
+    ),
+  ).toEqual([
+    { value: "initiative-1", label: "First" },
+    {
+      value: "initiative-2",
+      label: "Unavailable or no longer managed",
+    },
+  ]);
+});
+
+test("initiative tags are normalized and deduplicated", () => {
+  expect(
+    parseInitiativeTags("research, governance, research,  governance "),
+  ).toEqual(["research", "governance"]);
+});
diff --git a/tests/unit/phase89-visual-contract.test.ts b/tests/unit/phase89-visual-contract.test.ts
index d9c406d..b973fa3 100644
--- a/tests/unit/phase89-visual-contract.test.ts
+++ b/tests/unit/phase89-visual-contract.test.ts
@@ -46,7 +46,7 @@ test("Phase 89 static visual contract covers public entry routes", () => {
   assert.match(guide, /The two UX primitives: hints and stages/);
 
   assert.match(vortexopedia, /Search terms/);
-  assert.match(vortexopedia, /Showing 63 \/ 63 entries/);
+  assert.match(vortexopedia, /Showing 64 \/ 64 entries/);
   assert.match(vortexopedia, /Invision band/);
   assert.match(vortexopedia, /Concentrated Invision band/);
   assert.match(vortexopedia, /Vortex/);