@iloveagents/foundry-web-ui 0.14.2 → 0.17.0

package/dist/components/data-table/facets.js

@@ -0,0 +1,156 @@
+/** Facet key for empty cells (`null`, `undefined`, `""`, `[]`). */
+export const FACET_EMPTY = "__none__";
+/**
+ * Keys a cell value contributes to a facet — arrays contribute one key per
+ * element. A real value that spells the empty sentinel is escaped with a
+ * leading backslash so it never masquerades as "no value".
+ */
+export function facetKeys(value) {
+    if (value == null || value === "")
+        return [FACET_EMPTY];
+    if (value === FACET_EMPTY)
+        return [`\\${FACET_EMPTY}`];
+    if (Array.isArray(value)) {
+        const keys = value.flatMap((item) => facetKeys(item)).filter((key) => key !== FACET_EMPTY);
+        return keys.length ? Array.from(new Set(keys)) : [FACET_EMPTY];
+    }
+    if (typeof value === "object") {
+        const record = value;
+        const key = record.id ?? record.value ?? record.name;
+        return key == null || key === "" ? [FACET_EMPTY] : [String(key)];
+    }
+    return [String(value)];
+}
+/** A facet filter value is a list of selected keys; anything else means "no filter". */
+export function normalizeFacetValue(filterValue) {
+    if (Array.isArray(filterValue))
+        return filterValue.map(String).filter(Boolean);
+    if (filterValue == null || filterValue === "")
+        return [];
+    return [String(filterValue)];
+}
+/**
+ * OR within a facet: a row passes when any of its keys is selected. Typed
+ * loosely so `filterFn: facetFilterFn` fits any row type; `useDataTable`
+ * also registers it as the string `"facet"` for untyped (JSX) columns.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const facetFilterFn = (row, columnId, filterValue) => {
+    const wanted = normalizeFacetValue(filterValue);
+    if (!wanted.length)
+        return true;
+    return facetKeys(row.getValue(columnId)).some((key) => wanted.includes(key));
+};
+facetFilterFn.autoRemove = (value) => normalizeFacetValue(value).length === 0;
+/** Rows per facet key, counted over the rows every OTHER filter lets through. */
+export function facetCounts(column) {
+    const counts = new Map();
+    for (const row of column.getFacetedRowModel().flatRows) {
+        for (const key of facetKeys(row.getValue(column.id))) {
+            counts.set(key, (counts.get(key) ?? 0) + 1);
+        }
+    }
+    return counts;
+}
+/**
+ * Declared options first (in declared order, kept even at count 0), then
+ * every undeclared key seen in the data, then the empty option when some
+ * rows have no value.
+ */
+export function facetOptions(column, declared, options) {
+    const counts = facetCounts(column);
+    const labels = column.columnDef.meta?.facetLabels ?? {};
+    const labelFor = (key) => labels[key] ?? options?.labelFor?.(key) ?? key;
+    const seen = new Set();
+    const out = [];
+    for (const option of declared ?? []) {
+        seen.add(option.value);
+        out.push({ ...option, count: counts.get(option.value) ?? 0 });
+    }
+    const rest = Array.from(counts.keys())
+        .filter((key) => !seen.has(key) && key !== FACET_EMPTY)
+        .sort((a, b) => labelFor(a).localeCompare(labelFor(b)));
+    for (const key of rest)
+        out.push({ value: key, label: labelFor(key), count: counts.get(key) ?? 0 });
+    if (counts.has(FACET_EMPTY) && !seen.has(FACET_EMPTY)) {
+        out.push({
+            value: FACET_EMPTY,
+            label: labels[FACET_EMPTY] ?? options?.emptyLabel ?? "None",
+            count: counts.get(FACET_EMPTY) ?? 0,
+        });
+    }
+    return out;
+}
+/** Plain-text projection of a cell value for search and agent read-outs. */
+export function cellText(value) {
+    if (value == null)
+        return "";
+    if (typeof value === "string")
+        return value;
+    if (typeof value === "number" || typeof value === "bigint")
+        return String(value);
+    if (typeof value === "boolean")
+        return value ? "yes" : "no";
+    if (value instanceof Date)
+        return value.toISOString();
+    if (Array.isArray(value))
+        return value.map(cellText).filter(Boolean).join(" ");
+    if (typeof value === "object") {
+        const record = value;
+        if (typeof record.name === "string")
+            return record.name;
+        if (typeof record.label === "string")
+            return record.label;
+        try {
+            return JSON.stringify(value);
+        }
+        catch {
+            return "";
+        }
+    }
+    return String(value);
+}
+const searchTextCache = new WeakMap();
+/**
+ * Lower-cased text of every searchable cell of a row. Cached per row object
+ * and invalidated when the row's cells change identity (new columns or a
+ * changed `meta.searchText`), since TanStack keeps row objects across
+ * column changes.
+ */
+export function rowSearchText(row) {
+    const cells = row.getAllCells();
+    const cached = searchTextCache.get(row);
+    if (cached && cached.cells === cells)
+        return cached.text;
+    const text = cells
+        .filter((cell) => cell.column.getCanGlobalFilter())
+        .map((cell) => {
+        const custom = cell.column.columnDef.meta?.searchText;
+        return custom ? custom(row.original) : cellText(cell.getValue());
+    })
+        .join(" ")
+        .toLowerCase();
+    searchTextCache.set(row, { cells, text });
+    return text;
+}
+/** Every whitespace-separated token must appear somewhere in the row (AND across tokens). */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const tokenSearchFilterFn = (row, _columnId, filterValue) => {
+    const tokens = String(filterValue ?? "")
+        .toLowerCase()
+        .split(/\s+/)
+        .filter(Boolean);
+    if (!tokens.length)
+        return true;
+    const hay = rowSearchText(row);
+    return tokens.every((token) => hay.includes(token));
+};
+tokenSearchFilterFn.autoRemove = (value) => !String(value ?? "").trim();
+/** Human label of a column: `meta.label`, then a string header, then the id. */
+export function columnLabel(column) {
+    const meta = column.columnDef.meta;
+    if (meta?.label)
+        return meta.label;
+    const header = column.columnDef.header;
+    return typeof header === "string" ? header : column.id;
+}

