@drawnagency/primitives 0.1.88 → 0.1.90

package/src/components/chat/ChatWidget.tsx

@@ -1,65 +1,123 @@
-// Chat launcher FAB. Renders ONLY the floating button until first open; the
-// panel (and its code) loads lazily so viewers who never click pay almost
-// nothing. Browser-safe: no node imports, no process.env.
+// Chat launcher + shell chooser. Browser-safe: no node imports, no process.env.
 //
-// Two placements:
-// - "viewer" (default): bottom-right corner of viewer pages.
-// - "editor": BOTTOM of the /edit route's FAB column (edit-mode toggle at
-//   bottom-16, bug report at bottom-28 above it), aligned to the content edge
-//   via fab-container-right like its neighbors.
-import { lazy, Suspense, useState } from "react";
+// Placements:
+// - "viewer" (default): >=768px the conversation docks as a full-height right
+//   sidebar (html.bp-chat-docked shifts the page band left — see base.css);
+//   below 768px it opens as a bottom sheet. The FAB shows only while closed.
+//   Docked-open is the default and the preference persists per tab
+//   (sessionStorage, mirrored by Layout.astro's pre-paint script so the
+//   column is reserved before hydration).
+// - "editor": unchanged floating panel at the BOTTOM of the /edit route's FAB
+//   column (edit-mode toggle at bottom-16, bug report at bottom-28 above it),
+//   aligned to the content edge via fab-container-right like its neighbors.
+import { lazy, Suspense, useEffect, useRef, useState } from "react";
 import { cn } from "../../lib/cn";
 
 const ChatPanel = lazy(() => import("./ChatPanel"));
 
+const OPEN_KEY = "bp-chat-open";
+const DOCK_QUERY = "(min-width: 768px)";
+
 export interface ChatWidgetProps {
   siteName: string;
+  /** Resolved assistant display name (per-audience, resolved server-side). */
+  botName: string;
+  /** Configured waiting phrases ("…" appended in the panel). */
+  thinkingPhrases?: string[];
   /** Already audience-filtered server-side — never pass unfiltered config tasks. */
   tasks: { id: string; label: string }[];
   isEditor?: boolean;
   /** Editor-only: chat against the current (unsaved) chatbot config. */
   draftChatbot?: unknown;
   variant?: "viewer" | "editor";
+  /** Viewer's audience (null for editor sessions) — tags local chat history. */
+  audience?: string | null;
 }
 
