@eifi1/ui-kit 0.37.0 → 0.38.1

package/src/feedback/feedback-record.ts

@@ -1,5 +1,6 @@
 import { FEEDBACK_CATEGORY_ORDER } from "./feedback-vocabulary";
 import type { FeedbackCategory, FeedbackStatus } from "./feedback-vocabulary";
+import type { FeedbackReply } from "./feedback-public-types";
 
 /**
  * One feedback report as the three apps send it, and the facts the kit reads off it.
@@ -102,7 +103,9 @@ export interface FeedbackRecord {
   /** Up to 5 other files; `null` = none. Optional because a server older than the
    *  column sends no key at all (keksdose dev #578 met exactly that). */
   attachment_urls?: string[] | null;
-  /** The team's answer; `null` = none written. */
+  /** The team's answer; `null` = none written. **Frozen since 0.38** (§9.7): answered
+   *  as stored for one release, written by nothing, then dropped — the answer is
+   *  {@link FeedbackRecord.replies} now. */
   outcome: string | null;
   /** Set on ENTERING `DONE` / `WONT_DO`, cleared on leaving them. ISO 8601. */
   resolved_at: string | null;
@@ -110,6 +113,24 @@ export interface FeedbackRecord {
   created_at: string;
   /** ISO 8601. */
   updated_at: string;
+  // ── Round 0.38 (§9.3): all optional, so an app without public parts sends none. ──
+  /** The admin: the full name; the author: their own; `null`: none to show. */
+  author_name?: string | null;
+  /** The viewer filed it. */
+  mine?: boolean | null;
+  /** Visible to the app's other users (§9.3); never on a CRASH. */
+  public?: boolean | null;
+  /** Made public by the 0.38 migration: the author may switch it off at any status. */
+  filed_private?: boolean | null;
+  /** People who want this (the author's own vote included, §9.6). */
+  votes?: number | null;
+  /** The viewer's vote. */
+  voted?: boolean | null;
+  /** Comments (an admin's count includes hidden ones). */
+  comment_count?: number | null;
+  /** The admin's answers, oldest first (§9.7). Absent: a server before 0.38 — read
+   *  `outcome` instead. */
+  replies?: FeedbackReply[] | null;
 }
 
 /* ── Constants (§3.4, §3.5, §4.3) ─────────────────────────────────────────── */
@@ -195,6 +216,23 @@ export const FEEDBACK_AWAITING_STATUSES: readonly FeedbackStatus[] = Object.free
   "NEEDS_LIVE_TEST",
 ] as const);
 
+/**
+ * The **decided** statuses (§9.7, decision 13): `DONE`, `WONT_DO`, `POSTPONED`. A
+ * status-only move into one tells the author nothing (a status alone sends no
+ * notification), so the row detail nudges the admin toward a reply until one with that
+ * `status_to` exists.
+ */
+export const FEEDBACK_DECIDED_STATUSES: readonly FeedbackStatus[] = Object.freeze([
+  "DONE",
+  "WONT_DO",
+  "POSTPONED",
+] as const);
+
+/** A comment's longest body after trimming (§9.8). */
+export const FEEDBACK_COMMENT_MAX = 4000;
+/** A reply's longest body after trimming (§9.7). */
+export const FEEDBACK_REPLY_MAX = 8000;
+
 /* ── The body (§3.4) ──────────────────────────────────────────────────────── */
 
 /**

package/src/feedback/feedback-replies-context.ts

@@ -0,0 +1,9 @@
+import { createContext } from "react";
+
+/**
+ * `true` inside `FeedbackRowDetail`'s Comments section (0.38.1, Kurvenschmiede): the
+ * detail's own Replies section draws the report's replies already, so a
+ * `FeedbackCommentThread` there draws the comments alone — whatever `replies` it was
+ * handed. Internal: not re-exported.
+ */
+export const FeedbackRepliesDrawnAboveContext = createContext(false);

