@ciridae/ui 1.0.4 → 1.0.9

package/dist/components/calendar.js

@@ -6,13 +6,12 @@ import { IconButton } from "./button.js";
 import { directional, icon } from "./icon.js";
 import { useCiridaeLocale } from "./locale.js";
 /*
- * The month alone, no face of its own: it sits on the popover or picker that opens it. Seven 32px
- * day columns inside an 8px inset, which with the glass sheet's 4px makes the design's 12px.
+ * Seven 32px day columns inside an 8px inset, which with the glass sheet's 4px makes the design's 12px.
  */
 const calendar = css({
     display: "grid",
     gap: "layout.controlGap",
-    width: "calc(7 * token(sizes.control.compact) + 2 * token(spacing.panel.compact))",
+    width: "[calc(7 * token(sizes.control.compact) + 2 * token(spacing.panel.compact))]",
     padding: "panel.compact",
 });
 const header = css({
@@ -29,7 +28,6 @@ const grid = css({
     justifyItems: "center",
     rowGap: "control.trackInset",
 });
-// The weekdays sit as far above the days as the month sits above them.
 const weekDay = css({
     paddingBlock: "layout.tightGap",
     marginBottom: "control.iconGap",
@@ -43,10 +41,9 @@ const row = css({
     display: "grid",
     gridColumn: "1 / -1",
     gridTemplateColumns: "subgrid",
-    width: "100%",
+    width: "full",
 });
 const previousMonthIcon = css({ transform: "rotate(180deg)" });
-// Today wears a hairline ring; the chosen day the primary button's face.
 const day = css({
     width: "control.compact",
     height: "control.compact",
@@ -57,7 +54,7 @@ const day = css({
     fontSize: "caption",
     fontWeight: "medium",
     cursor: "pointer",
-    transitionProperty: "background, color",
+    transitionProperty: "[background, color]",
     transitionDuration: "fast",
     "&[aria-current=date]": { borderColor: "border.control" },
     "&:hover:not(:disabled):not([aria-selected=true])": {
@@ -65,7 +62,7 @@ const day = css({
     },
     "&[aria-selected=true]": {
         borderColor: "transparent",
-        background: "token(gradients.primary)",
+        background: "[token(gradients.primary)]",
         color: "bg.canvas",
         _light: { color: "fg.onAccent" },
     },

package/dist/components/centered-page.js

@@ -3,21 +3,21 @@ import { css, cx } from "#primitives/css";
 import { CiridaeMark } from "./brand-icons.js";
 const page = css({
     boxSizing: "border-box",
-    minHeight: "100dvh",
+    minHeight: "[100dvh]",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     // A phone keeps a thin margin around the card rather than giving its width away.
     padding: "panel.compact",
     "@media(min-width: 640px)": { padding: "page.inline" },
-    background: "token(gradients.canvas)",
+    background: "[token(gradients.canvas)]",
     color: "fg.primary",
 });
 const column = css({
     display: "flex",
     flexDirection: "column",
     gap: "layout.contentGap",
-    width: "100%",
+    width: "full",
     maxWidth: "card.centered",
 });
 const formColumn = css({ maxWidth: "card.centeredForm" });
@@ -37,7 +37,7 @@ const titleText = css({ margin: "none", fontSize: "heading.section", fontWeight:
 const descriptionText = css({ margin: "none", color: "fg.muted", fontSize: "caption" });
 const card = css({
     boxSizing: "border-box",
-    width: "100%",
+    width: "full",
     padding: "panel.roomy",
     borderRadius: "card",
     border: "1px solid token(colors.border.card)",

package/dist/components/chart.js

@@ -39,10 +39,10 @@ const tooltipBody = css({
     display: "grid",
     gap: "control.trackInset",
     padding: "panel.compact",
-    border: "1px solid token(colors.border.control)",
+    border: "1px solid token(colors.border.popover)",
     borderRadius: "action",
     background: "bg.popover",
-    backdropFilter: "blur(token(blurs.popover))",
+    backdropFilter: "[blur(token(blurs.popover))]",
     boxShadow: "soft",
     color: "fg.primary",
     fontFamily: "sans",
@@ -72,7 +72,7 @@ const legendItem = css({
     alignItems: "center",
     gap: "control.iconGap",
     minWidth: "0",
-    maxWidth: "100%",
+    maxWidth: "full",
     "& > span:last-child": {
         overflow: "hidden",
         textOverflow: "ellipsis",
@@ -264,7 +264,6 @@ export function CategoryChart({ categories, series, variant = "bar", formatValue
     }, [allowDecimals, categories, formatValue, series, variant]);
     return (_jsxs("div", { ...props, className: cx(frame, className), "data-ciridae-ui": "", "data-variant": variant, children: [_jsx(Chart, { ariaLabel: series.map((item) => item.label).join(", "), definition: definition, height: height, renderTooltipBody: ({ points, content }) => (_jsx(SeriesTooltip, { content: content, points: points, series: series, formatValue: formatValue })) }), _jsx(SeriesLegend, { series: series })] }));
 }
-/** Each series index to its chart colour, in order. */
 function seriesColorScale(count) {
     return scaleOrdinal()
         .domain(Array.from({ length: count }, (_, index) => index))

package/dist/components/chat-client-source.js

@@ -15,7 +15,7 @@ import { useCiridaeLocale } from "./locale.js";
 const card = css({
     display: "grid",
     gap: "control.iconGap",
-    width: "100%",
+    width: "full",
     maxWidth: "chat.bubble",
     paddingBlock: "control.block",
     paddingInline: "control.compactInline",
@@ -26,24 +26,34 @@ const card = css({
     lineHeight: "log",
 });
 const cardLabel = css({ color: "fg.muted", fontSize: "code", lineHeight: "compact" });
+// Every name and value shows in full, wrapped, since the person deciding has to see what runs.
 const argumentList = css({
     display: "grid",
-    gridTemplateColumns: "auto minmax(0, 1fr)",
+    gridTemplateColumns: "fit-content(40%) minmax(0, 1fr)",
     columnGap: "layout.controlGap",
     margin: "none",
     fontSize: "code",
     lineHeight: "compact",
-    "& > dt": { color: "fg.muted", whiteSpace: "nowrap" },
-    "& > dd": { margin: "none", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+    "& > dt": { color: "fg.muted", overflowWrap: "anywhere" },
+    "& > dd": { margin: "none", whiteSpace: "pre-wrap", overflowWrap: "anywhere" },
 });
+const rawArguments = css({
+    margin: "none",
+    fontFamily: "mono",
+    fontSize: "code",
+    lineHeight: "compact",
+    whiteSpace: "pre-wrap",
+    overflowWrap: "anywhere",
+});
+const decisionError = css({ color: "accent.red", fontSize: "code", lineHeight: "compact" });
 const cardActions = css({ display: "flex", justifyContent: "flex-end", gap: "layout.controlGap" });
 // Option rows run to the card's edges, split by its hairlines.
 const optionList = css({
-    marginInline: "calc(token(spacing.control.compactInline) * -1)",
-    marginBlockEnd: "calc(token(spacing.control.block) * -1)",
+    marginInline: "[calc(token(spacing.control.compactInline) * -1)]",
+    marginBlockEnd: "[calc(token(spacing.control.block) * -1)]",
     "& > button": {
         display: "block",
-        width: "100%",
+        width: "full",
         paddingBlock: "control.compactBlock",
         paddingInline: "control.compactInline",
         border: "0",
@@ -59,21 +69,16 @@ const optionList = css({
     },
 });
 const optionDetail = css({ display: "block", color: "fg.muted", fontSize: "code" });
-/** How many of an approval's arguments show before the rest become "+N". */
-const maximumArgumentRows = 3;
 /** One conversation of the lib's chat client, polled while its response runs. */
 export function useChatClientSource({ client, conversationId, onConversationCreated, }) {
     const { labels } = useCiridaeLocale();
     const state = useChatConversation({ client, conversationId, onConversationCreated });
-    const [sendError, setSendError] = useState(null);
     // The uploads the composer holds by id, so a message sends the service's own records.
     const uploadsRef = useRef(new Map());
     const send = (content, attachments) => {
-        setSendError(null);
-        // The message shows as sending at once, and as not sent with its retry if it fails.
-        state.sendMessage(content, attachments).catch((error) => {
-            setSendError(error instanceof Error ? error.message : String(error));
-        });
+        // The message shows as sending at once, and if it fails, as not sent with its own error and
+        // its retry, so the rejection has nothing more to tell.
+        state.sendMessage(content, attachments).catch(() => undefined);
     };
     const toChatAttachment = (attachment) => ({
         id: attachment.id,
@@ -93,7 +98,6 @@ export function useChatClientSource({ client, conversationId, onConversationCrea
         ? items.filter((item) => item.type === "message" && item.role === "user" && item.response_id === response.id)
         : [];
     const lastUserMessage = failedTurnMessages[failedTurnMessages.length - 1];
-    // How each tool call ended, by its call id; a call with none has not returned yet.
     const callStatuses = new Map(items.flatMap((item) => item.type === "function_call_output" ? [[item.call_id, item.status]] : []));
     const lastItem = items[items.length - 1];
     const conversationItems = [];
@@ -126,7 +130,7 @@ export function useChatClientSource({ client, conversationId, onConversationCrea
             sending: message.state === "sending",
             failure: message.state === "failed"
                 ? {
-                    message: sendError ?? labels.chat.notSent,
+                    message: message.failureMessage || labels.chat.notSent,
                     retry: () => {
                         state.discardPendingMessage(message.localId);
                         send(message.content, message.attachments);
@@ -164,10 +168,6 @@ export function useChatClientConversations(client) {
     }))), [list.data]);
     return { conversations, loading: list.isPending };
 }
-/**
- * An item as the thread draws it. A tool call is a step named by its tool, with how it ended and
- * neither its arguments nor its output; a thought is a step named by its first line.
- */
 function toConversationItem(item, { waitingOnUser, inRunningTurn, newest, callStatuses, toChatAttachment, answered, decided, decideApproval, answerQuestion, }) {
     const at = Date.parse(item.created_at);
     switch (item.type) {
@@ -252,11 +252,23 @@ function toConversationItem(item, { waitingOnUser, inRunningTurn, newest, callSt
         }
     }
 }
-/** A tool call waiting for the user: what it would do, its arguments, and Deny or Allow. */
+/**
+ * A tool call waiting for the user: what it would do, every one of its arguments, and Deny or
+ * Allow. A decision the service refuses shows its error on the card, which waits for another.
+ */
 function ApprovalCard({ item, onDecide, }) {
     const { labels } = useCiridaeLocale();
-    const rows = listArgumentRows(item.arguments);
-    return (_jsxs("div", { className: card, children: [_jsx("span", { children: describeToolCall(item.tool) }), rows.length > 0 && (_jsxs("dl", { className: argumentList, children: [rows.slice(0, maximumArgumentRows).map(([name, value]) => (_jsxs(Fragment, { children: [_jsx("dt", { children: name }), _jsx("dd", { children: value })] }, name))), rows.length > maximumArgumentRows && (_jsxs("dd", { className: cardLabel, children: ["+", rows.length - maximumArgumentRows] }))] })), _jsxs("div", { className: cardActions, children: [_jsx(Button, { variant: "secondary", onClick: () => void onDecide(item, "deny"), children: labels.chat.deny }), _jsx(Button, { onClick: () => void onDecide(item, "allow"), children: labels.chat.allow })] })] }));
+    const [decisionState, setDecisionState] = useState({ kind: "undecided" });
+    const callArguments = readApprovalArguments(item.arguments);
+    const decide = (decision) => {
+        setDecisionState({ kind: "sending", decision });
+        onDecide(item, decision).catch((error) => setDecisionState({
+            kind: "failed",
+            message: error instanceof Error ? error.message : String(error),
+        }));
+    };
+    const sending = decisionState.kind === "sending";
+    return (_jsxs("div", { className: card, children: [_jsx("span", { children: describeToolCall(item.tool) }), callArguments.kind === "rows" && callArguments.rows.length > 0 && (_jsx("dl", { className: argumentList, children: callArguments.rows.map((row) => (_jsxs(Fragment, { children: [_jsx("dt", { children: row.label }), _jsx("dd", { children: row.value })] }, row.name))) })), callArguments.kind === "text" && callArguments.text.trim() && (_jsx("pre", { className: rawArguments, children: callArguments.text })), decisionState.kind === "failed" && (_jsx("span", { className: decisionError, role: "alert", children: decisionState.message })), _jsxs("div", { className: cardActions, children: [_jsx(Button, { variant: "secondary", disabled: sending, loading: sending && decisionState.decision === "deny", onClick: () => decide("deny"), children: labels.chat.deny }), _jsx(Button, { disabled: sending, loading: sending && decisionState.decision === "allow", onClick: () => decide("allow"), children: labels.chat.allow })] })] }));
 }
 /** The assistant's questions, one option row per answer; picking one answers that question. */
 function QuestionCard({ item, onAnswer, }) {
@@ -280,18 +292,27 @@ function isSameMessage(item, message) {
         item.content === message.content &&
         Date.parse(item.created_at) >= message.sentAt - 60000);
 }
-/** A call's JSON arguments as name and value pairs, values shortened to one line. */
-function listArgumentRows(argumentsJson) {
+/**
+ * A call's arguments as the card shows them: a JSON object as one name and value row per key,
+ * anything else as the text the call carries.
+ */
+function readApprovalArguments(argumentsJson) {
+    let parsed;
     try {
-        const parsed = JSON.parse(argumentsJson);
-        if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed))
-            return [];
-        return Object.entries(parsed).map(([name, value]) => [
-            name.replace(/[_-]+/g, " "),
-            typeof value === "string" ? value : JSON.stringify(value),
-        ]);
+        parsed = JSON.parse(argumentsJson);
     }
     catch {
-        return [];
+        return { kind: "text", text: argumentsJson };
     }
+    if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) {
+        return { kind: "text", text: argumentsJson };
+    }
+    return {
+        kind: "rows",
+        rows: Object.entries(parsed).map(([name, value]) => ({
+            name,
+            label: name.replace(/[_-]+/g, " "),
+            value: typeof value === "string" ? value : JSON.stringify(value),
+        })),
+    };
 }

package/dist/components/chat-page.js

@@ -90,7 +90,7 @@ const historyRow = css({
     display: "flex",
     alignItems: "center",
     gap: "layout.controlGap",
-    width: "100%",
+    width: "full",
     height: "menu.item",
     paddingInline: "menu.itemInline",
     border: "0",

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

@@ -21,16 +21,7 @@ export type ChatSheetEvent = {
     text: string;
 };
 /** The thread and composer's own props, shared by the sheet and `ChatConversation`. */
-export type ChatConversationProps = {
-    /**
-     * `agent`, the default, is the main agent's one long-running thread, with its `tasks` as cards
-     * under day labels; `conversations` is one conversation of many, such as beside `ChatHistory`.
-     */
-    variant?: "agent" | "conversations";
-    /** What the main agent runs on its own, oldest first; `agent` only. */
-    tasks?: readonly AgentTask[];
-    /** The user's approval or answer on a waiting task's card. */
-    onTaskReply?: (task: AgentTask, reply: AgentTaskReply) => void;
+type ChatThreadAndComposerProps = {
     /** The conversation: `useChatClientSource` over the lib's chat client, or the app's own. */
     source: ChatConversationSource;
     placeholder: string;
@@ -55,12 +46,35 @@ export type ChatConversationProps = {
     suggestions?: readonly string[];
     /** A Copy control in the footer of each reply once its turn has finished, and not failed. */
     copyReplies?: boolean;
-    /** More tools in the composer's bar after the paperclip, such as a dictation button. */
     composerTools?: ReactNode;
-    /** While the host takes dictation, its levels as the composer's waveform; see `ChatComposer`. */
     dictation?: ChatDictation;
+} & (({
+    /** The default: the main agent's one long-running thread, its `tasks` as cards by day. */
+    variant?: "agent";
+} & ({
+    tasks?: never;
+    onTaskReply?: never;
+} | {
+    /** What the main agent runs on its own, oldest first. */
+    tasks: readonly AgentTask[];
+    /**
+     * Sends the user's approval or answer on a waiting task's card, as `AgentTaskCard`'s
+     * `onReply` does; every waiting task needs it, so it comes with `tasks`.
+     */
+    onTaskReply: (task: AgentTask, reply: AgentTaskReply) => Promise<void>;
+})) | {
+    /** One conversation of many, such as beside `ChatHistory`; it has no tasks. */
+    variant: "conversations";
+    tasks?: never;
+    onTaskReply?: never;
+});
+export type ChatConversationProps = ChatThreadAndComposerProps & {
+    /** `wide` sets the thread and composer in one readable column for a full page. */
+    layout?: "sheet" | "wide";
+    /** The drawer's body inside a `Drawer`, a plain element otherwise. */
+    scrollBody?: typeof DrawerBody | "div";
 };
-export type ChatSheetProps = ChatConversationProps & {
+export type ChatSheetProps = ChatThreadAndComposerProps & {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     title: ReactNode;
@@ -72,16 +86,12 @@ export type ChatSheetProps = ChatConversationProps & {
     onPlacementChange?: (placement: ChatSheetPlacement) => void;
     /** Shows a header button that moves the conversation to a full page. */
     onOpenFullPage?: () => void;
-    /** The hotkey that opens the sheet, shown as keys in its header. */
     shortcut?: HotkeyChord;
 };
 export declare function ChatSheet({ open, onOpenChange, title, context, placement, onPlacementChange, onOpenFullPage, shortcut, ...conversationProps }: ChatSheetProps): import("react").JSX.Element | null;
 /**
  * The thread and the composer: everything that reads or writes the conversation. `layout="wide"`
- * sets both in one readable column for a full page; the sheet uses `sheet`.
+ * sets both in one readable column for a full page; the sheet uses `sheet`. Only the `agent`
+ * variant takes `tasks`.
  */
-export declare function ChatConversation({ source, placeholder, draft, onDraftChange, composerRef, mentions, mentionMark, onMentionSelect, mentionHref, events, assistantName: ownAssistantName, suggestions, copyReplies, composerTools, dictation, variant, tasks, onTaskReply, layout, scrollBody: ScrollBody, }: ChatConversationProps & {
-    layout?: "sheet" | "wide";
-    /** The drawer's body inside a `Drawer`, a plain element otherwise. */
-    scrollBody?: typeof DrawerBody | "div";
-}): import("react").JSX.Element;
+export declare function ChatConversation({ source, placeholder, draft, onDraftChange, composerRef, mentions, mentionMark, onMentionSelect, mentionHref, events, assistantName: ownAssistantName, suggestions, copyReplies, composerTools, dictation, tasks, onTaskReply, layout, scrollBody: ScrollBody, }: ChatConversationProps): import("react").JSX.Element;