package/dist/components/data-table/selection-column.d.ts

@@ -0,0 +1,4 @@
+/** A leading checkbox column: header selects the page, cells select the row. */
+import type { ColumnDef } from "@tanstack/react-table";
+export declare const SELECTION_COLUMN_ID = "__select";
+export declare function selectionColumn<T>(): ColumnDef<T, unknown>;

package/dist/components/data-table/selection-column.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox } from "@iloveagents/foundry-web-primitives";
+export const SELECTION_COLUMN_ID = "__select";
+export function selectionColumn() {
+    return {
+        id: SELECTION_COLUMN_ID,
+        size: 36,
+        enableSorting: false,
+        enableHiding: false,
+        enableGlobalFilter: false,
+        header: ({ table }) => (_jsx(Checkbox, { checked: table.getIsAllPageRowsSelected()
+                ? true
+                : table.getIsSomePageRowsSelected()
+                    ? "indeterminate"
+                    : false, onCheckedChange: (value) => table.toggleAllPageRowsSelected(Boolean(value)), "aria-label": "Select all", className: "translate-y-0.5" })),
+        cell: ({ row }) => (_jsx(Checkbox, { checked: row.getIsSelected(), disabled: !row.getCanSelect(), onCheckedChange: (value) => row.toggleSelected(Boolean(value)), "aria-label": "Select row", className: "translate-y-0.5" })),
+        meta: { label: "Select", headerClassName: "w-9", className: "w-9" },
+    };
+}

package/dist/components/data-table/state.d.ts

@@ -0,0 +1,41 @@
+/**
+ * The whole user-facing state of a DataTable as one value, plus a URL codec.
+ *
+ * URL keys are shared with the older collection pages (`q`, `sort`, `f_<id>`)
+ * so a link that worked before keeps working; `hide`, `page` and `size` are
+ * new. Selection and expansion are never put in the URL. A present-but-empty
+ * key (`f_status=`, `sort=`, `hide=`, `q=`) means "cleared", so a default the
+ * host configured can be switched off by the user and survive a reload.
+ */
+import type { ColumnFiltersState, ExpandedState, PaginationState, RowSelectionState, SortingState, VisibilityState } from "@tanstack/react-table";
+export interface DataTableState {
+    globalFilter: string;
+    columnFilters: ColumnFiltersState;
+    sorting: SortingState;
+    columnVisibility: VisibilityState;
+    rowSelection: RowSelectionState;
+    pagination: PaginationState;
+    expanded: ExpandedState;
+}
+export declare const DEFAULT_PAGE_SIZE = 20;
+export declare const EMPTY_DATA_TABLE_STATE: DataTableState;
+export declare function isDataTableUrlKey(key: string): boolean;
+export interface DataTableUrlOptions {
+    /** Page size that is implied when `size` is absent (default 20). */
+    defaultPageSize?: number;
+    /**
+     * State implied when the URL says nothing. Serializing writes an explicit
+     * empty key when the user cleared a value the defaults would bring back.
+     */
+    defaults?: Partial<DataTableState>;
+}
+/**
+ * Serialize the URL-worthy part of the state. A key whose value equals the
+ * default is omitted; a key the user cleared while a default exists is
+ * written empty; a key absent from a partial `state` is omitted.
+ */
+export declare function serializeDataTableState(state: Partial<DataTableState>, options?: DataTableUrlOptions): URLSearchParams;
+/** Parse a URL into a full state; `defaults` fill what the URL doesn't say. */
+export declare function parseDataTableState(params: URLSearchParams, options?: DataTableUrlOptions): DataTableState;
+/** Replace this table's keys in `params`, leaving every other key untouched. */
+export declare function mergeDataTableUrlState(params: URLSearchParams, state: Partial<DataTableState>, options?: DataTableUrlOptions): URLSearchParams;

