thursday-agent 0.4.0 → 0.6.0

package/features/intro/components/intro.tsx

@@ -1,16 +1,22 @@
 "use client";
 
-import { Check, ChevronRight } from "lucide-react";
+import { Check, ChevronDown, ChevronRight } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { type Ref, useEffect, useRef, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { notify } from "@/components/ui/notify";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import { ShinyText } from "@/components/ui/shiny-text";
 import TextType from "@/components/ui/text-type";
 import { APP_NAME } from "@/config";
 import { ModelPicker } from "@/features/ai/components/model-picker";
 import { type TextModelProviderId } from "@/features/ai/model.schema";
-import { DEFAULT_BOT } from "@/features/bot/bot.schema";
+import { TOOL_NAMES } from "@/features/ai/tools/tool-name";
+import { type BotIcon, DEFAULT_BOT } from "@/features/bot/bot.schema";
 import {
   BOT_SEEDS,
   type BotSeed,
@@ -46,15 +52,14 @@ export function Intro({
   ready,
   /** Opened deliberately via `?intro`. */
   forced,
-  /** One colour per BOT_SEEDS entry (bot.seed rollSeedColors), rolled on the server so hydration keeps the same faces. */
-  colors,
+  /** One face per BOT_SEEDS entry (bot.seed rollSeedIcons), rolled on the server so hydration keeps the same faces. */
+  icons,
 }: {
   ready: boolean;
   forced: boolean;
-  colors: string[];
+  icons: BotIcon[];
 }) {
-  const ink = (seed: BotSeed) =>
-    colors[BOT_SEEDS.indexOf(seed)] ?? seed.icon?.color;
+  const face = (seed: BotSeed) => icons[BOT_SEEDS.indexOf(seed)];
 
   const router = useRouter();
   const [at, setAt] = useState(0);
@@ -62,14 +67,14 @@ export function Intro({
   /** After the fade; then the element is removed entirely. */
   const [lifted, setLifted] = useState(false);
   const [keyed, setKeyed] = useState(ready);
-  const [picks, setPicks] = useState<Record<string, Pick>>(() =>
+  const [picked, setPicked] = useState<Record<string, boolean>>(() =>
     Object.fromEntries(
-      RECOMMENDED_SEEDS.map((seed) => [
-        seed.name,
-        { on: true, provider: null, model: "" },
-      ]),
+      BOT_SEEDS.map((seed) => [seed.name, Boolean(seed.recommended)]),
     ),
   );
+  // One model for every pick: a picker per bot is what made the step scroll.
+  // Each bot's own is on its page in Settings › Bots
+  const [runsOn, setRunsOn] = useState<RunsOn>({ provider: null, model: "" });
   const keys = useRef<VoiceKeysHandle>(null);
   const [saving, setSaving] = useState(false);
 
@@ -112,20 +117,20 @@ export function Intro({
     setGone(true);
     if (!keyed) return;
     installSeedBots(
-      RECOMMENDED_SEEDS.filter((seed) => picks[seed.name]?.on).map((seed) => ({
+      BOT_SEEDS.filter((seed) => picked[seed.name]).map((seed) => ({
         name: seed.name,
         // A half pick is not a model; the action falls back to the default
-        provider: picks[seed.name]?.provider ?? null,
-        model: picks[seed.name]?.model || null,
-        color: ink(seed),
+        provider: runsOn.provider,
+        model: runsOn.model || null,
+        icon: face(seed),
       })),
     );
     router.replace("/");
     router.refresh();
   };
 
-  const patch = (name: string, next: Partial<Pick>) =>
-    setPicks((all) => ({ ...all, [name]: { ...all[name], ...next } }));
+  const toggle = (name: string) =>
+    setPicked((all) => ({ ...all, [name]: !all[name] }));
 
   return (
     <div
@@ -143,9 +148,17 @@ export function Intro({
       />
 
       <div className="absolute inset-x-12 top-22 bottom-44 flex flex-col items-center justify-center overflow-y-auto">
-        {at === 0 && <FirstLook ink={ink} />}
+        {at === 0 && <FirstLook face={face} />}
         {at === 1 && <KeyStep ref={keys} onSaved={() => setKeyed(true)} />}
-        {at === 2 && <BotStep picks={picks} ink={ink} onPatch={patch} />}
+        {at === 2 && (
+          <BotStep
+            picked={picked}
+            runsOn={runsOn}
+            face={face}
+            onToggle={toggle}
+            onRunsOn={setRunsOn}
+          />
+        )}
       </div>
 
       <div className="absolute inset-x-0 bottom-13 flex flex-col items-center gap-5.5">
@@ -195,7 +208,7 @@ export function Intro({
 }
 
 /** Step one: the three lines the call screen actually draws, no chat bubbles. */
-function FirstLook({ ink }: { ink: Ink }) {
+function FirstLook({ face }: { face: Face }) {
   const crew = RECOMMENDED_SEEDS;
 
   return (
@@ -210,10 +223,7 @@ function FirstLook({ ink }: { ink: Ink }) {
               key={seed.name}
               size={22}
               seed={seed.name}
-              vary={seed.name}
-              color={ink(seed)}
-              shape={seed.icon?.shape}
-              outline={seed.icon?.outline}
+              {...face(seed)}
               state="thinking"
               notify={false}
               className={cn("shrink-0", index > 0 && "-ml-1.5")}
@@ -224,7 +234,7 @@ function FirstLook({ ink }: { ink: Ink }) {
           {crew.length === 1 ? "A bot is on it" : "Bots are on it"}
         </span>
         <span className="font-mono text-[10.5px] text-muted-foreground/70">
-          ask_bot
+          {TOOL_NAMES.delegate}
         </span>
       </span>
 
@@ -272,59 +282,68 @@ function KeyStep({
   );
 }
 
-/** The first sentence of the app spells its number; past this the numeral is fine. */
-const COUNT_WORD: Record<number, string> = { 1: "One", 2: "Two", 3: "Three" };
+/** The heading spells how many come along, up to every seed there is. */
+const COUNT_WORD: Record<number, string> = {
+  0: "No",
+  1: "One",
+  2: "Two",
+  3: "Three",
+  4: "Four",
+  5: "Five",
+  6: "Six",
+  7: "Seven",
+  8: "Eight",
+};
 
-/** This intro's colour for a seed (bot.seed rollSeedColors). */
-type Ink = (seed: BotSeed) => string | undefined;
+/** This intro's face for a seed (bot.seed rollSeedIcons). */
+type Face = (seed: BotSeed) => BotIcon | undefined;
 
-/** What the intro knows about one bot. An empty model is the default and means "app default" at run time. */
-type Pick = {
-  on: boolean;
-  provider: TextModelProviderId | null;
-  model: string;
-};
+/** The one model every picked bot starts on. An empty model means "app default" at run time. */
+type RunsOn = { provider: TextModelProviderId | null; model: string };
 
-/** Step three: which seed bots to install. */
+/** Step three: which seed bots to install, and what they run on. */
 function BotStep({
-  picks,
-  ink,
-  onPatch,
+  picked,
+  runsOn,
+  face,
+  onToggle,
+  onRunsOn,
 }: {
-  picks: Record<string, Pick>;
-  ink: Ink;
-  onPatch: (name: string, next: Partial<Pick>) => void;
+  picked: Record<string, boolean>;
+  runsOn: RunsOn;
+  face: Face;
+  onToggle: (name: string) => void;
+  onRunsOn: (next: RunsOn) => void;
 }) {
-  const on = RECOMMENDED_SEEDS.filter((seed) => picks[seed.name]?.on);
-  const rest = BOT_SEEDS.length - RECOMMENDED_SEEDS.length;
+  const on = BOT_SEEDS.filter((seed) => picked[seed.name]);
+  const names = on.map((seed) => seed.name).join(", ");
+  const more = BOT_SEEDS.length - on.length;
 
   return (
     <div className="flex w-full max-w-2xl flex-col items-center">
       <h1 className="text-center text-[30px] font-medium tracking-tight text-balance break-keep">
-        {RECOMMENDED_SEEDS.length === 1
+        {on.length === 1
           ? "One bot comes with her."
-          : `${COUNT_WORD[RECOMMENDED_SEEDS.length] ?? RECOMMENDED_SEEDS.length} bots come with her.`}
+          : `${COUNT_WORD[on.length] ?? on.length} bots come with her.`}
       </h1>
       <p className="mt-3 max-w-lg text-center text-[15px] leading-relaxed text-pretty text-muted-foreground break-keep">
-        {RECOMMENDED_SEEDS.length === 1
+        {on.length === 1
           ? "It takes the work that would leave the call silent, and reports back."
           : "They take the work that would leave the call silent, and report back."}
       </p>
 
-      {/* The pill these faces will stand in (bot-room Folded) */}
+      {/* The pill the bots will stand in (bot-room Folded), with the whole crew in
+          it: who comes along is the line below */}
       <span className="mt-5 flex h-9 items-center gap-2 rounded-full bg-muted/50 py-1.5 pr-3.5 pl-1.5 ring-1 ring-border/60">
         {on.length > 0 ? (
           <>
             <span className="flex">
-              {on.map((seed, index) => (
+              {BOT_SEEDS.map((seed, index) => (
                 <BotMark
                   key={seed.name}
                   size={22}
                   seed={seed.name}
-                  vary={seed.name}
-                  color={ink(seed)}
-                  shape={seed.icon?.shape}
-                  outline={seed.icon?.outline}
+                  {...face(seed)}
                   notify={false}
                   className={cn("shrink-0", index > 0 && "-ml-1.5")}
                 />
@@ -343,104 +362,115 @@ function BotStep({
         )}
       </span>
 
-      {/* One column: the rows are a hint tall now, and two columns made the same
-          three bots read as a grid of choices rather than the crew */}
-      <div className="mt-4 flex w-full max-w-lg flex-col gap-2">
-        {RECOMMENDED_SEEDS.map((seed) => (
-          <SeedRow
-            key={seed.name}
-            seed={seed}
-            pick={picks[seed.name]}
-            ink={ink(seed)}
-            onPatch={(next) => onPatch(seed.name, next)}
-          />
-        ))}
-      </div>
-
-      {/* Says the rest exist without asking anything about them: which subject
-          bot someone wants is not answerable before they have used the app */}
-      {rest > 0 && (
-        <p className="mt-3.5 text-[13px] text-muted-foreground">
-          More wait in Settings › Bots.
-        </p>
-      )}
+      {/* Every seed, behind one line: listed in place with a model row each, they
+          scrolled the step (canvas "Intro Bot Picker" C) */}
+      <Popover>
+        <PopoverTrigger
+          render={
+            <button
+              type="button"
+              className="group/seeds mt-4 flex h-12 w-full max-w-lg items-center gap-2 rounded-lg border border-border bg-background pr-3 pl-3.5 text-left outline-none transition-colors hover:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 data-popup-open:bg-muted"
+            />
+          }
+        >
+          <span className="min-w-0 flex-1 truncate text-[14px] leading-5">
+            <span className="font-medium">
+              {names || "Pick who comes along"}
+            </span>
+            {names && more > 0 && (
+              <span className="text-muted-foreground">
+                {" "}
+                · {more} more to pick
+              </span>
+            )}
+          </span>
+          <ChevronDown className="size-4 shrink-0 text-muted-foreground transition-transform group-data-popup-open/seeds:rotate-180" />
+        </PopoverTrigger>
+        <PopoverContent
+          align="start"
+          sideOffset={6}
+          className="w-(--anchor-width) gap-0 p-1"
+        >
+          <p className="px-1.5 py-1 text-xs font-medium text-muted-foreground">
+            Bots
+          </p>
+          {BOT_SEEDS.map((seed) => (
+            <SeedOption
+              key={seed.name}
+              seed={seed}
+              on={Boolean(picked[seed.name])}
+              icon={face(seed)}
+              onToggle={() => onToggle(seed.name)}
+            />
+          ))}
+          <div className="-mx-1 my-1 h-px bg-border" />
+          <div className="flex items-center gap-2 px-1.5 pt-1 pb-0.5">
+            <span className="shrink-0 pr-0.5 text-[13px] text-muted-foreground">
+              Runs on
+            </span>
+            <div className="min-w-0 flex-1">
+              <ModelPicker
+                provider={runsOn.provider}
+                model={runsOn.model}
+                onChange={onRunsOn}
+              />
+            </div>
+          </div>
+        </PopoverContent>
+      </Popover>
     </div>
   );
 }
 
 /**
- * One seed bot row, on by default, in the same shape the Bots section draws
- * (bot-setting SeedPackage): face, name, and one line of hint that never wraps.
- * The model is not prefilled; empty means the app default.
+ * One seed in the list: face, name and its hint on one line, and whether it
+ * comes along. The hint is the bot form's one line (bot.seed), so it truncates
+ * rather than wraps.
  */
-function SeedRow({
+function SeedOption({
   seed,
-  pick,
-  ink,
-  onPatch,
+  on,
+  icon,
+  onToggle,
 }: {
   seed: BotSeed;
-  pick?: Pick;
-  ink?: string;
-  onPatch: (next: Partial<Pick>) => void;
+  on: boolean;
+  icon?: BotIcon;
+  onToggle: () => void;
 }) {
-  const on = Boolean(pick?.on);
-
   return (
-    <div
-      className={cn(
-        "min-w-0 rounded-xl ring-1 transition-colors",
-        on ? "ring-foreground" : "ring-border/60",
-      )}
+    <button
+      type="button"
+      onClick={onToggle}
+      aria-pressed={on}
+      className="flex w-full items-center gap-2.5 rounded-md p-1.5 text-left outline-none hover:bg-muted focus-visible:bg-muted"
     >
-      <button
-        type="button"
-        onClick={() => onPatch({ on: !on })}
-        aria-pressed={on}
-        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"
-      >
-        <BotMark
-          size={28}
-          seed={seed.name}
-          vary={seed.name}
-          color={ink}
-          shape={seed.icon?.shape}
-          outline={seed.icon?.outline}
-          state={on ? "thinking" : "idle"}
-          notify={false}
-          className={cn("shrink-0 transition-opacity", !on && "opacity-35")}
-        />
-
-        <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>
+      <BotMark
+        size={20}
+        seed={seed.name}
+        {...icon}
+        state={on ? "thinking" : "idle"}
+        notify={false}
+        className={cn("shrink-0 transition-opacity", !on && "opacity-35")}
+      />
+      <span className="flex min-w-0 flex-1 items-baseline gap-2">
+        <span className="shrink-0 text-[14px] leading-5 font-medium">
+          {seed.name}
         </span>
-
-        <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 className="truncate text-[12px] leading-5 text-muted-foreground">
+          {seed.hint}
         </span>
-      </button>
-
-      {on && (
-        <div className="px-3.5 pb-3">
-          <ModelPicker
-            provider={pick?.provider ?? null}
-            model={pick?.model ?? ""}
-            onChange={(next) => onPatch(next)}
-          />
-        </div>
-      )}
-    </div>
+      </span>
+      <span
+        className={cn(
+          "grid size-4 shrink-0 place-items-center rounded-full transition-colors",
+          on
+            ? "bg-foreground text-background"
+            : "ring-1 ring-border ring-inset",
+        )}
+      >
+        {on && <Check className="size-2.5" />}
+      </span>
+    </button>
   );
 }

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

@@ -48,7 +48,7 @@ const SECTIONS: { key: MemorySection; label: string }[] = [
   { key: "people", label: "People" },
   { key: "projects", label: "Projects" },
   { key: "topics", label: "Topics" },
-  { key: "inbox", label: "Inbox" },
+  { key: "other", label: "Other" },
 ];
 
 export function MemorySetting() {
@@ -94,11 +94,6 @@ export function MemorySetting() {
                 <Fragment key={key}>
                   <span className="px-3 pt-3 pb-1 font-mono text-[10px] text-muted-foreground/60">
                     {label}
-                    {key === "inbox" && (
-                      <span className="pl-1.5 text-muted-foreground/50">
-                        waiting to be filed
-                      </span>
-                    )}
                   </span>
                   {rows.map((note) => (
                     <NoteLink
@@ -457,7 +452,7 @@ const NOTE_KINDS = [
   },
 ] as const;
 
-/** Kind + name becomes the path; profile and inbox stay agent-managed. */
+/** Kind + name becomes the path; profile and preferences stay agent-managed. */
 export function openMemoryCreate() {
   return notify.component({
     className: "sm:max-w-lg",

package/features/memory/memory.schema.ts

@@ -52,7 +52,6 @@ export const MemoryNoteSchema = z.object({
   facts: MemoryFactSchema.array(),
 });
 
-export type MemoryFact = z.infer<typeof MemoryFactSchema>;
 export type MemoryNote = z.infer<typeof MemoryNoteSchema>;
 
 /**
@@ -71,16 +70,12 @@ export const MEMORY_PATHS = [
     of: "Something with an end — a trip, a purchase, a deadline, a thing being built",
   },
   { path: "topics/", of: "Something ongoing that keeps coming back" },
-  { path: "inbox", of: "Nowhere obvious yet" },
 ] as const;
 
-/** Where anything outside the convention lands. */
-export const MEMORY_INBOX = "inbox";
-
 /** Notes without a section. */
 export const MEMORY_ROOT_NOTES = MEMORY_PATHS.filter(
   (entry) => !entry.path.endsWith("/"),
-).map((entry) => entry.path) as ("profile" | "preferences" | "inbox")[];
+).map((entry) => entry.path) as ("profile" | "preferences")[];
 
 /** Notes about a named thing live under one of these. */
 export const MEMORY_SECTIONS = MEMORY_PATHS.filter((entry) =>
@@ -97,31 +92,27 @@ const MEMORY_PATH_RE = new RegExp(
 
 export const isMemoryPath = (path: string) => MEMORY_PATH_RE.test(path);
 
-/** Notes that stay listed with zero facts; their description is app-owned. */
+/**
+ * Notes that stay listed with zero facts. Their listing line is the app's, not
+ * a model's: memory.query ensureRootNotes resets it at boot and a model's
+ * `description` for one is ignored (ai/tools/memory.tool), so the line cannot
+ * drift with whoever wrote last.
+ */
 export const MEMORY_ALWAYS_LISTED: string[] = ["profile", "preferences"];
 
 export const isAlwaysListed = (path: string) =>
   MEMORY_ALWAYS_LISTED.includes(path);
 
-/**
- * Notes whose listing line the app writes rather than a model: the two root
- * notes it keeps (memory.query ensureRootNotes) and the inbox, which is where
- * a fact lands when its path is not one this listing can carry. A model's
- * `description` for one of these is ignored, so the line cannot drift with
- * whoever wrote last (ai/tools/memory.tool).
- */
-export const APP_NAMED_NOTES = [...MEMORY_ALWAYS_LISTED, MEMORY_INBOX];
-
-export const isAppNamed = (path: string) => APP_NAMED_NOTES.includes(path);
-
 /** The line the app writes for one of those. */
 export const appNoteLine = (path: string) =>
   MEMORY_PATHS.find((entry) => entry.path === path)?.of ?? null;
 
-export type MemorySection =
-  | "you"
-  | (typeof MEMORY_SECTIONS)[number]
-  | typeof MEMORY_INBOX;
+/**
+ * `other` holds a path outside the convention. A model cannot create one
+ * (memory_remember refuses it), so only rows older than that rule land there,
+ * kept on screen to open and delete.
+ */
+export type MemorySection = "you" | (typeof MEMORY_SECTIONS)[number] | "other";
 
 /** How the screen groups notes; derived from MEMORY_PATHS. */
 export function sectionOf(path: string): MemorySection {
@@ -129,7 +120,7 @@ export function sectionOf(path: string): MemorySection {
   const head = path.slice(0, path.indexOf("/"));
   return (MEMORY_SECTIONS as readonly string[]).includes(head)
     ? (head as (typeof MEMORY_SECTIONS)[number])
-    : MEMORY_INBOX;
+    : "other";
 }
 
 // Model-facing shapes: narrower than the UI's on purpose.

package/features/settings/components/setting-ui.tsx

@@ -4,7 +4,6 @@ import { Check, Plus, Search } from "lucide-react";
 import { Fragment, type ReactNode } from "react";
 import { Input } from "@/components/ui/input";
 import { Skeleton } from "@/components/ui/skeleton";
-import { Switch } from "@/components/ui/switch";
 import { cn, WAITING_INK } from "@/lib/utils";
 
 /** Shared layout for settings screens: a list, dialogs for everything else. */
@@ -413,49 +412,6 @@ export function SettingNote({
   );
 }
 
-/**
- * A setting that runs by itself: one switch, and what it reveals while it is
- * on. Tinted rather than bordered — what it holds is state, not a set to pick
- * from. Its description is a sentence that wraps, so it gets its own leading;
- * a row's second line, which is one line of state, stays tight.
- */
-export function SettingToggle({
-  label,
-  description,
-  checked,
-  disabled,
-  onChange,
-  children,
-}: {
-  label: string;
-  description: ReactNode;
-  checked: boolean;
-  /** Holds the switch while its state is still arriving. */
-  disabled?: boolean;
-  onChange: (on: boolean) => void;
-  /** Drawn under the switch while it is on. */
-  children?: ReactNode;
-}) {
-  return (
-    <div className="space-y-3 rounded-xl bg-muted/30 p-4">
-      <label className="flex items-center gap-4">
-        <span className="min-w-0 flex-1 space-y-1">
-          <span className="block text-sm font-medium">{label}</span>
-          <span className="block text-xs leading-relaxed text-muted-foreground">
-            {description}
-          </span>
-        </span>
-        <Switch
-          checked={checked}
-          disabled={disabled}
-          onCheckedChange={onChange}
-        />
-      </label>
-      {checked && children}
-    </div>
-  );
-}
-
 /** Pick one row. Disabled options stay listed with the reason in the hint slot. */
 export function SettingChoiceRows<T extends string>({
   options,

package/features/settings/components/settings.tsx

@@ -27,7 +27,7 @@ import { Segmented } from "@/components/ui/segmented";
 import { ArtifactMark } from "@/features/artifact/components/artifact-mark";
 import { BotBadge } from "@/features/bot/components/bot-badge";
 import { BotsMark } from "@/features/bot/components/bot-mark";
-import { TaskBadge } from "@/features/bot/components/task-badge";
+import { ThreadBadge } from "@/features/bot/components/thread-badge";
 import { ConfigBadge } from "@/features/config/components/config-badge";
 import { ModelsBadge } from "@/features/config/components/models-badge";
 import { McpBadge } from "@/features/connectors/components/mcp-badge";
@@ -70,9 +70,9 @@ const BotSetting = lazySection(
     })),
   SettingPanesSkeleton,
 );
-const TaskSetting = lazySection(() =>
-  import("@/features/bot/components/task-setting").then((m) => ({
-    default: m.TaskSetting,
+const ThreadSetting = lazySection(() =>
+  import("@/features/bot/components/thread-setting").then((m) => ({
+    default: m.ThreadSetting,
   })),
 );
 const ConfigSetting = lazySection(() =>
@@ -134,7 +134,7 @@ export const SECTIONS: readonly {
     id: "thursday",
     label: "Thursday",
     group: "call",
-    hint: "Her face, voice and prompt",
+    hint: "Her face, models, and how a call starts",
     icon: ThursdayAsciiMark,
     Component: ThursdaySetting,
   },
@@ -156,13 +156,13 @@ export const SECTIONS: readonly {
     Badge: BotBadge,
   },
   {
-    id: "tasks",
-    label: "Tasks",
+    id: "threads",
+    label: "Threads",
     group: "work",
     hint: "Jobs the bots were handed, and what came of them",
     icon: ListChecks,
-    Component: TaskSetting,
-    Badge: TaskBadge,
+    Component: ThreadSetting,
+    Badge: ThreadBadge,
   },
   {
     id: "artifact",
@@ -297,11 +297,11 @@ export function Settings({ children }: { children?: ReactElement }) {
   return (
     <Dialog open={open} onOpenChange={(next) => (next ? show() : hide())}>
       {children && <DialogTrigger render={children} />}
-      <DialogContent className="h-[min(52rem,calc(100vh-3rem))] gap-0 overflow-hidden p-0 sm:max-w-[min(80rem,calc(100vw-3rem))]">
+      {/* block, not grid: a popup portaled in here (the thread sheet and anything it opens) would take a row */}
+      <DialogContent className="block h-[min(52rem,calc(100vh-3rem))] overflow-hidden p-0 sm:max-w-[min(80rem,calc(100vw-3rem))]">
         <DialogTitle className="sr-only">Settings</DialogTitle>
 
-        {/* min-w-0: DialogContent is a grid, and a nowrap line would push it past max-w */}
-        <div className="flex h-full min-h-0 min-w-0">
+        <div className="flex h-full min-h-0">
           <nav
             aria-label="Settings sections"
             onKeyDown={(event) => {