thursday-agent 0.1.2 → 0.2.0

package/features/bot/components/bot-setting.tsx

@@ -1,6 +1,14 @@
 "use client";
 
-import { Check, History, Plus, Trash2, Wrench, X } from "lucide-react";
+import {
+  Check,
+  History,
+  PencilLine,
+  Plus,
+  Trash2,
+  Wrench,
+  X,
+} from "lucide-react";
 import { type ReactNode, useState } from "react";
 import { queryKey } from "@/app/api/query-key";
 import { Button } from "@/components/ui/button";
@@ -16,13 +24,17 @@ import { Input } from "@/components/ui/input";
 import { notify } from "@/components/ui/notify";
 import ShinyText from "@/components/ui/shiny-text";
 import { Swatch } from "@/components/ui/swatch";
+import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
+import { BOT_NOTES, PROMPT_CROWDED } from "@/config";
 import { ModelPicker } from "@/features/ai/components/model-picker";
 import type { TextModelProviderId } from "@/features/ai/model.schema";
 import {
+  clearBotNoteAction,
   createBotAction,
   createSeedBotsAction,
   deleteBotAction,
+  setBotNotesOnAction,
   updateBotAction,
 } from "@/features/bot/bot.action";
 import {
@@ -38,6 +50,7 @@ import { BOT_SEEDS, type BotSeed } from "@/features/bot/bot.seed";
 import { BotMark } from "@/features/bot/components/bot-mark";
 import {
   SettingError,
+  SettingNote,
   SettingPanes,
   SettingPanesSkeleton,
   SettingRailNote,
@@ -111,6 +124,13 @@ export function BotSetting() {
               onPick={() => setPicked(SEEDS)}
             />
           )}
+
+          {bots.length > PROMPT_CROWDED.bots && (
+            <SettingNote className="mx-3 mt-2 leading-relaxed">
+              {bots.length} bots. Each is a line in every prompt, and one more
+              for Thursday to choose between.
+            </SettingNote>
+          )}
         </div>
       }
       right={
@@ -514,6 +534,12 @@ function BotPage({
       onDone(null);
     },
   });
+  // Shared with the rail's switch; SWR dedups the read
+  const { data: notesOn } = useServerRoute<boolean>(queryKey.botNotes);
+  const [clearNote, clearingNote] = useServerAction(clearBotNoteAction, {
+    okMessage: "Notes cleared",
+    onOk: () => revalidate(queryKey.bot),
+  });
 
   const ready =
     name.trim() && description.trim() && provider && model.trim() && !creating;
@@ -531,6 +557,19 @@ function BotPage({
     });
   };
 