package/dist/components/data-table/state.js

@@ -0,0 +1,148 @@
+export const DEFAULT_PAGE_SIZE = 20;
+export const EMPTY_DATA_TABLE_STATE = {
+    globalFilter: "",
+    columnFilters: [],
+    sorting: [],
+    columnVisibility: {},
+    rowSelection: {},
+    pagination: { pageIndex: 0, pageSize: DEFAULT_PAGE_SIZE },
+    expanded: true,
+};
+const FILTER_PREFIX = "f_";
+const OWN_KEYS = new Set(["q", "sort", "hide", "page", "size"]);
+export function isDataTableUrlKey(key) {
+    return OWN_KEYS.has(key) || key.startsWith(FILTER_PREFIX);
+}
+function encodePart(value) {
+    return value.replace(/%/g, "%25").replace(/,/g, "%2C");
+}
+function decodePart(value) {
+    return value.replace(/%2C/gi, ",").replace(/%2D/gi, "-").replace(/%25/g, "%");
+}
+/** Sort ids may contain commas or start with "-"; both are escaped. */
+function encodeSortId(id) {
+    const encoded = encodePart(id);
+    return encoded.startsWith("-") ? `%2D${encoded.slice(1)}` : encoded;
+}
+function filterValues(value) {
+    if (Array.isArray(value))
+        return value.map(String).filter(Boolean);
+    return value == null || value === "" ? [] : [String(value)];
+}
+function sortKey(sorting) {
+    return (sorting ?? [])
+        .map((s) => (s.desc ? `-${encodeSortId(s.id)}` : encodeSortId(s.id)))
+        .join(",");
+}
+function hiddenKey(visibility) {
+    return Object.entries(visibility ?? {})
+        .filter(([, visible]) => visible === false)
+        .map(([id]) => encodePart(id))
+        .sort()
+        .join(",");
+}
+/**
+ * Serialize the URL-worthy part of the state. A key whose value equals the
+ * default is omitted; a key the user cleared while a default exists is
+ * written empty; a key absent from a partial `state` is omitted.
+ */
+export function serializeDataTableState(state, options) {
+    const defaults = options?.defaults ?? {};
+    const params = new URLSearchParams();
+    if (state.globalFilter !== undefined && state.globalFilter !== (defaults.globalFilter ?? "")) {
+        params.set("q", state.globalFilter);
+    }
+    if (state.sorting !== undefined && sortKey(state.sorting) !== sortKey(defaults.sorting)) {
+        params.set("sort", sortKey(state.sorting));
+    }
+    if (state.columnFilters !== undefined) {
+        const current = new Map(state.columnFilters.map((f) => [f.id, filterValues(f.value).map(encodePart).join(",")]));
+        const base = new Map((defaults.columnFilters ?? []).map((f) => [
+            f.id,
+            filterValues(f.value).map(encodePart).join(","),
+        ]));
+        for (const id of new Set([...current.keys(), ...base.keys()])) {
+            const value = current.get(id) ?? "";
+            if (value !== (base.get(id) ?? ""))
+                params.set(`${FILTER_PREFIX}${id}`, value);
+        }
+    }
+    if (state.columnVisibility !== undefined &&
+        hiddenKey(state.columnVisibility) !== hiddenKey(defaults.columnVisibility)) {
+        params.set("hide", hiddenKey(state.columnVisibility));
+    }
+    const pagination = state.pagination;
+    if (pagination) {
+        const defaultIndex = defaults.pagination?.pageIndex ?? 0;
+        if (pagination.pageIndex !== defaultIndex)
+            params.set("page", String(pagination.pageIndex + 1));
+        const defaultSize = options?.defaultPageSize ?? defaults.pagination?.pageSize ?? DEFAULT_PAGE_SIZE;
+        if (pagination.pageSize !== defaultSize)
+            params.set("size", String(pagination.pageSize));
+    }
+    return params;
+}
+/** Parse a URL into a full state; `defaults` fill what the URL doesn't say. */
+export function parseDataTableState(params, options) {
+    const defaults = { ...EMPTY_DATA_TABLE_STATE, ...options?.defaults };
+    const defaultSize = options?.defaultPageSize ?? defaults.pagination.pageSize;
+    const sortRaw = params.get("sort");
+    const sorting = sortRaw == null
+        ? defaults.sorting
+        : sortRaw
+            .split(",")
+            .filter(Boolean)
+            .map((part) => part.startsWith("-")
+            ? { id: decodePart(part.slice(1)), desc: true }
+            : { id: decodePart(part), desc: false });
+    const filtersById = new Map(defaults.columnFilters.map((filter) => [filter.id, filter]));
+    for (const [key, raw] of params.entries()) {
+        if (!key.startsWith(FILTER_PREFIX))
+            continue;
+        const id = key.slice(FILTER_PREFIX.length);
+        const values = raw.split(",").filter(Boolean).map(decodePart);
+        if (values.length)
+            filtersById.set(id, { id, value: values });
+        else
+            filtersById.delete(id);
+    }
+    const columnFilters = Array.from(filtersById.values());
+    const columnVisibility = { ...defaults.columnVisibility };
+    const hideRaw = params.get("hide");
+    if (hideRaw != null) {
+        for (const id of Object.keys(columnVisibility)) {
+            if (columnVisibility[id] === false)
+                delete columnVisibility[id];
+        }
+        for (const id of hideRaw.split(",").filter(Boolean).map(decodePart))
+            columnVisibility[id] = false;
+    }
+    const pageRaw = params.get("page");
+    const page = Number.parseInt(pageRaw ?? "", 10);
+    const size = Number.parseInt(params.get("size") ?? "", 10);
+    return {
+        ...defaults,
+        globalFilter: params.has("q") ? (params.get("q") ?? "") : defaults.globalFilter,
+        sorting,
+        columnFilters,
+        columnVisibility,
+        pagination: {
+            pageIndex: pageRaw == null
+                ? defaults.pagination.pageIndex
+                : Number.isFinite(page) && page > 1
+                    ? page - 1
+                    : 0,
+            pageSize: Number.isFinite(size) && size > 0 ? size : defaultSize,
+        },
+    };
+}
+/** Replace this table's keys in `params`, leaving every other key untouched. */
+export function mergeDataTableUrlState(params, state, options) {
+    const next = new URLSearchParams();
+    for (const [key, value] of params.entries())
+        if (!isDataTableUrlKey(key))
+            next.append(key, value);
+    for (const [key, value] of serializeDataTableState(state, options).entries())
+        next.set(key, value);
+    return next;
+}

