@eifi1/ui-kit 0.46.0 → 0.47.0

package/src/feedback/feedback-entry-file.tsx

@@ -0,0 +1,150 @@
+import { useState } from "react";
+import { AuthedImage } from "../components/authed-image";
+import { toast } from "../components/toast";
+import type { AuthedFetcher } from "../hooks/use-authed-src";
+import { useKitLabels } from "../i18n/kit-labels";
+import { cn } from "../lib/cn";
+import { DEFAULT_FEEDBACK_ATTACHMENT_LABELS, DEFAULT_MAX_ATTACHMENT_BYTES } from "./feedback-attachment";
+import type { FeedbackNoteAttachment } from "./feedback-inbox";
+import { useFeedbackToastLabels } from "./feedback-labels";
+import { FeedbackAttachmentDownload, plainFeedbackFetch } from "./feedback-attachment-download";
+import { FEEDBACK_ATTACHMENT_ACCEPT, isImageAttachment } from "./feedback-record";
+import { DEFAULT_FEEDBACK_DETAIL_LABELS } from "./feedback-row-detail-labels";
+import type { FeedbackComposerAttachment } from "./feedback-thread";
+
+/**
+ * One file of a conversation entry, and the upload behind an entry's composer
+ * (docs/feedback-harmonization.md §12, round 0.47; keksdose run 82 R1, live #447).
+ *
+ * - {@link FeedbackEntryFile}: a picture drawn INLINE — a thumbnail fetched through the
+ *   app's authenticated GET, a tap opens it full size in a tab — and any other file a
+ *   download button, as the row detail's Attachment section draws them. The reply
+ *   timeline, the rework entries and the comment thread all draw their file with it.
+ * - {@link useFeedbackEntryUpload}: the rework note's one-file field (paste from the
+ *   clipboard, capture, pick; the contract's types and 10 MB, §3.5) for a
+ *   {@link ChatComposer}, and the upload that runs FIRST on send, so an entry never names
+ *   a file that did not arrive.
+ */
+
+export interface FeedbackEntryFileProps {
+  /** The entry's `attachment_url` — `/api/v1/feedback/attachments/<key>`. */
+  url: string;
+  /** The app's authenticated GET (`AuthedImage`'s): the attachment route wants the
+   *  bearer token (§3.5). Left out, the browser's own fetch with same-origin cookies. */
+  fetcher?: AuthedFetcher | null;
+  className?: string;
+}
+
+/**
+ * An entry's one file (§12): a picture (`png`, `jpg`, `webp`, `gif` — by the key's
+ * extension, which the server minted from the sniffed bytes) as an inline thumbnail that
+ * opens full size in a new tab (`AuthedImage`'s `link`: the `blob:` URL, never the API
+ * path); anything else a download button. A picture that will not load falls back to the
+ * download button, so a broken file still says it is there. `alt`:
+ * `feedbackDetail.attachment`.
+ */
+export function FeedbackEntryFile({ url, fetcher, className }: FeedbackEntryFileProps) {
+  const labels = useKitLabels("feedbackDetail", DEFAULT_FEEDBACK_DETAIL_LABELS);
+  const fetchFile = fetcher ?? plainFeedbackFetch;
+  return (
+    <span className={cn("inline-block min-w-0 max-w-full", className)} data-feedback-entry-file={url}>
+      {isImageAttachment(url) ? (
+        <AuthedImage
+          src={url}
+          alt={labels.attachment}
+          fetcher={fetchFile}
+          link
+          stopPropagation
+          errorFallback={<FeedbackAttachmentDownload url={url} fetcher={fetchFile} />}
+          wrapperClassName="inline-block max-w-full"
+          className="max-h-40 max-w-full rounded border border-subtle"
+        />
+      ) : (
+        <FeedbackAttachmentDownload url={url} fetcher={fetchFile} />
+      )}
+    </span>
+  );
+}
+
+/* ── The composer's one file ──────────────────────────────────────────────── */
+
+/** `POST /feedback/attachments` — the file, answered with its URL. */
+export type FeedbackEntryUpload = (file: File) => Promise<string>;
+
+export interface FeedbackEntryUploadOptions {
+  /** The upload. Left out, the composer is text only. */
+  onUpload?: FeedbackEntryUpload;
+  /** The "Capture screenshot" button — the kit's `captureAppScreenshot` or the app's
+   *  own. A rejection toasts `feedbackToast.captureFailed` and adds nothing. */
+  onCaptureScreenshot?: () => Promise<File | null>;
+  /** Over the field's defaults: the contract's types and 10 MB (§3.5), the
+   *  `feedbackToast` refusals. The same object the rework section takes. */
+  attachment?: Partial<FeedbackNoteAttachment>;
+}
+
+export interface FeedbackEntryUploadState {
+  /** For {@link ChatComposer}'s `attachment`; `undefined` without `onUpload`. */
+  composerAttachment: FeedbackComposerAttachment | undefined;
+  /** Upload the picked file, if any: its URL, `undefined` for none. Rejects after a
+   *  toast (`feedbackAttachment.attachmentUploadFailed`) when the upload fails — the
+   *  send then stops and the composer keeps the draft and the file. */
+  upload: (file: File | null) => Promise<string | undefined>;
+  /** An upload is running — add it to the composer's `pending`. */
+  uploading: boolean;
+}
+
+/**
+ * The rework note's file field for a reply or a comment composer (§12): one file, added,
+ * captured or pasted from the clipboard into the box, the contract's types and 10 MB; and
+ * the upload, awaited before the entry is sent.
+ */
+export function useFeedbackEntryUpload({
+  onUpload,
+  onCaptureScreenshot,
+  attachment,
+}: FeedbackEntryUploadOptions): FeedbackEntryUploadState {
+  const toasts = useFeedbackToastLabels();
+  const fieldLabels = useKitLabels("feedbackAttachment", DEFAULT_FEEDBACK_ATTACHMENT_LABELS);
+  const [uploading, setUploading] = useState(false);
+
+  const capture = onCaptureScreenshot
+    ? async () => {
+        try {
+          return await onCaptureScreenshot();
+        } catch {
+          toast.error(toasts.captureFailed);
+          return null;
+        }
+      }
+    : undefined;
+
+  const composerAttachment: FeedbackComposerAttachment | undefined = onUpload
+    ? {
+        accept: FEEDBACK_ATTACHMENT_ACCEPT,
+        maxBytes: DEFAULT_MAX_ATTACHMENT_BYTES,
+        onError: (kind) => {
+          toast.error(kind === "type" ? toasts.attachmentUnsupported : toasts.attachmentTooLarge);
+        },
+        onCaptureScreenshot: capture,
+        buttonVariant: "ghost",
+        buttonSize: "sm",
+        ...attachment,
+      }
+    : undefined;
+
+  const upload = async (file: File | null) => {
+    if (!file || !onUpload) return undefined;
+    setUploading(true);
+    try {
+      return await onUpload(file);
+    } catch (error) {
+      const failed = fieldLabels.attachmentUploadFailed ?? DEFAULT_FEEDBACK_ATTACHMENT_LABELS.attachmentUploadFailed!;
+      toast.error(failed(file.name));
+      throw error;
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  return { composerAttachment, upload, uploading };
+}

package/src/feedback/feedback-public-list.tsx

@@ -7,6 +7,7 @@ import { IconButton } from "../components/icon-button";
 import { SearchField } from "../components/search-field";
 import { ToggleGroup } from "../components/toggle-group";
 import type { CommitScope } from "../components/write-lock";
+import type { AuthedFetcher } from "../hooks/use-authed-src";
 import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { cn } from "../lib/cn";
 import { FILL_HEIGHT_CLASS } from "../shell/fill-height";
@@ -14,6 +15,7 @@ import { EMPTY_FORMATTED_VALUE } from "../lib/format";
 import { FeedbackCategoryBadge, FeedbackDetail, FeedbackDetailSection, FeedbackProse, FeedbackStatusBadge } from "./feedback-inbox";
 import { useFeedbackCategoryLabels } from "./feedback-labels";
 import { FeedbackCommentThread, type FeedbackCommentsLabels } from "./feedback-comment-thread";
+import type { FeedbackEntryUploadOptions } from "./feedback-entry-file";
 import { DEFAULT_FEEDBACK_PUBLIC_LABELS, type FeedbackPublicLabels } from "./feedback-public-labels";
 import type {
   FeedbackComment,
@@ -394,8 +396,18 @@ export interface FeedbackPublicDetailProps {
   /** The viewer is the app's admin: Hide / Unhide on the comments. */
   isAdmin?: boolean;
   /** `POST /feedback/{id}/comments`. Left out — a demo, a reader who may not write — no
-   *  composer. */
-  onComment?: (body: string) => void | Promise<unknown>;
+   *  composer. 0.47 (§12): `attachmentUrl` is the one file uploaded with it (with
+   *  `onUpload`). */
+  onComment?: (body: string, attachmentUrl?: string) => void | Promise<unknown>;
+  /** 0.47 (§12): `POST /feedback/attachments` — the comment box then takes one file,
+   *  pasted, captured or picked, as the rework note does. Left out, text only. */
+  onUpload?: FeedbackEntryUploadOptions["onUpload"];
+  /** 0.47: the comment box's "Capture screenshot". */
+  onCaptureScreenshot?: FeedbackEntryUploadOptions["onCaptureScreenshot"];
+  /** 0.47: the comment box's file field, over the contract's defaults. */
+  attachment?: FeedbackEntryUploadOptions["attachment"];
+  /** 0.47: the app's authenticated GET for the comments' pictures, drawn inline. */
+  fetcher?: AuthedFetcher | null;
   /** The admin's hide (`PATCH …/comments/{id} {hidden}`). */
   onHide?: (comment: FeedbackComment, hidden: boolean) => void | Promise<unknown>;
   /** The writer's delete (`DELETE …/comments/{id}`), after a confirm. */
@@ -425,8 +437,9 @@ export interface FeedbackPublicDetailProps {
  * add one.
  *
  * What it never draws, because the public record never carries it (§9.10): an address,
- * a last name, a screenshot, a file, the page the report was filed on. The body is the
- * server's `public_body` — the client strips nothing and adds nothing.
+ * a last name, the report's screenshot or files, the page the report was filed on. The
+ * body is the server's `public_body` — the client strips nothing and adds nothing. The
+ * one file it shows (0.47, §12) is a comment's own, posted with it to be seen.
  */
 export function FeedbackPublicDetail({
   row,
@@ -436,6 +449,10 @@ export function FeedbackPublicDetail({
   onComment,
   onHide,
   onDelete,
+  onUpload,
+  onCaptureScreenshot,
+  attachment,
+  fetcher,
   pending,
   commit,
   voteDisabled,
@@ -480,6 +497,10 @@ export function FeedbackPublicDetail({
           onComment={onComment}
           onHide={onHide}
           onDelete={onDelete}
+          onUpload={onUpload}
+          onCaptureScreenshot={onCaptureScreenshot}
+          attachment={attachment}
+          fetcher={fetcher}
           pending={pending}
           commit={commit}
           now={now}

package/src/feedback/feedback-public-types.ts

@@ -28,8 +28,9 @@ export interface FeedbackReply {
   /** 0.40 (§10.3): `"reply"` (absent: a server before server-kit 0.13, all replies) or
    *  `"rework"`, the author's entry. */
   kind?: FeedbackEntryKind;
-  /** 0.40: a rework entry's one file (`/api/v1/feedback/attachments/<key>`) — the admin
-   *  and author views only; `null` or absent otherwise (never in the public view, §9.10). */
+  /** The entry's one file (`/api/v1/feedback/attachments/<key>`): a rework's (0.40) or,
+   *  since 0.47 (§12, server-kit 0.18), an admin reply's — the admin and author views
+   *  only; `null` or absent otherwise (never in the public view, §9.10). */
   attachment_url?: string | null;
   /** The status this reply moved the report to; `null` = no status change — and on a
    *  rework migrated out of the body (§10.4), whose move was never recorded. */
@@ -52,6 +53,10 @@ export interface FeedbackComment {
   /** `null` when hidden, but for its writer and an admin. */
   body: string | null;
   hidden: boolean;
+  /** 0.47 (§12, server-kit 0.18): the comment's one file, shown with it to whoever reads
+   *  its body; `null` when it has none or is hidden from this viewer, absent from an
+   *  older server. */
+  attachment_url?: string | null;
   /** ISO 8601. */
   created_at: string;
 }

package/src/feedback/feedback-replies.tsx

@@ -1,15 +1,17 @@
 import { useState } from "react";
 import type { ReactNode } from "react";
-import { BellOff, Paperclip } from "lucide-react";
+import { BellOff } from "lucide-react";
 import { Select } from "../components/select";
 import type { CommitScope } from "../components/write-lock";
+import type { AuthedFetcher } from "../hooks/use-authed-src";
 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, attachmentName } from "./feedback-record";
+import { FEEDBACK_DECIDED_STATUSES, FEEDBACK_REPLY_MAX } from "./feedback-record";
+import { FeedbackEntryFile, useFeedbackEntryUpload, type FeedbackEntryUploadOptions } from "./feedback-entry-file";
 import { ChatComposer } from "./feedback-thread";
 import { DEFAULT_FEEDBACK_REPLIES_LABELS } from "./feedback-thread-parts-labels";
 import { FeedbackReworkEntryChip } from "./feedback-rework-entry-chip";
@@ -82,10 +84,14 @@ export interface FeedbackReplyTimelineProps {
   renderDate?: (iso: string) => string;
   /** Tag bodies and names `data-private` (a host's screen-share blur). Default true. */
   redact?: boolean;
-  /** 0.40: how a rework entry's file (`attachment_url`) is drawn under its text. Default:
-   *  its name beside a paperclip — the file itself is in the row detail's Attachment
-   *  section, fetched with the app's credentials. */
+  /** How an entry's file (`attachment_url` — a rework's since 0.40, an admin reply's
+   *  since 0.47) is drawn under its text. Default (0.47, §12): {@link FeedbackEntryFile} —
+   *  a picture inline as a thumbnail that opens full size, any other file a download —
+   *  through `fetcher`. */
   renderAttachment?: (url: string) => ReactNode;
+  /** 0.47: the app's authenticated GET (`AuthedImage`'s) for the entries' files. Left
+   *  out, the browser's own fetch with same-origin cookies. */
+  fetcher?: AuthedFetcher | null;
   labels?: LabelOverride<FeedbackRepliesLabels>;
   className?: string;
 }
@@ -118,12 +124,16 @@ function EntryStatus({ reply, statusChanged }: { reply: FeedbackReply; statusCha
  * 0.40 (§10.3): an author's **rework** entry (`kind: "rework"`) stands among them as the
  * author's — their name (`null` → "A user", never "Admin"), the **Rework** chip, the
  * status it moved the report to (none on a migrated one) and its file.
+ *
+ * 0.47 (§12): any entry's file — a rework's, an admin reply's — is drawn under its text,
+ * a picture INLINE ({@link FeedbackEntryFile}).
  */
 export function FeedbackReplyTimeline({
   replies,
   renderDate,
   redact = true,
   renderAttachment,
+  fetcher,
   labels: labelsProp,
   className,
 }: FeedbackReplyTimelineProps) {
@@ -160,15 +170,12 @@ export function FeedbackReplyTimeline({
             <p data-private={priv} dir="auto" className="mt-0.5 whitespace-pre-wrap break-words text-start text-primary">
               {reply.body}
             </p>
-            {rework && reply.attachment_url && (
-              <div className="mt-1 min-w-0" data-private={priv} data-feedback-entry-file="">
+            {reply.attachment_url && (
+              <div className="mt-1 min-w-0" data-private={priv} data-feedback-entry-attachment="">
                 {renderAttachment ? (
                   renderAttachment(reply.attachment_url)
                 ) : (
-                  <span className="inline-flex min-w-0 max-w-full items-center gap-1 text-xs text-secondary">
-                    <Paperclip className="size-3.5 shrink-0" aria-hidden />
-                    <span className="min-w-0 break-all">{attachmentName(reply.attachment_url)}</span>
-                  </span>
+                  <FeedbackEntryFile url={reply.attachment_url} fetcher={fetcher} />
                 )}
               </div>
             )}
@@ -204,15 +211,16 @@ const REPLY_ROW_ALIGN = cn(
   "pointer-coarse:[&_[data-chat-composer-hint]]:sr-only",
 );
 
-export interface FeedbackReplyComposerProps {
+export interface FeedbackReplyComposerProps extends FeedbackEntryUploadOptions {
   /** 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.
+   * trimming), the status picked, `undefined` for "No change", and (0.47, §12) the URL
+   * of the one file uploaded with it, `undefined` for none. Return the promise: the box
+   * clears when it resolves, and keeps everything on a rejection.
    */
-  onReply: (body: string, status?: FeedbackStatus) => void | Promise<unknown>;
+  onReply: (body: string, status?: FeedbackStatus, attachmentUrl?: string) => 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) —
@@ -235,6 +243,13 @@ export interface FeedbackReplyComposerProps {
  * 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.
+ *
+ * 0.47 (§12, keksdose live #447): with `onUpload`, one file as the rework note takes it —
+ * a screenshot pasted into the box, a capture (`onCaptureScreenshot`), or a pick; the
+ * contract's types and 10 MB. It is uploaded FIRST; a failed upload toasts and sends
+ * nothing, and the draft and the file stay. `onUpload` here is the composer's own opt-in
+ * (new in 0.47, so no page passed it before); `FeedbackRowDetail` hands it on only with
+ * `replyAttachments`, since its `onUpload` is the rework note's too.
  */
 export function FeedbackReplyComposer({
   status,
@@ -242,10 +257,18 @@ export function FeedbackReplyComposer({
   pending = false,
   suggestedStatus,
   commit,
+  onUpload,
+  onCaptureScreenshot,
+  attachment,
   labels: labelsProp,
   className,
 }: FeedbackReplyComposerProps) {
   const labels = useFeedbackRepliesLabels(labelsProp);
+  const { composerAttachment, upload, uploading } = useFeedbackEntryUpload({
+    onUpload,
+    onCaptureScreenshot,
+    attachment,
+  });
   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.
@@ -255,9 +278,12 @@ export function FeedbackReplyComposer({
   });
   const picked = pick.under === suggestedStatus ? pick.value : (suggestedStatus ?? "");
 
-  const send = (body: string) => {
+  const send = async (body: string, file: File | null) => {
     const sent = picked;
-    return Promise.resolve(onReply(body, sent || undefined)).then(() => {
+    const url = await upload(file);
+    // The third argument only with a file, so a text reply calls as before 0.47.
+    const replied = url === undefined ? onReply(body, sent || undefined) : onReply(body, sent || undefined, url);
+    return Promise.resolve(replied).then(() => {
       setPick((current) => (current.value === sent ? { under: suggestedStatus, value: "" } : current));
     });
   };
@@ -272,7 +298,8 @@ export function FeedbackReplyComposer({
       )}
       <ChatComposer
         onSend={send}
-        pending={pending}
+        pending={pending || uploading}
+        attachment={composerAttachment}
         commit={commit}
         maxLength={FEEDBACK_REPLY_MAX}
         showCount
@@ -284,7 +311,7 @@ export function FeedbackReplyComposer({
           <Select
             aria-label={labels.status}
             value={picked}
-            disabled={pending}
+            disabled={pending || uploading}
             onChange={(event) =>
               setPick({ under: suggestedStatus, value: event.target.value as FeedbackStatus | "" })
             }

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

@@ -24,7 +24,6 @@ export const DEFAULT_FEEDBACK_DETAIL_LABELS: FeedbackDetailLabels = {
   outcomeUpdate: "Update",
   outcomePlaceholder: "What was done, decided, or why this won't be addressed.",
   rework: "Rework",
-  openPage: "Open page",
   reworkTitle: "Send for rework",
   reworkSend: "Send rework",
   reworkPlaceholder: "What still needs refinement? Any new constraints or change of direction.",

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

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react";
-import type { MouseEvent, ReactNode } from "react";
-import { Download, FileText, RotateCcw } from "lucide-react";
+import type { ReactNode } from "react";
+import { RotateCcw } from "lucide-react";
 import { AuthedImage } from "../components/authed-image";
 import { CopyButton } from "../components/copy-button";
 import { TextLink } from "../components/text-link";
@@ -8,7 +8,6 @@ import { toast } from "../components/toast";
 import { Button } from "../components/button";
 import type { AuthedFetcher } from "../hooks/use-authed-src";
 import { useKitLabels, useKitLocale, type LabelOverride } from "../i18n/kit-labels";
-import { filenameFromDisposition, saveBlob } from "../lib/download";
 import { formatDate } from "../lib/format";
 import { DEFAULT_MAX_ATTACHMENT_BYTES } from "./feedback-attachment";
 import { DEFAULT_FEEDBACK_DIALOG_LABELS } from "./feedback-dialog";
@@ -29,7 +28,6 @@ import {
   FEEDBACK_AUTHOR_EDITABLE_STATUSES,
   FEEDBACK_REWORKABLE_STATUSES,
   appendRework,
-  attachmentName,
   isImageAttachment,
   replaceDescription,
   splitBodyAttachments,
@@ -41,6 +39,7 @@ 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 { FeedbackAttachmentDownload, plainFeedbackFetch } from "./feedback-attachment-download";
 import { FeedbackPublicSwitch } from "./feedback-public-switch";
 import { FeedbackRepliesDrawnAboveContext } from "./feedback-replies-context";
 import { DEFAULT_FEEDBACK_COMMENTS_LABELS } from "./feedback-thread-parts-labels";
@@ -143,10 +142,6 @@ export interface FeedbackDetailLabels {
   outcomePlaceholder: string;
   /** The button that opens section 5 on an answered row. de-CH: "Nacharbeit" */
   rework: string;
-  /** The link to the page the report was filed on. de-CH: "Seite öffnen"
-   *  @deprecated 0.46 — the Replies section's "Open page" button is gone (keksdose live #449:
-   *  it repeated the URL section's link); removed in 0.47. Unused, kept for one release. */
-  openPage: string;
   /** Section 5's heading. de-CH: "Zur Nacharbeit senden" */
   reworkTitle: string;
   /** Section 5's send button. de-CH: "Nacharbeit senden" */
@@ -257,75 +252,6 @@ export function feedbackAttachmentUrls(
   return [...new Set(urls)];
 }
 
-/** The bytes behind a fetcher's answer — a `Blob` as it is, a `Response` checked. */
-async function toBlob(answer: Blob | Response): Promise<Blob> {
-  if (typeof Response !== "undefined" && answer instanceof Response) {
-    if (!answer.ok) throw new Error(`HTTP ${answer.status}`);
-    return answer.blob();
-  }
-  return answer as Blob;
-}
-
-/** No fetcher: the browser's own `fetch`, with the cookies a same-origin app uses. */
-const plainFetch: AuthedFetcher = (url, { signal }) => fetch(url, { signal, credentials: "same-origin" });
-
-/**
- * A PDF or a text log (keksdose `FeedbackFileDownload`, dev #578): the bytes sit behind
- * an authenticated route that serves them as `attachment`, never inline (§3.5), so a
- * plain link would be a 401 the moment it was opened. Fetched through the app's
- * fetcher and saved with {@link saveBlob}; a failure says so in a toast.
- *
- * Saved under the name the server gives it when the fetcher answers with a `Response`
- * (server-kit's `content_disposition` puts the uploader's own name in `filename*`), and
- * under the URL's last segment — the name on the button — when it answers with a bare
- * `Blob`, which has no headers to ask.
- */
-function AttachmentDownload({
-  url,
-  fetcher,
-  labels,
-}: {
-  url: string;
-  fetcher: AuthedFetcher;
-  labels: FeedbackDetailLabels;
-}) {
-  const [busy, setBusy] = useState(false);
-  const name = attachmentName(url);
-  const download = async (event: MouseEvent) => {
-    // The row around the detail may toggle on a click.
-    event.stopPropagation();
-    setBusy(true);
-    try {
-      const answer = await fetcher(url, { signal: new AbortController().signal });
-      const blob = await toBlob(answer);
-      const saveAs =
-        typeof Response !== "undefined" && answer instanceof Response
-          ? filenameFromDisposition(answer.headers.get("Content-Disposition"), name)
-          : name;
-      saveBlob(blob, saveAs);
-    } catch {
-      toast.error(labels.downloadFailed);
-    } finally {
-      setBusy(false);
-    }
-  };
-  return (
-    <Button
-      type="button"
-      variant="secondary"
-      size="sm"
-      pending={busy}
-      onClick={(event) => void download(event)}
-      aria-label={labels.download(name)}
-      className="max-w-full"
-    >
-      <FileText className="size-3.5 shrink-0" aria-hidden />
-      <span className="min-w-0 max-w-[14rem] truncate-until-large">{name}</span>
-      <Download className="size-3.5 shrink-0" aria-hidden />
-    </Button>
-  );
-}
-
 /* ── Who may do what (§3.4, §4.3, §4.4) ───────────────────────────────────── */
 
 /** What the person looking at a row may do with it — {@link feedbackRowAccess}. */
@@ -589,8 +515,8 @@ export interface FeedbackRowDetailProps {
   onUpdate: FeedbackDetailUpdate;
   /** `update.isPending`: the editors' save buttons wait for it. */
   pending?: boolean;
-  /** `POST /feedback/attachments` for the rework's one file. Left out, a rework is a
-   *  note alone. */
+  /** `POST /feedback/attachments` for the rework's one file and, since 0.47 (§12) with
+   *  `replyAttachments`, the admin reply's. Left out, a rework or a reply is text alone. */
   onUpload?: FeedbackUpload;
   /** The app's authenticated GET (`AuthedImage`'s) — the pictures and the downloads go
    *  through it, since the attachment route wants the bearer token (§3.5). Left out,
@@ -603,9 +529,11 @@ export interface FeedbackRowDetailProps {
    * page's mutation (its observer outlives the row a status filter removes).
    */
   statusChange?: FeedbackStatusChange;
-  /** For the rework's "Capture screenshot" — see {@link FeedbackReworkSectionProps}. */
+  /** For the rework's and (0.47, with `replyAttachments`) the reply composer's "Capture screenshot" — see
+   *  {@link FeedbackReworkSectionProps}. */
   onCaptureScreenshot?: () => Promise<File | null>;
-  /** The rework's file field, over the contract's defaults. */
+  /** The rework's and (0.47, with `replyAttachments`) the reply composer's file field,
+   *  over the contract's defaults. */
   reworkAttachment?: Partial<FeedbackNoteAttachment>;
   /** How the `resolved_at` date reads — the app's date cell, as a string. Default: the
    *  kit's `formatDate` in the provider's locale, `medium` style. */
@@ -629,8 +557,23 @@ export interface FeedbackRowDetailProps {
    * 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).
+   *
+   * 0.47 (§12, keksdose live #447): with `replyAttachments` (and `onUpload`) the
+   * composer takes one file as the rework note does — pasted into the box, captured or
+   * picked — uploaded first, and its URL is the third argument (`attachment_url` in the
+   * body; server-kit 0.18).
+   */
+  onReply?: (body: string, status?: FeedbackStatus, attachmentUrl?: string) => void | Promise<unknown>;
+  /**
+   * 0.47 (§12): the reply composer takes one file — through `onUpload`,
+   * `onCaptureScreenshot` and `reworkAttachment`, the rework note's. Off by default:
+   * `onUpload` alone stays the rework's, so a page that passes it and an `onReply` of
+   * `(body, status)` does not grow a file field whose file its reply would drop (round
+   * 0.47 build reviews, keksdose and kastlan B1). Turn it on in the commit that makes
+   * `onReply` send its third argument as `attachment_url`, with server-kit 0.18 (an
+   * older server answers the field with a 422).
    */
-  onReply?: (body: string, status?: FeedbackStatus) => void | Promise<unknown>;
+  replyAttachments?: boolean;
   /** 0.38: the reply is in flight. */
   replying?: boolean;
   /**
@@ -695,6 +638,7 @@ export function FeedbackRowDetail({
   commit,
   showSubject = true,
   onReply,
+  replyAttachments = false,
   replying = false,
   onRework,
   comments,
@@ -719,8 +663,10 @@ export function FeedbackRowDetail({
   const { description } = splitDescription(row.body);
   const pageHref = feedbackPageHref(row.context);
   const pageUrl = feedbackPageUrl(row.context);
-  const files = feedbackAttachmentUrls(row);
-  const fetchFile = fetcher ?? plainFetch;
+  // 0.47 (§12): with the entries, each entry's file is drawn inline in the Replies
+  // timeline, so the Attachment section holds the report's own files.
+  const files = feedbackAttachmentUrls(row.replies ? { ...row, replies: undefined } : row);
+  const fetchFile = fetcher ?? plainFeedbackFetch;
   const dateText = (iso: string) => (renderDate ? renderDate(iso) : formatDate(iso, "medium", { locale }));
 
   const saveDescription = (value: string) => {
@@ -823,7 +769,7 @@ export function FeedbackRowDetail({
                   className="max-h-64 max-w-full rounded border border-subtle"
                 />
               ) : (
-                <AttachmentDownload key={url} url={url} fetcher={fetchFile} labels={labels} />
+                <FeedbackAttachmentDownload key={url} url={url} fetcher={fetchFile} />
               ),
             )}
           </div>
@@ -841,7 +787,7 @@ export function FeedbackRowDetail({
       >
         <div className="space-y-3">
           {replies ? (
-            <FeedbackReplyTimeline replies={replies} />
+            <FeedbackReplyTimeline replies={replies} fetcher={fetchFile} />
           ) : (
             <FeedbackProse>{row.outcome || undefined}</FeedbackProse>
           )}
@@ -851,6 +797,9 @@ export function FeedbackRowDetail({
               status={row.status}
               onReply={onReply}
               pending={replying}
+              onUpload={replyAttachments ? onUpload : undefined}
+              onCaptureScreenshot={replyAttachments ? onCaptureScreenshot : undefined}
+              attachment={replyAttachments ? reworkAttachment : undefined}
               suggestedStatus={feedbackReplyNudge(row)}
               commit={commit}
             />

package/src/feedback.ts

@@ -30,3 +30,4 @@ export * from "./feedback/feedback-public-types";
 export * from "./feedback/feedback-vote-button";
 export * from "./feedback/feedback-comment-thread";
 export * from "./feedback/feedback-replies";
+export * from "./feedback/feedback-entry-file";