@eifi1/ui-kit 0.46.1 → 0.48.0

package/src/components/use-table-state.ts

@@ -1,4 +1,5 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { SetStateAction } from "react";
 import { useLocation, useSearchParams } from "react-router";
 import { useKitTableStorageKeyPrefix } from "../i18n/kit-labels";
 import { readStored, writeStored } from "../lib/safe-storage";
@@ -24,6 +25,17 @@ interface PersistedState {
   pageSize: number | "all";
   widths?: Record<string, number>;
   hidden?: string[];
+  /** 0.48: the `defaultHidden` columns the user ticked back on — an entry that beats the
+   *  default. Written only when non-empty, so a table without such columns stores what
+   *  it always did. */
+  shown?: string[];
+}
+
+/** The hidden set as drawn: the stored one plus every `defaultHidden` column the view
+ *  holds no entry for (neither hidden nor `shown`). */
+function withDefaultHidden(view: { hidden: Set<string>; shown: Set<string> }, defaults: string[]): Set<string> {
+  const extra = defaults.filter((k) => !view.hidden.has(k) && !view.shown.has(k));
+  return extra.length === 0 ? view.hidden : new Set([...view.hidden, ...extra]);
 }
 
 export const DEFAULT_PERSIST_PREFIX = "hbui-table:";