package/dist/components/data-table/use-data-table.d.ts

@@ -0,0 +1,22 @@
+import { type ColumnDef, type FilterFn, type Row, type Table } from "@tanstack/react-table";
+import { type DataTableState } from "./state.js";
+export interface UseDataTableOptions<T> {
+    data: T[];
+    columns: ColumnDef<T, any>[];
+    /** Stable row id (defaults to the row index). Required for selection that survives re-sorting. */
+    getRowId?: (row: T, index: number, parent?: Row<T>) => string;
+    /** Controlled state — pair with `onStateChange` (e.g. URL-bound). */
+    state?: Partial<DataTableState>;
+    onStateChange?: (next: DataTableState) => void;
+    /** Uncontrolled start state. */
+    initialState?: Partial<DataTableState>;
+    /** Rows per page; omit (or `false`) for an unpaginated table. Ignored while grouped. */
+    pageSize?: number | false;
+    /** Column id to group rows by (one level). */
+    groupBy?: string | null;
+    enableRowSelection?: boolean | ((row: Row<T>) => boolean);
+    enableMultiRowSelection?: boolean;
+    /** Replace the default AND-of-tokens search. */
+    globalFilterFn?: FilterFn<T>;
+}
+export declare function useDataTable<T>(options: UseDataTableOptions<T>): Table<T>;

