thursday-agent 0.2.0 → 0.3.0

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

@@ -2,8 +2,10 @@
 
 import {
   Check,
+  ChevronRight,
+  CircleAlert,
+  FolderOpen,
   History,
-  PencilLine,
   Plus,
   Trash2,
   Wrench,
@@ -21,34 +23,57 @@ import {
   CommandList,
 } from "@/components/ui/command";
 import { Input } from "@/components/ui/input";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+  InputGroupText,
+} from "@/components/ui/input-group";
 import { notify } from "@/components/ui/notify";
-import ShinyText from "@/components/ui/shiny-text";
-import { Swatch } from "@/components/ui/swatch";
+import { ShinyText } from "@/components/ui/shiny-text";
+import { Skeleton } from "@/components/ui/skeleton";
 import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
-import { BOT_NOTES, PROMPT_CROWDED } from "@/config";
+import { APP_NAME, BOT_RUN, PROMPT_CROWDED } from "@/config";
 import { ModelPicker } from "@/features/ai/components/model-picker";
-import type { TextModelProviderId } from "@/features/ai/model.schema";
 import {
-  clearBotNoteAction,
+  compactAtFor,
+  contextWindowOf,
+  type GatewayModel,
+  type TextModelProviderId,
+} from "@/features/ai/model.schema";
+import {
   createBotAction,
   createSeedBotsAction,
   deleteBotAction,
-  setBotNotesOnAction,
+  setBotMemoryOnAction,
   updateBotAction,
 } from "@/features/bot/bot.action";
 import {
   type Bot,
   type BotForm,
   type BotIcon,
-  isBudgetAsk,
+  type BotMemory,
+  type BotMemoryFile,
   MAX_PINNED_TOOLS,
   randomBotIcon,
   type Task,
 } from "@/features/bot/bot.schema";
-import { BOT_SEEDS, type BotSeed } from "@/features/bot/bot.seed";
+import {
+  BOT_SEEDS,
+  type BotSeed,
+  rollSeedColors,
+} from "@/features/bot/bot.seed";
 import { BotMark } from "@/features/bot/components/bot-mark";
