Q138: a refused send keeps the draft and says why

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/renderer/src/i18n/zh.ts

@@ -36,6 +36,7 @@ export const zh: Record<string, string> = {
   "Resumes on its own at {time}.": "将于 {time} 自动恢复。",
   "Waiting on you, or resumes on its own at {time}.": "等待你处理，或于 {time} 自动恢复。",
   "Waiting on you.": "等待你处理。",
+  "Not sent: {reason}": "未发送：{reason}",
   "Resume": "恢复",
   "Missing this run": "本次运行缺少的能力",
   "Disconnect": "断开连接",

src/renderer/src/pages/ChatPage.tsx

@@ -4,6 +4,7 @@ import { Dialog } from "../shared/Dialog";
 import { t } from "../i18n/i18n";
 import { ChatSidebar } from "./chat/ChatSidebar";
 import { ChatConversation } from "./chat/ChatConversation";
+import type { SendState } from "./chat/ChatComposer";
 import {
   buildConversations,
   collectParticipants,
@@ -20,6 +21,8 @@ function value(form: FormData, key: string): string {
   return String(form.get(key) ?? "").trim();
 }
 
+const IDLE_SEND: SendState = { pending: false, error: null };
+
 export function ChatPage({ snapshot, actions }: PageProps) {
   const orgId = activeOrgId(snapshot);
   const employee = requireActiveEmployee(snapshot);
@@ -67,6 +70,8 @@ export function ChatPage({ snapshot, actions }: PageProps) {
   const [selectedSpaceId, setSelectedSpaceId] = useState<string | null>(null);
   const [createOpen, setCreateOpen] = useState(false);
   const [attachmentFileId, setAttachmentFileId] = useState<string>("");
+  // Sends are tracked per conversation, so a late answer lands in the conversation that sent it.
+  const [sends, setSends] = useState<Record<string, SendState>>({});
   const composerRef = useRef<HTMLTextAreaElement | null>(null);
 
   const firstAvailableSpaceId = conversations[0]?.space.id ?? null;
@@ -107,21 +112,31 @@ export function ChatPage({ snapshot, actions }: PageProps) {
 
   const sendInChannel = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    if (!activeSpace) return;
-    const form = new FormData(event.currentTarget);
-    const body = value(form, "message");
+    if (!activeSpace || sends[activeSpace.id]?.pending) return;
+    const spaceId = activeSpace.id;
+    const sentAttachment = attachmentFileId;
+    const formElement = event.currentTarget;
+    const body = value(new FormData(formElement), "message");
     if (!body) return;
-    event.currentTarget.reset();
-    setAttachmentFileId("");
-    void actions.run(() => window.agentCompany.sendMessage({
+    setSends((current) => ({ ...current, [spaceId]: { pending: true, error: null } }));
+    // The draft and attachment stay until the message is saved, so a refused send loses nothing.
+    actions.run(() => window.agentCompany.sendMessage({
       orgId,
-      spaceId: activeSpace.id,
+      spaceId,
       threadId: null,
       senderType: "employee",
       senderId: employee.id,
       bodyMd: body,
-      attachmentFileIds: attachmentFileId ? [attachmentFileId] : [],
-    }));
+      attachmentFileIds: sentAttachment ? [sentAttachment] : [],
+    })).then(() => {
+      formElement.reset();
+      setAttachmentFileId((current) => (current === sentAttachment ? "" : current));
+      setSends((current) => ({ ...current, [spaceId]: { pending: false, error: null } }));
+    }).catch((error: unknown) => {
+      const reason = error instanceof Error ? error.message : String(error);
+      console.error(`[chat] send failed: ${reason}`);
+      setSends((current) => ({ ...current, [spaceId]: { pending: false, error: reason } }));
+    });
   };
 
   const createSpace = (event: FormEvent<HTMLFormElement>) => {
@@ -218,6 +233,7 @@ export function ChatPage({ snapshot, actions }: PageProps) {
         onDeleteMessage={deleteChatMessage}
         onOpenFile={openFile}
         onSubmit={sendInChannel}
+        send={(activeSpaceId ? sends[activeSpaceId] : undefined) ?? IDLE_SEND}
         composerRef={composerRef}
       />
 

src/renderer/src/pages/chat/ChatComposer.tsx

@@ -5,8 +5,15 @@ import { SLASH_COMMANDS } from "./chat-helpers";
 import { MentionTextarea } from "./MentionTextarea";
 import { t } from "../../i18n/i18n";
 
+/** Whether a send is in flight, and why the last one was refused. */
+export interface SendState {
+  pending: boolean;
+  error: string | null;
+}
+
 export function ChatComposer({
   disabled,
+  send,
   files,
   agents,
   employees,
@@ -17,6 +24,7 @@ export function ChatComposer({
   composerRef,
 }: {
   disabled: boolean;
+  send: SendState;
   files: FileObjectRecord[];
   agents: AgentRecord[];
   employees: EmployeeRecord[];
@@ -27,13 +35,15 @@ export function ChatComposer({
   composerRef: MutableRefObject<HTMLTextAreaElement | null>;
 }) {
   const [slashOpen, setSlashOpen] = useState(false);
+  // While a send is in flight nothing may change the draft it will clear on success.
+  const locked = disabled || send.pending;
   const attachment = files.find((file) => file.id === attachmentFileId) ?? null;
   const internalRef = useRef<HTMLTextAreaElement | null>(null);
   const ref = composerRef ?? internalRef;
 
   const insert = (text: string) => {
     const node = ref.current;
-    if (!node) return;
+    if (!node || locked) return;
     const start = node.selectionStart;
     const end = node.selectionEnd;
     const before = node.value.slice(0, start);
@@ -50,7 +60,7 @@ export function ChatComposer({
         <MentionTextarea
           name="message"
           rows={2}
-          disabled={disabled}
+          disabled={locked}
           ariaLabel={t("Message")}
           agents={agents}
           employees={employees}
@@ -58,8 +68,8 @@ export function ChatComposer({
           style={{ minHeight: 38, maxHeight: "40vh", resize: "vertical" }}
         />
         <div className="row" style={{ paddingTop: 6, borderTop: "1px solid var(--border-soft)", gap: 4 }}>
-          <IconButton icon="attach" label={t("Attach file")} onClick={onAttach} disabled={disabled} />
-          <IconButton icon="sparkle" label={t("Commands")} onClick={() => setSlashOpen((open) => !open)} />
+          <IconButton icon="attach" label={t("Attach file")} onClick={onAttach} disabled={locked} />
+          <IconButton icon="sparkle" label={t("Commands")} onClick={() => setSlashOpen((open) => !open)} disabled={locked} />
           {attachment && (
             <span className="pill" style={{ maxWidth: 220 }}>
               <Icon name="file" size={14} />
@@ -67,6 +77,7 @@ export function ChatComposer({
               <button
                 type="button"
                 aria-label={t("Remove attachment")}
+                disabled={locked}
                 onClick={() => onAttachmentChange("")}
                 style={{ display: "inline-flex", border: 0, background: "transparent", padding: 0, color: "var(--text-3)", cursor: "pointer" }}
               >
@@ -76,10 +87,11 @@ export function ChatComposer({
           )}
           <div style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 6 }}>
             <span className="mono" style={{ fontSize: 12, color: "var(--text-3)" }}>Ctrl+Enter</span>
-            <Button tone="primary" size="small" type="submit" disabled={disabled}><Icon name="send" size={12} /> {t("Send")}</Button>
+            <Button tone="primary" size="small" type="submit" disabled={locked}><Icon name="send" size={12} /> {t("Send")}</Button>
           </div>
         </div>
-        {slashOpen && (
+        {send.error && <div className="form-error" role="alert">{t("Not sent: {reason}", { reason: send.error })}</div>}
+        {slashOpen && !locked && (
           <div style={{ marginTop: 8, display: "flex", flexWrap: "wrap", gap: 6 }}>
             {SLASH_COMMANDS.map((command) => (
               <button

src/renderer/src/pages/chat/ChatConversation.tsx

@@ -9,7 +9,7 @@ import type {
   ChatSlashInvocationRecord,
   FileObjectRecord,
 } from "../../../../shared/domain";
-import { ChatComposer } from "./ChatComposer";
+import { ChatComposer, type SendState } from "./ChatComposer";
 import { ChatTimeline } from "./ChatTimeline";
 import type { MessageContext } from "./chat-helpers";
 import { t } from "../../i18n/i18n";
@@ -34,6 +34,7 @@ export function ChatConversation({
   onDeleteMessage,
   onOpenFile,
   onSubmit,
+  send,
   composerRef,
 }: {
   space: ChatSpaceRecord | null;
@@ -55,6 +56,7 @@ export function ChatConversation({
   onDeleteMessage: (messageId: string) => void;
   onOpenFile: (fileId: string) => void;
   onSubmit: (event: FormEvent<HTMLFormElement>) => void;
+  send: SendState;
   composerRef: MutableRefObject<HTMLTextAreaElement | null>;
 }) {
   const [query, setQuery] = useState("");
@@ -135,6 +137,7 @@ export function ChatConversation({
       </div>
       <ChatComposer
         disabled={!space}
+        send={send}
         files={files}
         agents={context.agents}
         employees={context.employees}

src/renderer/src/pages/chat/MentionTextarea.tsx

@@ -53,7 +53,7 @@ export function MentionTextarea({
 
   const insertMention = (handle: string) => {
     const node = ref.current;
-    if (!node) return;
+    if (!node || disabled) return;
     const before = node.value.slice(0, anchor.current);
     const after = node.value.slice(node.selectionStart);
     node.value = `${before}@${handle} ${after}`;
@@ -109,7 +109,7 @@ export function MentionTextarea({
 
   return (
     <div style={{ position: "relative" }}>
-      {query !== null && filtered.length > 0 && (
+      {!disabled && query !== null && filtered.length > 0 && (
         <div style={{
           position: "absolute",
           bottom: "100%",

tests/e2e/ceo-chat.spec.ts

@@ -96,6 +96,18 @@ test("the pinned CEO conversation is the Messages front door", async () => {
     });
     await expect(page.locator(".convo-item").first().locator(".convo-ceo-badge")).toBeVisible();
     await expect(page.locator(".convo-item").first()).toContainText("How are we tracking against the goal?");
+
+    // A send the backend refuses keeps the draft and says why, instead of clearing it.
+    const composer = page.getByRole("textbox", { name: "Message" });
+    await composer.fill("/nosuch keep this draft");
+    await page.getByRole("button", { name: "Send" }).click();
+    await expect(page.getByRole("alert")).toContainText("Not sent: Slash command /nosuch is unavailable.");
+    await expect(composer).toHaveValue("/nosuch keep this draft");
+    await composer.fill("Second thought: what is blocked?");
+    await page.getByRole("button", { name: "Send" }).click();
+    await expect(chatLog.getByText("Second thought: what is blocked?")).toBeVisible();
+    await expect(composer).toHaveValue("");
+    await expect(page.getByRole("alert")).toHaveCount(0);
   } finally {
     await app.close();
   }