Let a user stop a bot, and say the app is still alpha

The thinking row and the header menu both carry Stop while a bot has work
open for the user anywhere: every pending or processing job of that bot in
their conversations is failed as stopped, its task closed, a Stopped step
recorded and one closing message posted per session, so the thread stops
waiting and the bot goes idle. The handler running the job is aborted from
this process through a registry, so a job stuck waiting on a model stops at
once instead of on its next heartbeat, and a late face change after the
abort is dropped.

The release stage is now said in the app too: Settings > General reports
"Cobble v0.1.5 (alpha)" next to development, and the README and RELEASING.md
say what alpha means for installs.

src/pages/admin/bots/[bot_id]/(partials)/bot-thinking-row.tsx

@@ -2,15 +2,11 @@ import Row from "@moduletrace/twui/layout/Row";
 import Span from "@moduletrace/twui/layout/Span";
 import Stack from "@moduletrace/twui/layout/Stack";
 import BotAvatar from "@/src/components/general/bot-avatar";
-import type { BotFace } from "@/src/dict/bot-dict";
 import botStoneProps from "@/src/utils/bot-stone-props";
-import {
-    BotComputerBusyStatusLine,
-    BotGettingMessageStatusLine,
-    BotReplyJobTitle,
-    BotWaitingStatusLine,
-} from "@/src/dict/bot-queue-dict";
+import { BotGettingMessageStatusLine } from "@/src/dict/bot-queue-dict";
 import type { BotWithLastMessage } from "@/src/types";
+import botBusyState from "../(utils)/bot-busy-state";
+import StopBotButton from "./stop-bot-button";
 
 type Props = {
     bot: BotWithLastMessage;
@@ -45,7 +41,7 @@ type Props = {
  * reply shows from the thread alone: every user message queues one, so while
  * the user has the last word a reply is due here, even while the bot works
  * elsewhere. Only the waits (for a model, for its computer) come from the
- * face.
+ * face. While it shows, a stop button pulls the plug on the bot's work.
  */
 export default function BotThinkingRow({
     bot,
@@ -56,17 +52,14 @@ export default function BotThinkingRow({
     has_task,
 }: Props) {
     const name = bot.name || "The bot";
-    const asleep = bot.face == "asleep";
-    const waiting_model = asleep && bot.status_line == BotWaitingStatusLine && Boolean(awaiting_reply || has_task);
-    const waiting_computer =
-        asleep && bot.status_line == BotComputerBusyStatusLine && Boolean(has_task) && !awaiting_reply;
-    const waiting = waiting_model || waiting_computer;
-    const getting = Boolean(receiving) && Boolean(awaiting_reply);
-    const thinking = Boolean(awaiting_reply) && !waiting && !getting;
-    const working =
-        !awaiting_reply && bot.face == "working" && bot.status_line != BotReplyJobTitle && Boolean(has_task);
+    const { waiting, getting, thinking, working, busy, stoppable } = botBusyState({
+        bot,
+        awaiting_reply,
+        receiving,
+        has_task,
+    });
 
-    if (!getting && !thinking && !working && !waiting) return null;
+    if (!busy) return null;
 
     const label = getting
         ? `${name} is ${BotGettingMessageStatusLine.toLowerCase()}…`
@@ -95,6 +88,7 @@ export default function BotThinkingRow({
                     </Span>
                 ) : null}
             </Stack>
+            <StopBotButton bot_name={bot.name} disabled={!stoppable} />
         </Row>
     );
 }

src/pages/admin/bots/[bot_id]/(partials)/conversation-header-menu.tsx

@@ -16,6 +16,7 @@ import BotRoutinesModal from "./bot-routines-modal";
 import BotModelsModal from "./bot-models-modal";
 import HeaderMenuItem from "./header-menu-item";
 import NewSessionButton from "./new-session-button";
+import StopBotButton from "./stop-bot-button";
 
 type Props = {
     bot: BotWithLastMessage;
@@ -48,8 +49,9 @@ type Props = {
 
 /**
  * The conversation header's menu: the sessions, a new session, the bot's
- * computer, its models and its settings. A row that opens a modal closes
- * the menu first, so the modal never sits behind an open menu.
+ * computer, its models, its settings and, while it works, stopping it. A
+ * row that opens a modal closes the menu first, so the modal never sits
+ * behind an open menu.
  */
 export default function ConversationHeaderMenu({
     bot,
@@ -136,6 +138,8 @@ export default function ConversationHeaderMenu({
                     onSaved={on_model_saved}
                 />
             </Stack>
+            <Divider className="my-1 mx-3 w-auto border-hairline dark:border-hairline" />
+            <StopBotButton menu bot_name={bot.name} />
             {can_open_settings ? (
                 <>
                     <Divider className="my-1 mx-3 w-auto border-hairline dark:border-hairline" />

src/pages/admin/bots/[bot_id]/(partials)/stop-bot-button.tsx

@@ -0,0 +1,79 @@
+import { useContext } from "react";
+import Button from "@moduletrace/twui/layout/Button";
+import { CircleStop } from "lucide-react";
+import { BotStopButtonLabel } from "@/src/dict/bot-queue-dict";
+import { StopBotContext } from "../(data)/stop-bot-context";
+import HeaderMenuItem from "./header-menu-item";
+
+type Props = {
+    /**
+     * Whose work stops, named in the tooltip so it's clear this pulls the
+     * bot's plug everywhere the user chats with it.
+     */
+    bot_name?: string | null;
+    /**
+     * Shown as a row in the conversation header's menu instead of a button
+     * in the thinking row.
+     */
+    menu?: boolean;
+    /**
+     * The caller already knows there's nothing to pull (a row that says the
+     * bot is only collecting the message), so the button sits out.
+     */
+    disabled?: boolean;
+};
+
+/**
+ * Pulls the plug on the bot for the signed-in user: its queued and running
+ * work stops wherever they chat with it, so a bot stuck waiting for a model
+ * (or anything else) comes back. The thinking row carries it while
+ * something is running; the header's menu carries it too, disabled when
+ * there's nothing to stop.
+ */
+export default function StopBotButton({ bot_name, menu, disabled }: Props) {
+    const { stop, stopping, error, can_stop } = useContext(StopBotContext);
+    const name = bot_name || "the bot";
+    const off = Boolean(disabled) || !can_stop || stopping;
+    const title = error
+        ? error
+        : off && !stopping
+          ? `Nothing of ${name}'s is running for you.`
+          : `Stop ${name}. Its queued and running work stops, everywhere you chat with it.`;
+
+    if (menu) {
+        return (
+            <HeaderMenuItem
+                icon={CircleStop}
+                title={BotStopButtonLabel}
+                description={title}
+                hint={stopping ? "Stopping" : undefined}
+                loading={stopping}
+                disabled={off}
+                onClick={() => {
+                    void stop();
+                }}
+            />
+        );
+    }
+
+    return (
+        <Button
+            title={title}
+            aria-label={title}
+            type="button"
+            variant="ghost"
+            color="text"
+            size="smaller"
+            disabled={off}
+            loading={stopping}
+            loadingIconSize="small"
+            beforeIcon={<CircleStop size={14} aria-hidden />}
+            onClick={() => {
+                void stop();
+            }}
+            className="shrink-0 text-ink-secondary dark:text-ink-secondary hover:text-ink hover:dark:text-ink hover:bg-sunken hover:dark:bg-sunken rounded-default transition-colors duration-[var(--m-fast)] focus-visible:ring-2 focus-visible:ring-ink"
+        >
+            {BotStopButtonLabel}
+        </Button>
+    );
+}