feat(app): a rounder, softer look

Buttons, fields and menu rows get 8 px corners, cards and menus 12 px,
the chat's bubbles, cards and dialogs 16 px. Menus and dialogs float on
a light themed shadow. The chat is a centered column with the day as a
pill, and the open conversation in the sidebar is an inset rounded
block instead of a full-width bar. Menus share one popover look and one
hook that closes them.

Author: httpsphl

app/src/features/account/AccountArea.tsx

@@ -12,11 +12,13 @@ import {
   Settings,
   Sparkles,
 } from "lucide-react";
-import { type ReactNode, useEffect, useRef, useState } from "react";
+import { type ReactNode, useCallback, useRef, useState } from "react";
 import { LOCALES, setLocaleChoice, systemLocale, useLocale, useT } from "../../i18n";
 import type { ClaudeAccount } from "../../lib/protocol.gen";
 import { useApp, useHost } from "../../store/context";
+import { POPOVER, POPOVER_ITEM } from "../../ui/surface";
 import { attempt } from "../../ui/toast";
+import { useDismiss } from "../../ui/useDismiss";
 import { SettingsDialog } from "./SettingsDialog";
 import { UsageDialog } from "./UsageDialog";
 
@@ -37,23 +39,11 @@ export function AccountArea() {
   const [dialog, setDialog] = useState<"usage" | "settings" | null>(null);
   const root = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    if (!open) {
-      return;
-    }
-    const onPointer = (event: PointerEvent) => {
-      if (!root.current?.contains(event.target as Node)) {
-        setOpen(false);
-      }
-    };
-    const onKey = (event: KeyboardEvent) => event.key === "Escape" && setOpen(false);
-    window.addEventListener("pointerdown", onPointer);
-    window.addEventListener("keydown", onKey);
-    return () => {
-      window.removeEventListener("pointerdown", onPointer);
-      window.removeEventListener("keydown", onKey);
-    };
-  }, [open]);
+  useDismiss(
+    open,
+    root,
+    useCallback(() => setOpen(false), []),
+  );
 
   const name = account?.name.trim() || "Botloft";
   const detail = describe(account?.claude ?? null, signedOut, a);
