diff --git a/ui/src/main.js b/ui/src/main.js
index 873e6f1..b70af1f 100644
--- a/ui/src/main.js
+++ b/ui/src/main.js
@@ -72,6 +72,14 @@
     const changeLoading = ref(false);
     const changeApplying = ref(false);
     const changeError = ref("");
+    const proposalSummary = ref("");
+    const proposalTarget = ref("10-systems/new-document.md");
+    const proposalReason = ref("");
+    const proposalContent = ref(
+      "---\nowner: gmikcon\nstatus: draft\nlast_reviewed: 2026-05-09\nreview_interval: 90d\nconfidence: medium\nsource_of_truth: manual\n---\n\n# New Document\n\n"
+    );
+    const proposalRunning = ref(false);
+    const proposalError = ref("");
     const gitStatus = ref(null);
     const selectedCommitFiles = ref([]);
     const commitSummary = ref("");
@@ -263,6 +271,34 @@
       }
     };
 
+    const proposeDocChange = async () => {
+      if (!proposalSummary.value.trim() || !proposalTarget.value.trim() || !proposalContent.value.trim()) {
+        proposalError.value = "Summary, target, and content are required";
+        return;
+      }
+      proposalRunning.value = true;
+      proposalError.value = "";
+      try {
+        const created = await apiPost("/changes", {
+          kind: "doc",
+          target: proposalTarget.value.trim(),
+          summary: proposalSummary.value.trim(),
+          reason: proposalReason.value.trim(),
+          payload: {
+            content: proposalContent.value
+          }
+        });
+        changes.value = await apiGet("/changes");
+        await loadChange(created.id);
+        proposalSummary.value = "";
+        proposalReason.value = "";
+      } catch (caught) {
+        proposalError.value = caught instanceof Error ? caught.message : "Failed to propose change";
+      } finally {
+        proposalRunning.value = false;
+      }
+    };
+
     const commitSelectedFiles = async () => {
       if (!commitCanRun.value) {
         return;
@@ -372,6 +408,13 @@
       loadInventoryType,
       loading,
       overview,
+      proposalContent,
+      proposalError,
+      proposalReason,
+      proposalRunning,
+      proposalSummary,
+      proposalTarget,
+      proposeDocChange,
       selectedInventoryId,
       selectedInventoryRecord,
       selectedInventoryRecordJson,
@@ -509,47 +552,74 @@
           </template>
 
           <template #changes>
-            <div v-if="changes.length" class="gnb-changes">
-              <aside class="gnb-list">
-                <button
-                  v-for="change in changes"
-                  :key="change.id"
-                  type="button"
-                  class="gnb-row gnb-row-button"
-                  :class="{ 'is-active': change.id === selectedChangeId }"
-                  @click="loadChange(change.id)"
-                >
-                  <strong>{{ change.summary }}</strong>
-                  <span>{{ change.status }} · {{ change.kind }} · {{ change.target }}</span>
-                </button>
-              </aside>
+            <div class="gnb-changes-workspace">
+              <div class="gnb-changes">
+                <aside v-if="changes.length" class="gnb-list">
+                  <button
+                    v-for="change in changes"
+                    :key="change.id"
+                    type="button"
+                    class="gnb-row gnb-row-button"
+                    :class="{ 'is-active': change.id === selectedChangeId }"
+                    @click="loadChange(change.id)"
+                  >
+                    <strong>{{ change.summary }}</strong>
+                    <span>{{ change.status }} · {{ change.kind }} · {{ change.target }}</span>
+                  </button>
+                </aside>
+                <GnEmptyState v-else title="No pending changes" text="Pending changes will appear here after agents propose updates." />
 
-              <section class="gnb-detail">
-                <GnToolbar
-                  :title="selectedChange?.summary || 'Pending change'"
-                  :meta="changeLoading ? 'Loading' : selectedChange?.status || 'unknown'"
+                <section class="gnb-detail">
+                  <GnToolbar
+                    :title="selectedChange?.summary || 'Pending change'"
+                    :meta="changeLoading ? 'Loading' : selectedChange?.status || 'unknown'"
+                  >
+                    <template #actions>
+                      <GnBadge v-if="selectedChange" :variant="changeStatusVariant(selectedChange.status)">
+                        {{ selectedChange.status }}
+                      </GnBadge>
+                      <GnButton
+                        v-if="selectedChange?.status === 'pending'"
+                        variant="success"
+                        icon="ph-check"
+                        :disabled="changeApplying"
+                        @click="applySelectedChange"
+                      >
+                        {{ changeApplying ? 'Applying' : 'Apply' }}
+                      </GnButton>
+                    </template>
+                  </GnToolbar>
+                  <div v-if="changeError" class="gnb-error">{{ changeError }}</div>
+                  <pre v-if="selectedChange" class="gnb-json">{{ selectedChangeJson }}</pre>
+                  <GnEmptyState v-else title="No change selected" text="Select a pending change to inspect its payload and status." />
+                </section>
+              </div>
+
+              <section class="gnb-proposal">
+                <GnToolbar title="Propose Document Change" meta="Creates a pending change" />
+                <div class="gnb-form-grid">
+                  <GnInput v-model="proposalSummary" label="Summary" icon="ph-note-pencil" />
+                  <GnInput v-model="proposalTarget" label="Target path" icon="ph-file-md" />
+                </div>
+                <label class="gnb-field">
+                  <span>Reason</span>
+                  <textarea v-model="proposalReason" rows="3"></textarea>
+                </label>
+                <label class="gnb-field">
+                  <span>Markdown content</span>
+                  <textarea v-model="proposalContent" rows="12"></textarea>
+                </label>
+                <GnButton
+                  variant="secondary"
+                  icon="ph-plus"
+                  :disabled="proposalRunning"
+                  @click="proposeDocChange"
                 >
-                  <template #actions>
-                    <GnBadge v-if="selectedChange" :variant="changeStatusVariant(selectedChange.status)">
-                      {{ selectedChange.status }}
-                    </GnBadge>
-                    <GnButton
-                      v-if="selectedChange?.status === 'pending'"
-                      variant="success"
-                      icon="ph-check"
-                      :disabled="changeApplying"
-                      @click="applySelectedChange"
-                    >
-                      {{ changeApplying ? 'Applying' : 'Apply' }}
-                    </GnButton>
-                  </template>
-                </GnToolbar>
-                <div v-if="changeError" class="gnb-error">{{ changeError }}</div>
-                <pre v-if="selectedChange" class="gnb-json">{{ selectedChangeJson }}</pre>
-                <GnEmptyState v-else title="No change selected" text="Select a pending change to inspect its payload and status." />
+                  {{ proposalRunning ? 'Creating' : 'Create pending change' }}
+                </GnButton>
+                <div v-if="proposalError" class="gnb-error">{{ proposalError }}</div>
               </section>
             </div>
-            <GnEmptyState v-else title="No pending changes" text="Pending changes will appear here after agents propose updates." />
           </template>
 
           <template #git>
diff --git a/ui/src/styles.css b/ui/src/styles.css
index 73a98af..60aac1c 100644
--- a/ui/src/styles.css
+++ b/ui/src/styles.css
@@ -133,6 +133,23 @@
   min-width: 0;
 }
 
+.gnb-changes-workspace {
+  display: grid;
+  gap: 24px;
+}
+
+.gnb-proposal {
+  display: grid;
+  gap: 16px;
+  padding-top: 8px;
+}
+
+.gnb-form-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+}
+
 .gnb-field {
   display: grid;
   gap: 6px;
@@ -170,7 +187,8 @@
   .gnb-changes,
   .gnb-git,
   .gnb-inventory,
-  .gnb-detail-grid {
+  .gnb-detail-grid,
+  .gnb-form-grid {
     grid-template-columns: 1fr;
   }
 }