package/dist/components/data-table/use-data-table.js

@@ -0,0 +1,102 @@
+/**
+ * One hook that turns rows + columns into a fully wired TanStack table:
+ * token search, faceted filters, sorting, column visibility, selection,
+ * optional pagination and optional single-level grouping — with the whole
+ * state as ONE value so it can live in component state or in the URL.
+ */
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from "@tanstack/react-table";
+import { facetFilterFn, tokenSearchFilterFn } from "./facets.js";
+import { DEFAULT_PAGE_SIZE, EMPTY_DATA_TABLE_STATE } from "./state.js";
+const PAGE_RESET_KEYS = new Set(["globalFilter", "columnFilters", "sorting"]);
+export function useDataTable(options) {
+    const { data, columns, getRowId, state: controlledState, onStateChange, initialState, pageSize, groupBy, enableRowSelection = false, enableMultiRowSelection = true, globalFilterFn, } = options;
+    const controlled = controlledState !== undefined && onStateChange !== undefined;
+    const basePageSize = pageSize || DEFAULT_PAGE_SIZE;
+    const [innerState, setInnerState] = useState(() => ({
+        ...EMPTY_DATA_TABLE_STATE,
+        ...initialState,
+        pagination: { pageIndex: 0, pageSize: basePageSize, ...initialState?.pagination },
+    }));
+    const state = useMemo(() => controlled
+        ? {
+            ...EMPTY_DATA_TABLE_STATE,
+            ...controlledState,
+            pagination: { pageIndex: 0, pageSize: basePageSize, ...controlledState.pagination },
+        }
+        : innerState, [basePageSize, controlled, controlledState, innerState]);
+    const stateRef = useRef(state);
+    stateRef.current = state;
+    const tableRef = useRef(null);
+    const update = useCallback((key, updater) => {
+        const current = stateRef.current;
+        const value = typeof updater === "function"
+            ? updater(current[key])
+            : updater;
+        if (Object.is(value, current[key]))
+            return;
+        const next = { ...current, [key]: value };
+        if (PAGE_RESET_KEYS.has(key) && next.pagination.pageIndex !== 0) {
+            next.pagination = { ...next.pagination, pageIndex: 0 };
+        }
+        stateRef.current = next;
+        // Apply to the instance now, not on the next render: a caller that
+        // reads row models right after a mutation (agent tools, tests) sees
+        // the new state even while the host owns it (URL, store).
+        tableRef.current?.setOptions((prev) => ({
+            ...prev,
+            state: { ...prev.state, [key]: value, pagination: next.pagination },
+        }));
+        if (controlled)
+            onStateChange(next);
+        else
+            setInnerState(next);
+    }, [controlled, onStateChange]);
+    const grouped = Boolean(groupBy);
+    const tableOptions = {
+        data,
+        columns,
+        getRowId,
+        state: { ...state, grouping: groupBy ? [groupBy] : [] },
+        onGlobalFilterChange: (updater) => update("globalFilter", updater),
+        onColumnFiltersChange: (updater) => update("columnFilters", updater),
+        onSortingChange: (updater) => update("sorting", updater),
+        onColumnVisibilityChange: (updater) => update("columnVisibility", updater),
+        onRowSelectionChange: (updater) => update("rowSelection", updater),
+        onPaginationChange: (updater) => update("pagination", updater),
+        onExpandedChange: (updater) => update("expanded", updater),
+        // String alias for untyped column defs (JSX renderers): `filterFn: "facet"`.
+        filterFns: { facet: facetFilterFn },
+        globalFilterFn: globalFilterFn ?? tokenSearchFilterFn,
+        getColumnCanGlobalFilter: (column) => column.columnDef.enableGlobalFilter ?? column.accessorFn != null,
+        enableRowSelection,
+        enableMultiRowSelection,
+        groupedColumnMode: false,
+        autoResetPageIndex: false,
+        autoResetExpanded: false,
+        getCoreRowModel: getCoreRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getFacetedRowModel: getFacetedRowModel(),
+        getFacetedUniqueValues: getFacetedUniqueValues(),
+    };
+    if (grouped) {
+        tableOptions.getGroupedRowModel = getGroupedRowModel();
+        tableOptions.getExpandedRowModel = getExpandedRowModel();
+    }
+    else if (pageSize) {
+        tableOptions.getPaginationRowModel = getPaginationRowModel();
+    }
+    const table = useReactTable(tableOptions);
+    tableRef.current = table;
+    // A shrinking data set (or a tighter filter) can strand a later page.
+    useEffect(() => {
+        if (grouped || !pageSize)
+            return;
+        const index = table.getState().pagination.pageIndex;
+        const count = table.getPageCount();
+        if (index > 0 && index >= count)
+            table.setPageIndex(Math.max(0, count - 1));
+    });
+    return table;
+}