+  /** The bot writes its own notes; the only thing to do to them from here is throw them away. */
+  const confirmClearNote = async () => {
+    if (!bot) return;
+    const confirmed = await notify.confirm({
+      title: `Clear ${bot.name}'s own prompt?`,
+      description:
+        "What it worked out about doing jobs here is gone, and it starts the next one without it.",
+      okText: "Clear",
+      destructive: true,
+    });
+    if (confirmed) clearNote(bot.name);
+  };
+
   const confirmRemove = async () => {
     if (!bot) return;
     const confirmed = await notify.confirm({
@@ -595,6 +634,50 @@ function BotPage({
           </div>
         </div>
 
+        {bot?.note && (
+          /* Not a Row like the fields above it: those are settings the owner
+             typed, this is what the bot has worked out, and a block under its
+             face reads as part of who it is rather than one more control. */
+          <div className="overflow-hidden rounded-xl border border-border/60 bg-muted/25">
+            <div className="flex items-center gap-2.5 border-b border-border/60 px-4 py-3">
+              <PencilLine className="size-3.5 shrink-0 text-muted-foreground" />
+              <span className="min-w-0 flex-1 truncate text-[13px] font-medium">
+                What {bot.name} has worked out
+              </span>
+              <span className="shrink-0 font-mono text-[10px] text-muted-foreground">
+                {bot.note.length}/{BOT_NOTES.chars}
+              </span>
+            </div>
+            <p className="px-4 py-3.5 text-[13px] leading-relaxed whitespace-pre-wrap">
+              {bot.note}
+            </p>
+            <div className="flex items-center gap-2 px-4 pb-3">
+              {/* No amber: switched off is the user's own choice, not something
+                  waiting on them. The word carries it. */}
+              <span className="min-w-0 flex-1 truncate font-mono text-[10px] text-muted-foreground">
+                {notesOn === false
+                  ? "Paused — bots are not keeping their own prompt"
+                  : "It writes this itself when a job ends"}
+                {bot.noteAt && (
+                  <>
+                    <span className="px-1.5 opacity-50">·</span>
+                    {shortAgo(bot.noteAt)}
+                  </>
+                )}
+              </span>
+              <Button
+                size="sm"
+                variant="ghost"
+                loading={clearingNote}
+                onClick={confirmClearNote}
+                className="shrink-0 text-muted-foreground hover:text-destructive"
+              >
+                Clear
+              </Button>
+            </div>
+          </div>
+        )}
+
         <MarkPicker
           icon={icon}
           onChange={(next) => {
@@ -668,29 +751,49 @@ function BotPage({
   );
 }
 
-/** What the roster's pick is, in the section's rail. */
+/**
+ * What the roster's pick is, and the one setting that is the whole set's rather
+ * than any bot's: whether bots keep their own instructions at all.
+ */
 function BotRail({ bot }: { bot: Bot | null }) {
-  if (!bot)
-    return (
+  const { data: notesOn, mutate } = useServerRoute<boolean>(queryKey.botNotes);
+  const [setNotesOn] = useServerAction(setBotNotesOnAction, {
+    onOk: () => revalidate(queryKey.botNotes),
+  });
+
+  const tokens = bot ? bot.tokens.input + bot.tokens.output : 0;
+  return (
+    <>
       <SettingRailNote>
-        Becomes a bot once it has a name and a model
+        {bot ? (
+          <span className="font-mono text-[11px]">
+            {bot.name}
+            <span className="px-1.5 opacity-50">·</span>
+            <span
+              title={`in ${formatCount(bot.tokens.input)} · out ${formatCount(bot.tokens.output)}`}
+            >
+              {tokens > 0 ? `${formatCount(tokens)} tokens` : "no tokens yet"}
+            </span>
+            <span className="px-1.5 opacity-50">·</span>
+            since {whenOf(bot.createdAt)}
+          </span>
+        ) : (
+          "Becomes a bot once it has a name and a model"
+        )}
       </SettingRailNote>
-    );
-  const tokens = bot.tokens.input + bot.tokens.output;
-  return (
-    <SettingRailNote>
-      <span className="font-mono text-[11px]">
-        {bot.name}
-        <span className="px-1.5 opacity-50">·</span>
-        <span
-          title={`in ${formatCount(bot.tokens.input)} · out ${formatCount(bot.tokens.output)}`}
-        >
-          {tokens > 0 ? `${formatCount(tokens)} tokens` : "no tokens yet"}
-        </span>
-        <span className="px-1.5 opacity-50">·</span>
-        since {whenOf(bot.createdAt)}
+      <span className="shrink-0 text-xs text-muted-foreground">
+        Bots keep their own prompt
       </span>
-    </SettingRailNote>
+      <Switch
+        checked={notesOn ?? true}
+        disabled={notesOn === undefined}
+        onCheckedChange={(on) => {
+          void mutate(on, false);
+          setNotesOn(on);
+        }}
+        aria-label="Bots keep their own prompt"
+      />
+    </>
   );
 }
 

package/features/bot/task.query.ts

@@ -226,9 +226,11 @@ export async function deleteFinishedTasks() {
   const removed = await database
     .delete(taskTable)
     .where(inArray(taskTable.status, ["done", "failed"]))
-    .returning({ id: taskTable.id });
+    // The label comes back too: a job's working folder is named for it and goes
+    // with the row (bot.runner removeFinishedTasks).
+    .returning({ id: taskTable.id, label: taskTable.label });
   if (removed.length) changed();
-  return removed.length;
+  return removed;
 }
 
 /** Every job, newest first. The caller stops each one before deleting it (bot.runner removeTask). */
@@ -275,6 +277,8 @@ export type TaskMessageInput = {
   content: ModelMessage["content"];
   /** Compaction summary row; `listThread` re-reads from here. */
   compact?: boolean;
+  /** Drawn as the app's own line, not as something a person or a bot said. */
+  note?: boolean;
 };
 
 /**
@@ -288,13 +292,20 @@ export async function upsertMessage(
 ) {
   await database
     .insert(taskMessageTable)
-    .values({ taskId, seq, ...message, compact: message.compact ?? false })
+    .values({
+      taskId,
+      seq,
+      ...message,
+      compact: message.compact ?? false,
+      note: message.note ?? false,
+    })
     .onConflictDoUpdate({
       target: [taskMessageTable.taskId, taskMessageTable.seq],
       set: {
         role: message.role,
         content: message.content,
         compact: message.compact ?? false,
+        note: message.note ?? false,
       },
     });
   changed();
@@ -512,8 +523,10 @@ function linesOf(message: StoredMessage, owner: string): TaskLine[] {
     if (message.seq === 0) return [];
     const text = typeof content === "string" ? content : textOf(content);
     if (!text) return [];
-    // Compaction summary row: a marker, not the user's words (bot.run compact)
-    if (message.compact) return [{ ...base, id: id(0), kind: "note", text }];
+    // The app's own line — a compaction marker, or why a run stopped — never
+    // the user's words. `compact` is read too: rows written before `note` was.
+    if (message.note || message.compact)
+      return [{ ...base, id: id(0), kind: "note", text }];
     return [{ ...base, id: id(0), kind: "user", text }];
   }
 

package/features/memory/components/memory-setting.tsx

@@ -25,6 +25,7 @@ import {
   isFading,
   type MemoryNote,
   type MemorySection,
+  memorySourceLabel,
   noteTitle,
   sectionOf,
 } from "@/features/memory/memory.schema";
@@ -348,8 +349,16 @@ function NotePage({ note }: { note: MemoryNote }) {
                 <span className="flex-1 text-sm leading-relaxed text-foreground/90">
                   {fact.text}
                 </span>
-                <span className="shrink-0 pt-0.5 font-mono text-[11px] text-muted-foreground/50">
-                  {format(fact.createdAt, "yyyy.MM.dd")}
+                {/* When, and whose hand — memory is kept by four of them */}
+                <span className="shrink-0 pt-0.5 text-right text-[11px] text-muted-foreground/50">
+                  <span className="block font-mono">
+                    {format(fact.createdAt, "yyyy.MM.dd")}
+                  </span>
+                  {memorySourceLabel(fact.source) && (
+                    <span className="block">
+                      {memorySourceLabel(fact.source)}
+                    </span>
+                  )}
                 </span>
               </li>
             ))}

package/features/memory/memory.query.ts

@@ -12,6 +12,7 @@ import {
   type MemoryAlwaysLoaded,
   type MemoryNoteView,
   type MemoryNoteWrite,
+  type MemorySource,
   type MemoryWrite,
   recallScore,
 } from "./memory.schema";
@@ -68,6 +69,7 @@ function latestFacts(noteIds: number[]) {
       noteId: memoryFactTable.noteId,
       text: memoryFactTable.text,
       alwaysLoad: memoryFactTable.alwaysLoad,
+      source: memoryFactTable.source,
       createdAt: memoryFactTable.createdAt,
     })
     .from(memoryFactTable)
@@ -129,7 +131,8 @@ export async function deleteNote(id: number) {
 export async function addFact(noteId: number, text: string) {
   const [fact] = await database
     .insert(memoryFactTable)
-    .values({ noteId, text })
+    // Only the screen calls this, so the hand is known here (memory.action)
+    .values({ noteId, text, source: "user" })
     .returning();
   await touchNote(noteId);
   changed();
@@ -155,7 +158,7 @@ export async function reviseFact(noteId: number, factId: number, text: string) {
 
       const [fact] = await tx
         .insert(memoryFactTable)
-        .values({ noteId, text })
+        .values({ noteId, text, source: "user" })
         .returning();
       await tx
         .update(memoryNoteTable)
@@ -313,6 +316,8 @@ export const sameFact = (text: string) =>
  */
 export async function writeNotes(
   input: MemoryNoteWrite[],
+  /** Which hand is writing; recorded on every fact (memory.schema MemorySource). */
+  source: MemorySource,
 ): Promise<MemoryWrite> {
   const unnamed: string[] = [];
   const paths: string[] = [];
@@ -466,6 +471,7 @@ export async function writeNotes(
                 .values({
                   noteId,
                   text: fact.text,
+                  source,
                   alwaysLoad: claim(
                     fact.alwaysLoad ?? target.alwaysLoad,
                     fact.text,
@@ -494,6 +500,7 @@ export async function writeNotes(
             .values({
               noteId,
               text: fact.text,
+              source,
               alwaysLoad: claim(fact.alwaysLoad === true, fact.text),
             })
             .returning({

package/features/memory/memory.schema.ts

@@ -1,12 +1,42 @@
 import { z } from "zod";
 import { type DateLike, DateLikeSchema, toDate } from "@/lib/date-like";
 
+/**
+ * Who put a fact here. Memory is one note kept by four hands — the user typing
+ * on the screen, the call as they talk, a bot that turned something up mid-job,
+ * and the pass that reads calls back afterwards — and they are not equally
+ * close to the user. A reader that cannot tell them apart reads what a bot
+ * inferred as something the user said.
+ */
+export const MemorySourceSchema = z.enum(["user", "call", "bot", "tidy"]);
+
+export type MemorySource = z.infer<typeof MemorySourceSchema>;
+
+/**
+ * How a source reads on screen. Recorded for the person looking at their own
+ * memory, not for a model: a bare `bot` in a prompt says nothing a reader can
+ * act on — it cannot tell whether that was itself — and costs a sentence to
+ * explain. Empty where it was never recorded.
+ */
+export const memorySourceLabel = (source: MemorySource | null | undefined) =>
+  source === "user"
+    ? "you"
+    : source === "call"
+      ? "on a call"
+      : source === "bot"
+        ? "a bot"
+        : source === "tidy"
+          ? "read back"
+          : "";
+
 // Storage is fact-based: one row per fact, history via isLatest.
 export const MemoryFactSchema = z.object({
   id: z.number(),
   text: z.string(),
   /** Loaded into every prompt without opening the note (ALWAYS_LOADED_MAX). */
   alwaysLoad: z.boolean(),
+  /** Null on rows written before the hand was recorded. */
+  source: MemorySourceSchema.nullish(),
   createdAt: DateLikeSchema,
 });
 

package/features/skills/components/skills-setting.tsx

@@ -28,13 +28,14 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { Switch } from "@/components/ui/switch";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
-import { PATHS } from "@/config";
+import { PATHS, PROMPT_CROWDED } from "@/config";
 import {
   SettingDialogContent,
   SettingError,
   SettingFilter,
   SettingGroup,
   SettingItems,
+  SettingNote,
   SettingRailNote,
   SettingScreen,
   SettingSkeleton,
@@ -128,6 +129,13 @@ export function SkillsSetting() {
             ))}
         </SettingItems>
       </SettingGroup>
+
+      {on > PROMPT_CROWDED.skills && (
+        <SettingNote>
+          {on} skills are on. Each is a line in every prompt a bot reads, and
+          one more to look past when it picks.
+        </SettingNote>
+      )}
     </SettingScreen>
   );
 }

package/features/workspace/workspace.ts

@@ -2,6 +2,7 @@ import {
   mkdir,
   readdir,
   realpath,
+  rm,
   stat,
   unlink,
   writeFile,
@@ -42,7 +43,12 @@ export const ARTIFACTS = join(WORKSPACE, PATHS.artifacts);
  * Created on open, and the only places inside the workspace `write_file`
  * accepts. `.agents` is the skills CLI's install folder.
  */
-const BOT_FOLDERS = [PATHS.artifacts, PATHS.projects, PATHS.scratch];
+const BOT_FOLDERS = [
+  PATHS.artifacts,
+  PATHS.projects,
+  PATHS.scratch,
+  PATHS.bots,
+];
 const WRITABLE = new Set([...BOT_FOLDERS, ".agents"]);
 
 /** Where playwright-cli drops a snapshot after every command. Its name, not ours. */
@@ -61,7 +67,7 @@ export function writeRefusal(full: string): string | null {
     const rel = relative(WORKSPACE, full);
     const [top] = rel.split(sep);
     if (top && WRITABLE.has(top)) return null;
-    return `Not written: ${rel || "the workspace root"} is outside the workspace's folders. Finished work goes under ${PATHS.artifacts}/, code under ${PATHS.projects}/, everything else under ${PATHS.scratch}/.`;
+    return `Not written: ${rel || "the workspace root"} is outside the workspace's folders. Finished work goes under ${PATHS.artifacts}/, code under ${PATHS.projects}/, your own kit under ${PATHS.bots}/, and this job's working material under ${PATHS.scratch}/.`;
   }
   if (under(APP_ROOT, full)) {
     return `Not written: ${full} is inside the app that is running you, not the user's files. Work in ${WORKSPACE}; outside it, write only where the user pointed you.`;
@@ -89,6 +95,50 @@ export async function insideWorkspace(rel: string): Promise<string | null> {
   return under(root, target) ? target : null;
 }
 
+/**
+ * Where one job keeps what it is still working on. `scratch/` used to be shared
+ * by every job at once, so nobody could tell whose a file was or when it stopped
+ * mattering, and it only grew. A job has a beginning and an end, which is what
+ * makes its working material safe to clear later — and it is the right unit
+ * rather than the bot, because several bots work inside one job (`ask_bot`) and
+ * one bot runs many jobs.
+ *
+ * Named for the label so the folder is readable on the Workspace screen, with
+ * the head of the id after it so two jobs called the same thing stay apart.
+ * Finished work never lands here: that is `artifacts/`, which stays flat and
+ * unattributed, and code is `projects/`, which outlives the job that started it.
+ */
+export function jobScratch(taskId: string, label: string): string {
+  const slug =
+    label
+      .trim()
+      .toLowerCase()
+      .replace(/[^\p{L}\p{N}]+/gu, "-")
+      .replace(/^-+|-+$/g, "")
+      .slice(0, 40) || "job";
+  return `${PATHS.scratch}/${slug}-${taskId.slice(0, 6)}`;
+}
+
+/** Where one bot keeps what it wants on its next job (config PATHS.bots). */
+export const botFolder = (bot: string): string =>
+  `${PATHS.bots}/${bot.replace(/[^\p{L}\p{N}_-]+/gu, "-")}`;
+
+export async function openBotFolder(bot: string): Promise<string> {
+  const path = botFolder(bot);
+  await mkdir(join(WORKSPACE, path), { recursive: true });
+  return path;
+}
+
+/** Creates it, so a job never has to and never writes to the shared root by mistake. */
+export async function openJobScratch(
+  taskId: string,
+  label: string,
+): Promise<string> {
+  const path = jobScratch(taskId, label);
+  await mkdir(join(WORKSPACE, path), { recursive: true });
+  return path;
+}
+
 /**
  * A job's own browser session. playwright-cli reads the session name from
  * this variable when `-s=` is not given, so the model never picks one and the
@@ -105,6 +155,52 @@ export const jobShellEnv = (
       }
     : {};
 
+/** Set by `ensureBrowser`, read by `readMachineTools`; null until it has finished. */
+let browserReady: boolean | null = null;
+
+/**
+ * What the shell can actually reach. A bot writes a job around what is here —
+ * node or python3, which package manager — and the platform does not say: two
+ * macs differ. Probed in one `command -v` sweep at the moment it is asked, per
+ * job rather than cached, so a job that installs something is not told
+ * otherwise on its next run.
+ */
+export const PROBED = {
+  runtimes: ["node", "python3", "uv", "bun", "deno"],
+  managers: ["pnpm", "npm", "yarn"],
+} as const;
+
+export type MachineTools = {
+  [K in keyof typeof PROBED]: { found: string[]; missing: string[] };
+} & {
+  /** Null while `ensureBrowser` is still running; it starts at boot and is not awaited. */
+  browser: boolean | null;
+};
+
+export async function readMachineTools(
+  sandbox: Sandbox,
+): Promise<MachineTools> {
+  const names = Object.values(PROBED).flat();
+  const { stdout } = await sandbox.exec(
+    names
+      .map(
+        (name) => `command -v ${name} >/dev/null 2>&1 && printf '%s ' ${name}`,
+      )
+      .join("; "),
+    { timeoutMs: 10_000 },
+  );
+  const found = new Set(stdout.trim().split(/\s+/).filter(Boolean));
+  const split = (list: readonly string[]) => ({
+    found: list.filter((name) => found.has(name)),
+    missing: list.filter((name) => !found.has(name)),
+  });
+  return {
+    runtimes: split(PROBED.runtimes),
+    managers: split(PROBED.managers),
+    browser: browserReady,
+  };
+}
+
 /**
  * The browser bots drive. It is not in the package — ~280 MB, and its build
  * moves with playwright-core — so it is fetched here instead of from an install
@@ -122,7 +218,8 @@ export async function ensureBrowser(): Promise<void> {
     .exec("playwright-cli install-browser chromium")
     .catch((cause: unknown) => ({ exitCode: 1, stderr: String(cause) }));
 
-  if (done.exitCode === 0) return;
+  browserReady = done.exitCode === 0;
+  if (browserReady) return;
   logger.warn(
     `no browser — bots cannot open a page until \`playwright-cli install-browser chromium\` succeeds: ${done.stderr.trim().split("\n").at(-1) ?? ""}`,
   );
@@ -137,6 +234,7 @@ export async function closeJobShell(taskId: string): Promise<void> {
     })
     .catch(() => {});
   await pruneBrowserFiles();
+  await pruneOutputFiles();
 }
 
 /**
@@ -145,6 +243,26 @@ export async function closeJobShell(taskId: string): Promise<void> {
  */
 const BROWSER_FILE_TTL_MS = 60 * 60 * 1000;
 
+async function pruneOutputFiles(): Promise<void> {
+  const dir = join(WORKSPACE, PATHS.output);
+  const entries = await readdir(dir, { withFileTypes: true }).catch(() => []);
+  const cutoff = Date.now() - OUTPUT_FILE_TTL_MS;
+  for (const entry of entries) {
+    if (!entry.isFile()) continue;
+    const file = join(dir, entry.name);
+    const info = await stat(file).catch(() => null);
+    if (info && info.mtimeMs < cutoff) await unlink(file).catch(() => {});
+  }
+}
+
+/**
+ * Tool output over `TOOL_OUTPUT.max` is written here in full and the model is
+ * told where. Nothing read it after the run that made it, and nothing deleted
+ * it either — a day is long enough to still be looking, short enough that the
+ * folder does not become the biggest thing in the workspace.
+ */
+const OUTPUT_FILE_TTL_MS = 24 * 60 * 60 * 1000;
+
 async function pruneBrowserFiles(): Promise<void> {
   const dir = join(WORKSPACE, BROWSER_DIR);
   const entries = await readdir(dir, { withFileTypes: true }).catch(() => []);
@@ -185,3 +303,18 @@ export async function openWorkspace(): Promise<Sandbox> {
     toolPath: TOOL_PATH,
   });
 }
+
+/**
+ * Removes a job's working folder. Its lifetime is the task's: when the row goes,
+ * so does what it was working with (features/bot/bot.runner). Never touches
+ * `artifacts` or `projects` — those are the user's and outlive every job.
+ */
+export async function removeJobScratch(
+  taskId: string,
+  label: string,
+): Promise<void> {
+  await rm(join(WORKSPACE, jobScratch(taskId, label)), {
+    recursive: true,
+    force: true,
+  }).catch(() => {});
+}

package/hooks/use-draft.ts

@@ -0,0 +1,37 @@
+import type { KeyboardEvent } from "react";
+import { useState } from "react";
+
+/**
+ * Draft for a one-line input, committed on blur. Enter blurs (one commit path);
+ * a draft shorter than `min` reverts to `value`; an outside change to `value`
+ * resets the draft.
+ */
+export function useDraft(
+  value: string,
+  onCommit: (next: string) => void | Promise<void>,
+  { min = 1 }: { min?: number } = {},
+) {
+  const [draft, setDraft] = useState(value);
+  // Sync during render; an effect would show the stale draft for a frame.
+  const [seen, setSeen] = useState(value);
+  if (value !== seen) {
+    setSeen(value);
+    setDraft(value);
+  }
+
+  const commit = () => {
+    const next = draft.trim();
+    if (next.length < min) return setDraft(value);
+    setDraft(next);
+    if (next !== value) void onCommit(next);
+  };
+
+  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    // Enter during IME composition confirms the character, not the draft.
+    if (event.key === "Enter" && !event.nativeEvent.isComposing) {
+      event.currentTarget.blur();
+    }
+  };
+
+  return { value: draft, set: setDraft, commit, onKeyDown };
+}