+import { MarkPalette } from "@/features/bot/components/mark-palette";
 import {
+  type ConfigStatus,
+  isConfigSet,
+  MEDIA_MODEL_KEYS,
+  mediaModelWords,
+} from "@/features/config/config.const";
+import {
+  SettingDialogContent,
   SettingError,
   SettingNote,
   SettingPanes,
@@ -56,13 +81,22 @@ import {
   SettingRailNote,
 } from "@/features/settings/components/setting-ui";
 import { openSettings } from "@/features/settings/settings.store";
+import {
+  FileBody,
+  useFileText,
+} from "@/features/workspace/components/file-view";
+import { viewKindOf } from "@/features/workspace/file-kind";
+import {
+  deleteWorkspaceFileAction,
+  openFileAction,
+} from "@/features/workspace/workspace.action";
 import { useObjectState } from "@/hooks/use-object-state";
 import { type DateLike, shortAgo, whenOf } from "@/lib/date-like";
 import { COMMON_VALIDATE } from "@/lib/limits";
 import { useServerAction } from "@/lib/protocol/use-server-action";
 import { revalidate, useServerRoute } from "@/lib/protocol/use-server-route";
 import { cn, formatCount, WAITING_INK } from "@/lib/utils";
-import { MARK_PALETTE, MARK_SHAPES, MARK_SYSTEM } from "../mark.const";
+import { MARK_SHAPES, MARK_SYSTEM } from "../mark.const";
 
 /**
  * The bots Thursday hands background work to. Roster on the left, the picked bot's
@@ -77,35 +111,56 @@ export function BotSetting() {
   /** Picked roster entry: a bot name, NEW, or null for the first bot. */
   const [picked, setPicked] = useState<string | null>(null);
 
+  /**
+   * One roll for this screen, in BOT_SEEDS order. The faces on the invite, in the
+   * picker and on the bot that gets created are then the same colour, because
+   * `createSeedBotsAction` takes it (bot.seed rollSeedColors rolls per install so
+   * no two rosters look alike; a seed itself carries none).
+   */
+  const [inks] = useState(rollSeedColors);
+
   if (isLoading) return <SettingPanesSkeleton />;
   if (error) return <SettingError message={error.message} />;
 
   const drafting = picked === NEW;
+  const on = bots.filter((bot) => !bot.disabled).length;
   const have = new Set(bots.map((bot) => bot.name));
   const missing = BOT_SEEDS.filter((seed) => !have.has(seed.name));
-  const current =
-    drafting || picked === SEEDS
-      ? null
-      : (bots.find((bot) => bot.name === picked) ?? bots[0] ?? null);
+  const current = drafting
+    ? null
+    : (bots.find((bot) => bot.name === picked) ?? bots[0] ?? null);
 
   return (
     <SettingPanes
-      footer={picked === SEEDS ? null : <BotRail bot={current} />}
+      footer={bots.length === 0 ? null : <BotRail bot={current} />}
       left={
         <div className="flex flex-col py-2">
-          <button
-            type="button"
-            onClick={() => setPicked(NEW)}
-            className={cn(
-              "mx-2 mb-1 flex items-center gap-2 rounded-md px-2 py-1.5 text-left text-[13px] outline-none focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-inset",
-              drafting
-                ? "bg-secondary text-foreground"
-                : "text-muted-foreground hover:bg-muted/60 hover:text-foreground",
+          {/* The two ways to get a bot, on one line and apart from the roster
+              under it: a seed is not a bot you have */}
+          <div className="mx-2 mb-1 flex items-center gap-1">
+            <button
+              type="button"
+              onClick={() => setPicked(NEW)}
+              className={cn(
+                "flex flex-1 items-center gap-2 rounded-md px-2 py-1.5 text-left text-[13px] outline-none focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-inset",
+                drafting
+                  ? "bg-secondary text-foreground"
+                  : "text-muted-foreground hover:bg-muted/60 hover:text-foreground",
+              )}
+            >
+              <Plus className="size-3.5 shrink-0" />
+              New bot
+            </button>
+
+            {bots.length > 0 && missing.length > 0 && (
+              <SeedInvite
+                missing={missing}
+                inks={inks}
+                have={have}
+                onDone={(name) => setPicked(name)}
+              />
             )}
-          >
-            <Plus className="size-3.5 shrink-0" />
-            New bot
-          </button>
+          </div>
 
           {bots.map((bot) => (
             <RosterRow
@@ -117,26 +172,17 @@ export function BotSetting() {
             />
           ))}
 
-          {missing.length > 0 && (
-            <SeedEntry
-              missing={missing}
-              active={picked === SEEDS}
-              onPick={() => setPicked(SEEDS)}
-            />
-          )}
-
-          {bots.length > PROMPT_CROWDED.bots && (
+          {/* Only bots that are on: a switched-off one is in no prompt to crowd. */}
+          {on > 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.
+              {on} bots are on. Each is a line in every prompt, and one more for
+              Thursday to choose between.
             </SettingNote>
           )}
         </div>
       }
       right={
-        picked === SEEDS ? (
-          <SeedPackage have={have} onDone={(name) => setPicked(name)} />
-        ) : drafting ? (
+        drafting ? (
           <BotPage
             key="new"
             jobs={[]}
@@ -153,6 +199,14 @@ export function BotSetting() {
               .slice(0, RECENT)}
             onDone={() => setPicked(null)}
           />
+        ) : missing.length > 0 ? (
+          // Nothing on the roster: the offer is the only thing this pane could
+          // hold, so it fills it rather than sitting in a dialog nobody opened
+          <SeedPackage
+            have={have}
+            inks={inks}
+            onDone={(name) => setPicked(name)}
+          />
         ) : (
           <div className="space-y-4 p-8">
             <p className="text-sm leading-relaxed text-muted-foreground">
@@ -173,8 +227,6 @@ export function BotSetting() {
 
 /** Roster selections that are not a bot; values no bot name can be. */
 const NEW = " new";
-const SEEDS = " seeds";
-
 /** Jobs shown under Recent on a bot's page. */
 const RECENT = 3;
 
@@ -191,7 +243,7 @@ function RosterRow({
   active: boolean;
   onPick: () => void;
 }) {
-  const line = liveLine(job, bot.lastJobAt);
+  const line = liveLine(job, bot.lastJobAt, bot.disabled);
   return (
     <button
       type="button"
@@ -206,9 +258,14 @@ function RosterRow({
         {...markProps(bot.name, bot.icon)}
         state={job?.status === "running" ? "thinking" : "idle"}
         notify={job?.status === "waiting"}
-        className="shrink-0"
+        className={cn("shrink-0", bot.disabled && "opacity-45")}
       />
-      <span className="min-w-0 flex-1 space-y-0.5">
+      <span
+        className={cn(
+          "min-w-0 flex-1 space-y-0.5",
+          bot.disabled && "opacity-45",
+        )}
+      >
         <span
           className={cn(
             "block truncate text-[13px]",
@@ -218,23 +275,11 @@ function RosterRow({
           {bot.name}
         </span>
         {line.shine ? (
-          // The colours come from CSS variables so they follow the theme.
-          <span
-            className={cn(
-              "block",
-              line.amber
-                ? "[--rest:var(--color-amber-700)] [--shine:var(--color-amber-400)] dark:[--rest:var(--color-amber-400)] dark:[--shine:var(--color-amber-100)]"
-                : "[--rest:var(--muted-foreground)] [--shine:var(--foreground)]",
-            )}
-          >
-            <ShinyText
-              text={line.text}
-              speed={2.4}
-              color="var(--rest)"
-              shineColor="var(--shine)"
-              className="truncate font-mono text-[11px] leading-4"
-            />
-          </span>
+          <ShinyText
+            text={line.text}
+            tone={line.amber ? "waiting" : "muted"}
+            className="block truncate font-mono text-[11px] leading-4"
+          />
         ) : (
           <span className="block truncate font-mono text-[11px] leading-4 text-muted-foreground">
             {line.text}
@@ -245,27 +290,35 @@ function RosterRow({
   );
 }
 
-/** What the bot is doing, most urgent first. A budget stop waits but is not amber (isBudgetAsk). */
+/**
+ * What the bot is doing, most urgent first. Every wait is amber: the job moves
+ * again only when the user answers, whatever stopped it. Which kind of stop it
+ * was is the words' job, not the colour's.
+ */
 function liveLine(
   job: Task | null,
   lastJobAt: Bot["lastJobAt"],
+  disabled: boolean,
 ): {
   text: string;
   shine?: boolean;
   amber?: boolean;
 } {
+  if (job?.status === "waiting") {
+    return { text: "waiting on you", shine: true, amber: true };
+  }
+  if (job?.status === "running") {
+    return { text: `working · ${job.label}`, shine: true };
+  }
+  // Switched off, and no colour: off is the user's own choice, not something
+  // waiting on them, so the word carries it. It stands where the idle line
+  // would — the two cases above are a job it already had, which off never
+  // stopped, and hiding an ask behind "off" is how one goes unanswered.
+  if (disabled) return { text: "off" };
   if (!job) {
     if (!lastJobAt) return { text: "idle · no jobs yet" };
     return { text: `idle · last job ${sinceWord(lastJobAt)}` };
   }
-  if (job.status === "waiting") {
-    return isBudgetAsk(job.ask)
-      ? { text: "out of steps" }
-      : { text: "waiting on you", shine: true, amber: true };
-  }
-  if (job.status === "running") {
-    return { text: `working · ${job.label}`, shine: true };
-  }
   return { text: `idle · last job ${sinceWord(job.updatedAt)}` };
 }
 
@@ -274,86 +327,205 @@ function sinceWord(at: DateLike): string {
   const ago = shortAgo(at);
   return ago === "now" ? "just now" : `${ago} ago`;
 }
+/**
+ * What a seed still needs before it can work, as one line, or null when it needs
+ * nothing. A missing studio model is not a fallback — the tool is absent — so the
+ * row says so before the bot finds out mid-job. Ticking is never blocked: the list
+ * states the cost, it does not cap it.
+ */
+function unmetLine(
+  seed: BotSeed,
+  isSet: (key: string) => boolean,
+): string | null {
+  const unmet = (seed.requires ?? []).filter(
+    (kind) => !isSet(MEDIA_MODEL_KEYS[kind]),
+  );
+  if (!unmet.length) return null;
+  return `needs ${unmet.map(mediaModelWords).join(" and ")}`;
+}
 
 /**
- * The ready-made bots (bot.seed) as one entry rather than three rows.
- *
- * They used to fill an empty roster, which made a roster with nothing in it look
- * full and made the row you clicked create rather than open. Here they sit behind
- * a single line carrying the faces of the ones you do not have, and it is shown
- * only while at least one is still on offer.
+ * The picker's state, shared by the two places the offer appears: the pane an
+ * empty roster opens on, and the dialog the roster's invite opens. Seeds are
+ * ticked already, because the set is the recommendation and unticking is the
+ * decision; one already on the roster is locked on and says so, since `createBot`
+ * would only answer "already exists", which is an error about something this
+ * screen already knows. One call creates all of them.
  */
-function SeedEntry({
-  missing,
-  active,
-  onPick,
+function useSeedPicks(
+  have: Set<string>,
+  inks: string[],
+  onDone: (name: string | null) => void,
+) {
+  const [off, setOff] = useState<Set<string>>(new Set());
+  const [add, adding] = useServerAction(createSeedBotsAction, {
+    onOk: (made) => {
+      revalidate(queryKey.bot);
+      onDone(made.created[0] ?? null);
+    },
+  });
+  // Same key the Models section and its badge read, so one fetch answers all three.
+  const { data: config } = useServerRoute<ConfigStatus[]>(queryKey.config);
+  const isSet = (key: string) => isConfigSet(config, key);
+
+  // Seeds not on the roster yet. `have` is the whole roster, so counting against
+  // its size goes negative the moment a bot nobody seeded is on it.
+  const addable = BOT_SEEDS.filter((seed) => !have.has(seed.name));
+  const wanted = addable.filter((seed) => !off.has(seed.name));
+
+  return {
+    isSet,
+    adding,
+    addable,
+    wanted,
+    ticked: (seed: BotSeed) => have.has(seed.name) || !off.has(seed.name),
+    toggle: (name: string) =>
+      setOff((was) => {
+        const next = new Set(was);
+        if (next.has(name)) next.delete(name);
+        else next.add(name);
+        return next;
+      }),
+    submit: () =>
+      add(
+        wanted.map((seed) => ({
+          name: seed.name,
+          color: inks[BOT_SEEDS.indexOf(seed)],
+        })),
+      ),
+  };
+}
+
+/** The rows themselves. Both wrappers draw these and supply their own chrome. */
+function SeedRows({
+  have,
+  inks,
+  picks,
 }: {
-  missing: BotSeed[];
-  active: boolean;
-  onPick: () => void;
+  have: Set<string>;
+  inks: string[];
+  picks: ReturnType<typeof useSeedPicks>;
 }) {
   return (
-    <button
-      type="button"
-      onClick={onPick}
-      className={cn(
-        "mx-2 mt-1 flex items-center gap-2.5 rounded-md px-2 py-1.5 text-left outline-none focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-inset",
-        active ? "bg-secondary" : "hover:bg-muted/60",
-      )}
-    >
-      <span className="flex shrink-0 items-center">
-        {missing.map((seed, index) => (
-          <span key={seed.name} className={cn("block", index > 0 && "-ml-1.5")}>
-            <BotMark size={22} {...markProps(seed.name, seed.icon)} />
-          </span>
-        ))}
-      </span>
-      <span className="min-w-0 flex-1 space-y-0.5">
-        <span
-          className={cn(
-            "block truncate text-[13px]",
-            active ? "font-medium" : "text-foreground/90",
-          )}
-        >
-          Ready-made
-        </span>
-        <span className="block truncate font-mono text-[10px] leading-4 text-muted-foreground">
-          {missing.length === BOT_SEEDS.length
-            ? `${missing.length} bots`
-            : `${missing.length} left`}
-        </span>
-      </span>
-    </button>
+    <div className="flex flex-col gap-2">
+      {BOT_SEEDS.map((seed, at) => {
+        const owned = have.has(seed.name);
+        const on = picks.ticked(seed);
+        const needs = unmetLine(seed, picks.isSet);
+        return (
+          <div
+            key={seed.name}
+            className={cn(
+              "rounded-xl ring-1 transition-colors",
+              owned
+                ? "opacity-45 ring-border/60"
+                : on
+                  ? "ring-foreground"
+                  : "ring-border/60",
+            )}
+          >
+            <button
+              type="button"
+              disabled={owned || picks.adding}
+              aria-pressed={on}
+              onClick={() => picks.toggle(seed.name)}
+              className="flex w-full items-center gap-3 rounded-xl px-3.5 py-2.5 text-left outline-none focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-default"
+            >
+              <BotMark
+                size={28}
+                {...markProps(seed.name, seed.icon)}
+                color={inks[at]}
+                className={cn(
+                  "shrink-0 transition-opacity",
+                  !on && "opacity-35",
+                )}
+              />
+              {/* The hint stays on one line: the list grows, and a wrapping
+                  sentence per row is what made this read as a page of prose */}
+              <span className="min-w-0 flex-1 space-y-px">
+                <span className="block text-[14px] leading-[18px] font-medium">
+                  {seed.name}
+                </span>
+                <span className="block truncate text-[12px] leading-[17px] text-muted-foreground">
+                  {seed.hint}
+                </span>
+              </span>
+              {owned ? (
+                <span className="shrink-0 font-mono text-[11px] text-muted-foreground">
+                  already added
+                </span>
+              ) : needs ? (
+                <span
+                  className={cn(
+                    "flex shrink-0 items-center gap-1.5 font-mono text-[11px]",
+                    WAITING_INK,
+                  )}
+                >
+                  <CircleAlert className="size-3" />
+                  {needs}
+                </span>
+              ) : null}
+              <span
+                className={cn(
+                  "grid size-5 shrink-0 place-items-center rounded-full transition-colors",
+                  on
+                    ? "bg-foreground text-background"
+                    : "ring-1 ring-border/60 ring-inset",
+                )}
+              >
+                {on && <Check className="size-3" />}
+              </span>
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+/** Says what Add will do, so the count is checkable before the click. */
+function SeedActions({
+  picks,
+  onCancel,
+}: {
+  picks: ReturnType<typeof useSeedPicks>;
+  onCancel: () => void;
+}) {
+  return (
+    <>
+      <Button variant="ghost" onClick={onCancel}>
+        Cancel
+      </Button>
+      <Button
+        loading={picks.adding}
+        disabled={picks.wanted.length === 0}
+        onClick={picks.submit}
+      >
+        <Plus />
+        {picks.wanted.length === 1
+          ? `Add ${picks.wanted[0].name}`
+          : `Add ${picks.wanted.length} bots`}
+      </Button>
+    </>
   );
 }
 
 /**
- * The package itself: the seeds ticked already, because the package is the
- * recommendation (`BotSeed.recommended`) and unticking is the decision. One
- * already on the roster is locked on and says so — `createBot` would only answer
- * "already exists", which is an error about something this screen already knows.
- *
- * One call creates all of them; `createSeedBotsAction` has always taken an array.
+ * The offer as a pane: what an empty roster opens on, because nothing else could
+ * be there. A roster with bots on it gets `SeedInvite` and a dialog instead — a
+ * row among the bots read as a bot the user already had.
  */
 function SeedPackage({
   have,
+  inks,
   onDone,
 }: {
   /** Names already on the roster. */
   have: Set<string>;
+  inks: string[];
   onDone: (name: string | null) => void;
 }) {
-  const [off, setOff] = useState<Set<string>>(new Set());
-  const [add, adding] = useServerAction(createSeedBotsAction, {
-    onOk: (made) => {
-      revalidate(queryKey.bot);
-      onDone(made.created[0] ?? null);
-    },
-  });
-
-  const wanted = BOT_SEEDS.filter(
-    (seed) => !have.has(seed.name) && !off.has(seed.name),
-  );
+  const picks = useSeedPicks(have, inks, onDone);
 
   return (
     <div className="flex min-h-full flex-col">
@@ -363,108 +535,115 @@ function SeedPackage({
 
       <div className="px-8 pt-7 pb-1">
         <h3 className="text-[17px] font-medium tracking-tight">
-          {BOT_SEEDS.length === 1
-            ? "One bot comes with her"
-            : `${BOT_SEEDS.length === 2 ? "Two" : BOT_SEEDS.length} bots come with her`}
+          Bots you can add
         </h3>
         <p className="mt-1.5 max-w-lg text-[13px] leading-relaxed text-muted-foreground break-keep">
-          They take the work that would leave the call silent, and report back.
-          Untick anything you would rather not have; each runs on the app
-          default model until you give it one of its own.
+          Each one is a starting point — rename it, re-prompt it, give it a
+          model of its own. What a bot needs before it can work stands on its
+          row; until then it runs on the app default model.
         </p>
       </div>
 
-      <div className="flex flex-col gap-2 px-8 pt-4">
-        {BOT_SEEDS.map((seed) => {
-          const owned = have.has(seed.name);
-          const on = owned || !off.has(seed.name);
-          return (
-            <div
-              key={seed.name}
-              className={cn(
-                "rounded-2xl ring-1 transition-colors",
-                owned
-                  ? "opacity-45 ring-border/60"
-                  : on
-                    ? "ring-foreground"
-                    : "ring-border/60",
-              )}
-            >
-              <button
-                type="button"
-                disabled={owned || adding}
-                aria-pressed={on}
-                onClick={() =>
-                  setOff((was) => {
-                    const next = new Set(was);
-                    if (next.has(seed.name)) next.delete(seed.name);
-                    else next.add(seed.name);
-                    return next;
-                  })
-                }
-                className="flex w-full items-center gap-3.5 rounded-2xl px-4 py-3 text-left outline-none focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-default"
-              >
-                <BotMark
-                  size={32}
-                  {...markProps(seed.name, seed.icon)}
-                  className={cn(
-                    "shrink-0 transition-opacity",
-                    !on && "opacity-35",
-                  )}
-                />
-                <span className="min-w-0 flex-1 space-y-0.5">
-                  <span className="block text-[14px] font-medium">
-                    {seed.name}
-                  </span>
-                  <span className="block text-[12px] leading-normal text-muted-foreground break-keep">
-                    {seed.description}
-                  </span>
-                </span>
-                {owned && (
-                  <span className="shrink-0 font-mono text-[10px] text-muted-foreground">
-                    already added
-                  </span>
-                )}
-                <span
-                  className={cn(
-                    "grid size-6 shrink-0 place-items-center rounded-full transition-colors",
-                    on
-                      ? "bg-foreground text-background"
-                      : "ring-1 ring-border/60 ring-inset",
-                  )}
-                >
-                  {on && <Check className="size-3.5" />}
-                </span>
-              </button>
-            </div>
-          );
-        })}
+      <div className="px-8 pt-4">
+        <SeedRows have={have} inks={inks} picks={picks} />
       </div>
 
       <div className="mt-auto flex items-center gap-3 border-t border-border/60 px-8 py-4">
         <span className="flex-1 font-mono text-[11px] text-muted-foreground">
-          {wanted.length === 0
+          {picks.wanted.length === 0
             ? "nothing ticked"
-            : `${wanted.length} of ${BOT_SEEDS.length - have.size} ticked`}
+            : `${picks.wanted.length} of ${picks.addable.length} ticked`}
         </span>
-        <Button variant="ghost" onClick={() => onDone(null)}>
-          Cancel
-        </Button>
-        {/* Says what it will do, so the count is checkable before the click. */}
-        <Button
-          loading={adding}
-          disabled={wanted.length === 0}
-          onClick={() => add(wanted.map((seed) => ({ name: seed.name })))}
-        >
-          {wanted.length === 1
-            ? `Add ${wanted[0].name}`
-            : `Add ${wanted.length} bots`}
-        </Button>
+        <SeedActions picks={picks} onCancel={() => onDone(null)} />
       </div>
     </div>
   );
 }
 
+/** The same offer in a dialog, which brings its own padding and its own footer. */
+function SeedDialog({
+  have,
+  inks,
+  onDone,
+}: {
+  have: Set<string>;
+  inks: string[];
+  onDone: (name: string | null) => void;
+}) {
+  const picks = useSeedPicks(have, inks, onDone);
+
+  return (
+    <SettingDialogContent
+      title="Bots you can add"
+      description="Each one is a starting point — rename it, re-prompt it, give it a model of its own. What a bot needs before it can work stands on its row."
+      footer={<SeedActions picks={picks} onCancel={() => onDone(null)} />}
+    >
+      <SeedRows have={have} inks={inks} picks={picks} />
+    </SettingDialogContent>
+  );
+}
+
+/**
+ * The invite, on the New bot line rather than in the roster: both are ways to get
+ * a bot, and neither is a bot you have. It carries the faces of the ones still on
+ * offer, in the colours they would be created with, because a row of names would
+ * read as one more list and the faces are what says these are bots.
+ */
+function SeedInvite({
+  missing,
+  inks,
+  have,
+  onDone,
+}: {
+  missing: BotSeed[];
+  inks: string[];
+  have: Set<string>;
+  onDone: (name: string | null) => void;
+}) {
+  return (
+    <button
+      type="button"
+      title="Ready-made bots"
+      aria-label={`Ready-made bots, ${missing.length} on offer`}
+      onClick={() =>
+        notify.component({
+          className: "sm:max-w-xl",
+          renderer: ({ close }) => (
+            <SeedDialog
+              have={have}
+              inks={inks}
+              onDone={(name) => {
+                close();
+                onDone(name);
+              }}
+            />
+          ),
+        })
+      }
+      className="flex shrink-0 items-center gap-1 rounded-md px-1.5 py-1 text-muted-foreground outline-none transition-colors hover:bg-muted/60 hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-inset"
+    >
+      {/* Says the same thing the words next to it do, about a different set: these
+          are bots to add. It carries the affordance on its own when one seed is
+          left and the faces are a single dot */}
+      <Plus className="size-3 shrink-0" />
+      {missing.map((seed, at) => (
+        <span
+          key={seed.name}
+          className={cn("block", at > 0 && "-ml-1.5")}
+          style={{ zIndex: missing.length - at }}
+        >
+          <BotMark
+            size={20}
+            {...markProps(seed.name, seed.icon)}
+            color={inks[BOT_SEEDS.indexOf(seed)]}
+            notify={false}
+          />
+        </span>
+      ))}
+    </button>
+  );
+}
+
 /**
  * The mark seed is the name, not the row id, so a new bot's preview is the face the
  * roster will show. An unpicked colour stays empty and means the theme ink.
@@ -506,10 +685,34 @@ function BotPage({
     icon: bot?.icon ?? randomBotIcon(),
     provider: (bot?.provider ?? null) as TextModelProviderId | null,
     model: bot?.model ?? "",
+    // In thousands of tokens, the unit the field is typed in
+    compactAt: bot?.compactAt ? String(bot.compactAt / 1000) : "",
     toolIds: bot?.tools.map((tool) => tool.id) ?? [],
   }));
-  const { name, description, systemPrompt, icon, provider, model, toolIds } =
-    fields;
+  const {
+    name,
+    description,
+    systemPrompt,
+    icon,
+    provider,
+    model,
+    compactAt,
+    toolIds,
+  } = fields;
+  // Typed by hand; otherwise the field shows what the picked model fills in
+  const [compactEdited, setCompactEdited] = useState(Boolean(bot?.compactAt));
+  // Read here as well as in the picker: a pick has to fill in from it the moment it happens
+  const catalog = useServerRoute<GatewayModel[]>(queryKey.modelCatalog);
+  const windowOf = (of: TextModelProviderId | null, id: string) =>
+    of && id.trim() ? contextWindowOf(of, id.trim(), catalog.data) : null;
+  const pickedWindow = windowOf(provider, model);
+  const filledK =
+    provider && model.trim() ? filledTokens(pickedWindow) / 1000 : null;
+  const shownK = compactEdited
+    ? compactAt
+    : filledK === null
+      ? ""
+      : String(filledK);
 
   const [save] = useServerAction(updateBotAction, {
     onOk: () => revalidate(queryKey.bot),
@@ -534,12 +737,6 @@ 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;
@@ -553,23 +750,13 @@ function BotPage({
       icon,
       provider,
       model: model.trim(),
+      compactAt: compactEdited
+        ? tokensFromK(compactAt)
+        : filledTokens(pickedWindow),
       toolIds,
     });
   };
 
-  /** 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({
@@ -588,97 +775,37 @@ function BotPage({
           {bot ? bot.name : "New bot"}
         </span>
         {bot && (
-          <Button
-            size="icon-sm"
-            variant="ghost"
-            loading={removing}
-            aria-label="Delete this bot"
-            onClick={confirmRemove}
-            className="text-muted-foreground hover:text-destructive"
-          >
-            <Trash2 />
-          </Button>
-        )}
-      </div>
-
-      <div className="flex-1 space-y-5 p-6">
-        <div className="flex items-start gap-4">
-          <BotMark size={72} {...markProps(name, icon)} className="shrink-0" />
-          <div className="min-w-0 flex-1 space-y-2.5">
-            {bot ? (
-              <p className="truncate text-lg leading-8 font-medium">
-                {bot.name}
-              </p>
-            ) : (
-              <Input
-                value={name}
-                onChange={(event) => patch({ name: event.target.value })}
-                placeholder="researcher"
-                spellCheck={false}
-                maxLength={COMMON_VALIDATE.name.max}
-                autoFocus
-              />
+          <>
+            {/* Only when off: on is the resting state and needs no word. */}
+            {bot.disabled && (
+              <span className="font-mono text-[10px] text-muted-foreground">
+                off
+              </span>
             )}
-            <Input
-              value={description}
-              onChange={(event) => patch({ description: event.target.value })}
-              onBlur={() => {
-                const next = description.trim();
-                if (bot && next && next !== bot.description) {
-                  commit({ description: next });
-                }
-              }}
-              placeholder="Searches the web and reports back"
-              maxLength={COMMON_VALIDATE.description.max}
+            <Switch
+              checked={!bot.disabled}
+              onCheckedChange={(on) => commit({ disabled: !on })}
+              aria-label={`${bot.name} on or off`}
+              /* mr-1 keeps it off Delete: one is a setting, the other is not. */
+              className="mr-1 shrink-0"
             />
-          </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>
+            <Button
+              size="icon-sm"
+              variant="ghost"
+              loading={removing}
+              aria-label="Delete this bot"
+              onClick={confirmRemove}
+              className="text-muted-foreground hover:text-destructive"
+            >
+              <Trash2 />
+            </Button>
+          </>
         )}
+      </div>
 
+      <div className="flex-1 space-y-5 p-6">
         <MarkPicker
+          name={name}
           icon={icon}
           onChange={(next) => {
             patch({ icon: next });
@@ -686,18 +813,100 @@ function BotPage({
           }}
         />
 
+        <Row label="Name">
+          {bot ? (
+            <p className="truncate text-sm leading-8 font-medium">{bot.name}</p>
+          ) : (
+            <Input
+              value={name}
+              onChange={(event) => patch({ name: event.target.value })}
+              placeholder="researcher"
+              spellCheck={false}
+              maxLength={COMMON_VALIDATE.name.max}
+              autoFocus
+            />
+          )}
+          {/* Renaming is delete and recreate (bot.query updateBot), so say it before the name is typed */}
+          <p className="text-xs text-muted-foreground">
+            {bot
+              ? `What ${APP_NAME} calls it when she hands it work. Fixed once the bot is made.`
+              : `What ${APP_NAME} calls it when she hands it work. Up to ${COMMON_VALIDATE.name.max} characters, and it can’t be renamed later.`}
+          </p>
+        </Row>
+
+        <Row label="Description">
+          <Input
+            value={description}
+            onChange={(event) => patch({ description: event.target.value })}
+            onBlur={() => {
+              const next = description.trim();
+              if (bot && next && next !== bot.description) {
+                commit({ description: next });
+              }
+            }}
+            placeholder="Searches the web and answers"
+            maxLength={COMMON_VALIDATE.description.max}
+          />
+          <p className="text-xs text-muted-foreground">
+            The one line {APP_NAME} and the other bots read when they decide who
+            gets a job.
+          </p>
+        </Row>
+
         <Row label="Runs on">
           <ModelPicker
             provider={provider}
             model={model}
             onChange={(next) => {
               patch({ provider: next.provider, model: next.model });
+              // A new model fills in its own point; a number typed for the old one no longer fits
+              setCompactEdited(false);
               // A provider without a model is not a model; save once both are picked.
-              if (next.model) commit(next);
+              if (next.model) {
+                commit({
+                  ...next,
+                  compactAt: filledTokens(windowOf(next.provider, next.model)),
+                });
+              }
             }}
           />
         </Row>
 
+        <Row label="Compacts at">
+          <InputGroup>
+            <InputGroupInput
+              inputMode="decimal"
+              value={shownK}
+              placeholder={model.trim() ? "" : "Pick a model first"}
+              onChange={(event) => {
+                setCompactEdited(true);
+                patch({ compactAt: event.target.value });
+              }}
+              onBlur={() => {
+                if (!compactEdited) return;
+                // Typing is a draft; only a settled field is a value. Emptied, the field goes back to the model's own
+                const typed = tokensFromK(compactAt);
+                if (typed === null) setCompactEdited(false);
+                else patch({ compactAt: String(typed / 1000) });
+                commit({
+                  compactAt:
+                    typed ?? (model.trim() ? filledTokens(pickedWindow) : null),
+                });
+              }}
+            />
+            <InputGroupAddon align="inline-end">
+              <InputGroupText>k tokens</InputGroupText>
+            </InputGroupAddon>
+          </InputGroup>
+          <p className="text-xs text-muted-foreground">
+            {compactNote({
+              model: model.trim(),
+              window: pickedWindow,
+              shown: tokensFromK(shownK),
+            })}
+          </p>
+        </Row>
+
         <Row label="Tools">
           <ToolPicker
             selected={toolIds}
@@ -730,6 +939,8 @@ function BotPage({
           )}
         </Row>
 
+        {bot && <Memory bot={bot.name} />}
+
         {bot && <Recent jobs={jobs} />}
 
         {!bot && (
@@ -751,14 +962,164 @@ function BotPage({
   );
 }
 
+/**
+ * What this bot keeps for its next jobs (bot.memory), drawn the way Recent is: one
+ * line per file, newest first. A row opens in place. Deleting is the one thing done
+ * to a file from here — writing one is the bot's.
+ */
+function Memory({ bot }: { bot: string }) {
+  const key = queryKey.botMemoryFiles(bot);
+  const { data, isLoading } = useServerRoute<BotMemory>(key);
+  const [open, setOpen] = useState<string | null>(null);
+  const [reveal] = useServerAction(openFileAction);
+  const [remove, removing] = useServerAction(deleteWorkspaceFileAction, {
+    okMessage: "File deleted",
+    onOk: () => {
+      setOpen(null);
+      revalidate(key);
+      revalidate(queryKey.workspace);
+    },
+  });
+
+  const confirmRemove = async (file: BotMemoryFile) => {
+    const confirmed = await notify.confirm({
+      title: `Delete ${file.file}?`,
+      description: `It is deleted from disk for good, and ${bot}'s next job starts without it.`,
+      okText: "Delete",
+      destructive: true,
+    });
+    if (confirmed) remove(file.path);
+  };
+
+  return (
+    <div className="pt-1">
+      <div className="flex h-6 items-center">
+        <span className="font-mono text-xs text-muted-foreground">Memory</span>
+        <span className="flex-1" />
+        {data && data.total > 0 && (
+          <>
+            <span className="pr-1 font-mono text-[11px] text-muted-foreground tabular-nums">
+              {data.total === 1 ? "1 file" : `${data.total} files`}
+            </span>
+            <button
+              type="button"
+              title="Show in the file manager"
+              onClick={() => reveal(data.folder)}
+              className="flex items-center gap-1 rounded-md px-1.5 py-1 font-mono text-[11px] text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50"
+            >
+              <FolderOpen className="size-3" />
+              Folder
+            </button>
+          </>
+        )}
+      </div>
+      {isLoading ? (
+        <div className="flex h-9 items-center border-t border-border/60">
+          <Skeleton className="h-3 w-56" />
+        </div>
+      ) : !data?.entries.length ? (
+        <p className="py-2 text-[13px] text-muted-foreground">
+          Nothing kept yet.
+        </p>
+      ) : (
+        data.entries.map((file) => {
+          const isOpen = open === file.path;
+          return (
+            <div key={file.path} className="border-t border-border/60">
+              <button
+                type="button"
+                aria-expanded={isOpen}
+                onClick={() => setOpen(isOpen ? null : file.path)}
+                className="flex h-9 w-full items-center gap-3 text-left text-[13px] outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
+              >
+                <span
+                  className={cn(
+                    "min-w-0 flex-1 truncate",
+                    isOpen && "font-medium",
+                  )}
+                >
+                  {file.line || file.file}
+                </span>
+                <span className="w-36 shrink-0 truncate font-mono text-[11px] text-muted-foreground">
+                  {file.file}
+                </span>
+                <span className="w-28 shrink-0 text-right font-mono text-[11px] text-muted-foreground tabular-nums">
+                  {whenOf(file.at)}
+                </span>
+                <ChevronRight
+                  className={cn(
+                    "size-3 shrink-0 text-muted-foreground transition-transform",
+                    isOpen && "rotate-90",
+                  )}
+                />
+              </button>
+              {isOpen && (
+                <div className="flex items-start gap-3">
+                  <div className="max-h-96 min-w-0 flex-1 overflow-y-auto">
+                    <MemoryText path={file.path} />
+                  </div>
+                  <Button
+                    size="icon-sm"
+                    variant="ghost"
+                    aria-label={`Delete ${file.file}`}
+                    loading={removing}
+                    onClick={() => confirmRemove(file)}
+                    className="text-muted-foreground hover:text-destructive"
+                  >
+                    <Trash2 />
+                  </Button>
+                </div>
+              )}
+            </div>
+          );
+        })
+      )}
+    </div>
+  );
+}
+
+/** An opened memory file, read and capped the way Workspace reads one (file-view useFileText). */
+function MemoryText({ path }: { path: string }) {
+  const { content, failure, truncated } = useFileText(path);
+  if (failure) {
+    return <p className="pb-3 font-mono text-xs text-destructive">{failure}</p>;
+  }
+  if (content === null) {
+    return (
+      <div className="space-y-2 pb-3">
+        <Skeleton className="h-4 w-5/6" />
+        <Skeleton className="h-4 w-2/3" />
+      </div>
+    );
+  }
+  const kind = viewKindOf(path);
+  return (
+    <FileBody
+      kind={kind}
+      content={kind === "markdown" ? underItsRow(content) : content}
+      truncated={truncated}
+      where="inline"
+    />
+  );
+}
+
+/**
+ * A markdown memory file as it reads under its row: the row already carries the
+ * file's first line, so frontmatter and a leading heading are not drawn again.
+ */
+const underItsRow = (content: string) =>
+  content.replace(/^---\n[\s\S]*?\n---\n/, "").replace(/^\s*#[^\n]*\n?/, "");
+
 /**
  * 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.
+ * than any bot's: whether bots keep their own memory at all.
  */
 function BotRail({ bot }: { bot: Bot | null }) {
-  const { data: notesOn, mutate } = useServerRoute<boolean>(queryKey.botNotes);
-  const [setNotesOn] = useServerAction(setBotNotesOnAction, {
-    onOk: () => revalidate(queryKey.botNotes),
+  const { data: memoryOn, mutate } = useServerRoute<boolean>(
+    queryKey.botMemory,
+  );
+  const [setMemoryOn] = useServerAction(setBotMemoryOnAction, {
+    onOk: () => revalidate(queryKey.botMemory),
   });
 
   const tokens = bot ? bot.tokens.input + bot.tokens.output : 0;
@@ -768,6 +1129,11 @@ function BotRail({ bot }: { bot: Bot | null }) {
         {bot ? (
           <span className="font-mono text-[11px]">
             {bot.name}
+            {bot.disabled && (
+              <>
+                <span className="px-1.5 opacity-50">·</span>off
+              </>
+            )}
             <span className="px-1.5 opacity-50">·</span>
             <span
               title={`in ${formatCount(bot.tokens.input)} · out ${formatCount(bot.tokens.output)}`}
@@ -782,21 +1148,48 @@ function BotRail({ bot }: { bot: Bot | null }) {
         )}
       </SettingRailNote>
       <span className="shrink-0 text-xs text-muted-foreground">
-        Bots keep their own prompt
+        Bots keep their own memory
       </span>
       <Switch
-        checked={notesOn ?? true}
-        disabled={notesOn === undefined}
+        checked={memoryOn ?? true}
+        disabled={memoryOn === undefined}
         onCheckedChange={(on) => {
           void mutate(on, false);
-          setNotesOn(on);
+          setMemoryOn(on);
         }}
-        aria-label="Bots keep their own prompt"
+        aria-label="Bots keep their own memory"
       />
     </>
   );
 }
 
+/** "800", "800k" or "1.2" → tokens (800,000 / 1,200); null when there is no number. */
+function tokensFromK(text: string): number | null {
+  const k = Number(text.replace(/[^0-9.]/g, ""));
+  return Number.isFinite(k) && k > 0 ? Math.round(k * 1000) : null;
+}
+
+/** What a model fills in, rounded to the field's unit so the saved number is the one shown (model.schema compactAtFor). */
+const filledTokens = (window: number | null) =>
+  Math.round(compactAtFor(window) / 1000) * 1000;
+
+/** The line under the field: where the number came from. */
+function compactNote(input: {
+  model: string;
+  window: number | null;
+  shown: number | null;
+}): string {
+  if (!input.model) return "Filled in from the model once one is picked.";
+  const filled = filledTokens(input.window);
+  const summarize = "A job summarizes itself here and carries on.";
+  if (input.shown !== null && input.shown !== filled) {
+    return `Set by hand. Picking a model fills in its own again. ${summarize}`;
+  }
+  return input.window
+    ? `${Math.round(BOT_RUN.compactHeadroom * 100)}% of this model's ${(input.window / 1000).toLocaleString()}k context window. ${summarize}`
+    : `This model's context window is unknown, so the default is filled in. ${summarize}`;
+}
+
 function Row({ label, children }: { label: string; children: ReactNode }) {
   return (
     <div className="flex gap-3">
@@ -837,11 +1230,18 @@ function Recent({ jobs }: { jobs: Task[] }) {
               className="flex h-9 items-center gap-3 border-t border-border/60 text-[13px]"
             >
               <span className="min-w-0 flex-1 truncate">{job.label}</span>
-              <span
-                className={cn("shrink-0 font-mono text-[11px]", state.tone)}
-              >
-                {state.text}
-              </span>
+              {job.status === "running" ? (
+                <ShinyText
+                  text={state.text}
+                  className="shrink-0 font-mono text-[11px]"
+                />
+              ) : (
+                <span
+                  className={cn("shrink-0 font-mono text-[11px]", state.tone)}
+                >
+                  {state.text}
+                </span>
+              )}
               <span className="w-28 shrink-0 text-right font-mono text-[11px] text-muted-foreground tabular-nums">
                 {whenOf(job.updatedAt)}
               </span>
@@ -856,12 +1256,7 @@ function Recent({ jobs }: { jobs: Task[] }) {
 function jobState(job: Task): { text: string; tone: string } {
   switch (job.status) {
     case "waiting":
-      return isBudgetAsk(job.ask)
-        ? { text: "out of steps", tone: "text-muted-foreground" }
-        : {
-            text: "waiting on you",
-            tone: WAITING_INK,
-          };
+      return { text: "waiting on you", tone: WAITING_INK };
     case "running":
       return { text: "working", tone: "text-muted-foreground" };
     case "failed":
@@ -871,81 +1266,74 @@ function jobState(job: Task): { text: string; tone: string } {
   }
 }
 
-/** Palette swatch and silhouette for a BotMark; the caller draws the face. */
+/**
+ * The face, with what paints it right under it: the palette, then the
+ * silhouette. Laid out like Thursday's own face picker, so both faces are
+ * chosen the same way.
+ */
 function MarkPicker({
+  name,
   icon,
   onChange,
 }: {
+  name: string;
   icon: BotIcon;
   onChange: (icon: BotIcon) => void;
 }) {
   return (
-    <>
-      <Row label="Color">
-        <div className="flex flex-wrap items-center gap-1.5">
-          {/* MARK_SYSTEM is an explicit "follow the theme ink", distinct from no colour. */}
-          <Swatch
-            color={null}
-            picked={icon.color === MARK_SYSTEM}
-            onPick={() => onChange({ ...icon, color: MARK_SYSTEM })}
-          />
-          {MARK_PALETTE.map((color) => (
-            <Swatch
-              key={color}
-              color={color}
-              picked={icon.color === color}
-              onPick={() =>
-                onChange({
-                  ...icon,
-                  color: icon.color === color ? undefined : color,
-                })
-              }
-            />
-          ))}
-        </div>
-      </Row>
+    <div className="flex flex-col items-center gap-4 pt-3 pb-2">
+      <BotMark size={112} {...markProps(name, icon)} className="shrink-0" />
+
+      {/* MARK_SYSTEM is an explicit "follow the theme ink", distinct from no
+          colour; picking the colour already on it goes back to none. */}
+      <MarkPalette
+        color={icon.color}
+        themePicked={icon.color === MARK_SYSTEM}
+        onTheme={() => onChange({ ...icon, color: MARK_SYSTEM })}
+        onPick={(color) =>
+          onChange({ ...icon, color: icon.color === color ? undefined : color })
+        }
+      />
 
       {/* Every chip is a toggle: unpicked means "whatever the name seeds", not a value */}
-      <Row label="Face">
-        <div className="flex gap-1">
-          {MARK_SHAPES.map((shape) => (
-            <button
-              key={shape}
-              type="button"
-              onClick={() =>
-                onChange({
-                  ...icon,
-                  shape: icon.shape === shape ? undefined : shape,
-                })
-              }
-              className={cn(
-                "rounded-md px-2 py-1 font-mono text-[11px] capitalize transition-colors",
-                icon.shape === shape
-                  ? "bg-foreground text-background"
-                  : "bg-muted text-muted-foreground hover:text-foreground",
-              )}
-            >
-              {shape}
-            </button>
-          ))}
-          <span className="mx-1 w-px self-stretch bg-border/60" />
+      <div className="flex gap-1">
+        {MARK_SHAPES.map((shape) => (
           <button
+            key={shape}
             type="button"
             onClick={() =>
-              onChange({ ...icon, outline: icon.outline ? undefined : true })
+              onChange({
+                ...icon,
+                shape: icon.shape === shape ? undefined : shape,
+              })
             }
             className={cn(
-              "rounded-md px-2 py-1 font-mono text-[11px] transition-colors",
-              icon.outline
+              "rounded-md px-2 py-1 font-mono text-[11px] capitalize transition-colors",
+              icon.shape === shape
                 ? "bg-foreground text-background"
                 : "bg-muted text-muted-foreground hover:text-foreground",
             )}
           >
-            outline
+            {shape}
           </button>
-        </div>
-      </Row>
-    </>
+        ))}
+        <span className="mx-1 w-px self-stretch bg-border/60" />
+        <button
+          type="button"
+          onClick={() =>
+            onChange({ ...icon, outline: icon.outline ? undefined : true })
+          }
+          className={cn(
+            "rounded-md px-2 py-1 font-mono text-[11px] transition-colors",
+            icon.outline
+              ? "bg-foreground text-background"
+              : "bg-muted text-muted-foreground hover:text-foreground",
+          )}
+        >
+          outline
+        </button>
+      </div>
+    </div>
   );
 }