package/src/feedback/feedback-replies.tsx

@@ -0,0 +1,235 @@
+import { useState } from "react";
+import { BellOff } from "lucide-react";
+import { Select } from "../components/select";
+import type { CommitScope } from "../components/write-lock";
+import { useKitLabels, useKitLocale, type LabelOverride } from "../i18n/kit-labels";
+import { cn } from "../lib/cn";
+import { formatDate } from "../lib/format";
+import { FeedbackStatusBadge, selectableFeedbackStatuses, type FeedbackStatus } from "./feedback-inbox";
+import { useFeedbackStatusLabels } from "./feedback-labels";
+import type { FeedbackReply } from "./feedback-public-types";
+import { FEEDBACK_DECIDED_STATUSES, FEEDBACK_REPLY_MAX } from "./feedback-record";
+import { ChatComposer } from "./feedback-thread";
+import { DEFAULT_FEEDBACK_REPLIES_LABELS } from "./feedback-thread-parts-labels";
+
+/**
+ * The admin's answers as a list (docs/feedback-harmonization.md §9.7, decision 5): each
+ * reply its own row — who, when, what, and the status it moved the report to — where
+ * 0.37 had one `outcome` field that every answer overwrote. {@link FeedbackReplyTimeline}
+ * draws them; {@link FeedbackReplyComposer} writes the next one, with the status picker
+ * beside it (decision 13: a reply notifies the author, a status alone does not, so the
+ * status belongs with the words).
+ */
+
+/* ── Labels ───────────────────────────────────────────────────────────────── */
+
+/** The `feedbackReplies` namespace of `<UiKitProvider labels>`. */
+export interface FeedbackRepliesLabels {
+  /** The timeline's accessible name. de-CH: "Antworten" */
+  replies: string;
+  /** No reply yet. de-CH: "Noch keine Antwort" */
+  empty: string;
+  /** A reply without an author — a loop's, a migrated outcome, an erased admin (§9.7).
+   *  The app's word for its admin; never "the team". de-CH: "Admin" */
+  admin: string;
+  /** Read before a reply's status chip ("→ Done"). de-CH: "Status geändert auf" */
+  statusChanged: string;
+  /** The reply box's accessible name. de-CH: "Antwort schreiben" */
+  field: string;
+  /** de-CH: "Antwort schreiben…" */
+  placeholder: string;
+  /** The send button. de-CH: "Antworten" */
+  reply: string;
+  /** The status picker's accessible name. de-CH: "Status mit der Antwort" */
+  status: string;
+  /** The picker's first option: the reply changes no status. de-CH: "Keine Änderung" */
+  noChange: string;
+  /** Above the composer when a decided status was set without a reply (§9.7, B2).
+   *  de-CH: "Die meldende Person wurde nicht benachrichtigt. Schreiben Sie eine Antwort." */
+  nudge: string;
+}
+
+export { DEFAULT_FEEDBACK_REPLIES_LABELS };
+
+/** `feedbackReplies` resolved: English, then `<UiKitProvider labels>`, then `labels`. */
+export function useFeedbackRepliesLabels(labels?: LabelOverride<FeedbackRepliesLabels>): FeedbackRepliesLabels {
+  return useKitLabels("feedbackReplies", DEFAULT_FEEDBACK_REPLIES_LABELS, labels);
+}
+
+/**
+ * The status a row detail should nudge toward (§9.7, B2), or `undefined`: the row's
+ * status when it is decided ({@link FEEDBACK_DECIDED_STATUSES}) and no reply carries it
+ * as its `status_to` — a status-only move from the table, a swipe or the pills told the
+ * author nothing. `undefined` too without `replies` (a server before 0.38).
+ */
+export function feedbackReplyNudge(row: {
+  status: FeedbackStatus;
+  replies?: readonly Pick<FeedbackReply, "status_to">[] | null;
+}): FeedbackStatus | undefined {
+  if (!row.replies || !FEEDBACK_DECIDED_STATUSES.includes(row.status)) return undefined;
+  return row.replies.some((reply) => reply.status_to === row.status) ? undefined : row.status;
+}
+
+/* ── The timeline ─────────────────────────────────────────────────────────── */
+
+export interface FeedbackReplyTimelineProps {
+  /** Oldest first, as the server sends them. */
+  replies: readonly FeedbackReply[];
+  /** How a reply's time reads. Default: the date and time in the provider's locale. */
+  renderDate?: (iso: string) => string;
+  /** Tag bodies and names `data-private` (a host's screen-share blur). Default true. */
+  redact?: boolean;
+  labels?: LabelOverride<FeedbackRepliesLabels>;
+  className?: string;
+}
+
+/**
+ * The replies, oldest first, down a rule: each with its author (`null` → "Admin"), its
+ * time, the status it set ("→ Done"; the admin view adds where from) and its text. No
+ * edit and no delete (§9.7): a correction is a new reply.
+ */
+export function FeedbackReplyTimeline({
+  replies,
+  renderDate,
+  redact = true,
+  labels: labelsProp,
+  className,
+}: FeedbackReplyTimelineProps) {
+  const labels = useFeedbackRepliesLabels(labelsProp);
+  const locale = useKitLocale();
+  const priv = redact ? "" : undefined;
+  if (replies.length === 0) {
+    return <p className={cn("text-sm text-placeholder", className)}>{labels.empty}</p>;
+  }
+  const dateText = (iso: string) =>
+    renderDate ? renderDate(iso) : formatDate(iso, { dateStyle: "medium", timeStyle: "short" }, { locale });
+  return (
+    <ol aria-label={labels.replies} className={cn("space-y-3 border-s-2 border-subtle ps-3", className)}>
+      {replies.map((reply) => (
+        <li key={reply.id} data-feedback-reply={reply.id} className="min-w-0 text-sm">
+          <div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-caption text-muted">
+            <span data-private={priv} className="font-medium text-secondary">
+              {reply.author_name ?? labels.admin}
+            </span>
+            <time dateTime={reply.created_at} className="tabular-nums">
+              {dateText(reply.created_at)}
+            </time>
+            {reply.status_to && (
+              <span className="inline-flex min-w-0 max-w-full flex-wrap items-center gap-1" data-feedback-reply-status={reply.status_to}>
+                <span className="sr-only">{labels.statusChanged}</span>
+                {reply.status_from && reply.status_from !== reply.status_to && (
+                  <>
+                    <FeedbackStatusBadge status={reply.status_from} />
+                    <span aria-hidden>→</span>
+                  </>
+                )}
+                {!reply.status_from && <span aria-hidden>→</span>}
+                <FeedbackStatusBadge status={reply.status_to} />
+              </span>
+            )}
+          </div>
+          <p data-private={priv} dir="auto" className="mt-0.5 whitespace-pre-wrap break-words text-start text-primary">
+            {reply.body}
+          </p>
+        </li>
+      ))}
+    </ol>
+  );
+}
+
+/* ── The composer ─────────────────────────────────────────────────────────── */
+
+export interface FeedbackReplyComposerProps {
+  /** The report's status now — what "No change" keeps. */
+  status: FeedbackStatus;
+  /**
+   * `POST /feedback/{id}/replies` — the body (1–{@link FEEDBACK_REPLY_MAX} after
+   * trimming) and the status picked, `undefined` for "No change". Return the promise:
+   * the box clears when it resolves, and keeps everything on a rejection.
+   */
+  onReply: (body: string, status?: FeedbackStatus) => void | Promise<unknown>;
+  /** The reply is in flight. */
+  pending?: boolean;
+  /** Preselect this status and say the author has not been told (§9.7, the nudge) —
+   *  {@link feedbackReplyNudge}. */
+  suggestedStatus?: FeedbackStatus;
+  /** Reply COMMITS — see ChatComposer's `commit`. */
+  commit?: CommitScope;
+  labels?: LabelOverride<FeedbackRepliesLabels>;
+  className?: string;
+}
+
+/**
+ * The admin's reply box (§9.7): the text, the **status** to set with it ("No change"
+ * first, then every status — {@link selectableFeedbackStatuses}), and **Reply**. A
+ * {@link ChatComposer} underneath: Ctrl/⌘+Enter sends, the count runs to 8 000, a draft
+ * typed while a reply is in flight stays.
+ *
+ * With `suggestedStatus` the line "The author has not been told. Add a reply." stands
+ * above it and that status is picked, so the reply that answers it records the status
+ * and the nudge goes away.
+ */
+export function FeedbackReplyComposer({
+  status,
+  onReply,
+  pending = false,
+  suggestedStatus,
+  commit,
+  labels: labelsProp,
+  className,
+}: FeedbackReplyComposerProps) {
+  const labels = useFeedbackRepliesLabels(labelsProp);
+  const statusNames = useFeedbackStatusLabels();
+  // The pick, valid for the suggestion it was made under: a new suggestion (another
+  // status set from the table) picks itself again.
+  const [pick, setPick] = useState<{ under: FeedbackStatus | undefined; value: FeedbackStatus | "" }>({
+    under: suggestedStatus,
+    value: suggestedStatus ?? "",
+  });
+  const picked = pick.under === suggestedStatus ? pick.value : (suggestedStatus ?? "");
+
+  const send = (body: string) => {
+    const sent = picked;
+    return Promise.resolve(onReply(body, sent || undefined)).then(() => {
+      setPick((current) => (current.value === sent ? { under: suggestedStatus, value: "" } : current));
+    });
+  };
+
+  return (
+    <div className={cn("space-y-2", className)} data-feedback-reply-composer="">
+      {suggestedStatus && (
+        <p className="flex items-start gap-1.5 text-xs text-secondary" data-feedback-nudge={suggestedStatus}>
+          <BellOff className="mt-0.5 size-3.5 shrink-0 text-warning" aria-hidden />
+          <span>{labels.nudge}</span>
+        </p>
+      )}
+      <ChatComposer
+        onSend={send}
+        pending={pending}
+        commit={commit}
+        maxLength={FEEDBACK_REPLY_MAX}
+        showCount
+        labels={{ field: labels.field, placeholder: labels.placeholder, send: labels.reply }}
+        attachmentSlot={
+          <Select
+            size="sm"
+            aria-label={labels.status}
+            value={picked}
+            disabled={pending}
+            onChange={(event) =>
+              setPick({ under: suggestedStatus, value: event.target.value as FeedbackStatus | "" })
+            }
+            data-feedback-reply-status-pick=""
+          >
+            <option value="">{labels.noChange}</option>
+            {selectableFeedbackStatuses(status).map((value) => (
+              <option key={value} value={value}>
+                {statusNames[value]}
+              </option>
+            ))}
+          </Select>
+        }
+      />
+    </div>
+  );
+}

