@ciridae/ui 1.0.1 → 1.0.3

package/dist/components/drawer.d.ts

@@ -14,16 +14,16 @@ export type DrawerProps = Omit<ComponentProps<typeof BaseDrawer.Root>, "children
     size?: "narrow" | "regular" | "large";
     children: ReactNode;
 };
-export declare function Drawer({ title, icon: titleIcon, eyebrow, subtitle, titleAccessory, actions, size, children, ...rootProps }: DrawerProps): import("@types/react").JSX.Element;
+export declare function Drawer({ title, icon: titleIcon, eyebrow, subtitle, titleAccessory, actions, size, children, ...rootProps }: DrawerProps): import("react").JSX.Element;
 export declare function DrawerBody({ flush, className, ...props }: ComponentProps<"div"> & {
     flush?: boolean;
-}): import("@types/react").JSX.Element;
-export declare function DrawerForm({ className, ...props }: ComponentProps<"form">): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;
+export declare function DrawerForm({ className, ...props }: ComponentProps<"form">): import("react").JSX.Element;
 export type DrawerFooterProps = ComponentProps<"footer"> & {
     /** Muted text at the footer's leading edge saying what the actions do, before the actions. */
     note?: ReactNode;
 };
-export declare function DrawerFooter({ note, className, children, ...props }: DrawerFooterProps): import("@types/react").JSX.Element;
+export declare function DrawerFooter({ note, className, children, ...props }: DrawerFooterProps): import("react").JSX.Element;
 export type DrawerFieldProps = {
     label: ReactNode;
     /** Muted after the label, such as `Optional` or where a value was filled in from. */
@@ -39,6 +39,6 @@ export type DrawerFieldProps = {
  * A labelled form field. Its `<label>` points at the control inside, and its helper or error
  * describes it: `Input`, `Textarea`, `Select` and `Combobox` take the ids from the field.
  */
-export declare function DrawerField({ label, hint, helper, error, controlId, children }: DrawerFieldProps): import("@types/react").JSX.Element;
+export declare function DrawerField({ label, hint, helper, error, controlId, children }: DrawerFieldProps): import("react").JSX.Element;
 /** Two fields side by side. */
-export declare function DrawerFieldRow({ className, ...props }: ComponentProps<"div">): import("@types/react").JSX.Element;
+export declare function DrawerFieldRow({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;

package/dist/components/dropzone.d.ts

@@ -18,16 +18,16 @@ export type DropzoneProps = useRender.ComponentProps<"div"> & {
     accept?: string;
 };
 /** Drop or paste files onto the element; while dragged over it carries `data-dragging`. */
-export declare function Dropzone({ onFiles, dropLabel, disabled, accept, render, className, children, ...props }: DropzoneProps): import("@types/react").JSX.Element;
+export declare function Dropzone({ onFiles, dropLabel, disabled, accept, render, className, children, ...props }: DropzoneProps): import("react").JSX.Element;
 /** The enclosing `Dropzone`'s picker, for a trigger of the caller's own, such as an icon button. */
 export declare function useDropzonePicker(): DropzoneContextValue;
 export type DropzoneTriggerProps = Omit<ButtonProps, "onClick">;
 /** Opens the enclosing `Dropzone`'s file picker; a paperclip unless it sets its own icon. */
-export declare function DropzoneTrigger({ icon: triggerIcon, variant, disabled, ...props }: DropzoneTriggerProps): import("@types/react").JSX.Element;
+export declare function DropzoneTrigger({ icon: triggerIcon, variant, disabled, ...props }: DropzoneTriggerProps): import("react").JSX.Element;
 /** A dashed pad at rest inside a `Dropzone`: drop files on it, or browse for them. */
 export declare function DropzonePad({ className }: {
     className?: string;
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;
 export type DropzoneFileListProps = {
     files: readonly File[];
     onRemove: (file: File) => void;
@@ -42,6 +42,6 @@ export type DropzoneFileListProps = {
     className?: string;
 };
 /** One row per file: a thumbnail for an image, else its type's icon, its name and size, remove. */
-export declare function DropzoneFileList({ files, onRemove, pending, disabled, variant, className, }: DropzoneFileListProps): import("@types/react").JSX.Element | null;
+export declare function DropzoneFileList({ files, onRemove, pending, disabled, variant, className, }: DropzoneFileListProps): import("react").JSX.Element | null;
 /** A file's type as an icon: PDF, archive, text, or a plain file. */
 export declare function fileTypeIcon(file: Pick<File, "name" | "type">): ReactNode;

package/dist/components/editable-field.d.ts

@@ -74,7 +74,7 @@ export type EditableFieldProps = Omit<ComponentProps<"div">, "children"> & {
     edit?: FieldEdit;
     labels?: Partial<CiridaeLabels["editableField"]>;
 };
-export declare function EditableField({ label, value, provenance, badge, note, action, edit, labels: ownLabels, className, ...props }: EditableFieldProps): import("@types/react").JSX.Element;
+export declare function EditableField({ label, value, provenance, badge, note, action, edit, labels: ownLabels, className, ...props }: EditableFieldProps): import("react").JSX.Element;
 export type ConflictingSource = {
     id: string;
     label: ReactNode;
@@ -96,4 +96,4 @@ export type SourceConflictProps = Omit<ComponentProps<"div">, "children"> & {
         effectiveValue: string;
     }>;
 };
-export declare function SourceConflict({ sources, effective, action, labels: ownLabels, className, ...props }: SourceConflictProps): import("@types/react").JSX.Element;
+export declare function SourceConflict({ sources, effective, action, labels: ownLabels, className, ...props }: SourceConflictProps): import("react").JSX.Element;

package/dist/components/email-input.d.ts

@@ -9,4 +9,4 @@ export type EmailInputProps = Omit<InputProps, "value" | "defaultValue" | "onCha
     invalidEmails?: readonly string[];
 };
 /** Comma, semicolon, whitespace, Enter, Tab, or blur commits addresses; duplicates are ignored. */
-export declare function EmailInput({ value, onValueChange, inputValue, onInputValueChange, invalidEmails, disabled, className, onKeyDown, onBlur, onPaste, ...props }: EmailInputProps): import("@types/react").JSX.Element;
+export declare function EmailInput({ value, onValueChange, inputValue, onInputValueChange, invalidEmails, disabled, className, onKeyDown, onBlur, onPaste, ...props }: EmailInputProps): import("react").JSX.Element;

package/dist/components/environment-frame.d.ts

@@ -10,4 +10,4 @@ export type EnvironmentFrameProps = ComponentProps<"div"> & {
     tone?: SiteBannerProps["tone"];
 };
 /** A persistent environment strip and an inset AppShell viewport. */
-export declare function EnvironmentFrame({ label, tone, children, className, ...props }: EnvironmentFrameProps): import("@types/react").JSX.Element;
+export declare function EnvironmentFrame({ label, tone, children, className, ...props }: EnvironmentFrameProps): import("react").JSX.Element;

package/dist/components/expandable-text.d.ts

@@ -6,4 +6,4 @@ import { type ReactNode } from "react";
 export declare function ExpandableText({ children, className, }: {
     children: ReactNode;
     className?: string;
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;

package/dist/components/feedback-screenshot.d.ts

@@ -16,4 +16,4 @@ export declare function FeedbackScreenshot({ src, pointers, onPointersChange, di
     pointers: readonly PlacedScreenshotPointer[];
     onPointersChange: (pointers: readonly PlacedScreenshotPointer[]) => void;
     disabled?: boolean;
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;

package/dist/components/feedback-sheet.d.ts

@@ -1,5 +1,6 @@
 import { type ReactNode } from "react";
 import { type FeedbackItem, type FeedbackSummary } from "../feedback/contract.js";
+import { type FeedbackTriageStatus, type OperatorFeedbackItem, type OperatorFeedbackSummary } from "../feedback/operator-contract.js";
 import { type FeedbackScreenshotPointer } from "./feedback-screenshot.js";
 import { type CiridaeLabels } from "./locale.js";
 export type FeedbackKind = "wrong" | "idea" | "question";
@@ -42,7 +43,7 @@ export type FeedbackFormProps = {
     onClose: () => void;
 };
 /** The sheet's form, body and footer, for a `Drawer` that holds more than the form. */
-export declare function FeedbackForm({ where: about, screenshot, onSubmit, errorDetail, onClose, }: FeedbackFormProps): import("@types/react").JSX.Element;
+export declare function FeedbackForm({ where: about, screenshot, onSubmit, errorDetail, onClose, }: FeedbackFormProps): import("react").JSX.Element;
 /** Something the caller loads for the sheet: in flight, failed with a way to try again, or here. */
 export type FeedbackLoadState<Data> = {
     status: "loading";
@@ -66,15 +67,29 @@ export type FeedbackSentProps = {
     /** Resolves once `item` is withdrawn. */
     onWithdraw: (feedbackId: string) => Promise<void>;
 };
+/** The All tab, for the people who answer feedback: everyone's items, triaged and replied to. */
+export type FeedbackOperatorProps = {
+    /** Every reporter's feedback, in any order; the tab lists the latest change first. */
+    items: FeedbackLoadState<readonly OperatorFeedbackSummary[]>;
+    /** Loads the item into `item`; the sheet shows it once the ids match. */
+    onOpenItem: (feedbackId: string) => void;
+    item?: FeedbackLoadState<OperatorFeedbackItem>;
+    /** Resolves once `item` carries the reply; rejecting keeps the reply in the composer. */
+    onReply: (feedbackId: string, body: string) => Promise<void>;
+    /** Resolves once `item` carries the status; withdrawing stays the reporter's. */
+    onStatusChange: (feedbackId: string, status: FeedbackTriageStatus) => Promise<void>;
+};
 export type FeedbackSheetProps = Omit<FeedbackFormProps, "onClose"> & {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     /** Controls in the sheet's header, before the close button. */
     actions?: ReactNode;
-    /** The Sent tab; without it the sheet is the form alone. */
+    /** The person's own tickets; without it or `operator` the sheet is the form alone. */
     sent?: FeedbackSentProps;
+    /** For an operator, the Tickets tab lists everyone's, with a filter for their own (`sent`). */
+    operator?: FeedbackOperatorProps;
     /** Rewords the sheet's labels over the locale's. */
     labels?: Partial<FeedbackLabels>;
 };
 /** The floating feedback sheet. Closing it drops the draft and the open item. */
-export declare function FeedbackSheet({ labels, ...props }: FeedbackSheetProps): import("@types/react").JSX.Element;
+export declare function FeedbackSheet({ labels, ...props }: FeedbackSheetProps): import("react").JSX.Element;

package/dist/components/feedback-sheet.js

@@ -3,23 +3,28 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * The feedback sheet. New: what it is about, where it was sent from, what happened, whether to
  * attach a screenshot, with numbered pointers and notes on it, and files dropped on the form,
  * picked or pasted; the form owns its validation and the sending, sent and failed states.
- * Sent: everything the person filed, and each item's conversation with the Ciridae team as a
- * thread they can reply in, with the item's actions, such as withdrawing it, behind its menu.
- * The sheet is presentational: the caller owns the requests behind `onSubmit`, `items`, `item`,
- * `onReply` and `onWithdraw`.
+ * Tickets: everything the person filed, and each item's conversation with the Ciridae team as a
+ * thread they can reply in, with the item's actions, such as withdrawing it, behind its menu. For
+ * an operator it lists everyone's instead, filtered (their own among the filters) and searched,
+ * each item the same thread with a status to set. The sheet is presentational: the caller owns the requests behind
+ * `onSubmit`, `sent` and `operator`; `useFeedbackOperatorSheet` builds `operator` from the API.
  */
 import { ArrowClockwiseIcon, ArrowLeftIcon, ChatCircleTextIcon, DotsThreeIcon, SquaresFourIcon, } from "@phosphor-icons/react";
 import { createContext, useContext, useId, useState } from "react";
 import { css, cx } from "#primitives/css";
-import { feedbackAttachmentLimits, } from "../feedback/contract.js";
+import { feedbackAttachmentLimits, feedbackStatusSchema, feedbackTypeSchema, } from "../feedback/contract.js";
+import { feedbackTriageStatusSchema, } from "../feedback/operator-contract.js";
 import { Button, IconButton } from "./button.js";
 import { ChatComposer, ChatThread } from "./chat.js";
+import { useCopy } from "./copyable-id.js";
 import { DateTime } from "./date-time.js";
 import { Drawer, DrawerBody, DrawerField, DrawerFooter, DrawerForm } from "./drawer.js";
 import { Dropzone, DropzoneFileList, DropzonePad } from "./dropzone.js";
 import { FeedbackScreenshot, } from "./feedback-screenshot.js";
+import { FilterBar, matchesFilter } from "./filter-bar.js";
 import { Checkbox, Textarea } from "./form-controls.js";
 import { directional, icon, Spinner } from "./icon.js";
+import { SearchInput } from "./input.js";
 import { Eyebrow } from "./layout.js";
 import { useCiridaeLocale } from "./locale.js";
 import { Menu } from "./menu.js";
@@ -205,6 +210,11 @@ const sentEmpty = css({
     textAlign: "center",
 });
 const padded = css({ padding: "panel.comfortable" });
+const listToolbar = css({
+    paddingBlock: "panel.compact",
+    paddingInline: "panel.comfortable",
+    borderBottom: "1px solid token(colors.border.subtle)",
+});
 /* An item: its subject and status pinned over the thread, which scrolls; the reply below. */
 const itemHeader = css({
     position: "sticky",
@@ -347,25 +357,39 @@ function FailedNotice({ title, children, action, }) {
 export function FeedbackSheet({ labels, ...props }) {
     return (_jsx(FeedbackLabelsContext, { value: labels, children: _jsx(FeedbackSheetContent, { ...props }) }));
 }
-function FeedbackSheetContent({ open, onOpenChange, actions, sent, errorDetail, ...formProps }) {
+function FeedbackSheetContent({ open, onOpenChange, actions, sent, operator, errorDetail, ...formProps }) {
     const labels = useFeedbackLabels();
+    const operatorLabels = useCiridaeLocale().labels.feedbackOperator;
     const [tab, setTab] = useState("new");
     const [openItemId, setOpenItemId] = useState(null);
-    const showSent = tab === "sent" && sent !== undefined;
+    const showAll = tab === "tickets" && operator !== undefined;
+    const showSent = tab === "tickets" && !showAll && sent !== undefined;
     const close = () => {
         onOpenChange(false);
         setOpenItemId(null);
     };
-    return (_jsx(Drawer, { open: open, onOpenChange: (next) => (next ? onOpenChange(true) : close()), title: showSent ? labels.sentTitle : labels.sendTitle, icon: _jsx(ChatCircleTextIcon, { className: icon({ size: "small" }), weight: "fill" }), actions: _jsxs(_Fragment, { children: [sent && (_jsx(TabsRoot, { value: tab, onValueChange: (value) => {
+    const back = () => setOpenItemId(null);
+    return (_jsx(Drawer, { open: open, onOpenChange: (next) => (next ? onOpenChange(true) : close()), title: showAll ? operatorLabels.allTitle : showSent ? labels.sentTitle : labels.sendTitle, icon: _jsx(ChatCircleTextIcon, { className: icon({ size: "small" }), weight: "fill" }), actions: _jsxs(_Fragment, { children: [(sent || operator) && (_jsx(TabsRoot, { value: tab, onValueChange: (value) => {
                         setTab(value);
                         setOpenItemId(null);
-                    }, children: _jsxs(TabsList, { variant: "contained", children: [_jsx(TabsTab, { value: "new", children: labels.newTab }), _jsx(TabsTab, { value: "sent", children: labels.sentTab })] }) })), actions] }), children: !showSent ? (_jsx(FeedbackForm, { ...formProps, errorDetail: errorDetail, onClose: close })) : openItemId === null ? (_jsx(SentList, { items: sent.items, errorDetail: errorDetail, onOpen: (feedbackId) => {
+                    }, children: _jsxs(TabsList, { variant: "contained", children: [_jsx(TabsTab, { value: "new", children: labels.newTab }), _jsx(TabsTab, { value: "tickets", children: labels.ticketsTab })] }) })), actions] }), children: showAll ? (openItemId === null ? (_jsx(OperatorList, { operator: operator, ownIds: sent?.items.status === "loaded"
+                ? new Set(sent.items.data.map((item) => item.id))
+                : undefined, errorDetail: errorDetail, onOpen: (feedbackId) => {
+                operator.onOpenItem(feedbackId);
+                setOpenItemId(feedbackId);
+            } })) : (_jsx(OperatorItem, { feedbackId: openItemId, operator: operator, errorDetail: errorDetail, onBack: back }, openItemId))) : !showSent ? (_jsx(FeedbackForm, { ...formProps, errorDetail: errorDetail, onClose: close })) : openItemId === null ? (_jsx(FeedbackList, { items: sent.items, rows: (items) => items.map((item) => ({
+                id: item.id,
+                subject: item.subject,
+                status: item.status,
+                meta: (_jsxs(_Fragment, { children: [typeLabel(item.type, labels), " \u00B7", " ", _jsx(DateTime, { value: item.updatedAt_epoch_milliseconds })] })),
+            })), empty: labels.noneSent, errorDetail: errorDetail, onOpen: (feedbackId) => {
                 sent.onOpenItem(feedbackId);
                 setOpenItemId(feedbackId);
-            } })) : (_jsx(SentItem, { feedbackId: openItemId, item: sent.item, errorDetail: errorDetail, onReply: sent.onReply, onWithdraw: sent.onWithdraw, onBack: () => setOpenItemId(null) }, openItemId)) }));
+            } })) : (_jsx(SentItem, { feedbackId: openItemId, item: sent.item, errorDetail: errorDetail, onReply: sent.onReply, onWithdraw: sent.onWithdraw, onBack: back }, openItemId)) }));
 }
 const placeholderWidths = ["58%", "42%", "50%"];
-function SentList({ items, errorDetail, onOpen, }) {
+/** A list of feedback rows: loading, failed, empty, or each row's subject, meta and status. */
+function FeedbackList({ items, rows, empty, toolbar, errorDetail, onOpen, }) {
     const labels = useFeedbackLabels();
     const { common } = useCiridaeLocale().labels;
     if (items.status === "error") {
@@ -374,13 +398,68 @@ function SentList({ items, errorDetail, onOpen, }) {
     if (items.status === "loading") {
         return (_jsx(DrawerBody, { flush: true, children: _jsx("ul", { className: sentList, "aria-busy": "true", children: placeholderWidths.map((width) => (_jsxs("li", { className: sentRow, children: [_jsxs("span", { className: sentRowCopy, children: [_jsx(Skeleton, { shape: "text", style: { width } }), _jsx(Skeleton, { shape: "text", style: { width: "30%" } })] }), _jsx(Skeleton, { shape: "text", style: { width: 64 } })] }, width))) }) }));
     }
-    if (items.data.length === 0) {
-        return (_jsx(DrawerBody, { flush: true, children: _jsx("p", { className: sentEmpty, children: labels.noneSent }) }));
-    }
-    return (_jsx(DrawerBody, { flush: true, children: _jsx("ul", { className: sentList, children: items.data.map((item) => {
-                const needsReply = item.status === "discussion_required";
-                return (_jsx("li", { children: _jsxs("button", { type: "button", className: sentRow, "data-needs-reply": needsReply ? "" : undefined, onClick: () => onOpen(item.id), children: [_jsxs("span", { className: sentRowCopy, children: [_jsxs("span", { className: sentRowSubject, children: [needsReply && _jsx("span", { className: needsReplyDot, "aria-hidden": "true" }), _jsx("span", { children: item.subject })] }), _jsxs("span", { className: sentRowMeta, children: [typeLabel(item.type, labels), " \u00B7", " ", _jsx(DateTime, { value: item.updatedAt_epoch_milliseconds })] })] }), _jsx(Status, { variant: statusDisplay(item.status, labels).variant, children: statusDisplay(item.status, labels).label })] }) }, item.id));
-            }) }) }));
+    const shown = rows(items.data);
+    return (_jsxs(DrawerBody, { flush: true, children: [toolbar, shown.length === 0 ? (_jsx("p", { className: sentEmpty, children: empty })) : (_jsx("ul", { className: sentList, children: shown.map((row) => {
+                    const needsReply = row.status === "discussion_required";
+                    const display = statusDisplay(row.status, labels);
+                    return (_jsx("li", { children: _jsxs("button", { type: "button", className: sentRow, "data-needs-reply": needsReply ? "" : undefined, onClick: () => onOpen(row.id), children: [_jsxs("span", { className: sentRowCopy, children: [_jsxs("span", { className: sentRowSubject, children: [needsReply && _jsx("span", { className: needsReplyDot, "aria-hidden": "true" }), _jsx("span", { children: row.subject })] }), _jsx("span", { className: sentRowMeta, children: row.meta })] }), _jsx(Status, { variant: display.variant, children: display.label })] }) }, row.id));
+                }) }))] }));
+}
+/** Everyone's feedback, latest change first, narrowed by status, type and a search. */
+function OperatorList({ operator, ownIds, errorDetail, onOpen, }) {
+    const labels = useFeedbackLabels();
+    const operatorLabels = useCiridaeLocale().labels.feedbackOperator;
+    const [filters, setFilters] = useState([]);
+    const [search, setSearch] = useState("");
+    const query = search.trim().toLowerCase();
+    const fields = [
+        ...(ownIds
+            ? [
+                {
+                    key: "reporter",
+                    label: operatorLabels.reporter,
+                    kind: "multi",
+                    options: [{ value: "mine", label: operatorLabels.mine }],
+                },
+            ]
+            : []),
+        {
+            key: "status",
+            label: operatorLabels.status,
+            kind: "multi",
+            options: feedbackStatusSchema.options.map((value) => ({
+                value,
+                label: statusDisplay(value, labels).label,
+            })),
+        },
+        {
+            key: "type",
+            label: operatorLabels.type,
+            kind: "multi",
+            options: feedbackTypeSchema.options.map((value) => ({
+                value,
+                label: typeLabel(value, labels),
+            })),
+        },
+    ];
+    return (_jsx(FeedbackList, { items: operator.items, rows: (items) => items
+            .filter((item) => filters.every((filter) => matchesFilter(filter.field === "reporter"
+            ? ownIds?.has(item.id)
+                ? "mine"
+                : "others"
+            : filter.field === "status"
+                ? item.status
+                : item.type, filter)) &&
+            (query === "" ||
+                [item.subject, item.description, item.reporterEmail].some((value) => value?.toLowerCase().includes(query))))
+            // ISO timestamps in one format sort as text.
+            .sort((left, right) => right.updatedAt.localeCompare(left.updatedAt))
+            .map((item) => ({
+            id: item.id,
+            subject: item.subject,
+            status: item.status,
+            meta: (_jsxs(_Fragment, { children: [item.reporterEmail ?? operatorLabels.reporter, " \u00B7 ", typeLabel(item.type, labels), " \u00B7", " ", _jsx(DateTime, { value: item.updatedAt })] })),
+        })), empty: filters.length > 0 || query !== "" ? operatorLabels.noMatches : operatorLabels.noneReceived, toolbar: _jsx(FilterBar, { className: listToolbar, fields: fields, value: filters, onValueChange: setFilters, children: _jsx(SearchInput, { variant: "ghost", "aria-label": operatorLabels.search, placeholder: operatorLabels.search, value: search, onValueCommit: setSearch }) }), errorDetail: errorDetail, onOpen: onOpen }));
 }
 /* What the thread shows in time order: the description, each status change, each message. */
 function listThreadEntries(item, labels) {
@@ -413,37 +492,60 @@ function listThreadEntries(item, labels) {
     ];
     return entries.sort((earlier, later) => earlier.at - later.at);
 }
-function SentItem({ feedbackId, item, errorDetail, onReply, onWithdraw, onBack, }) {
+/**
+ * The operator's side of the same thread: the reporter's description and messages across from
+ * them, their own team's replies on their side.
+ */
+function listOperatorThreadEntries(item, reporter) {
+    const entries = [
+        {
+            kind: "message",
+            id: "description",
+            side: "assistant",
+            author: { name: reporter },
+            at: Date.parse(item.createdAt),
+            body: item.description,
+            attachments: item.attachments,
+        },
+        ...item.messages.map((message) => {
+            const fromReporter = message.author.role === "reporter";
+            return {
+                kind: "message",
+                id: message.id,
+                side: fromReporter ? "assistant" : "user",
+                author: fromReporter ? { name: message.author.name } : undefined,
+                at: message.createdAt_epoch_milliseconds,
+                body: message.body,
+            };
+        }),
+    ];
+    return entries.sort((earlier, later) => earlier.at - later.at);
+}
+/** Runs `action`, reporting it pending, then idle, or failed with its error. */
+function usePendingAction(action) {
+    const [state, setState] = useState({ status: "idle" });
+    const run = async (input) => {
+        setState({ status: "pending" });
+        try {
+            await action(input);
+            setState({ status: "idle" });
+        }
+        catch (error) {
+            setState({ status: "failed", error });
+        }
+    };
+    return { state, run: (input) => void run(input) };
+}
+/**
+ * One item as a thread: its header pinned over the conversation, then the failures and the reply
+ * below. Loading and failing to load keep the back button.
+ */
+function FeedbackThreadItem({ feedbackId, item, loaded, headerEnd, notices, replyDisabled, errorDetail, onReply, onBack, }) {
     const labels = useFeedbackLabels();
     const { common } = useCiridaeLocale().labels;
     const [draft, setDraft] = useState("");
     const [reply, setReply] = useState({ status: "idle" });
-    const [withdraw, setWithdraw] = useState({ status: "idle" });
-    // The item the caller last opened is this one only once its load carries this id.
-    const loaded = item?.status === "loaded" && item.data.id === feedbackId ? item.data : null;
-    const entries = loaded ? listThreadEntries(loaded, labels) : [];
-    if (reply.status === "sending") {
-        entries.push({
-            kind: "message",
-            id: "sending",
-            side: "user",
-            at: reply.at,
-            body: reply.body,
-            sending: true,
-        });
-    }
     const back = (_jsx(IconButton, { "aria-label": labels.back, variant: "ghost", size: "small", onClick: onBack, children: _jsx(ArrowLeftIcon, { className: cx(icon({ size: "small" }), directional) }) }));
-    const actions = [
-        { label: labels.copyId, onSelect: () => void navigator.clipboard.writeText(feedbackId) },
-    ];
-    if (loaded?.canWithdraw) {
-        actions.push({
-            label: labels.withdraw,
-            variant: "danger",
-            disabled: reply.status === "sending",
-            onSelect: () => void sendWithdraw(),
-        });
-    }
     const sendReply = async (body) => {
         setReply({ status: "sending", body, at: Date.now() });
         try {
@@ -455,21 +557,80 @@ function SentItem({ feedbackId, item, errorDetail, onReply, onWithdraw, onBack,
             setReply({ status: "failed", error });
         }
     };
-    const sendWithdraw = async () => {
-        setWithdraw({ status: "pending" });
-        try {
-            await onWithdraw(feedbackId);
-            setWithdraw({ status: "idle" });
-        }
-        catch (error) {
-            setWithdraw({ status: "failed", error });
-        }
-    };
     if (item?.status === "error") {
         return (_jsxs(DrawerBody, { flush: true, children: [_jsx("div", { className: itemHeader, children: back }), _jsx("div", { className: padded, children: _jsx(FailedNotice, { title: labels.loadItemFailed, action: _jsx("button", { type: "button", onClick: item.retry, children: common.tryAgain }), children: errorDetail?.(item.error) }) })] }));
     }
     if (!loaded) {
         return (_jsxs(DrawerBody, { flush: true, "aria-busy": "true", children: [_jsxs("div", { className: itemHeader, children: [back, _jsxs("span", { className: itemTitle, children: [_jsx(Skeleton, { shape: "text", style: { width: "60%" } }), _jsx(Skeleton, { shape: "text", style: { width: "30%" } })] })] }), _jsx("div", { className: padded, children: _jsxs("span", { className: placeholderLines, children: [_jsx(Skeleton, { shape: "text" }), _jsx(Skeleton, { shape: "text", style: { width: "80%" } }), _jsx(Skeleton, { shape: "text", style: { width: "50%" } })] }) })] }));
     }
-    return (_jsxs(_Fragment, { children: [_jsxs(DrawerBody, { flush: true, children: [_jsxs("div", { className: itemHeader, children: [back, _jsxs("span", { className: itemTitle, children: [_jsx("span", { className: itemSubject, children: loaded.subject }), _jsxs("span", { className: sentRowMeta, children: [typeLabel(loaded.type, labels), " \u00B7", " ", _jsx(DateTime, { value: loaded.createdAt_epoch_milliseconds })] })] }), _jsx(Status, { className: itemStatus, variant: statusDisplay(loaded.status, labels).variant, children: statusDisplay(loaded.status, labels).label }), _jsx(Menu, { align: "end", items: actions, trigger: _jsx(IconButton, { "aria-label": labels.actions, variant: "ghost", size: "small", disabled: withdraw.status === "pending", children: withdraw.status === "pending" ? (_jsx(Spinner, { label: labels.withdrawing })) : (_jsx(DotsThreeIcon, { className: icon({ size: "small" }) })) }) })] }), _jsx(ChatThread, { entries: entries })] }), (loaded.canReply || reply.status === "failed" || withdraw.status === "failed") && (_jsxs("div", { className: itemFoot, children: [reply.status === "failed" && (_jsx(FailedNotice, { title: labels.replyFailed, children: errorDetail?.(reply.error) })), withdraw.status === "failed" && (_jsx(FailedNotice, { title: labels.withdrawFailed, children: errorDetail?.(withdraw.error) })), loaded.canReply && (_jsx(ChatComposer, { variant: "sheet", placeholder: labels.reply, ariaLabel: labels.reply, submitLabel: labels.sendReply, value: draft, onValueChange: setDraft, sendDisabled: reply.status === "sending", onSend: (body) => void sendReply(body.trim()) }))] }))] }));
+    const entries = reply.status === "sending"
+        ? [
+            ...loaded.entries,
+            {
+                kind: "message",
+                id: "sending",
+                side: "user",
+                at: reply.at,
+                body: reply.body,
+                sending: true,
+            },
+        ]
+        : loaded.entries;
+    return (_jsxs(_Fragment, { children: [_jsxs(DrawerBody, { flush: true, children: [_jsxs("div", { className: itemHeader, children: [back, _jsxs("span", { className: itemTitle, children: [_jsx("span", { className: itemSubject, children: loaded.subject }), _jsx("span", { className: sentRowMeta, children: loaded.meta })] }), headerEnd] }), _jsx(ChatThread, { entries: entries })] }), (loaded.canReply || reply.status === "failed" || notices) && (_jsxs("div", { className: itemFoot, children: [reply.status === "failed" && (_jsx(FailedNotice, { title: labels.replyFailed, children: errorDetail?.(reply.error) })), notices, loaded.canReply && (_jsx(ChatComposer, { variant: "sheet", placeholder: labels.reply, ariaLabel: labels.reply, submitLabel: labels.sendReply, value: draft, onValueChange: setDraft, sendDisabled: replyDisabled || reply.status === "sending", onSend: (body) => void sendReply(body.trim()) }))] }))] }));
+}
+function SentItem({ feedbackId, item, errorDetail, onReply, onWithdraw, onBack, }) {
+    const labels = useFeedbackLabels();
+    const withdraw = usePendingAction(() => onWithdraw(feedbackId));
+    const copyId = useCopy(feedbackId);
+    // The item the caller last opened is this one only once its load carries this id.
+    const loaded = item?.status === "loaded" && item.data.id === feedbackId ? item.data : null;
+    const actions = [{ label: labels.copyId, onSelect: copyId.copy }];
+    if (loaded?.canWithdraw) {
+        actions.push({
+            label: labels.withdraw,
+            variant: "danger",
+            onSelect: () => withdraw.run(undefined),
+        });
+    }
+    const display = loaded && statusDisplay(loaded.status, labels);
+    return (_jsx(FeedbackThreadItem, { feedbackId: feedbackId, item: item, loaded: loaded && {
+            subject: loaded.subject,
+            meta: (_jsxs(_Fragment, { children: [typeLabel(loaded.type, labels), " \u00B7", " ", _jsx(DateTime, { value: loaded.createdAt_epoch_milliseconds })] })),
+            entries: listThreadEntries(loaded, labels),
+            canReply: loaded.canReply,
+        }, headerEnd: _jsxs(_Fragment, { children: [display && (_jsx(Status, { className: itemStatus, variant: display.variant, children: display.label })), _jsx(Menu, { align: "end", items: actions, trigger: _jsx(IconButton, { "aria-label": labels.actions, variant: "ghost", size: "small", disabled: withdraw.state.status === "pending", children: withdraw.state.status === "pending" ? (_jsx(Spinner, { label: labels.withdrawing })) : (_jsx(DotsThreeIcon, { className: icon({ size: "small" }) })) }) })] }), notices: withdraw.state.status === "failed" && (_jsx(FailedNotice, { title: labels.withdrawFailed, children: errorDetail?.(withdraw.state.error) })), replyDisabled: withdraw.state.status === "pending", errorDetail: errorDetail, onReply: onReply, onBack: onBack }));
+}
+/** An item as its operator sees it: the reporter's thread, a status to set, and a reply. */
+function OperatorItem({ feedbackId, operator, errorDetail, onBack, }) {
+    const labels = useFeedbackLabels();
+    const operatorLabels = useCiridaeLocale().labels.feedbackOperator;
+    const [pendingStatus, setPendingStatus] = useState(null);
+    const statusChange = usePendingAction(async (status) => {
+        setPendingStatus(status);
+        try {
+            await operator.onStatusChange(feedbackId, status);
+        }
+        finally {
+            setPendingStatus(null);
+        }
+    });
+    const { item } = operator;
+    const loaded = item?.status === "loaded" && item.data.id === feedbackId ? item.data : null;
+    const status = pendingStatus ?? loaded?.status;
+    const reporter = loaded?.reporterEmail ?? operatorLabels.reporter;
+    const statusOptions = [
+        // A withdrawn item is the reporter's call; it shows, but cannot be chosen.
+        ...(status === "withdrawn" ? ["withdrawn"] : []),
+        ...feedbackTriageStatusSchema.options,
+    ].map((value) => ({ value, label: statusDisplay(value, labels).label }));
+    return (_jsx(FeedbackThreadItem, { feedbackId: feedbackId, item: item, loaded: loaded && {
+            subject: loaded.subject,
+            meta: (_jsxs(_Fragment, { children: [reporter, " \u00B7 ", typeLabel(loaded.type, labels), " \u00B7 ", _jsx(DateTime, { value: loaded.createdAt })] })),
+            entries: listOperatorThreadEntries(loaded, reporter),
+            canReply: loaded.canReply,
+        }, headerEnd: _jsx(Select, { label: operatorLabels.status, options: statusOptions, value: status, disabled: status === "withdrawn" || statusChange.state.status === "pending", onValueChange: (value) => {
+                const next = feedbackTriageStatusSchema.safeParse(value);
+                if (next.success && next.data !== status)
+                    statusChange.run(next.data);
+            } }), notices: statusChange.state.status === "failed" && (_jsx(FailedNotice, { title: operatorLabels.statusFailed, children: errorDetail?.(statusChange.state.error) })), errorDetail: errorDetail, onReply: operator.onReply, onBack: onBack }));
 }

package/dist/components/field-context.d.ts

@@ -8,7 +8,7 @@ export type FieldControl = {
     descriptionId?: string;
     invalid: boolean;
 };
-export declare const FieldControlContext: import("@types/react").Context<FieldControl | null>;
+export declare const FieldControlContext: import("react").Context<FieldControl | null>;
 /** The ids and state a control takes from its field; its own props win. */
 export declare function useFieldControl(own: {
     id?: string;

package/dist/components/filter-bar.d.ts

@@ -49,7 +49,7 @@ export declare function FilterChip({ label, icon: fieldIcon, operator, values, o
     values: ReactNode;
     onEdit?: () => void;
     onRemove: () => void;
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;
 /**
  * The set filters as chips, Clear all, and the Add filter builder: pick a field, then its operator
  * and values, which apply as they are picked. Pressing a chip reopens the builder on its field.
@@ -63,7 +63,7 @@ export declare function FilterBar({ fields, value, defaultValue, onValueChange,
     onValueChange?: (value: FilterValue[]) => void;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;
 /**
  * One field's operator and values, reporting every change so the list follows along. `onBack`
  * adds the way back to the builder's field list; without it the field is fixed, as under a
@@ -74,4 +74,4 @@ export declare function FilterValueEditor({ field, value, onChange, onBack, }: {
     value: FilterValue | undefined;
     onChange: (filter: FilterValue) => void;
     onBack?: () => void;
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;

package/dist/components/filter-bar.js

@@ -158,14 +158,17 @@ const chips = css({
     gap: "layout.controlGap",
     minWidth: "0",
 });
+// One line: the buttons keep their size and the search after them takes what the row leaves.
 const tools = css({
     display: "flex",
+    flex: "1",
     alignItems: "center",
     justifyContent: "flex-end",
-    flexWrap: "wrap",
     gap: "layout.controlGap",
     minWidth: "0",
     marginInlineStart: "auto",
+    "& > button": { flexShrink: "0" },
+    "& > :not(button)": { minWidth: "0" },
 });
 const builder = css({ display: "flex", flexDirection: "column", width: "300px", maxWidth: "100%" });
 const fieldItem = css({

package/dist/components/form-controls.d.ts

@@ -1,7 +1,7 @@
 import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
 import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
 import type { ComponentProps, ReactNode } from "react";
-export declare const checkMark: import("../../../src/styled-system/types/index.js").RecipeRuntimeFn<{
+export declare const checkMark: import("../styled-system/types/index.js").RecipeRuntimeFn<{
     shape: {
         box: {
             borderRadius: "control";
@@ -28,8 +28,8 @@ export declare function Checkbox({ children, className, wrapperClassName, ...pro
     children?: ReactNode;
     className?: string;
     wrapperClassName?: string;
-}): import("@types/react").JSX.Element;
-export declare function Textarea({ className, ...props }: ComponentProps<"textarea">): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;
+export declare function Textarea({ className, ...props }: ComponentProps<"textarea">): import("react").JSX.Element;
 export declare const radioDot: string;
 export type RadioGroupProps = Omit<ComponentProps<typeof BaseRadioGroup>, "children" | "defaultValue" | "name" | "onValueChange" | "value"> & {
     name: string;
@@ -44,7 +44,7 @@ export type RadioGroupProps = Omit<ComponentProps<typeof BaseRadioGroup>, "child
     value?: string;
     onValueChange?: (value: string) => void;
 };
-export declare function RadioGroup({ name, options, label: groupLabel, defaultValue, value, onValueChange, layout, className, ...props }: RadioGroupProps): import("@types/react").JSX.Element;
+export declare function RadioGroup({ name, options, label: groupLabel, defaultValue, value, onValueChange, layout, className, ...props }: RadioGroupProps): import("react").JSX.Element;
 type SelectOption = {
     label: string;
     value: string;

package/dist/components/form-layout.d.ts

@@ -4,8 +4,8 @@ import type { ComponentProps, ReactNode } from "react";
  * Stacked form fields. Validation is the form library's, never the browser's, so this always
  * carries `noValidate`.
  */
-export declare function Form({ className, ...props }: ComponentProps<"form">): import("@types/react").JSX.Element;
-export declare function FormActions({ className, ...props }: ComponentProps<"div">): import("@types/react").JSX.Element;
+export declare function Form({ className, ...props }: ComponentProps<"form">): import("react").JSX.Element;
+export declare function FormActions({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
 /**
  * A label round a `FieldLabel`, its control and any `FieldError`: the label names the control it
  * holds, and while `invalid` the control is marked and described by the error, so `Input`,
@@ -13,20 +13,20 @@ export declare function FormActions({ className, ...props }: ComponentProps<"div
  */
 export declare function Field({ className, htmlFor, invalid, ...props }: ComponentProps<"label"> & {
     invalid?: boolean;
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;
 export declare function FieldLabel({ children }: {
     children: ReactNode;
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;
 /** The field's error; its id is the one the field's control is described by. */
 export declare function FieldError({ id, children }: {
     id?: string;
     children: ReactNode;
-}): import("@types/react").JSX.Element;
-export declare function SegmentedControl({ className, ...props }: ComponentProps<"div">): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;
+export declare function SegmentedControl({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
 export type SegmentedOptionProps = Omit<ButtonProps, "variant" | "type" | "aria-pressed"> & {
     selected: boolean;
     /** Shown muted after the label, such as how many items the option lists. */
     count?: number;
 };
 /** One option of a `SegmentedControl`. */
-export declare function SegmentedOption({ selected, count, children, ...props }: SegmentedOptionProps): import("@types/react").JSX.Element;
+export declare function SegmentedOption({ selected, count, children, ...props }: SegmentedOptionProps): import("react").JSX.Element;