@@ -78,7 +68,7 @@ export function AccountArea() {
         aria-expanded={open}
         aria-label={a.open(name)}
         onClick={() => setOpen(!open)}
-        className={`flex w-full items-center gap-2.5 px-2 py-1.5 text-left hover:bg-sunken ${open ? "bg-sunken" : ""}`}
+        className={`flex w-full items-center gap-2.5 rounded-lg px-2 py-1.5 text-left hover:bg-sunken ${open ? "bg-sunken" : ""}`}
       >
         <span
           aria-hidden
@@ -135,10 +125,10 @@ function AccountMenu({
     <div
       role="menu"
       aria-label={name}
-      className="absolute right-2 bottom-full left-2 z-30 mb-1 border border-line-strong bg-panel py-1"
+      className={`absolute right-2 bottom-full left-2 mb-1 ${POPOVER}`}
     >
       {email && (
-        <p className="truncate px-3 pt-1 pb-2 text-muted text-xs" data-selectable>
+        <p className="truncate px-2.5 pt-1.5 pb-2 text-muted text-xs" data-selectable>
           {email}
         </p>
       )}
@@ -161,7 +151,7 @@ function AccountMenu({
           <div
             role="menu"
             aria-label={m.language}
-            className="absolute bottom-0 left-full z-30 ml-1 min-w-56 border border-line-strong bg-panel py-1"
+            className={`absolute bottom-0 left-full ml-2 min-w-56 ${POPOVER}`}
           >
             {[{ id: "system" as const, name: t.shell.language.system(systemName) }, ...LOCALES].map(
               (entry) => (
@@ -171,7 +161,7 @@ function AccountMenu({
                   role="menuitemradio"
                   aria-checked={choice === entry.id}
                   onClick={() => setLocaleChoice(entry.id)}
-                  className="flex h-8 w-full items-center gap-2 whitespace-nowrap px-3 text-left text-sm hover:bg-sunken"
+                  className={`h-8 whitespace-nowrap ${POPOVER_ITEM}`}
                 >
                   <Check aria-hidden size={14} className={choice === entry.id ? "" : "invisible"} />
                   {entry.name}
@@ -181,7 +171,7 @@ function AccountMenu({
           </div>
         )}
       </div>
-      <div className="my-1 border-line border-t" />
+      <div className="mx-1 my-1 border-line border-t" />
       <Item icon={Sparkles} onClick={() => open(RELEASES)}>
         {m.whatsNew}
       </Item>
@@ -212,7 +202,7 @@ function Item({
       aria-haspopup={expanded === undefined ? undefined : "menu"}
       aria-expanded={expanded}
       onClick={onClick}
-      className="flex h-8 w-full items-center gap-2 px-3 text-left text-ink text-sm hover:bg-sunken"
+      className={`h-8 text-ink ${POPOVER_ITEM}`}
     >
       <Icon aria-hidden size={14} className="text-ink-soft" />
       <span className="flex-1">{children}</span>

app/src/features/bots/BotAvatar.tsx

@@ -25,7 +25,7 @@ export function BotAvatar({
       height={size}
       // A little room around the body, so its edge is not cut at the sides.
       viewBox={framed ? "0 0 1254 1254" : "-24 -24 1302 1302"}
-      className={`shrink-0 ${framed ? "rounded-[3px] bg-[#0b0b0b]" : ""}`}
+      className={`shrink-0 ${framed ? "rounded-lg bg-[#0b0b0b]" : ""}`}
     >
       <path
         d={BODY}

app/src/features/bots/BotDialog.tsx

@@ -113,7 +113,7 @@ export function BotDialog(props: Props) {
                 aria-label={t.bots.dialog.swatch(swatch)}
                 aria-pressed={color === swatch}
                 onClick={() => setColor(swatch)}
-                className={`relative rounded-[3px] p-0.5 ${color === swatch ? "ring-2 ring-accent" : ""}`}
+                className={`relative rounded-lg p-0.5 ${color === swatch ? "ring-2 ring-accent" : ""}`}
               >
                 <BotAvatar color={swatch} size={26} />
                 {color === swatch && (

app/src/features/chat/AttachmentList.tsx

@@ -43,7 +43,7 @@ function FileCard({
       ? FileText
       : File;
   return (
-    <div className="flex w-64 max-w-full items-center gap-2.5 rounded-md border border-line bg-panel py-2 pr-1.5 pl-2.5">
+    <div className="flex w-64 max-w-full items-center gap-2.5 rounded-xl border border-line bg-panel py-2 pr-1.5 pl-2.5">
       <Icon aria-hidden size={22} className="shrink-0 text-muted" />
       <div className="min-w-0 flex-1">
         <p className="truncate font-medium text-sm" title={attachment.name}>
@@ -64,7 +64,7 @@ function FileCard({
               host.openPath(attachmentFolder(workspace, attachment)),
             )
           }
-          className="grid h-7 w-7 shrink-0 place-items-center rounded-[3px] text-muted hover:bg-sunken hover:text-ink"
+          className="grid h-7 w-7 shrink-0 place-items-center rounded-lg text-muted hover:bg-sunken hover:text-ink"
         >
           <FolderOpen aria-hidden size={14} />
         </button>
@@ -93,7 +93,7 @@ function Thumbnail({
   }
   if (source.kind === "loading") {
     return (
-      <div className="grid h-32 w-44 place-items-center rounded-md border border-line bg-sunken">
+      <div className="grid h-32 w-44 place-items-center rounded-xl border border-line bg-sunken">
         <LoaderCircle
           aria-label={t.chat.attachments.loading(attachment.name)}
           className="animate-spin text-muted"
@@ -106,7 +106,7 @@ function Thumbnail({
       <button
         type="button"
         onClick={() => setOpen(true)}
-        className="overflow-hidden rounded-md border border-line bg-sunken"
+        className="overflow-hidden rounded-xl border border-line bg-sunken"
         title={attachment.name}
       >
         <img

app/src/features/chat/BotRun.tsx

@@ -67,9 +67,9 @@ export function BotRun({
 }) {
   const first = items[0];
   return (
-    <li className="flex gap-3 pr-10">
+    <li className="flex gap-3">
       <BotAvatar color={bot.color} size={28} />
-      <div className="flex min-w-0 max-w-[48rem] flex-1 flex-col gap-2">
+      <div className="flex min-w-0 flex-1 flex-col gap-2">
         <div className="flex items-center gap-2 text-sm">
           <span className="font-semibold">{bot.name}</span>
           {first && (

app/src/features/chat/ChatView.tsx

@@ -67,10 +67,10 @@ export function ChatView({ bot, stopped }: { bot: Bot; stopped: boolean }) {
   const list: ReactNode[] = rows.map((row, index) => {
     if (row.kind === "day") {
       return (
-        <li key={row.key} className="flex items-center gap-3 text-muted text-xs">
-          <span className="h-px flex-1 bg-line" />
-          {day(row.at)}
-          <span className="h-px flex-1 bg-line" />
+        <li key={row.key} className="flex justify-center">
+          <span className="rounded-full bg-sunken px-3 py-1 font-medium text-muted text-xs">
+            {day(row.at)}
+          </span>
         </li>
       );
     }
@@ -126,7 +126,7 @@ export function ChatView({ bot, stopped }: { bot: Bot; stopped: boolean }) {
             element.scrollHeight - element.scrollTop - element.clientHeight < STICKY_PX;
         }}
       >
-        <div className="mx-auto flex max-w-5xl flex-col px-5 pt-4 pb-2">
+        <div className="mx-auto flex max-w-3xl flex-col px-5 pt-5 pb-3">
           {chat.error && (
             <Callout tone="danger" title={t.chat.view.loadFailed}>
               {chat.error}
@@ -153,12 +153,12 @@ export function ChatView({ bot, stopped }: { bot: Bot; stopped: boolean }) {
               <p className="max-w-md text-muted text-sm">{t.chat.view.emptyBody}</p>
             </div>
           )}
-          <ol aria-label={t.chat.view.messages} className="flex flex-col gap-5">
+          <ol aria-label={t.chat.view.messages} className="flex flex-col gap-6">
             {list}
           </ol>
         </div>
       </div>
-      <div className="mx-auto w-full max-w-5xl">
+      <div className="mx-auto w-full max-w-3xl">
         <ChatComposer
           bot={bot}
           files={files}
@@ -169,7 +169,7 @@ export function ChatView({ bot, stopped }: { bot: Bot; stopped: boolean }) {
         />
       </div>
       {dragging && (
-        <div className="pointer-events-none absolute inset-3 grid place-items-center rounded-lg border-2 border-accent border-dashed bg-canvas/85">
+        <div className="pointer-events-none absolute inset-3 grid place-items-center rounded-2xl border-2 border-accent border-dashed bg-canvas/85">
           <p className="flex items-center gap-2 font-medium">
             <Paperclip aria-hidden size={16} />
             {t.chat.view.dropToAttach}

app/src/features/chat/InboundRow.tsx

@@ -21,11 +21,11 @@ function Time({ at }: { at: number }) {
 function OwnerMessage({ message, bot }: { message: Message; bot: Bot }) {
   const delivery = useApp((state) => state.deliveries[message.id]);
   return (
-    <li className="flex flex-col items-end gap-1.5 pl-16">
+    <li className="flex flex-col items-end gap-1.5 pl-12">
       <AttachmentList attachments={message.attachments} workspace={bot.workspace} align="end" />
       {message.body && (
         <p
-          className="max-w-[42rem] whitespace-pre-wrap break-words rounded-lg rounded-br-sm bg-sunken px-3.5 py-2 leading-relaxed"
+          className="max-w-[36rem] whitespace-pre-wrap break-words rounded-2xl rounded-br-md bg-sunken px-4 py-2.5 leading-relaxed"
           data-selectable
         >
           {message.body}
@@ -46,7 +46,7 @@ function TaskTag({ message }: { message: Message }) {
   }
   const Icon = message.kind === "task" ? ListTodo : Reply;
   return (
-    <span className="inline-flex items-center gap-1 rounded-[3px] border border-line px-1.5 text-muted text-xs">
+    <span className="inline-flex items-center gap-1 rounded-md border border-line px-1.5 text-muted text-xs">
       <Icon aria-hidden size={11} />
       {message.kind === "task" ? t.chat.inbound.task : t.chat.inbound.result}
     </span>
@@ -60,7 +60,7 @@ function OtherMessage({ message }: { message: Message }) {
   const system = message.fromKind === "system";
   const name = system ? "Botloft" : (sender?.name ?? t.chat.inbound.archivedBot);
   return (
-    <li className="flex gap-3 pr-16">
+    <li className="flex gap-3 pr-12">
       <BotAvatar
         color={system ? "#ffffff" : (sender?.color ?? "#6f6f69")}
         size={28}
@@ -74,7 +74,7 @@ function OtherMessage({ message }: { message: Message }) {
           <Time at={message.createdAt} />
         </div>
         <p
-          className={`mt-1 max-w-[42rem] whitespace-pre-wrap break-words rounded-lg rounded-tl-sm border border-line bg-panel px-3.5 py-2 leading-relaxed ${system ? "text-ink-soft" : ""}`}
+          className={`mt-1 max-w-[36rem] whitespace-pre-wrap break-words rounded-2xl rounded-tl-md border border-line bg-panel px-4 py-2.5 leading-relaxed ${system ? "text-ink-soft" : ""}`}
           data-selectable
         >
           {message.body}

app/src/features/chat/NoticeRow.tsx

@@ -6,9 +6,9 @@ import { type Messages, useT } from "../../i18n";
 import type { NoticeItem } from "../../lib/protocol.gen";
 
 const LOOK = {
-  info: { icon: Info, tone: "text-work", frame: "border-line" },
-  warning: { icon: TriangleAlert, tone: "text-warn", frame: "border-warn/50" },
-  error: { icon: CircleAlert, tone: "text-danger", frame: "border-danger/50" },
+  info: { icon: Info, tone: "text-work", frame: "border-line bg-panel" },
+  warning: { icon: TriangleAlert, tone: "text-warn", frame: "border-warn/40 bg-warn/6" },
+  error: { icon: CircleAlert, tone: "text-danger", frame: "border-danger/40 bg-danger/6" },
 } as const;
 
 export function NoticeRow({ notice }: { notice: NoticeItem }) {
@@ -17,7 +17,7 @@ export function NoticeRow({ notice }: { notice: NoticeItem }) {
   return (
     <li
       role={notice.level === "info" ? undefined : "alert"}
-      className={`mx-auto flex max-w-2xl items-start gap-2 rounded-md border bg-panel px-3 py-2 text-sm ${frame}`}
+      className={`mx-auto flex max-w-2xl items-start gap-2.5 rounded-xl border px-3.5 py-2.5 text-sm ${frame}`}
     >
       <Icon aria-hidden size={15} className={`mt-0.5 shrink-0 ${tone}`} />
       <p className="whitespace-pre-wrap break-words text-ink-soft" data-selectable>

app/src/features/crews/CrewBots.tsx

@@ -12,7 +12,7 @@ export function CrewBots({ crew, bots, onNewBot }: { crew: Crew; bots: Bot[]; on
   const selectBot = useApp((state) => state.selectBot);
   if (bots.length === 0) {
     return (
-      <div className="border border-line border-dashed px-6 py-10 text-center">
+      <div className="rounded-2xl border border-line border-dashed px-6 py-10 text-center">
         <p className="font-medium">{t.crews.bots.empty(crew.name)}</p>
         <p className="mt-1 text-muted text-sm">{t.crews.bots.emptyHint}</p>
         <Button className="mt-4" variant="primary" icon={Plus} onClick={onNewBot}>
@@ -28,7 +28,7 @@ export function CrewBots({ crew, bots, onNewBot }: { crew: Crew; bots: Bot[]; on
           <button
             type="button"
             onClick={() => selectBot(bot.id)}
-            className="flex h-full w-full flex-col gap-2 border border-line bg-panel p-3 text-left hover:border-line-strong"
+            className="flex h-full w-full flex-col gap-2 rounded-xl border border-line bg-panel p-3.5 text-left transition-colors hover:border-line-strong"
           >
             <div className="flex w-full items-center gap-2.5">
               <BotAvatar color={bot.color} size={32} />

app/src/features/crews/Sidebar.tsx

@@ -32,7 +32,7 @@ export function Sidebar() {
             onClick={() => setCreating(true)}
           />
         </div>
-        <ul className="min-h-0 flex-1 overflow-y-auto pb-3">
+        <ul className="min-h-0 flex-1 overflow-y-auto px-2 pb-3">
           {crews.map((crew) => (
             <CrewEntry key={crew.id} crew={crew} />
           ))}
@@ -44,8 +44,7 @@ export function Sidebar() {
   );
 }
 
-const row = "relative flex w-full items-center text-left hover:bg-sunken";
-const marker = "before:absolute before:inset-y-0 before:left-0 before:w-[3px] before:bg-accent";
+const row = "relative flex w-full items-center rounded-lg text-left hover:bg-sunken";
 
 function CrewEntry({ crew }: { crew: Crew }) {
   const t = useT();
@@ -59,7 +58,7 @@ function CrewEntry({ crew }: { crew: Crew }) {
         type="button"
         aria-current={selected ? "page" : undefined}
         onClick={() => selectCrew(crew.id)}
-        className={`${row} h-8 gap-2 pr-3 pl-4 font-semibold text-sm ${selected ? `bg-sunken ${marker}` : ""}`}
+        className={`${row} h-8 gap-2 px-2.5 font-semibold text-sm ${selected ? "bg-sunken" : ""}`}
       >
         <span className="min-w-0 flex-1 truncate">{crew.name}</span>
         {crew.paused && (
@@ -90,7 +89,7 @@ function Conversation({ bot, crew }: { bot: Bot; crew: Crew }) {
         aria-current={selected ? "page" : undefined}
         aria-label={`${bot.name}, ${stateView(bot, crew.paused).label}`}
         onClick={() => selectBot(bot.id)}
-        className={`${row} gap-2.5 py-2 pr-3 pl-4 ${selected ? `bg-sunken ${marker}` : ""}`}
+        className={`${row} gap-2.5 px-2.5 py-2 ${selected ? "bg-sunken" : ""}`}
       >
         <BotAvatar color={bot.color} size={32} />
         <span className="min-w-0 flex-1">