package/src/feedback/feedback-row-detail-labels.ts

@@ -18,6 +18,7 @@ export const DEFAULT_FEEDBACK_DETAIL_LABELS: FeedbackDetailLabels = {
   download: (name) => `Download ${name}`,
   downloadFailed: "The attachment could not be downloaded.",
   outcome: "Outcome",
+  replies: "Replies",
   resolvedAt: (date) => `Resolved: ${date}`,
   outcomeAdd: "Add outcome",
   outcomeUpdate: "Update",

package/src/feedback/feedback-row-detail.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from "react";
-import type { MouseEvent } from "react";
+import type { MouseEvent, ReactNode } from "react";
 import { Download, ExternalLink, FileText, RotateCcw } from "lucide-react";
 import { AuthedImage } from "../components/authed-image";
 import { CopyButton } from "../components/copy-button";
@@ -40,6 +40,10 @@ import { useFeedbackStatusUndo } from "./feedback-status-undo";
 import type { FeedbackStatusChange } from "./feedback-status-undo";
 import type { CommitScope } from "../components/write-lock";
 import { DEFAULT_FEEDBACK_DETAIL_LABELS } from "./feedback-row-detail-labels";
+import { FeedbackReplyComposer, FeedbackReplyTimeline, feedbackReplyNudge } from "./feedback-replies";
+import { FeedbackPublicSwitch } from "./feedback-public-switch";
+import { FeedbackRepliesDrawnAboveContext } from "./feedback-replies-context";
+import { DEFAULT_FEEDBACK_COMMENTS_LABELS } from "./feedback-thread-parts-labels";
 
 /**
  * One report, opened — the panel a feedback table unfolds under its row (§4.4 of
@@ -69,9 +73,12 @@ import { DEFAULT_FEEDBACK_DETAIL_LABELS } from "./feedback-row-detail-labels";
  *
  * The sections, in the contract's order: **Subject** (the category and the title, §8.1;
  * `showSubject={false}` leaves it out), **Description** (the body; the author's
- * Edit while OPEN / READY / IN_PROGRESS), **URL**, **Attachment**, **Outcome** (the admin's
- * outcome editor, Rework, Open page), **Send for rework** (only while reworking) and
- * **Status**. No comment thread (§2.2: kastlan's comments fold into the body, §7.7).
+ * Edit while OPEN / READY / IN_PROGRESS), **URL**, **Attachment**, **Replies** (0.38,
+ * §9.7: the timeline, the admin's reply composer with its status picker and the nudge,
+ * Rework, Open page — on a row without `replies`, a server before 0.38, the frozen
+ * **Outcome** read-only in its place), **Comments** (0.38: the app's
+ * `FeedbackCommentThread`, when passed), **Send for rework** (only while reworking) and
+ * **Status** (with the **Visible to others** switch when `onPublicChange` is passed).
  *
  * The app keeps its data and its API: the row it renders, the PATCH (`onUpdate`), the
  * upload (`onUpload`), the authenticated GET (`fetcher`) and who is looking (`canEdit`,
@@ -116,16 +123,22 @@ export interface FeedbackDetailLabels {
   /** The toast when that download failed. de-CH: "Der Anhang konnte nicht
    *  heruntergeladen werden." */
   downloadFailed: string;
-  /** Section 4's heading. de-CH: "Ergebnis" */
+  /** Section 4's heading on a row without `replies` (a server before 0.38), where the
+   *  frozen outcome is shown read-only. de-CH: "Ergebnis" */
   outcome: string;
+  /** Section 4's heading since 0.38: the replies' timeline (§9.7). de-CH: "Antworten" */
+  replies: string;
   /** On section 4's heading line once the row is settled, given the formatted
    *  `resolved_at` date. de-CH: "Erledigt am: {{date}}" */
   resolvedAt: (date: string) => string;
-  /** The admin's button while there is no outcome. de-CH: "Ergebnis hinzufügen" */
+  /** The admin's button while there is no outcome. **Unused since 0.38** (the outcome is
+   *  frozen, §9.7; a reply is written instead); kept for one release.
+   *  de-CH: "Ergebnis hinzufügen" */
   outcomeAdd: string;
-  /** The same button once there is one. de-CH: "Aktualisieren" */
+  /** The same button once there is one. Unused since 0.38, as `outcomeAdd`.
+   *  de-CH: "Aktualisieren" */
   outcomeUpdate: string;
-  /** The line above the outcome editor. de-CH: "Was wurde umgesetzt, entschieden oder
+  /** The line above the outcome editor. Unused since 0.38, as `outcomeAdd`. de-CH: "Was wurde umgesetzt, entschieden oder
    *  warum nicht." */
   outcomePlaceholder: string;
   /** The button that opens section 5 on an answered row. de-CH: "Nacharbeit" */
@@ -314,7 +327,8 @@ export interface FeedbackRowAccess {
   /** "Edit description": the author, while the row is OPEN, READY or IN_PROGRESS — on either
    *  page (keksdose `canAuthorEdit`, `feedback-page.tsx:398`, is not gated on `mine`). */
   canEditDescription: boolean;
-  /** The outcome editor: the admin on the inbox (`canEdit`). */
+  /** The admin on the inbox (`canEdit`): since 0.38 the reply composer (the outcome
+   *  itself is frozen, §9.7). */
   canEditOutcome: boolean;
   /** "Rework": the admin or the author, on an answered row
    *  ({@link FEEDBACK_REWORKABLE_STATUSES}) — §3.4, anyone else gets the server's 403. */
@@ -356,9 +370,14 @@ export function feedbackRowAccess(
 export interface FeedbackDetailPatch {
   id: number;
   body?: string;
-  /** `null` clears it — a real edit. */
+  /** `null` clears it — a real edit. **Frozen since 0.38** (§9.7): server-kit 0.11
+   *  answers 422; the detail no longer sends it (a reply is written instead). */
   outcome?: string | null;
   status?: FeedbackStatus;
+  /** 0.38.1: the **Visible to others** flip (§9.3) — what `onPublicChange`'s
+   *  `PATCH /feedback/{id} {"public": next}` carries, alone, so an app can send it
+   *  through the same `onUpdate` mutation. */
+  public?: boolean;
 }
 
 /**
@@ -564,6 +583,27 @@ export interface FeedbackRowDetailProps {
    * beside the detail.
    */
   showSubject?: boolean;
+  /**
+   * 0.38: `POST /feedback/{id}/replies` (§9.7) — the body and the status picked
+   * (`undefined`: "No change"). With `canEdit` and a row that carries `replies`, the
+   * reply composer stands under the timeline. Return the promise: the box clears when it
+   * resolves. A failure is the app's to toast — the server's `detail`, else
+   * `feedbackToast.replyFailed` (0.38.1).
+   */
+  onReply?: (body: string, status?: FeedbackStatus) => void | Promise<unknown>;
+  /** 0.38: the reply is in flight. */
+  replying?: boolean;
+  /** 0.38: the report's comments — the app's `FeedbackCommentThread` — in a section of
+   *  their own under the replies. A thread here draws the comments alone (0.38.1): the
+   *  Replies section above has the replies, so whatever `replies` the thread is handed
+   *  are dropped, and nothing is drawn twice. */
+  comments?: ReactNode;
+  /** 0.38: `PATCH /feedback/{id} {"public": next}` — draws the **Visible to others**
+   *  switch (`FeedbackPublicSwitch`) in the Status section, for the admin (`canEdit`)
+   *  and, within §9.3's window, the author. The page's own mutation fits:
+   *  `onPublicChange={(next) => update.mutate({ id: row.id, public: next })}` —
+   *  {@link FeedbackDetailPatch}'s `public` (0.38.1). */
+  onPublicChange?: (next: boolean) => void;
   labels?: LabelOverride<FeedbackDetailLabels>;
   className?: string;
 }
@@ -605,6 +645,10 @@ export function FeedbackRowDetail({
   renderDate,
   commit,
   showSubject = true,
+  onReply,
+  replying = false,
+  comments,
+  onPublicChange,
   labels: labelsProp,
   className,
 }: FeedbackRowDetailProps) {
@@ -616,7 +660,6 @@ export function FeedbackRowDetail({
   const ownStatusChange = useFeedbackStatusUndo(onUpdate);
   const changeStatus = statusChange ?? ownStatusChange;
   const [editingBody, setEditingBody] = useState(false);
-  const [editingOutcome, setEditingOutcome] = useState(false);
   const [reworking, setReworking] = useState(false);
 
   const access = feedbackRowAccess(row, { canEdit, viewerId });
@@ -640,17 +683,10 @@ export function FeedbackRowDetail({
     onUpdate({ id: row.id, body: replaceDescription(row.body, value) }, { onSuccess: () => setEditingBody(false) });
   };
 
-  const saveOutcome = (value: string) => {
-    // Blank saves `null`: no outcome, rather than an empty one.
-    const next = value.trim() ? value.trim() : null;
-    if (next === row.outcome) {
-      setEditingOutcome(false);
-      return;
-    }
-    onUpdate({ id: row.id, outcome: next }, { onSuccess: () => setEditingOutcome(false) });
-  };
-
-  const showOutcomeEditor = access.canEditOutcome && editingOutcome;
+  // 0.38 (§9.7): the replies replace the outcome; a row without them is a server before
+  // 0.38, whose frozen outcome is shown as it is, read-only.
+  const replies = row.replies;
+  const commentLabels = useKitLabels("feedbackComments", DEFAULT_FEEDBACK_COMMENTS_LABELS);
   const showRework = access.canRework && reworking;
 
   return (
@@ -741,7 +777,7 @@ export function FeedbackRowDetail({
       )}
 
       <FeedbackDetailSection
-        title={labels.outcome}
+        title={replies ? labels.replies : labels.outcome}
         // When the row entered DONE / WONT_DO (keksdose feedback #96).
         action={
           row.resolved_at ? (
@@ -749,60 +785,54 @@ export function FeedbackRowDetail({
           ) : undefined
         }
       >
-        {showOutcomeEditor ? (
-          <FeedbackNoteEditor
-            key={row.id}
-            initial={row.outcome ?? ""}
-            pending={pending}
-            commit={commit}
-            onSave={saveOutcome}
-            onCancel={() => setEditingOutcome(false)}
-            saveLabel={labels.save}
-            cancelLabel={labels.cancel}
-            placeholder={labels.outcomePlaceholder}
-          />
-        ) : (
-          <div className="space-y-2">
+        <div className="space-y-3">
+          {replies ? (
+            <FeedbackReplyTimeline replies={replies} />
+          ) : (
             <FeedbackProse>{row.outcome || undefined}</FeedbackProse>
-            {(access.canEditOutcome || (access.canRework && !reworking) || pageHref) && (
-              <div className="flex flex-wrap gap-2">
-                {access.canEditOutcome && (
-                  <Button
-                    type="button"
-                    variant="secondary"
-                    onClick={(event) => {
-                      event.stopPropagation();
-                      setEditingOutcome(true);
-                    }}
-                  >
-                    {row.outcome ? labels.outcomeUpdate : labels.outcomeAdd}
-                  </Button>
-                )}
-                {access.canRework && !reworking && (
-                  <Button
-                    type="button"
-                    variant="secondary"
-                    onClick={(event) => {
-                      event.stopPropagation();
-                      setReworking(true);
-                    }}
-                  >
-                    <RotateCcw className="size-3.5" aria-hidden /> {labels.rework}
-                  </Button>
-                )}
-                {pageHref && (
-                  // A real href (keksdose dev #451): middle-click and ⌘/Ctrl-click are
-                  // the browser's, and only a link has them.
-                  <Button href={pageHref} variant="secondary" onClick={(event) => event.stopPropagation()}>
-                    <ExternalLink className="size-3.5" aria-hidden /> {labels.openPage}
-                  </Button>
-                )}
-              </div>
-            )}
-          </div>
-        )}
+          )}
+          {replies && access.canEditOutcome && onReply && (
+            <FeedbackReplyComposer
+              key={row.id}
+              status={row.status}
+              onReply={onReply}
+              pending={replying}
+              suggestedStatus={feedbackReplyNudge(row)}
+              commit={commit}
+            />
+          )}
+          {((access.canRework && !reworking) || pageHref) && (
+            <div className="flex flex-wrap gap-2">
+              {access.canRework && !reworking && (
+                <Button
+                  type="button"
+                  variant="secondary"
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    setReworking(true);
+                  }}
+                >
+                  <RotateCcw className="size-3.5" aria-hidden /> {labels.rework}
+                </Button>
+              )}
+              {pageHref && (
+                // A real href (keksdose dev #451): middle-click and ⌘/Ctrl-click are
+                // the browser's, and only a link has them.
+                <Button href={pageHref} variant="secondary" onClick={(event) => event.stopPropagation()}>
+                  <ExternalLink className="size-3.5" aria-hidden /> {labels.openPage}
+                </Button>
+              )}
+            </div>
+          )}
+        </div>
       </FeedbackDetailSection>
 
+      {comments != null && (
+        <FeedbackDetailSection title={commentLabels.comments}>
+          <FeedbackRepliesDrawnAboveContext.Provider value>{comments}</FeedbackRepliesDrawnAboveContext.Provider>
+        </FeedbackDetailSection>
+      )}
+
       {showRework && (
         <FeedbackReworkSection
           row={row}
@@ -831,6 +861,17 @@ export function FeedbackRowDetail({
           onPick={(status) => changeStatus(row, status)}
           variant="pill"
         />
+        {onPublicChange && (
+          <FeedbackPublicSwitch
+            row={row}
+            isAdmin={canEdit}
+            viewerId={viewerId}
+            onChange={onPublicChange}
+            pending={pending}
+            commit={commit}
+            className="mt-3"
+          />
+        )}
       </FeedbackDetailSection>
     </FeedbackDetail>
   );

package/src/feedback/feedback-submit-dialog.tsx

@@ -2,6 +2,8 @@ import { toast } from "../components/toast";
 import { captureAppScreenshot } from "./feedback-capture";
 import { FeedbackContextBox, feedbackContext, type FeedbackSubmitter } from "./feedback-context";
 import { FeedbackDialog, type FeedbackMultipleSubmission } from "./feedback-dialog";
+import { DEFAULT_FEEDBACK_DIALOG_LABELS } from "./feedback-dialog-labels";
+import { useKitLabels } from "../i18n/kit-labels";
 import { useFeedbackCategoryLabels, useFeedbackToastLabels } from "./feedback-labels";
 import {
   DEFAULT_MAX_ATTACHMENTS,
@@ -45,6 +47,8 @@ export interface FeedbackSubmitDialogProps {
   version?: string;
   /** `UseFeedbackSubmitOptions.capture`, as the app passed it. */
   capture?: false | (() => Promise<File | null>);
+  /** `UseFeedbackSubmitOptions.publicNotice` (0.38): the line under the body. */
+  publicNotice?: boolean;
 }
 
 /** `FeedbackDialog` as `useFeedbackSubmit` settles it — see the hook for what it settles. */
@@ -61,8 +65,10 @@ export function FeedbackSubmitDialog({
   environment,
   version,
   capture,
+  publicNotice = false,
 }: FeedbackSubmitDialogProps) {
   const toastText = useFeedbackToastLabels();
+  const dialogText = useKitLabels("feedbackDialog", DEFAULT_FEEDBACK_DIALOG_LABELS);
   const categoryLabels = useFeedbackCategoryLabels();
 
   const onCaptureScreenshot =
@@ -101,6 +107,9 @@ export function FeedbackSubmitDialog({
         )
       }
       onCaptureScreenshot={onCaptureScreenshot}
+      publicNotice={
+        publicNotice ? (dialogText.publicNotice ?? DEFAULT_FEEDBACK_DIALOG_LABELS.publicNotice) : undefined
+      }
       // The context is read off the very values the box below shows (§3.2).
       onSubmit={(data) => onSubmit(data, feedbackContext({ user, attachUrl, url, environment, version }))}
       contextSlot={<FeedbackContextBox user={user} url={url} attachUrl={attachUrl} onAttachUrlChange={onAttachUrlChange} />}