-export default function ChatWidget({ siteName, tasks, isEditor, draftChatbot, variant = "viewer" }: ChatWidgetProps) {
+export default function ChatWidget({ siteName, botName, thinkingPhrases, tasks, isEditor, draftChatbot, variant = "viewer", audience }: ChatWidgetProps) {
   const [open, setOpen] = useState(false);
   const [everOpened, setEverOpened] = useState(false);
+  const [docked, setDocked] = useState(false);
+  const [userOpened, setUserOpened] = useState(false);
+  const fabRef = useRef<HTMLButtonElement>(null);
+  const isViewer = variant === "viewer";
+
+  // Post-hydration restore. The server renders only the FAB; Layout.astro's
+  // pre-paint script has already reserved the docked column and CSS hides the
+  // FAB under html.bp-chat-docked, so this state sync causes no layout jump.
+  useEffect(() => {
+    if (!isViewer || typeof window.matchMedia !== "function") return;
+    const mq = window.matchMedia(DOCK_QUERY);
+    const apply = () => setDocked(mq.matches);
+    apply();
+    mq.addEventListener("change", apply);
+    let storedOpen = true; // default: sidebar open
+    try { storedOpen = window.sessionStorage.getItem(OPEN_KEY) !== "0"; } catch {}
+    if (mq.matches && storedOpen) { setOpen(true); setEverOpened(true); }
+    return () => mq.removeEventListener("change", apply);
+  }, [isViewer]);
+
+  // Reflect docked-open on <html> (drives the band shift + FAB hiding) and
+  // persist the preference. Only the docked state persists — the phone sheet
+  // always starts closed.
+  useEffect(() => {
+    if (!isViewer) return;
+    document.documentElement.classList.toggle("bp-chat-docked", open && docked);
+    if (docked) {
+      try { window.sessionStorage.setItem(OPEN_KEY, open ? "1" : "0"); } catch {}
+    }
+    return () => document.documentElement.classList.remove("bp-chat-docked");
+  }, [open, docked, isViewer]);
+
+  // Closing the sheet/sidebar returns focus to the launcher.
+  useEffect(() => {
+    if (isViewer && !open && everOpened) fabRef.current?.focus();
+  }, [open, everOpened, isViewer]);
+
+  const showFab = !isViewer || !open;
 
   return (
     <>
-      <button
-        type="button"
-        aria-label={open ? "Collapse chat" : `Chat with ${siteName}`}
-        aria-expanded={open}
-        onClick={() => { setOpen((o) => !o); setEverOpened(true); }}
-        className={cn(
-          "fixed z-40 flex items-center justify-center rounded-full bg-primary text-primary-contrast shadow-lg hover:opacity-90 transition-opacity",
-          variant === "editor"
-            ? "bottom-4 right-4 lg:right-auto h-10 w-10 fab-container-right"
-            : "bottom-4 right-4 h-12 w-12",
-        )}
-      >
-        {open ? (
-          <svg xmlns="http://www.w3.org/2000/svg" className={variant === "editor" ? "h-5 w-5" : "h-6 w-6"} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-            <path d="m6 9 6 6 6-6" />
-          </svg>
-        ) : (
-          <svg xmlns="http://www.w3.org/2000/svg" className={variant === "editor" ? "h-5 w-5" : "h-6 w-6"} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-            <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />
-          </svg>
-        )}
-      </button>
+      {showFab && (
+        <button
+          ref={fabRef}
+          type="button"
+          aria-label={open ? "Collapse chat" : `Chat with ${botName}`}
+          aria-expanded={open}
+          onClick={() => { setOpen((o) => !o); setEverOpened(true); setUserOpened(true); }}
+          className={cn(
+            "fixed z-40 flex items-center justify-center rounded-full bg-primary text-primary-contrast shadow-lg hover:opacity-90 transition-opacity",
+            variant === "editor"
+              ? "bottom-4 right-4 lg:right-auto h-10 w-10 fab-container-right"
+              : "bottom-4 h-12 w-12 viewer-fab bp-chat-fab",
+          )}
+        >
+          {open ? (
+            <svg xmlns="http://www.w3.org/2000/svg" className={variant === "editor" ? "h-5 w-5" : "h-6 w-6"} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="m6 9 6 6 6-6" />
+            </svg>
+          ) : (
+            <svg xmlns="http://www.w3.org/2000/svg" className={variant === "editor" ? "h-5 w-5" : "h-6 w-6"} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />
+            </svg>
+          )}
+        </button>
+      )}
       {everOpened && (
         <Suspense fallback={null}>
           <ChatPanel
             open={open}
             onClose={() => setOpen(false)}
             siteName={siteName}
+            botName={botName}
+            thinkingPhrases={thinkingPhrases}
             tasks={tasks}
             isEditor={isEditor}
             draftChatbot={draftChatbot}
             variant={variant}
+            mode={isViewer ? (docked ? "docked" : "sheet") : "floating"}
+            focusComposer={userOpened}
+            audience={audience}
           />
         </Suspense>
       )}

package/src/components/chat/chat-history.ts

@@ -0,0 +1,105 @@
+// Local-only chat history (localStorage). The ACTIVE conversation lives in
+// sessionStorage (per-tab, survives same-tab navigation — see ChatPanel);
+// this module is the durable archive behind the panel's history list.
+//
+// Retention: pinned conversations are kept forever and sort to the top;
+// unpinned ones expire after HISTORY_RETENTION_DAYS and are capped at
+// HISTORY_MAX_UNPINNED overall (not per audience — one browser is one
+// viewer in practice). Every entry is tagged with the audience it belonged
+// to, and the list only ever shows the current audience's conversations —
+// localStorage outlives the 24h audience cookie, so an expired session must
+// not expose another audience's transcripts on a shared machine.
+import type { ChatMessage } from "./ChatPanel";
+
+const HISTORY_KEY = "bp-chat-history";
+export const HISTORY_RETENTION_DAYS = 30;
+export const HISTORY_MAX_UNPINNED = 20;
+const MESSAGE_CAP = 40;
+const TITLE_MAX = 60;
+
+export interface StoredConversation {
+  id: string;
+  title: string;
+  /** Audience tag ("editor" for editor sessions on viewer pages). */
+  audience: string;
+  pinned: boolean;
+  updatedAt: number;
+  messages: ChatMessage[];
+}
+
+function isMessage(m: unknown): m is ChatMessage {
+  return !!m && typeof m === "object" &&
+    ((m as ChatMessage).role === "user" || (m as ChatMessage).role === "assistant") &&
+    typeof (m as ChatMessage).content === "string";
+}
+
+function isEntry(e: unknown): e is StoredConversation {
+  if (!e || typeof e !== "object") return false;
+  const c = e as StoredConversation;
+  return typeof c.id === "string" && typeof c.title === "string" &&
+    typeof c.audience === "string" && typeof c.pinned === "boolean" &&
+    typeof c.updatedAt === "number" && Array.isArray(c.messages) && c.messages.every(isMessage);
+}
+
+function readAll(): StoredConversation[] {
+  try {
+    const parsed: unknown = JSON.parse(window.localStorage.getItem(HISTORY_KEY) ?? "[]");
+    return Array.isArray(parsed) ? parsed.filter(isEntry) : [];
+  } catch {
+    return [];
+  }
+}
+
+function writeAll(entries: StoredConversation[]): void {
+  try {
+    window.localStorage.setItem(HISTORY_KEY, JSON.stringify(entries));
+  } catch { /* storage unavailable/full — history is best-effort */ }
+}
+
+function prune(entries: StoredConversation[], now: number): StoredConversation[] {
+  const cutoff = now - HISTORY_RETENTION_DAYS * 86_400_000;
+  const pinned = entries.filter((e) => e.pinned);
+  const unpinned = entries
+    .filter((e) => !e.pinned && e.updatedAt >= cutoff)
+    .sort((a, b) => b.updatedAt - a.updatedAt)
+    .slice(0, HISTORY_MAX_UNPINNED);
+  return [...pinned, ...unpinned];
+}
+
+/** Current audience's conversations: pinned first, then newest first. */
+export function loadHistory(audience: string, now = Date.now()): StoredConversation[] {
+  return readAll()
+    .filter((e) => e.audience === audience)
+    .filter((e) => e.pinned || e.updatedAt >= now - HISTORY_RETENTION_DAYS * 86_400_000)
+    .sort((a, b) => (b.pinned ? 1 : 0) - (a.pinned ? 1 : 0) || b.updatedAt - a.updatedAt);
+}
+
+/** Create/refresh a conversation's archive entry (preserves its pinned flag)
+ *  and apply retention. No-ops on empty transcripts. */
+export function upsertConversation(
+  input: { id: string; audience: string; messages: ChatMessage[] },
+  now = Date.now(),
+): void {
+  const messages = input.messages.filter((m) => m.content !== "").slice(-MESSAGE_CAP);
+  if (messages.length === 0) return;
+  const all = readAll();
+  const existing = all.find((e) => e.id === input.id);
+  const firstUser = messages.find((m) => m.role === "user");
+  const entry: StoredConversation = {
+    id: input.id,
+    audience: input.audience,
+    pinned: existing?.pinned ?? false,
+    updatedAt: now,
+    title: (firstUser ?? messages[0]).content.slice(0, TITLE_MAX),
+    messages,
+  };
+  writeAll(prune([...all.filter((e) => e.id !== input.id), entry], now));
+}
+
+export function setConversationPinned(id: string, pinned: boolean): void {
+  writeAll(readAll().map((e) => (e.id === id ? { ...e, pinned } : e)));
+}
+
+export function removeConversation(id: string): void {
+  writeAll(readAll().filter((e) => e.id !== id));
+}

package/src/components/editor/AudienceIndicator.tsx

@@ -4,6 +4,55 @@ import { IndicatorPill } from "./IndicatorPill";
 import { PopoverItem } from "../shared/PopoverItem";
 import type { Audience } from "../../auth/types";
 
+interface AudienceChecklistProps {
+  access: string[];
+  audiences: Audience[];
+  onToggle: (name: string) => void;
+}
+
+export function AudienceChecklist({ access, audiences, onToggle }: AudienceChecklistProps) {
+  if (audiences.length === 0) {
+    return (
+      <div className="px-3 py-2 text-xs text-base-contrast-light whitespace-nowrap">
+        No audiences configured. Add audiences in Site Settings → Viewer Access.
+      </div>
+    );
+  }
+  return (
+    <ul role="list" className="w-full overflow-hidden py-1">
+      {audiences.map((a) => {
+        const checked = access.includes(a.name);
+        return (
+          <li key={a.name}>
+            <PopoverItem
+              role="checkbox"
+              aria-checked={checked}
+              onClick={() => onToggle(a.name)}
+            >
+              <span
+                aria-hidden="true"
+                className={cn(
+                  "flex h-5 w-5 shrink-0 items-center justify-center rounded border transition-colors",
+                  checked
+                    ? "border-primary bg-primary text-primary-contrast"
+                    : "border-base-300 bg-base",
+                )}
+              >
+                {checked && <Check size={14} strokeWidth={3} />}
+              </span>
+              <span
+                className="h-3 w-3 shrink-0 rounded-full border border-base-200"
+                style={{ backgroundColor: a.color ?? "#9ca3af" }}
+              />
+              <span className="font-medium text-base-contrast whitespace-nowrap">{a.displayName}</span>
+            </PopoverItem>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
 interface AudienceIndicatorProps {
   access: string[];
   audiences: Audience[];
@@ -39,43 +88,7 @@ export function AudienceIndicator({ access, audiences, onChange, disabled }: Aud
       buttonClassName={selected.length === 0 ? "text-base-contrast-light" : undefined}
       disabled={disabled}
       clickContent={
-        audiences.length === 0 ? (
-          <div className="px-3 py-2 text-xs text-base-contrast-light whitespace-nowrap">
-            No audiences configured. Add audiences in Site Settings → Viewer Access.
-          </div>
-        ) : (
-          <ul role="list" className="w-full overflow-hidden py-1">
-            {audiences.map((a) => {
-              const checked = access.includes(a.name);
-              return (
-                <li key={a.name}>
-                  <PopoverItem
-                    role="checkbox"
-                    aria-checked={checked}
-                    onClick={() => toggle(a.name)}
-                  >
-                    <span
-                      aria-hidden="true"
-                      className={cn(
-                        "flex h-5 w-5 shrink-0 items-center justify-center rounded border transition-colors",
-                        checked
-                          ? "border-primary bg-primary text-primary-contrast"
-                          : "border-base-300 bg-base",
-                      )}
-                    >
-                      {checked && <Check size={14} strokeWidth={3} />}
-                    </span>
-                    <span
-                      className="h-3 w-3 shrink-0 rounded-full border border-base-200"
-                      style={{ backgroundColor: a.color ?? "#9ca3af" }}
-                    />
-                    <span className="font-medium text-base-contrast">{a.displayName}</span>
-                  </PopoverItem>
-                </li>
-              );
-            })}
-          </ul>
-        )
+        <AudienceChecklist access={access} audiences={audiences} onToggle={toggle} />
       }
     />
   );

package/src/components/editor/ChildBlockWrapper.tsx

@@ -5,6 +5,7 @@ import { DragHandle } from "./DragHandle";
 import { DeleteButton } from "./DeleteButton";
 import { SettingsButton } from "./SettingsButton";
 import { ColSpanControl } from "./ColSpanControl";
+import { Tooltip, Kbd } from "../shared/Tooltip";
 import { cn } from "../../lib/cn";
 
 export interface ChildBlockWrapperProps {
@@ -70,17 +71,17 @@ export const ChildBlockWrapper = forwardRef<HTMLDivElement, ChildBlockWrapperPro
         >
           <span className="sr-only">{label}</span>
           <div className="pointer-events-auto">
-            <DragHandle ref={dragHandleRef} />
+            <DragHandle ref={dragHandleRef} tooltipSide="right" />
           </div>
           <div className="pointer-events-auto">
             <ColSpanControl colSpan={colSpan} columns={columns} onChange={onColSpanChange} />
           </div>
           {hasSettings && onOpenSettings && (
-            <div className="pointer-events-auto">
+            <Tooltip side="right" className="pointer-events-auto" content={<><Kbd>Edit</Kbd> settings</>}>
               <SettingsButton onClick={onOpenSettings} />
-            </div>
+            </Tooltip>
           )}
-          <div className="pointer-events-auto">
+          <Tooltip side="right" className="pointer-events-auto" content={<><Kbd>Duplicate</Kbd> block</>}>
             <button
               type="button"
               aria-label="Duplicate block"
@@ -89,10 +90,10 @@ export const ChildBlockWrapper = forwardRef<HTMLDivElement, ChildBlockWrapperPro
             >
               <CopyPlus size={16} />
             </button>
-          </div>
-          <div className="pointer-events-auto">
+          </Tooltip>
+          <Tooltip side="right" className="pointer-events-auto" content={<><Kbd>Delete</Kbd> block</>}>
             <DeleteButton onDelete={onDelete} />
-          </div>
+          </Tooltip>
         </div>
 
         {/* Drop-edge indicators */}

package/src/components/editor/ColSpanControl.tsx

@@ -2,6 +2,7 @@ import { useRef, useState } from "react";
 import { Columns3 } from "lucide-react";
 import { Popover } from "../shared/Popover";
 import { PopoverItem } from "../shared/PopoverItem";
+import { Tooltip, Kbd } from "../shared/Tooltip";
 import { cn } from "../../lib/cn";
 
 interface ColSpanControlProps {
@@ -21,17 +22,19 @@ export function ColSpanControl({ colSpan, columns, onChange }: ColSpanControlPro
 
   return (
     <div className="relative">
-      <button
-        ref={buttonRef}
-        type="button"
-        aria-label="Column span"
-        aria-haspopup="true"
-        aria-expanded={open}
-        onClick={() => setOpen((v) => !v)}
-        className="pointer-events-auto inline-flex cursor-pointer items-center gap-1 rounded p-1 text-xs text-base-contrast-light hover:text-primary"
-      >
-        <Columns3 size={14} />
-      </button>
+      <Tooltip side="right" content={<><Kbd>Set</Kbd> column span</>}>
+        <button
+          ref={buttonRef}
+          type="button"
+          aria-label="Column span"
+          aria-haspopup="true"
+          aria-expanded={open}
+          onClick={() => setOpen((v) => !v)}
+          className="pointer-events-auto inline-flex cursor-pointer items-center gap-1 rounded p-1 text-xs text-base-contrast-light hover:text-primary"
+        >
+          <Columns3 size={14} />
+        </button>
+      </Tooltip>
 
       <Popover isOpen={open} onClose={() => setOpen(false)} anchorRef={buttonRef} className="min-w-28">
         <ul role="list" className="py-1">

package/src/components/editor/DragHandle.tsx

@@ -3,9 +3,12 @@ import { DragHandle as DragHandleIcon } from "../shared/icons";
 import { IconButton } from "../shared/IconButton";
 import { Tooltip, Kbd } from "../shared/Tooltip";
 
-export const DragHandle = forwardRef<HTMLButtonElement>(function DragHandle(_, ref) {
+export const DragHandle = forwardRef<HTMLButtonElement, { tooltipSide?: "bottom" | "right" }>(function DragHandle(
+  { tooltipSide },
+  ref,
+) {
   return (
-    <Tooltip content={<><Kbd>Drag</Kbd> to move</>}>
+    <Tooltip side={tooltipSide} content={<><Kbd>Drag</Kbd> to move</>}>
       <IconButton
         ref={ref}
         icon={<DragHandleIcon size={18} />}

package/src/components/editor/PagesModal.tsx

@@ -205,15 +205,15 @@ function PageRow({
   return (
     <div
       ref={rowRef}
-      className={cn("relative rounded-md border border-base-200", isDragging && "opacity-50")}
+      className={cn("relative flex items-start gap-1", isDragging && "opacity-50")}
     >
       <DropEdgeIndicator edge={closestEdge} />
-      <div className="flex items-stretch gap-2 pl-3">
-        {draggable && (
-          <div className="flex shrink-0 items-center py-2 [&_[role=tooltip]]:hidden">
-            <DragHandle ref={handleRef} />
-          </div>
-        )}
+      {draggable && (
+        <div className="flex shrink-0 items-center py-2 [&_[role=tooltip]]:hidden">
+          <DragHandle ref={handleRef} />
+        </div>
+      )}
+      <div className={cn("min-w-0 flex-1 rounded-md border border-base-200 bg-base", isDragging && "outline outline-2 outline-primary/50")}>
         <button
           type="button"
           aria-label={`Edit settings for ${pageDisplayTitle(page.title)}`}
@@ -238,9 +238,8 @@ function PageRow({
             className={cn("shrink-0 text-base-contrast/50 transition-transform", expanded && "rotate-180")}
           />
         </button>
-      </div>
 
-      {expanded && (
+        {expanded && (
         <div className="flex flex-col gap-3 border-t border-base-200 px-3 py-3">
           <Input
             label="Title"
@@ -314,7 +313,8 @@ function PageRow({
             </Button>
           </div>
         </div>
-      )}
+        )}
+      </div>
     </div>
   );
 }

package/src/components/editor/SectionWrapper.tsx

@@ -5,6 +5,8 @@ import { DragHandle } from "./DragHandle";
 import { InsertButton } from "./InsertButton";
 import { DeleteButton } from "./DeleteButton";
 import { SettingsButton } from "./SettingsButton";
+import { IconButton } from "../shared/IconButton";
+import { Tooltip, Kbd } from "../shared/Tooltip";
 import { StatusIndicator } from "./StatusIndicator";
 import { AudienceIndicator } from "./AudienceIndicator";
 import { LockBadge } from "./LockBadge";
@@ -298,7 +300,10 @@ export function SectionWrapper({
       {/* Status + settings + delete — top-right, above content */}
       <div
         className={cn(
-          "pointer-events-none absolute right-0 bottom-full z-30 mb-1 flex items-center gap-2 transition-opacity",
+          // When a selector inside this cluster is open (Popover renders role="dialog"),
+          // lift the whole cluster above sibling sections' chrome (z-30, hover:z-[60]) and
+          // the inline type picker (z-50) so the open dropdown isn't overlapped.
+          "pointer-events-none absolute right-0 bottom-full z-30 has-[[role=dialog]]:z-[70] mb-1 flex items-center gap-2 transition-opacity",
           // A lock is important state — keep the cluster visible without hover.
           alwaysShow || isLocked ? "opacity-100" : "opacity-0 group-hover:opacity-100",
         )}
@@ -327,32 +332,38 @@ export function SectionWrapper({
         </div>
 
         {!isLocked && onAddChild && (
-          <button
-            type="button"
-            onClick={onAddChild}
-            aria-label="Add block"
-            className="pointer-events-auto cursor-pointer rounded p-1 text-base-contrast-light hover:text-primary"
-          >
-            <Plus size={16} />
-          </button>
+          <Tooltip className="pointer-events-auto" content={<><Kbd>Add</Kbd> a block</>}>
+            <IconButton
+              icon={<Plus size={16} />}
+              label="Add block"
+              onClick={onAddChild}
+              className="pointer-events-auto hover:text-primary"
+            />
+          </Tooltip>
         )}
 
-        {!isLocked && hasSettings && (
-          <SettingsButton onClick={handleSettingsClick} />
+        {!isLocked && onMoveSection && (
+          <Tooltip className="pointer-events-auto" content={<><Kbd>Move</Kbd> to page</>}>
+            <IconButton
+              icon={<ArrowRightLeft size={16} />}
+              label="Move to page"
+              onClick={onMoveSection}
+              className="pointer-events-auto hover:text-primary"
+            />
+          </Tooltip>
         )}
 
-        {!isLocked && onMoveSection && (
-          <button
-            type="button"
-            onClick={onMoveSection}
-            aria-label="Move to page"
-            className="pointer-events-auto cursor-pointer rounded p-1 text-base-contrast-light hover:text-primary"
-          >
-            <ArrowRightLeft size={16} />
-          </button>
+        {!isLocked && hasSettings && (
+          <Tooltip className="pointer-events-auto" content={<><Kbd>Edit</Kbd> settings</>}>
+            <SettingsButton onClick={handleSettingsClick} />
+          </Tooltip>
         )}
 
-        {!isLocked && onDelete && <DeleteButton onDelete={onDelete} />}
+        {!isLocked && onDelete && (
+          <Tooltip className="pointer-events-auto" content={<><Kbd>Delete</Kbd> section</>}>
+            <DeleteButton onDelete={onDelete} />
+          </Tooltip>
+        )}
       </div>
 
       {/* Drop indicator — centered in the section's own padding-top */}