@blogmcp/community 0.1.0 → 0.3.0

package/src/ui/MessageComposer.vue

@@ -3,23 +3,41 @@
  * The composer of a new message, a reply or an edit: 4 000 characters with a counter (announced near the
  * end), the links note, a link to the rules (community.md §4.5: by every composer; a new tab, so the text
  * stays), Cmd/Ctrl+Enter, the cooldown after TOO_FAST or a quota, and the Russmedia confirmation when kb-api
- * asks for one (the same text goes again with `confirmations`).
+ * asks for one (the same text goes again with `confirmations`). M2 T10: with the member's mention cap
+ * (`mentionsMax`, me/get's `caps.mentionsPerMessage`), a draft that mentions more distinct `@handle`s says so as it
+ * is typed (`error.mentionLimit`) and is not sent; kb-api's MENTION_LIMIT stays the rule.
+ *
+ * M3 (m3-contracts.md §3.3, §5.3; B21): a draft with a `title` (a string) asks for a topic's title too — a new topic
+ * (`kind` `topic`, its body the opening post) or its author's edit of the opening post — 1 to 200 UTF-16 units, as
+ * kb-api counts them (forumTopicTitleOf); the link to the rules stays, as on every composer.
  */
 import { computed, onBeforeUnmount, ref, watch } from 'vue'
-import { COMMUNITY_MESSAGE_LINKS_MAX, COMMUNITY_MESSAGE_MAX, confirmMessageKey } from '@blogmcp/sdk/community'
+import {
+  COMMUNITY_MESSAGE_LINKS_MAX,
+  COMMUNITY_MESSAGE_MAX,
+  COMMUNITY_TOPIC_TITLE_MAX,
+  communityMentionHandles,
+  confirmMessageKey,
+  forumTopicTitleOf,
+  topicTitleLength,
+} from '@blogmcp/sdk/community'
 import type { Draft } from '../core/discussion'
 import { COUNTDOWN_MAX_S, failureText } from '../core/outcomes'
 import { codePointLength, normalizeBody } from '../core/text'
 import { uid, useText } from './context'
 
 const props = defineProps<{
-  draft: Draft
-  kind: 'new' | 'reply' | 'edit'
+  /** M3: `title` (a string) asks for a topic's title too; null or absent: no title. */
+  draft: Draft & { title?: string | null }
+  /** M3: `topic` — a new topic (the title and its opening post). */
+  kind: 'new' | 'reply' | 'edit' | 'topic'
   /** Seconds the draft still waits (the controller's clock). */
   wait: number
   replyingTo?: string | null
   /** The host's rules page. */
   rulesHref?: string
+  /** M2 T10: the distinct mentions one message may carry; null or absent: no limit known here. */
+  mentionsMax?: number | null
 }>()
 const emit = defineEmits<{ submit: []; cancel: []; confirmed: []; confirm: [code: string, checked: boolean] }>()
 const { t, lang } = useText()
@@ -28,17 +46,34 @@ const id = uid('bcm-composer')
 const input = ref<HTMLTextAreaElement | null>(null)
 const length = computed(() => codePointLength(normalizeBody(props.draft.body)))
 const over = computed(() => length.value > COMMUNITY_MESSAGE_MAX)
-const canSend = computed(() => !props.draft.sending && length.value > 0 && !over.value && props.wait === 0 && props.draft.confirm === null)
+const mentionsOver = computed(() => {
+  const max = props.mentionsMax
+  return typeof max === 'number' && max >= 0 && communityMentionHandles(normalizeBody(props.draft.body)).length > max
+})
+/** M3: the draft asks for a topic's title. */
+const titled = computed(() => typeof props.draft.title === 'string')
+const titleLength = computed(() => topicTitleLength(props.draft.title))
+const titleOver = computed(() => titled.value && titleLength.value > COMMUNITY_TOPIC_TITLE_MAX)
+const titleOk = computed(() => !titled.value || forumTopicTitleOf(props.draft.title) !== null)
+/** The post is written and the title is still blank: said where the title goes (the button waits for it). */
+const titleMissing = computed(() => titled.value && !titleOver.value && !titleOk.value && length.value > 0)
+const canSend = computed(
+  () => !props.draft.sending && length.value > 0 && !over.value && !mentionsOver.value && titleOk.value && props.wait === 0 && props.draft.confirm === null,
+)
 const allConfirmed = computed(() => {
   const c = props.draft.confirm
   return c !== null && c.codes.every((code) => c.checked.includes(code))
 })
-const label = computed(() => t(props.kind === 'reply' ? 'composer.replyLabel' : props.kind === 'edit' ? 'composer.editLabel' : 'composer.label'))
+const label = computed(() =>
+  t(props.kind === 'reply' ? 'composer.replyLabel' : props.kind === 'edit' ? 'composer.editLabel' : props.kind === 'topic' ? 'topic.bodyLabel' : 'composer.label'),
+)
 const keys = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/i.test(navigator.platform || navigator.userAgent) ? '⌘ + Enter' : 'Ctrl + Enter'
 const failure = computed(() => {
   const f = props.draft.failure
   // The confirmation box says what CONFIRMATION_REQUIRED meant; any later refusal (the confirmed send's) shows.
   if (!f || (props.draft.confirm && f.code === 'confirm')) return ''
+  // The mention warning below says it already, as long as the draft is over the cap.
+  if (f.code === 'mentionLimit' && mentionsOver.value) return ''
   // A short wait reads as the countdown instead.
   if ((f.code === 'fast' || f.code === 'quota') && props.wait > 0 && props.wait <= COUNTDOWN_MAX_S) return ''
   const ref = failureText(f, lang.value)
@@ -59,9 +94,9 @@ onBeforeUnmount(() => {
 })
 
 // A changed text is a new attempt: the old refusal and the confirmation it asked for no longer apply
-// (a cooldown still does).
+// (a cooldown still does). M3: the title is part of the text.
 watch(
-  () => props.draft.body,
+  () => [props.draft.body, props.draft.title] as const,
   () => {
     const d = props.draft
     if (d.confirm) d.confirm = null
@@ -84,6 +119,23 @@ defineExpose({ focus: () => input.value?.focus() })
 
 <template>
   <form class="bcm-composer" @submit.prevent="onSubmit">
+    <template v-if="titled">
+      <label :for="`${id}-title`" class="bcm-label">{{ t('topic.titleLabel') }}</label>
+      <input
+        :id="`${id}-title`"
+        v-model="draft.title"
+        class="bcm-input"
+        type="text"
+        autocomplete="off"
+        :aria-describedby="`${id}-title-counter`"
+        :aria-invalid="titleOver"
+        :readonly="draft.sending"
+        @keydown="onKey"
+      />
+      <span :id="`${id}-title-counter`" class="bcm-counter" :class="{ 'bcm-counter-over': titleOver }">{{ t('composer.counter', { length: titleLength, max: COMMUNITY_TOPIC_TITLE_MAX }) }}</span>
+      <p v-if="titleOver" class="bcm-error">{{ t('topic.titleTooLong', { max: COMMUNITY_TOPIC_TITLE_MAX }) }}</p>
+      <p v-else-if="titleMissing" class="bcm-hint">{{ t('topic.titleMissing') }}</p>
+    </template>
     <label :for="id" class="bcm-label">{{ label }}</label>
     <p v-if="replyingTo" class="bcm-hint">{{ t('composer.replyingTo', { name: replyingTo }) }}</p>
     <textarea
@@ -94,7 +146,7 @@ defineExpose({ focus: () => input.value?.focus() })
       rows="4"
       :placeholder="t('composer.placeholder')"
       :aria-describedby="`${id}-counter ${id}-hints`"
-      :aria-invalid="over"
+      :aria-invalid="over || mentionsOver"
       :readonly="draft.sending"
       @keydown="onKey"
     />
@@ -102,9 +154,9 @@ defineExpose({ focus: () => input.value?.focus() })
       <span :id="`${id}-counter`" class="bcm-counter" :class="{ 'bcm-counter-over': over }">{{ t('composer.counter', { length, max: COMMUNITY_MESSAGE_MAX }) }}</span>
       <span class="bcm-sr" aria-live="polite">{{ counterLive }}</span>
       <span class="bcm-spacer" />
-      <button v-if="kind !== 'new'" type="button" class="bcm-btn" :disabled="draft.sending" @click="emit('cancel')">{{ t('composer.cancel') }}</button>
+      <button v-if="kind !== 'new' && kind !== 'topic'" type="button" class="bcm-btn" :disabled="draft.sending" @click="emit('cancel')">{{ t('composer.cancel') }}</button>
       <button type="submit" class="bcm-btn bcm-primary" :disabled="!canSend">
-        {{ draft.sending ? t('composer.sending') : kind === 'edit' ? t('composer.save') : t('composer.submit') }}
+        {{ draft.sending ? t('composer.sending') : kind === 'edit' ? t('composer.save') : kind === 'topic' ? t('topic.create') : t('composer.submit') }}
       </button>
     </div>
     <div :id="`${id}-hints`" class="bcm-hint">
@@ -113,6 +165,7 @@ defineExpose({ focus: () => input.value?.focus() })
       <p v-if="rulesHref"><a :href="rulesHref" target="_blank" rel="noopener">{{ t('onboarding.rulesTitle') }}</a></p>
     </div>
     <p v-if="over" class="bcm-error">{{ t('composer.tooLong', { max: COMMUNITY_MESSAGE_MAX }) }}</p>
+    <p v-if="mentionsOver" class="bcm-error" role="alert">{{ t('error.mentionLimit') }}</p>
     <p v-if="wait > 0 && wait <= COUNTDOWN_MAX_S" class="bcm-warning" role="status">{{ t('composer.cooldown', { count: wait }) }}</p>
     <p v-if="failure" class="bcm-error" role="alert">{{ failure }}</p>
     <fieldset v-if="draft.confirm" class="bcm-confirm">

package/src/ui/MessageItem.vue

@@ -11,9 +11,14 @@
  * and while the discussion asks this member for the consent it offers the onboarding's consent step in place
  * (`beginOnboarding`, the composer's own). kb-api sends the flag on the author's read only, so another reader sees
  * the plain placeholder.
+ *
+ * M3 (m3-contracts.md §3.5, §4.5, §5.3): under a topic — „Moderátor" beside a member's message in a category the member
+ * moderates now (`author.moderator`, the only place the label shows), the topic's title in its author's edit of the
+ * opening post, and a category moderator's items in the menu (the topic's context provides them). A message waiting in
+ * pre-moderation reads „Čeká na kontrolu" to its author, as any held one.
  */
 import { computed } from 'vue'
-import { hasCommunityMessage, noteMessageKey, warningMessageKey, type CommunityMessageKey, type DiscussionMessage } from '@blogmcp/sdk/community'
+import { communityMessageAnchor, hasCommunityMessage, noteMessageKey, warningMessageKey, type CommunityMessageKey, type DiscussionMessage } from '@blogmcp/sdk/community'
 import { reportLink } from '../core/attrs'
 import { formatDate } from '../core/format'
 import AuthorAvatar from './AuthorAvatar.vue'
@@ -29,7 +34,7 @@ defineOptions({ name: 'MessageItem' })
 
 const props = defineProps<{ message: DiscussionMessage }>()
 const { t, lang } = useText()
-const { ctl, routes, opened, originals, allReplies, deleteMessage } = useDiscussion()
+const { ctl, routes, opened, originals, allReplies, deleteMessage, extraMenu, onExtraMenu } = useDiscussion()
 
 /** Replies shown before „Zobrazit další odpovědi". */
 const REPLIES_SHOWN = 3
@@ -40,9 +45,18 @@ const own = computed(() => ctl.isOwn(m.value))
 const placeholder = computed(() => m.value.body === null)
 /** The author's own message held back from others until their art. 9 consent (P-RV3) — not one awaiting review. */
 const untilConsent = computed(() => own.value && m.value.state === 'held' && m.value.hiddenUntilConsent === true)
-/** The consent step can be opened from here: the discussion asks this member for it, and the onboarding is not open yet. */
+/**
+ * The consent step can be opened from here: the discussion asks this member for it, or the member refused it where the
+ * tenant leaves the public discussion open (`acceptances.art9Refused`, M2 T9: needs name no consent then, yet the post
+ * stays hidden from others until it is given) — and the onboarding is not open yet.
+ */
+const refusedConsent = computed(() => ctl.state.me?.acceptances.art9Refused === true)
 const canGiveConsent = computed(
-  () => untilConsent.value && ctl.mode() === 'onboarding' && ctl.needs().art9 && !ctl.onboarding.value && ctl.state.refusedAge === null,
+  () =>
+    untilConsent.value &&
+    !ctl.onboarding.value &&
+    ctl.state.refusedAge === null &&
+    ((ctl.mode() === 'onboarding' && ctl.needs().art9) || refusedConsent.value),
 )
 
 const authorName = computed(() => {
@@ -52,6 +66,8 @@ const authorName = computed(() => {
   return a.displayName ?? t('author.deleted')
 })
 const handle = computed(() => (m.value.author.kind === 'member' ? m.value.author.handle : null))
+/** M3 (D-M3-7, §4.5): an appointment acting now, in this topic's category — never a trust level. */
+const moderatorLabel = computed(() => m.value.author.kind === 'member' && 'moderator' in m.value.author && m.value.author.moderator === true)
 const badge = computed(() => {
   const a = m.value.author
   if (a.kind !== 'staff') return null
@@ -62,6 +78,8 @@ const badge = computed(() => {
 const placeholderKey = computed<CommunityMessageKey>(() =>
   m.value.state === 'held' ? 'discussion.placeholderHeld' : m.value.state === 'removed' ? 'discussion.placeholderRemoved' : 'discussion.placeholderDeleted',
 )
+/** M2 T10: the row's anchor (`bcm-msg-<seq>`), the fragment the notification centre's links carry; none while pending. */
+const anchorId = computed(() => (m.value.pending ? undefined : (communityMessageAnchor(m.value.seq) ?? undefined)))
 const hiddenByBlock = computed(() => m.value.collapsed && !opened.has(m.value.seq))
 const showOriginal = computed(() => originals.has(m.value.seq))
 const text = computed(() => (m.value.isTranslated && !showOriginal.value ? m.value.displayBody : m.value.body) ?? m.value.displayBody)
@@ -78,6 +96,11 @@ const shownReplies = computed(() => (allReplies.has(m.value.seq) ? m.value.repli
 const moreReplies = computed(() => m.value.replies.length - shownReplies.value.length)
 
 const target = computed(() => ({ conversationId: m.value.conversationId, seq: m.value.seq }))
+/**
+ * A mention links to the member's profile for a viewer who may see profiles (a signed-in host session, m2-contracts.md
+ * §3.3: "never a hyperlink to a profile for a member who cannot see it"); an anonymous reader reads it as text.
+ */
+const mentionProfiles = computed(() => (ctl.needs().signIn ? null : routes.value.profilePath))
 
 const menu = computed<MenuItem[]>(() => {
   const items: MenuItem[] = []
@@ -90,6 +113,8 @@ const menu = computed<MenuItem[]>(() => {
     if (href) items.push({ id: 'report', label: t('discussion.report'), href })
   }
   if (ctl.canBlock(msg)) items.push({ id: msg.collapsed ? 'unblock' : 'block', label: msg.collapsed ? t('discussion.unblock') : t('discussion.block') })
+  // M3: a category moderator's items (the topic's context names them; none elsewhere).
+  if (extraMenu) items.push(...extraMenu(msg))
   return items
 })
 
@@ -99,6 +124,7 @@ function onMenu(id: string): void {
   else if (id === 'delete') deleteMessage(msg.seq)
   else if (id === 'report') ctl.openReport(msg)
   else if ((id === 'block' || id === 'unblock') && msg.author.kind === 'member' && msg.author.memberId) void ctl.setBlocked(msg.author.memberId, id === 'block')
+  else onExtraMenu?.(id, msg)
 }
 
 function reply(): void {
@@ -112,13 +138,14 @@ function toggle(set: Set<number>): void {
 </script>
 
 <template>
-  <li class="bcm-msg-item">
+  <li :id="anchorId" class="bcm-msg-item">
     <article class="bcm-msg" :class="{ 'bcm-msg-pending': !!m.pending }" :aria-busy="!!m.pending">
       <AuthorAvatar :author="m.author" />
       <div class="bcm-msg-main">
         <header class="bcm-meta">
           <span class="bcm-author">{{ authorName }}</span>
           <span v-if="badge" class="bcm-badge bcm-badge-team">{{ badge }}</span>
+          <span v-if="moderatorLabel" class="bcm-badge bcm-badge-team">{{ t('role.moderator') }}</span>
           <span v-if="handle" class="bcm-handle">{{ handle }}</span>
           <time v-if="m.createdAt" class="bcm-time" :datetime="m.createdAt">{{ formatDate(lang, m.createdAt) }}</time>
           <span v-if="m.isEdited && !placeholder" class="bcm-muted">{{ t('discussion.edited') }}</span>
@@ -134,7 +161,7 @@ function toggle(set: Set<number>): void {
           <div v-if="untilConsent" class="bcm-own-state bcm-own-consent">
             <span class="bcm-badge">{{ t('state.hiddenUntilConsent') }}</span>
             <p class="bcm-hint">{{ t('discussion.hiddenUntilConsentNote') }}</p>
-            <button v-if="canGiveConsent" type="button" class="bcm-link" @click="ctl.beginOnboarding()">{{ t('discussion.giveConsent') }}</button>
+            <button v-if="canGiveConsent" type="button" class="bcm-link" @click="ctl.beginOnboarding(refusedConsent ? { offerArt9: true } : {})">{{ t('discussion.giveConsent') }}</button>
           </div>
           <div v-else-if="own && (m.state === 'held' || m.state === 'removed')" class="bcm-own-state">
             <span class="bcm-badge">{{ m.state === 'held' ? t('state.held') : t('state.removed') }}</span>
@@ -147,12 +174,13 @@ function toggle(set: Set<number>): void {
             :draft="ctl.state.inline"
             :wait="ctl.waitLeft(ctl.state.inline)"
             :rules-href="routes.rulesPath"
+            :mentions-max="ctl.mentionCap()"
             @submit="ctl.submitInline()"
             @cancel="ctl.closeInline()"
             @confirm="(code: string, checked: boolean) => ctl.state.inline && ctl.setConfirmed(ctl.state.inline, code, checked)"
             @confirmed="ctl.state.inline && ctl.sendConfirmed(ctl.state.inline)"
           />
-          <p v-else class="bcm-text"><LinkedText :text="text" /></p>
+          <p v-else class="bcm-text"><LinkedText :text="text" :profile-path="mentionProfiles" /></p>
           <p v-if="m.isTranslated && !editing" class="bcm-hint">
             {{ t('discussion.translated') }}
             <button type="button" class="bcm-link" @click="toggle(originals)">{{ showOriginal ? t('discussion.showTranslation') : t('discussion.showOriginal') }}</button>
@@ -192,6 +220,7 @@ function toggle(set: Set<number>): void {
             :draft="ctl.state.inline"
             :wait="ctl.waitLeft(ctl.state.inline)"
             :rules-href="routes.rulesPath"
+            :mentions-max="ctl.mentionCap()"
             :replying-to="ctl.state.inline.replyingTo"
             @submit="ctl.submitInline()"
             @cancel="ctl.closeInline()"

package/src/ui/MessageMenu.vue

@@ -8,7 +8,8 @@ import { nextTick, onBeforeUnmount, ref } from 'vue'
 import { uid, useText } from './context'
 import type { MenuItem } from './types'
 
-defineProps<{ items: MenuItem[] }>()
+/** M3: the toggle's own text (a topic's moderator menu); absent: „Další akce". */
+defineProps<{ items: MenuItem[]; label?: string }>()
 const emit = defineEmits<{ select: [id: string] }>()
 const { t } = useText()
 
@@ -55,7 +56,7 @@ onBeforeUnmount(() => document.removeEventListener('pointerdown', onOutside, tru
       :aria-controls="listId"
       @click="setOpen(!open)"
     >
-      {{ t('discussion.menu') }}
+      {{ label ?? t('discussion.menu') }}
     </button>
     <div v-if="open" :id="listId" class="bcm-menu-list">
       <template v-for="item in items" :key="item.id">

package/src/ui/ModeratorDialog.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+/**
+ * A category moderator's dialog in a topic (m3-contracts.md §3.4, §4.5; D-M3-6): remove a message — the rule of the
+ * tenant's rules text it breaks and the facts, as the statement of reasons will state them; the statement comes back
+ * and is shown —, pass a message to the team (an illegal line's matter: the moderator sees nothing of it afterwards), or
+ * move the topic into another category they moderate. A native modal dialog; the focus returns where it was.
+ */
+import { computed, ref } from 'vue'
+import { ESCALATION_CATEGORIES, type CaseCategory, type CommunityMessageKey } from '@blogmcp/sdk/community'
+import type { TopicController } from '../core/topic'
+import { failureText } from '../core/outcomes'
+import { codePointLength, normalizeBody } from '../core/text'
+import { uid, useModal, useText } from './context'
+
+const props = defineProps<{ ctl: TopicController; fallbackFocus?: () => HTMLElement | null }>()
+const emit = defineEmits<{ close: [] }>()
+const { t, lang } = useText()
+
+const dialog = ref<HTMLDialogElement | null>(null)
+const id = uid('bcm-moderator')
+useModal(dialog, () => emit('close'), props.fallbackFocus)
+
+const d = computed(() => props.ctl.extras.dialog)
+const titleKey = computed<CommunityMessageKey>(() => (d.value?.kind === 'remove' ? 'moderation.remove' : d.value?.kind === 'escalate' ? 'moderation.escalate' : 'moderation.move'))
+const categoryKey = (c: CaseCategory): CommunityMessageKey => `category.${c}`
+const failure = computed(() => {
+  const f = d.value?.failure
+  if (!f) return ''
+  const r = failureText(f, lang.value)
+  return t(r.key, r.params)
+})
+const canSend = computed(() => {
+  const x = d.value
+  if (!x || x.sending || x.done) return false
+  if (x.kind === 'move') return x.categoryId !== ''
+  if (x.kind === 'escalate') return x.category !== ''
+  const facts = normalizeBody(x.facts)
+  return x.ruleId !== '' && facts !== '' && codePointLength(facts) <= 4000
+})
+</script>
+
+<template>
+  <dialog ref="dialog" class="bcm-dialog" :aria-labelledby="`${id}-title`">
+    <form v-if="d" class="bcm-dialog-body bcm-form" novalidate @submit.prevent="canSend && ctl.submitDialog()">
+      <h3 :id="`${id}-title`">{{ t(titleKey) }}</h3>
+
+      <template v-if="d.kind === 'remove'">
+        <template v-if="!d.done">
+          <p>{{ t('moderation.removeLede') }}</p>
+          <div class="bcm-field">
+            <label :for="`${id}-rule`">{{ t('statement.contractualGround') }}</label>
+            <select :id="`${id}-rule`" v-model="d.ruleId" class="bcm-input bcm-select" required>
+              <option value="" disabled>{{ t('moderation.ruleRequired') }}</option>
+              <option v-for="r in ctl.extras.rules ?? []" :key="r.id" :value="r.id">{{ r.title }}</option>
+            </select>
+          </div>
+          <div class="bcm-field">
+            <label :for="`${id}-facts`">{{ t('statement.facts') }}</label>
+            <textarea :id="`${id}-facts`" v-model="d.facts" class="bcm-input bcm-textarea" rows="4" :aria-describedby="`${id}-facts-hint`" />
+            <p :id="`${id}-facts-hint`" class="bcm-hint">{{ t('moderation.factsHint') }}</p>
+          </div>
+        </template>
+        <template v-else>
+          <p role="status">{{ t('moderation.removed') }}</p>
+          <h4>{{ t('statement.title') }}</h4>
+          <pre class="bcm-facts">{{ d.statement }}</pre>
+        </template>
+      </template>
+
+      <template v-else-if="d.kind === 'escalate'">
+        <template v-if="!d.done">
+          <p>{{ t('moderation.escalateLede') }}</p>
+          <div class="bcm-field">
+            <label :for="`${id}-category`">{{ t('moderation.escalateCategory') }}</label>
+            <select :id="`${id}-category`" v-model="d.category" class="bcm-input bcm-select" required>
+              <option value="" disabled>{{ t('moderation.escalateCategory') }}</option>
+              <option v-for="c in ESCALATION_CATEGORIES" :key="c" :value="c">{{ t(categoryKey(c)) }}</option>
+            </select>
+          </div>
+        </template>
+        <p v-else role="status">{{ t('moderation.escalated') }}</p>
+      </template>
+
+      <template v-else>
+        <div class="bcm-field">
+          <label :for="`${id}-target`">{{ t('moderation.moveTo') }}</label>
+          <select :id="`${id}-target`" v-model="d.categoryId" class="bcm-input bcm-select" required>
+            <option value="" disabled>{{ t('moderation.moveTo') }}</option>
+            <option v-for="c in ctl.extras.moveTargets ?? []" :key="c.id" :value="c.id">{{ c.name }}</option>
+          </select>
+        </div>
+      </template>
+
+      <p v-if="failure" class="bcm-error" role="alert">{{ failure }}</p>
+      <div class="bcm-row">
+        <span class="bcm-spacer" />
+        <button type="button" class="bcm-btn" :disabled="d.sending" @click="emit('close')">{{ d.done ? t('common.close') : t('common.cancel') }}</button>
+        <button v-if="!d.done" type="submit" class="bcm-btn bcm-primary" :class="{ 'bcm-danger': d.kind === 'remove' }" :disabled="!canSend">{{ t(titleKey) }}</button>
+      </div>
+    </form>
+  </dialog>
+</template>

package/src/ui/MyCommunityView.vue

@@ -10,6 +10,7 @@
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, useHost, watch } from 'vue'
 import {
   COMMUNITY_HANDLE_CHANGE_DAYS,
+  adverseOutcomeMessageKey,
   signInLink,
   statementPath,
   type CommunityMessageKey,
@@ -29,6 +30,7 @@ import { receiptForElement } from '../core/receipt'
 import AuthorAvatar from './AuthorAvatar.vue'
 import ConfirmDialog from './ConfirmDialog.vue'
 import NoticeStatusView from './NoticeStatusView.vue'
+import OnboardingSteps from './OnboardingSteps.vue'
 import StatementView from './StatementView.vue'
 import { provideText, uid } from './context'
 
@@ -120,6 +122,7 @@ const appealStatusKey = (decisionId: string): CommunityMessageKey | null => {
 }
 
 const consent = computed(() => state?.me?.acceptances.art9Consent ?? null)
+const consentRefused = computed(() => state?.me?.acceptances.art9Refused === true)
 const member = computed(() => state?.me?.member ?? null)
 const profile = computed(() => state?.me?.profile ?? null)
 
@@ -281,6 +284,8 @@ watch(
             <li v-for="r in state.reports" :key="r.caseId">
               <p v-if="categoryKey(r.category)"><strong>{{ t(categoryKey(r.category)!) }}</strong></p>
               <p v-if="caseStatusKey(r.status)">{{ t(caseStatusKey(r.status)!) }}</p>
+              <!-- M3 (§3.5, §4.7): an adverse-event case's outcome, where M1 shows a decision. -->
+              <p v-if="adverseOutcomeMessageKey(r.outcome)">{{ t(adverseOutcomeMessageKey(r.outcome)!) }}</p>
               <time class="bcm-time" :datetime="r.reportedAt">{{ formatDate(lang, r.reportedAt) }}</time>
               <p v-if="r.decidedAt" class="bcm-muted">{{ t('statement.decidedAt', { date: formatDate(lang, r.decidedAt) }) }}</p>
             </li>
@@ -309,6 +314,13 @@ watch(
               <button type="button" class="bcm-btn" :disabled="!!state.busy.consent" @click="confirming = 'consent'">{{ t('panel.art9Withdraw') }}</button>
             </div>
           </template>
+          <template v-else-if="consentRefused">
+            <p>{{ t('panel.art9Refused') }}</p>
+            <OnboardingSteps v-if="ctl.consent.value" :model="ctl.consent.value" :rules-href="routes.rulesPath" @cancel="ctl.closeConsent()" />
+            <div v-else class="bcm-row">
+              <button type="button" class="bcm-btn bcm-primary" @click="ctl.giveConsent()">{{ t('discussion.giveConsent') }}</button>
+            </div>
+          </template>
           <p v-else>{{ t('panel.art9NotGiven') }}</p>
         </section>
 

package/src/ui/NoticeStatusView.vue

@@ -3,9 +3,13 @@
  * A notifier's view of their notice (DSA art. 16(5), 17; m1-contracts.md §7.7 `notices/status`): its status,
  * the statement once decided — never the case's package —, and the appeal while its window is open. The
  * receipt that opened it came in the address's fragment and is gone from the address bar already.
+ *
+ * M3 (m3-contracts.md §3.5, §4.7): an adverse-event notice the team closed with its outcome reads the outcome in plain
+ * words and the redress line (a court or an out-of-court settlement), as the `notice_closed` e-mail does — a case
+ * closed by its outcome alone has no decision, so no statement and no appeal; a decided case keeps both.
  */
 import { computed } from 'vue'
-import { COMMUNITY_APPEAL_MAX, type NoticeStatus } from '@blogmcp/sdk/community'
+import { COMMUNITY_APPEAL_MAX, adverseOutcomeMessageKey, type NoticeStatus } from '@blogmcp/sdk/community'
 import type { AppealDraft } from '../core/panel'
 import { formatDate, isPast } from '../core/format'
 import { knownKey } from '../core/i18n'
@@ -21,6 +25,10 @@ const id = uid('bcm-notice-status')
 const n = computed(() => props.notice)
 const category = computed(() => knownKey(`category.${n.value.category}`))
 const status = computed(() => knownKey(`caseStatus.${n.value.status}`))
+/** M3: the adverse-event outcome's words (null: none, or one this SDK has no words for). */
+const outcome = computed(() => adverseOutcomeMessageKey(n.value.outcome))
+/** Closed by its outcome alone: no decision — nothing to appeal; the redress line says what is left. */
+const outcomeOnly = computed(() => outcome.value !== null && n.value.statement === null && !n.value.appeal.canAppeal && !n.value.appeal.open)
 const length = computed(() => codePointLength(normalizeBody(props.appeal.body)))
 const canSend = computed(() => !props.appeal.sending && length.value > 0 && length.value <= COMMUNITY_APPEAL_MAX)
 const closed = computed(() => (n.value.appeal.closesAt ? isPast(n.value.appeal.closesAt) : false))
@@ -47,12 +55,17 @@ const failure = computed(() => {
     </dl>
     <p class="bcm-muted">{{ t('notice.submittedAt', { date: formatDate(lang, n.submittedAt) }) }}</p>
     <p v-if="n.decidedAt" class="bcm-muted">{{ t('notice.decidedAt', { date: formatDate(lang, n.decidedAt) }) }}</p>
+    <template v-if="outcome">
+      <h4>{{ t('notice.outcome') }}</h4>
+      <p>{{ t(outcome) }}</p>
+      <p v-if="outcomeOnly">{{ t('notice.redress') }}</p>
+    </template>
     <template v-if="n.statement">
       <h4>{{ t('notice.statement') }}</h4>
       <pre class="bcm-facts">{{ n.statement }}</pre>
     </template>
 
-    <section v-if="n.decidedAt" class="bcm-card" :aria-labelledby="`${id}-appeal`">
+    <section v-if="n.decidedAt && !outcomeOnly" class="bcm-card" :aria-labelledby="`${id}-appeal`">
       <h4 :id="`${id}-appeal`">{{ t('notice.appealTitle') }}</h4>
       <template v-if="n.appeal.open">
         <p>{{ t('notice.appealOpen') }}</p>