package/dist/components/message-disclosure.d.ts

@@ -9,10 +9,11 @@ import type { ReactNode } from "react";
  * different paddings, different hover treatments, different default states.
  * Read together in a transcript they looked like two unrelated widgets.
  *
- * So the shape lives here once. A row is: disclosure caret, the part's own
- * icon, its label — left-aligned in that order, on a single baseline, with
- * identical metrics. The caret is the FIRST thing in the row because it is
- * the control; the icon that follows says what kind of thing is folded away.
+ * So the shape lives here once. A row is: the part's own icon, its label,
+ * then the disclosure caret — on a single baseline, with identical metrics.
+ * The icon leads because it is the glyph that carries meaning (what kind of
+ * thing is folded away, and whether it went well); the caret trails, where
+ * the eye lands after the words and where every chat client puts it.
  *
  * Everything is understated on purpose. These rows sit between the user's
  * question and the answer, and they are machinery, not content: muted until
@@ -20,7 +21,7 @@ import type { ReactNode } from "react";
  * hairline rule, so an open row reads as a margin note rather than a second
  * message.
  */
-export declare function MessageDisclosure({ icon, label, open, onOpenChange, tone, placement, ariaLabel, children, ...rest }: {
+export declare function MessageDisclosure({ icon, label, open, onOpenChange, tone, ariaLabel, children, ...rest }: {
     /** The part's own icon — a brain, a wrench, a status glyph. */
     icon: ReactNode;
     label: ReactNode;
@@ -28,19 +29,6 @@ export declare function MessageDisclosure({ icon, label, open, onOpenChange, ton
     onOpenChange: (open: boolean) => void;
     /** ``destructive`` is for a run where everything failed; nothing else. */
     tone?: "muted" | "destructive";
-    /**
-     * ``after-tools`` sits the row between the tool runs and the answer,
-     * wherever the model actually emitted it — reasoning belongs under the
-     * work it explains and above the conclusion it produced. (The message
-     * text is ordered after it; see `ChatMessageParts`.)
-     *
-     * It is a flex `order`, so the row moves VISUALLY while staying put in the
-     * DOM. That is exactly why such a row carries a different attribute: the
-     * compaction below is a DOM-sibling rule, and a row that is first in the
-     * DOM but second on screen would otherwise hand its negative margin to
-     * whichever row really is on top.
-     */
-    placement?: "inline" | "after-tools";
     ariaLabel?: string;
     children: ReactNode;
 } & Record<`data-${string}`, unknown>): import("react/jsx-runtime").JSX.Element;

package/dist/components/message-disclosure.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronRight } from "lucide-react";
+import { ChevronDown } from "lucide-react";
 import { cn } from "@iloveagents/foundry-web-primitives";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
 /**
@@ -12,10 +12,11 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/colla
  * different paddings, different hover treatments, different default states.
  * Read together in a transcript they looked like two unrelated widgets.
  *
- * So the shape lives here once. A row is: disclosure caret, the part's own
- * icon, its label — left-aligned in that order, on a single baseline, with
- * identical metrics. The caret is the FIRST thing in the row because it is
- * the control; the icon that follows says what kind of thing is folded away.
+ * So the shape lives here once. A row is: the part's own icon, its label,
+ * then the disclosure caret — on a single baseline, with identical metrics.
+ * The icon leads because it is the glyph that carries meaning (what kind of
+ * thing is folded away, and whether it went well); the caret trails, where
+ * the eye lands after the words and where every chat client puts it.
  *
  * Everything is understated on purpose. These rows sit between the user's
  * question and the answer, and they are machinery, not content: muted until
@@ -23,8 +24,22 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/colla
  * hairline rule, so an open row reads as a margin note rather than a second
  * message.
  */
-export function MessageDisclosure({ icon, label, open, onOpenChange, tone = "muted", placement = "inline", ariaLabel, children, ...rest }) {
-    return (_jsxs(Collapsible, { open: open, onOpenChange: onOpenChange, ...(placement === "after-tools"
-            ? { "data-message-disclosure-reordered": true }
-            : { "data-message-disclosure": true }), className: cn("w-full [[data-message-disclosure]_+_&]:-mt-3", placement === "after-tools" && "order-1"), ...rest, children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs("button", { type: "button", "data-disclosure-trigger": true, "aria-label": ariaLabel, className: cn("group/disclosure flex w-full items-center gap-1.5 rounded-md", "px-1.5 py-0.5 text-left text-xs transition-colors", "text-muted-foreground hover:bg-muted hover:text-foreground", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", tone === "destructive" && "text-destructive hover:text-destructive"), children: [_jsx(ChevronRight, { "aria-hidden": "true", className: cn("size-3.5 shrink-0 opacity-60 transition-transform duration-150", "group-hover/disclosure:opacity-100", open && "rotate-90") }), _jsx("span", { className: "flex size-3.5 shrink-0 items-center justify-center", children: icon }), _jsx("span", { className: "truncate", children: label })] }) }), _jsx(CollapsibleContent, { children: _jsx("div", { className: "mt-1.5 ml-3 border-l border-border pl-3", children: children }) })] }));
+export function MessageDisclosure({ icon, label, open, onOpenChange, tone = "muted", ariaLabel, children, ...rest }) {
+    return (_jsxs(Collapsible, { open: open, onOpenChange: onOpenChange, "data-message-disclosure": true, 
+        // Rows render where the model put them. There was once an
+        // ``after-tools`` placement that moved a row with flex `order` — and a
+        // separate data attribute, because the compaction below is a
+        // DOM-SIBLING rule and a row that is first in the DOM but second on
+        // screen would hand its negative margin to the wrong neighbour. Both
+        // are gone: the reordering existed to keep a reasoning row from sitting
+        // above a short answer, which folding the machinery into one quiet row
+        // already solves.
+        className: "w-full [[data-message-disclosure]_+_&]:-mt-3", ...rest, children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs("button", { type: "button", "data-disclosure-trigger": true, "aria-label": ariaLabel, className: cn(
+                    // `w-fit` with `-ml-1.5`: the row is a pill that hugs its own
+                    // words, and the negative margin cancels the padding so the
+                    // ICON lines up with the message text's left edge rather than
+                    // sitting 6px inside it. Full-width was worse on both counts —
+                    // it made a hover target the width of the message, and it left
+                    // the caret stranded at the far right once the caret moved.
+                    "group/disclosure -ml-1.5 flex w-fit max-w-full items-center gap-1.5 rounded-md", "px-1.5 py-0.5 text-left text-xs transition-colors", "text-muted-foreground hover:bg-muted hover:text-foreground", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", tone === "destructive" && "text-destructive hover:text-destructive"), children: [_jsx("span", { className: "flex size-3.5 shrink-0 items-center justify-center", children: icon }), _jsx("span", { className: "truncate", children: label }), _jsx(ChevronDown, { "aria-hidden": "true", className: cn("size-3.5 shrink-0 opacity-60 transition-transform duration-150", "group-hover/disclosure:opacity-100", open && "rotate-180") })] }) }), _jsx(CollapsibleContent, { children: _jsx("div", { className: "mt-1.5 ml-3 border-l border-border pl-3", children: children }) })] }));
 }

package/dist/components/reasoning-effort-picker.js

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useStore } from "zustand";
 import { Check, ChevronDown } from "lucide-react";
 import { reasoningDefaultStore, reasoningEffortStore, REASONING_EFFORT_LABELS, } from "@iloveagents/foundry-agent";
@@ -11,6 +11,40 @@ const OPTIONS = [
     { value: "high", hint: "Slower, better on hard problems" },
     { value: "xhigh", hint: "Slowest, for the hardest questions" },
 ];
+/** Bar count per level, lowest to highest. */
+const EFFORT_RANK = {
+    low: 1,
+    medium: 2,
+    high: 3,
+    xhigh: 4,
+};
+/**
+ * The level as four rising bars.
+ *
+ * The trigger's job is to answer "how hard is it thinking?" at a glance, and
+ * in a narrow composer — the chat bubble, a side panel — the words cost more
+ * width than that question is worth. Bars cost ~14px and answer it without
+ * reading, so in that case the words drop and this stands in for them.
+ *
+ * Takes a CONCRETE level, never `null`. A gauge with nothing lit is not a
+ * gauge, it is four faint marks; the caller keeps the words instead when
+ * there is no level to encode, which makes the empty state unrepresentable
+ * here rather than something this has to render politely.
+ *
+ * Deliberately shows LEVEL only, never whether the level is pinned or
+ * inherited from `Auto`. The level is what changes cost and latency; the mode
+ * is the half this trigger already drops first when space runs short.
+ *
+ * `bg-current` throughout, so the bars inherit the button's own muted →
+ * foreground hover transition instead of needing their own colour states.
+ */
+function EffortGauge({ level }) {
+    const rank = EFFORT_RANK[level];
+    return (_jsx("span", { "aria-hidden": "true", className: "flex h-3.5 shrink-0 items-end gap-px", children: [1, 2, 3, 4].map((step) => (_jsx("span", { className: cn("w-0.5 rounded-full bg-current transition-opacity", step === 1 && "h-1", step === 2 && "h-1.5", step === 3 && "h-2", step === 4 && "h-2.5", 
+            // The unlit bars stay visible: the gauge has to read as "2 of 4",
+            // not as a bare pair of marks whose ceiling you cannot see.
+            step <= rank ? "opacity-100" : "opacity-25") }, step))) }));
+}
 /**
  * What `Auto` is currently doing, in words.
  *
@@ -54,5 +88,7 @@ export function ReasoningEffortPicker({ className }) {
         ? REASONING_EFFORT_LABELS[resolved]
         : REASONING_EFFORT_LABELS[effort];
     const triggerLabel = showsMode ? `${modeLabel} · ${levelLabel}` : levelLabel;
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { type: "button", "data-reasoning-effort-trigger": true, className: cn("flex items-center gap-1 rounded-md px-2 py-1", "text-xs text-muted-foreground hover:text-foreground hover:bg-muted", "transition-colors", className), "aria-label": `Intelligence: ${triggerLabel}`, title: `Intelligence: ${triggerLabel}`, children: [_jsxs("span", { className: "whitespace-nowrap", children: [showsMode && _jsxs("span", { className: "@max-[24rem]:hidden", children: [modeLabel, " \u00B7 "] }), levelLabel] }), _jsx(ChevronDown, { className: "size-3.5 shrink-0" })] }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-56", children: [_jsx(DropdownMenuLabel, { className: "text-xs font-normal text-muted-foreground", children: "Intelligence" }), OPTIONS.map((opt) => (_jsxs(DropdownMenuItem, { onSelect: () => setEffort(opt.value), className: "flex items-start gap-2", children: [_jsx(Check, { className: cn("size-4 mt-0.5 shrink-0", effort === opt.value ? "opacity-100" : "opacity-0") }), _jsxs("span", { className: "flex flex-col", children: [_jsx("span", { className: "text-sm", children: REASONING_EFFORT_LABELS[opt.value] }), _jsx("span", { className: "text-xs text-muted-foreground", children: opt.value === "default" ? autoHint(resolved, scope) : opt.hint })] })] }, opt.value)))] })] }));
+    // `default` with nothing resolved is the one case with no level to draw.
+    const gaugeLevel = effort === "default" ? resolved : effort;
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { type: "button", "data-reasoning-effort-trigger": true, className: cn("flex items-center gap-1 rounded-md px-2 py-1", "text-xs text-muted-foreground hover:text-foreground hover:bg-muted", "transition-colors", className), "aria-label": `Intelligence: ${triggerLabel}`, title: `Intelligence: ${triggerLabel}`, children: [gaugeLevel !== null && (_jsx("span", { className: "hidden @max-[24rem]:flex", children: _jsx(EffortGauge, { level: gaugeLevel }) })), _jsxs("span", { className: cn("whitespace-nowrap", gaugeLevel !== null && "@max-[24rem]:hidden"), children: [showsMode && `${modeLabel} · `, levelLabel] }), _jsx(ChevronDown, { className: "size-3.5 shrink-0" })] }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-56", children: [_jsx(DropdownMenuLabel, { className: "text-xs font-normal text-muted-foreground", children: "Intelligence" }), OPTIONS.map((opt) => (_jsxs(DropdownMenuItem, { onSelect: () => setEffort(opt.value), className: "flex items-start gap-2", children: [_jsx(Check, { className: cn("size-4 mt-0.5 shrink-0", effort === opt.value ? "opacity-100" : "opacity-0") }), _jsxs("span", { className: "flex flex-col", children: [_jsx("span", { className: "text-sm", children: REASONING_EFFORT_LABELS[opt.value] }), _jsx("span", { className: "text-xs text-muted-foreground", children: opt.value === "default" ? autoHint(resolved, scope) : opt.hint })] })] }, opt.value)))] })] }));
 }