@@ -338,7 +350,45 @@ export function useTableState<T>({
   );
   const pageSize = pageSizeProp ?? internalPageSize;
   const [widths, setWidths] = useState<Record<string, number>>(() => initial.widths ?? {});
-  const [hiddenCols, setHiddenCols] = useState<Set<string>>(() => new Set(initial.hidden ?? []));
+  // Hidden columns (0.48, keksdose #617): what the user chose — `hidden`, and `shown`
+  // for a `defaultHidden` column ticked back on — kept apart from the defaults, which
+  // are applied on read and never stored. Keyed on the default keys as a string: every
+  // call site builds `columns` inline, so the array is new on every render.
+  const [view, setView] = useState(() => ({
+    hidden: new Set<string>(initial.hidden ?? []),
+    shown: new Set<string>(initial.shown ?? []),
+  }));
+  const defaultHiddenSig = columns
+    .filter((c) => c.defaultHidden)
+    .map((c) => c.key)
+    .join("\u0000");
+  const hiddenCols = useMemo(
+    () => withDefaultHidden(view, defaultHiddenSig ? defaultHiddenSig.split("\u0000") : []),
+    [view, defaultHiddenSig],
+  );
+  // The panel hands over the next DRAWN set; what changed is recorded as a choice.
+  const setHiddenCols = useCallback(
+    (action: SetStateAction<Set<string>>) =>
+      setView((v) => {
+        const defaults = defaultHiddenSig ? defaultHiddenSig.split("\u0000") : [];
+        const prev = withDefaultHidden(v, defaults);
+        const next = typeof action === "function" ? action(prev) : action;
+        const hidden = new Set(v.hidden);
+        const shown = new Set(v.shown);
+        for (const k of next) {
+          if (prev.has(k)) continue;
+          hidden.add(k);
+          shown.delete(k);
+        }
+        for (const k of prev) {
+          if (next.has(k)) continue;
+          hidden.delete(k);
+          if (defaults.includes(k)) shown.add(k);
+        }
+        return { hidden, shown };
+      }),
+    [defaultHiddenSig],
+  );
   const [showSettings, setShowSettings] = useState(false);
   const headRefs = useMemo(() => new Map<string, HTMLTableCellElement>(), []);
 
@@ -360,7 +410,8 @@ export function useTableState<T>({
         filters,
         pageSize: pageSize === Infinity ? "all" : pageSize,
         widths,
-        hidden: Array.from(hiddenCols),
+        hidden: Array.from(view.hidden),
+        ...(view.shown.size > 0 ? { shown: Array.from(view.shown) } : {}),
       });
   useEffect(() => {
     if (!storageKey) return;

package/src/data-table.ts

@@ -30,6 +30,8 @@ export type {
 // 0.46.1 (keksdose N3): a swipe plan as `RowActions`' actions — the desktop column's own
 // derivation, for an app's hand-built actions column.
 export { swipePlanRowActions } from "./components/data-table-row-actions";
+// 0.48 (keksdose dev #605): a `groupBy` level (also `mobileGroupBy`'s) and the `loadMore` footer.
+export type { DataTableGroupBy, DataTableLoadMore } from "./components/data-table-groups";
 export * from "./components/data-table-cells";
 export { useTableUrlState, readTableUrlState } from "./components/use-table-state";
 export type {

package/src/feedback/feedback-attachment-download.tsx

@@ -0,0 +1,77 @@
+import { useState } from "react";
+import type { MouseEvent } from "react";
+import { Download, FileText } from "lucide-react";
+import { Button } from "../components/button";
+import { toast } from "../components/toast";
+import type { AuthedFetcher } from "../hooks/use-authed-src";
+import { useKitLabels } from "../i18n/kit-labels";
+import { filenameFromDisposition, saveBlob } from "../lib/download";
+import { attachmentName } from "./feedback-record";
+import { DEFAULT_FEEDBACK_DETAIL_LABELS } from "./feedback-row-detail-labels";
+
+// Internal (not in the `./feedback` entry): the row detail's download button and its
+// plain fetch, shared since 0.47 with ./feedback-entry-file's inline entry files.
+
+/** 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. */
+export const plainFeedbackFetch: 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. Words: `feedbackDetail.download` /
+ * `downloadFailed`.
+ */
+export function FeedbackAttachmentDownload({ url, fetcher }: { url: string; fetcher: AuthedFetcher }) {
+  const labels = useKitLabels("feedbackDetail", DEFAULT_FEEDBACK_DETAIL_LABELS);
+  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>
+  );
+}

package/src/feedback/feedback-comment-thread.tsx

@@ -4,11 +4,13 @@ import { EyeOff } from "lucide-react";
 import { Button } from "../components/button";
 import { useConfirm } from "../components/confirm-dialog";
 import type { CommitScope } from "../components/write-lock";
+import type { AuthedFetcher } from "../hooks/use-authed-src";
 import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { FeedbackStatusBadge } from "./feedback-inbox";
 import type { FeedbackComment, FeedbackReply } from "./feedback-public-types";
 import { DEFAULT_FEEDBACK_PUBLIC_LABELS } from "./feedback-public-labels";
 import { FEEDBACK_COMMENT_MAX, attachmentName } from "./feedback-record";
+import { FeedbackEntryFile, useFeedbackEntryUpload, type FeedbackEntryUploadOptions } from "./feedback-entry-file";
 import { useFeedbackRepliesLabels } from "./feedback-replies";
 import { FeedbackRepliesDrawnAboveContext } from "./feedback-replies-context";
 import { FeedbackReworkEntryChip } from "./feedback-rework-entry-chip";
@@ -34,8 +36,13 @@ import { DEFAULT_FEEDBACK_COMMENTS_LABELS } from "./feedback-thread-parts-labels
  *   sees their text with that line; the admin sees it struck through, with **Unhide**.
  *   An admin has **Hide** on every visible comment; the writer **Delete** on their own,
  *   after a confirm (it is a hard delete). Nobody edits a comment.
- * - **The composer** (1–4 000 characters, no files) only with `onComment`: left out for
- *   a reader who may not write (a demo, a CRASH report — the app knows).
+ * - **The composer** (1–4 000 characters) only with `onComment`: left out for a reader
+ *   who may not write (a demo, a CRASH report — the app knows). Since 0.47 (§12) with
+ *   `onUpload` it takes one file as the rework note does — pasted into the box,
+ *   captured or picked — uploaded first, its URL `onComment`'s second argument.
+ * - **Files** (0.47, §12): a comment's or an entry's file under its text, a picture
+ *   INLINE — a thumbnail through `fetcher` that opens full size — any other file a
+ *   download ({@link FeedbackEntryFile}). A veiled comment shows none.
  *
  * Delete asks through `useConfirm`, so a thread with `onDelete` and a comment of the
  * viewer's needs the app's `ConfirmProvider` (each app mounts one already).
@@ -75,7 +82,7 @@ export { DEFAULT_FEEDBACK_COMMENTS_LABELS };
 
 /* ── The thread ───────────────────────────────────────────────────────────── */
 
-export interface FeedbackCommentThreadProps {
+export interface FeedbackCommentThreadProps extends FeedbackEntryUploadOptions {
   /** The report's replies (§9.7), oldest first. Left out or `[]`: none.
    *
    *  Inside `FeedbackRowDetail`'s `comments` they are dropped (0.38.1): the detail's
@@ -92,8 +99,12 @@ export interface FeedbackCommentThreadProps {
   /** `POST /feedback/{id}/comments`. Return the promise: the box clears when it
    *  resolves, and keeps the draft when it rejects. A failure is the app's to toast —
    *  the server's `detail`, else `feedbackToast.commentFailed` (0.38.1). Left out, no
-   *  composer. */
-  onComment?: (body: string) => void | Promise<unknown>;
+   *  composer. 0.47 (§12): `attachmentUrl` is the one file uploaded with it (with
+   *  `onUpload`), `undefined` for none — `attachment_url` in the body (server-kit 0.18). */
+  onComment?: (body: string, attachmentUrl?: string) => void | Promise<unknown>;
+  /** 0.47: the app's authenticated GET (`AuthedImage`'s) for the files in the thread.
+   *  Left out, the browser's own fetch with same-origin cookies. */
+  fetcher?: AuthedFetcher | null;
   /** `PATCH /feedback/{id}/comments/{comment_id} {hidden}` — the admin's. A rejection
    *  is caught (0.38.1) and is the app's to toast (`feedbackToast.updateFailed`). Left
    *  out, no Hide / Unhide. */
@@ -141,9 +152,18 @@ export function FeedbackCommentThread({
   loading = false,
   commit,
   now,
+  fetcher,
+  onUpload,
+  onCaptureScreenshot,
+  attachment,
   labels: labelsProp,
   className,
 }: FeedbackCommentThreadProps) {
+  const { composerAttachment, upload, uploading } = useFeedbackEntryUpload({
+    onUpload,
+    onCaptureScreenshot,
+    attachment,
+  });
   const labels = useKitLabels("feedbackComments", DEFAULT_FEEDBACK_COMMENTS_LABELS, labelsProp);
   const anonymous = useKitLabels("feedbackPublic", DEFAULT_FEEDBACK_PUBLIC_LABELS).anonymous;
   const replyLabels = useFeedbackRepliesLabels();
@@ -189,6 +209,10 @@ export function FeedbackCommentThread({
         author: reply.author_name ?? replyLabels.admin,
         createdAt: reply.created_at,
         body: reply.body,
+        // 0.47 (§12): an admin reply's file, where the view carries it.
+        attachments: reply.attachment_url
+          ? [{ name: attachmentName(reply.attachment_url), url: reply.attachment_url }]
+          : undefined,
         staff: true,
         badge: 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}>
@@ -244,6 +268,11 @@ export function FeedbackCommentThread({
         author: veiled ? undefined : comment.mine ? undefined : (comment.author_name ?? anonymous),
         createdAt: comment.created_at,
         body: veiled ? "" : (comment.body ?? ""),
+        // 0.47 (§12): its one file; none when veiled (the server sends none either).
+        attachments:
+          !veiled && comment.attachment_url
+            ? [{ name: attachmentName(comment.attachment_url), url: comment.attachment_url }]
+            : undefined,
         staff: !veiled && comment.staff,
         struck: comment.hidden && isAdmin && !veiled,
         footer: actions.length > 0 ? actions : undefined,
@@ -258,13 +287,19 @@ export function FeedbackCommentThread({
         messages={entries.map((entry) => entry.message)}
         loading={loading}
         now={now}
+        renderAttachment={(file) => (file.url ? <FeedbackEntryFile url={file.url} fetcher={fetcher} /> : file.name)}
         labels={{ thread: labels.comments, empty: labels.empty }}
       />
       {onComment && (
         <ChatComposer
           className="mt-3"
-          onSend={(body) => onComment(body)}
-          pending={pending}
+          onSend={async (body, file) => {
+            const url = await upload(file);
+            // The second argument only with a file, so a text comment calls as before 0.47.
+            return url === undefined ? onComment(body) : onComment(body, url);
+          }}
+          pending={pending || uploading}
+          attachment={composerAttachment}
           commit={commit}
           maxLength={FEEDBACK_COMMENT_MAX}
           showCount

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;
 }