@tightknitai/block-kitchen 0.9.2 → 0.9.4

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as react from 'react';
-import { B as BlockKitchenProps, $ as Template, K as PreviewSurface, N as PreviewTheme } from './palette-DIbvAzRA.cjs';
-export { A as AlertBlock, a as AlertLevel, b as BrandPreset, c as BrandTheme, d as BrandTokens, e as BuilderBlock, C as CardBlock, f as CarouselBlock, g as CartesianChart, h as ChannelOption, i as Chart, j as ChartAxisConfig, k as ChartDataPoint, l as ChartSeries, m as ChartType, n as ContainerBlock, o as ContainerChildBlock, p as ContextActionsBlock, q as ContextActionsElement, r as CustomEmoji, D as DataVisualizationBlock, E as EditableVia, s as EditingConfig, F as FeedbackButtonSubobject, t as FeedbackButtonsElement, H as HeaderLevel, I as IconButtonElement, u as IconButtonIcon, v as InputBlock, L as LoadMessageInput, w as LoadResult, M as MarkdownBlock, P as PaletteSection, x as PaletteVariant, y as PieChart, z as PieChartSegment, G as PlanBlock, J as PreviewHooks, R as RecentMessage, S as SendAsUserStatus, O as SendPayload, Q as SendResult, T as SupportedBlock, U as SupportedBlockType, V as SupportedHeaderBlock, W as TableBlock, X as TableCell, Y as TableColumnSetting, Z as TaskCardBlock, _ as TaskCardStatus, a0 as UpdatePayload, a1 as UpdateResult, a2 as UrlSourceElement, a3 as VideoBlock, a5 as defaultPalette, a6 as extraAlertVariant, a7 as legacyInputVariants } from './palette-DIbvAzRA.cjs';
+import { B as BlockKitchenProps, $ as Template, K as PreviewSurface, N as PreviewTheme } from './palette-inX8F01o.cjs';
+export { A as AlertBlock, a as AlertLevel, b as BrandPreset, c as BrandTheme, d as BrandTokens, e as BuilderBlock, C as CardBlock, f as CarouselBlock, g as CartesianChart, h as ChannelOption, i as Chart, j as ChartAxisConfig, k as ChartDataPoint, l as ChartSeries, m as ChartType, n as ContainerBlock, o as ContainerChildBlock, p as ContextActionsBlock, q as ContextActionsElement, r as CustomEmoji, D as DataVisualizationBlock, E as EditableVia, s as EditingConfig, F as FeedbackButtonSubobject, t as FeedbackButtonsElement, H as HeaderLevel, I as IconButtonElement, u as IconButtonIcon, v as InputBlock, L as LoadMessageInput, w as LoadResult, M as MarkdownBlock, P as PaletteSection, x as PaletteVariant, y as PieChart, z as PieChartSegment, G as PlanBlock, J as PreviewHooks, R as RecentMessage, S as SendAsUserStatus, O as SendPayload, Q as SendResult, T as SupportedBlock, U as SupportedBlockType, V as SupportedHeaderBlock, W as TableBlock, X as TableCell, Y as TableColumnSetting, Z as TaskCardBlock, _ as TaskCardStatus, a0 as UpdatePayload, a1 as UpdateResult, a2 as UrlSourceElement, a3 as VideoBlock, a5 as defaultPalette, a6 as extraAlertVariant, a7 as legacyInputVariants } from './palette-inX8F01o.cjs';
 export { decodeBlocksFromString, encodeBlocksToString, toSlackBlocks } from './helpers.cjs';
 import 'slack-web-api-client';
 

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
-import { B as BlockKitchenProps, $ as Template, K as PreviewSurface, N as PreviewTheme } from './palette-DIbvAzRA.js';
-export { A as AlertBlock, a as AlertLevel, b as BrandPreset, c as BrandTheme, d as BrandTokens, e as BuilderBlock, C as CardBlock, f as CarouselBlock, g as CartesianChart, h as ChannelOption, i as Chart, j as ChartAxisConfig, k as ChartDataPoint, l as ChartSeries, m as ChartType, n as ContainerBlock, o as ContainerChildBlock, p as ContextActionsBlock, q as ContextActionsElement, r as CustomEmoji, D as DataVisualizationBlock, E as EditableVia, s as EditingConfig, F as FeedbackButtonSubobject, t as FeedbackButtonsElement, H as HeaderLevel, I as IconButtonElement, u as IconButtonIcon, v as InputBlock, L as LoadMessageInput, w as LoadResult, M as MarkdownBlock, P as PaletteSection, x as PaletteVariant, y as PieChart, z as PieChartSegment, G as PlanBlock, J as PreviewHooks, R as RecentMessage, S as SendAsUserStatus, O as SendPayload, Q as SendResult, T as SupportedBlock, U as SupportedBlockType, V as SupportedHeaderBlock, W as TableBlock, X as TableCell, Y as TableColumnSetting, Z as TaskCardBlock, _ as TaskCardStatus, a0 as UpdatePayload, a1 as UpdateResult, a2 as UrlSourceElement, a3 as VideoBlock, a5 as defaultPalette, a6 as extraAlertVariant, a7 as legacyInputVariants } from './palette-DIbvAzRA.js';
+import { B as BlockKitchenProps, $ as Template, K as PreviewSurface, N as PreviewTheme } from './palette-inX8F01o.js';
+export { A as AlertBlock, a as AlertLevel, b as BrandPreset, c as BrandTheme, d as BrandTokens, e as BuilderBlock, C as CardBlock, f as CarouselBlock, g as CartesianChart, h as ChannelOption, i as Chart, j as ChartAxisConfig, k as ChartDataPoint, l as ChartSeries, m as ChartType, n as ContainerBlock, o as ContainerChildBlock, p as ContextActionsBlock, q as ContextActionsElement, r as CustomEmoji, D as DataVisualizationBlock, E as EditableVia, s as EditingConfig, F as FeedbackButtonSubobject, t as FeedbackButtonsElement, H as HeaderLevel, I as IconButtonElement, u as IconButtonIcon, v as InputBlock, L as LoadMessageInput, w as LoadResult, M as MarkdownBlock, P as PaletteSection, x as PaletteVariant, y as PieChart, z as PieChartSegment, G as PlanBlock, J as PreviewHooks, R as RecentMessage, S as SendAsUserStatus, O as SendPayload, Q as SendResult, T as SupportedBlock, U as SupportedBlockType, V as SupportedHeaderBlock, W as TableBlock, X as TableCell, Y as TableColumnSetting, Z as TaskCardBlock, _ as TaskCardStatus, a0 as UpdatePayload, a1 as UpdateResult, a2 as UrlSourceElement, a3 as VideoBlock, a5 as defaultPalette, a6 as extraAlertVariant, a7 as legacyInputVariants } from './palette-inX8F01o.js';
 export { decodeBlocksFromString, encodeBlocksToString, toSlackBlocks } from './helpers.js';
 import 'slack-web-api-client';
 

package/dist/index.js

@@ -1,6 +1,6 @@
 import { useSensors, useSensor, PointerSensor, TouchSensor, KeyboardSensor, pointerWithin, closestCenter, DndContext, DragOverlay, useDroppable, useDraggable } from '@dnd-kit/core';
 import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
-import { X, Circle, Sparkles, FileText, AlignLeft, MousePointerClick, TextCursorInput, LayoutTemplate, Bell, Pilcrow, Image, Video, GalleryHorizontal, Table, ChartColumnBig, Container, GripVertical, Sun, Moon, MessageSquare, AppWindow, Home, MailSearch, Plus, ChevronDown, BookOpen, ExternalLink, AlertTriangle, Trash2, Code2, Pencil, Send, Search, Info, CheckCircle2, Check, ChevronRight, LayoutGrid, ArrowUp, ArrowDown, Copy, Type, Bold, Italic, Strikethrough, Underline, Code, List, ListOrdered, Quote, Undo2, Redo2, Smile, Link as Link$1 } from 'lucide-react';
+import { X, Circle, Sparkles, FileText, AlignLeft, MousePointerClick, TextCursorInput, LayoutTemplate, Bell, Pilcrow, Image, Video, GalleryHorizontal, Table, ChartColumnBig, Container, GripVertical, Sun, Moon, MessageSquare, AppWindow, Home, MailSearch, Plus, ChevronDown, BookOpen, ExternalLink, AlertTriangle, Trash2, Code2, Pencil, Send, Search, Check, Copy, Info, CheckCircle2, ChevronRight, LayoutGrid, ArrowUp, ArrowDown, Loader2, Type, Bold, Italic, Strikethrough, Underline, Code, List, ListOrdered, Quote, Undo2, Redo2, Smile, Link as Link$1 } from 'lucide-react';
 import * as React from 'react';
 import { createContext, useMemo, useState, useCallback, useRef, useEffect, useId, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -1887,6 +1887,10 @@ function sanitizeImageSrc(value) {
 // src/lib/sanitize-blocks.ts
 var HREF_KEYS = /* @__PURE__ */ new Set(["url"]);
 var IMAGE_KEYS = /* @__PURE__ */ new Set(["image_url"]);
+var RETRIEVAL_ONLY_KEYS = /* @__PURE__ */ new Map([
+  // Covers both the image block and the image element — both `type: 'image'`.
+  ["image", /* @__PURE__ */ new Set(["image_width", "image_height", "image_bytes", "fallback", "is_animated"])]
+]);
 function sanitizeValue(value) {
   if (value === null || typeof value !== "object") {
     return value;
@@ -1904,8 +1908,14 @@ function sanitizeValue(value) {
     return changed ? out : value;
   }
   const src = value;
+  const dropKeys = typeof src.type === "string" ? RETRIEVAL_ONLY_KEYS.get(src.type) : void 0;
   let copy = null;
   for (const key of Object.keys(src)) {
+    if (dropKeys?.has(key)) {
+      copy ??= { ...src };
+      delete copy[key];
+      continue;
+    }
     const original = src[key];
     let next = original;
     if (typeof original === "string") {
@@ -1929,6 +1939,18 @@ function sanitizeValue(value) {
 function sanitizeBlock(block) {
   return sanitizeValue(block);
 }
+function sanitizeBlocks(blocks) {
+  let changed = false;
+  const out = new Array(blocks.length);
+  for (let i = 0; i < blocks.length; i++) {
+    const next = sanitizeBlock(blocks[i]);
+    if (next !== blocks[i]) {
+      changed = true;
+    }
+    out[i] = next;
+  }
+  return changed ? out : blocks;
+}
 
 // src/lib/to-slack-blocks.ts
 function toSlackBlocks(blocks) {
@@ -2186,7 +2208,7 @@ function useBlockKitchenState({
     });
   }, []);
   const replaceAll = useCallback((newBlocks) => {
-    setBlocks(newBlocks.map(wrap));
+    setBlocks(sanitizeBlocks(newBlocks).map(wrap));
   }, []);
   return {
     blocks,
@@ -2595,8 +2617,10 @@ function JsonDrawer({
   const [value, setValue] = useState("");
   const [parseError, setParseError] = useState(null);
   const [validationErrors, setValidationErrors] = useState([]);
+  const [copied, setCopied] = useState(false);
   const textareaRef = useRef(null);
   const gutterRef = useRef(null);
+  const copyResetRef = useRef(null);
   const blocksRef = useRef(blocks);
   useEffect(() => {
     blocksRef.current = blocks;
@@ -2606,8 +2630,27 @@ function JsonDrawer({
       setValue(JSON.stringify(blocksRef.current, null, 2));
       setParseError(null);
       setValidationErrors([]);
+      setCopied(false);
     }
   }, [open]);
+  useEffect(
+    () => () => {
+      if (copyResetRef.current) {
+        clearTimeout(copyResetRef.current);
+      }
+    },
+    []
+  );
+  const handleCopy = () => {
+    navigator.clipboard?.writeText(value).then(() => {
+      setCopied(true);
+      if (copyResetRef.current) {
+        clearTimeout(copyResetRef.current);
+      }
+      copyResetRef.current = setTimeout(() => setCopied(false), 2e3);
+    }).catch(() => {
+    });
+  };
   const handleChange = (next) => {
     setValue(next);
     if (next.length > MAX_JSON_BYTES) {
@@ -2654,7 +2697,17 @@ function JsonDrawer({
       /* @__PURE__ */ jsx(SheetTitle, { children: "Block Kit JSON" }),
       /* @__PURE__ */ jsx(SheetDescription, { children: "Edits update the preview as you type. Parse errors show below." })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 overflow-hidden rounded-md border border-input bg-muted/30 shadow-sm focus-within:ring-1 focus-within:ring-ring", children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative flex flex-1 overflow-hidden rounded-md border border-input bg-muted/30 shadow-sm focus-within:ring-1 focus-within:ring-ring", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleCopy,
+          "aria-label": copied ? "Copied to clipboard" : "Copy JSON",
+          className: "absolute right-2 top-2 z-10 inline-flex items-center justify-center rounded-md border border-input bg-background/80 p-1.5 text-muted-foreground shadow-sm backdrop-blur transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 text-emerald-600" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5" })
+        }
+      ),
       /* @__PURE__ */ jsx(
         "div",
         {
@@ -2803,6 +2856,79 @@ var Label = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ j
   }
 ));
 Label.displayName = LabelPrimitive.Root.displayName;
+var POLL_INTERVAL_MS = 2500;
+var MAX_POLLS = 24;
+function useSlackSignIn(loadStatus, { open, enabled }) {
+  const [userStatus, setUserStatus] = useState(null);
+  const [polling, setPolling] = useState(false);
+  const loadStatusRef = useRef(loadStatus);
+  useEffect(() => {
+    loadStatusRef.current = loadStatus;
+  });
+  const refresh = useCallback(() => {
+    loadStatusRef.current().then(setUserStatus).catch(() => setUserStatus({ canSendAsUser: false }));
+  }, []);
+  const pollRef = useRef(null);
+  const stopPolling = useCallback(() => {
+    if (pollRef.current) {
+      clearInterval(pollRef.current);
+      pollRef.current = null;
+    }
+    setPolling(false);
+  }, []);
+  const startSignIn = useCallback(() => {
+    const url = userStatus?.oauthUrl;
+    if (!url || !isSafeHref(url)) {
+      return;
+    }
+    window.open(url, "_blank", "noopener,noreferrer");
+    stopPolling();
+    setPolling(true);
+    let tries = 0;
+    pollRef.current = setInterval(() => {
+      tries += 1;
+      loadStatusRef.current().then((next) => {
+        setUserStatus(next);
+        if (next.canSendAsUser) {
+          stopPolling();
+        }
+      }).catch(() => {
+      }).finally(() => {
+        if (tries >= MAX_POLLS) {
+          stopPolling();
+        }
+      });
+    }, POLL_INTERVAL_MS);
+  }, [userStatus, stopPolling]);
+  useEffect(() => {
+    if (!open || !enabled) {
+      setUserStatus(null);
+      stopPolling();
+      return;
+    }
+    setUserStatus(null);
+    refresh();
+    return stopPolling;
+  }, [open, enabled, refresh, stopPolling]);
+  useEffect(() => {
+    if (!open || !enabled) {
+      return;
+    }
+    const handler = () => refresh();
+    window.addEventListener("focus", handler);
+    return () => window.removeEventListener("focus", handler);
+  }, [open, enabled, refresh]);
+  return { userStatus, polling, startSignIn };
+}
+function SlackSignInButton({ onClick, polling }) {
+  return /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", className: "w-fit", onClick, disabled: polling, children: polling ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }),
+    " Waiting for Slack\u2026"
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    "Sign in with Slack ",
+    /* @__PURE__ */ jsx(ExternalLink, {})
+  ] }) });
+}
 function recentToResult(msg) {
   return {
     ok: true,
@@ -2816,6 +2942,17 @@ function recentToResult(msg) {
     iconUrl: msg.iconUrl
   };
 }
+function previewText(m) {
+  if (m.label) {
+    return m.label;
+  }
+  for (const b of m.blocks) {
+    if ((b.type === "header" || b.type === "section") && "text" in b && b.text && "text" in b.text) {
+      return b.text.text;
+    }
+  }
+  return `${m.blocks.length} block${m.blocks.length === 1 ? "" : "s"}`;
+}
 function LoadMessageDialog({
   open,
   onOpenChange,
@@ -2832,7 +2969,10 @@ function LoadMessageDialog({
   const [channelId, setChannelId] = useState("");
   const [recent, setRecent] = useState(null);
   const [recentError, setRecentError] = useState(null);
+  const [selectedRecent, setSelectedRecent] = useState(null);
+  const [signInPolling, setSignInPolling] = useState(false);
   const inputRef = useRef(null);
+  const signInPollRef = useRef(null);
   const onLoadMessageRef = useRef(onLoadMessage);
   const loadRecentMessagesRef = useRef(loadRecentMessages);
   const loadChannelsRef = useRef(loadChannels);
@@ -2851,6 +2991,7 @@ function LoadMessageDialog({
     setChannelId("");
     setRecent(null);
     setRecentError(null);
+    setSelectedRecent(null);
     if (!loadRecentMessagesRef.current) {
       setChannels([]);
       setChannelsError(null);
@@ -2878,6 +3019,7 @@ function LoadMessageDialog({
     }
     setRecent(null);
     setRecentError(null);
+    setSelectedRecent(null);
     let cancelled = false;
     loadRecentMessagesRef.current(channelId).then((list) => {
       if (!cancelled) {
@@ -2892,7 +3034,25 @@ function LoadMessageDialog({
       cancelled = true;
     };
   }, [open, channelId]);
+  const stopSignInPoll = useCallback(() => {
+    if (signInPollRef.current) {
+      clearInterval(signInPollRef.current);
+      signInPollRef.current = null;
+    }
+    setSignInPolling(false);
+  }, []);
+  useEffect(() => {
+    if (!open) {
+      stopSignInPoll();
+    }
+    return stopSignInPoll;
+  }, [open, stopSignInPoll]);
   const handleLoad = async () => {
+    stopSignInPoll();
+    if (selectedRecent) {
+      onLoaded(recentToResult(selectedRecent));
+      return;
+    }
     const trimmed = link.trim();
     if (!trimmed) {
       setStatus({ kind: "error", error: "Paste a Slack message link first." });
@@ -2905,12 +3065,42 @@ function LoadMessageDialog({
         onLoaded(result);
         return;
       }
-      setStatus({ kind: "not-editable", reason: result.reason, blocks: result.blocks });
+      setStatus({ kind: "not-editable", reason: result.reason, blocks: result.blocks, oauthUrl: result.oauthUrl });
     } catch (e) {
       setStatus({ kind: "error", error: e instanceof Error ? e.message : "Failed to load message." });
     }
   };
+  const startFindSignIn = (oauthUrl) => {
+    if (!isSafeHref(oauthUrl)) {
+      return;
+    }
+    const trimmed = link.trim();
+    if (!trimmed) {
+      return;
+    }
+    window.open(oauthUrl, "_blank", "noopener,noreferrer");
+    stopSignInPoll();
+    setSignInPolling(true);
+    let tries = 0;
+    const POLL_INTERVAL_MS2 = 2500;
+    const MAX_POLLS2 = 24;
+    signInPollRef.current = setInterval(() => {
+      tries += 1;
+      onLoadMessageRef.current({ link: trimmed }).then((result) => {
+        if (result.ok) {
+          stopSignInPoll();
+          onLoaded(result);
+        }
+      }).catch(() => {
+      }).finally(() => {
+        if (tries >= MAX_POLLS2) {
+          stopSignInPoll();
+        }
+      });
+    }, POLL_INTERVAL_MS2);
+  };
   const notEditable = status.kind === "not-editable" ? status : null;
+  const signInUrl = notEditable?.oauthUrl && isSafeHref(notEditable.oauthUrl) ? notEditable.oauthUrl : null;
   return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
     DialogContent,
     {
@@ -2921,7 +3111,7 @@ function LoadMessageDialog({
       },
       children: [
         /* @__PURE__ */ jsxs(DialogHeader, { children: [
-          /* @__PURE__ */ jsx(DialogTitle, { children: "Edit an existing message" }),
+          /* @__PURE__ */ jsx(DialogTitle, { children: "Find an existing message" }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1.5 text-left", children: [
             /* @__PURE__ */ jsx(DialogDescription, { children: hasRecent ? "Paste a Slack message link, or pick a recent message your app posted." : `Paste a Slack message link (Slack's "Copy link") to load its blocks for editing.` }),
             /* @__PURE__ */ jsxs(Tooltip, { children: [
@@ -2955,6 +3145,8 @@ function LoadMessageDialog({
                 value: link,
                 onChange: (e) => {
                   setLink(e.target.value);
+                  setSelectedRecent(null);
+                  stopSignInPoll();
                   if (status.kind !== "idle" && status.kind !== "loading") {
                     setStatus({ kind: "idle" });
                   }
@@ -2977,7 +3169,8 @@ function LoadMessageDialog({
               /* @__PURE__ */ jsx(AlertTriangle, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }),
               /* @__PURE__ */ jsx("span", { className: "flex-1", children: notEditable.reason })
             ] }),
-            /* @__PURE__ */ jsx(
+            signInUrl && /* @__PURE__ */ jsx(SlackSignInButton, { onClick: () => startFindSignIn(signInUrl), polling: signInPolling }),
+            notEditable.blocks && notEditable.blocks.length > 0 && /* @__PURE__ */ jsx(
               Button,
               {
                 type: "button",
@@ -3023,26 +3216,52 @@ function LoadMessageDialog({
             channelId && recent && recent.length === 0 && !recentError && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "No recent messages from this app in this channel." }),
             channelId && recent && recent.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex max-h-48 min-w-0 flex-col gap-1 overflow-y-auto", children: recent.map((m) => {
               const asUser = (m.editableVia ?? "bot") === "user";
+              const authorName = m.username || (asUser ? "You" : "App bot");
+              const safeIcon = isSafeImageSrc(m.iconUrl) ? m.iconUrl : void 0;
+              const isSelected = selectedRecent?.channelId === m.channelId && selectedRecent?.ts === m.ts;
               return /* @__PURE__ */ jsxs(
                 "button",
                 {
                   type: "button",
-                  onClick: () => onLoaded(recentToResult(m)),
-                  className: "flex min-w-0 flex-col gap-0.5 rounded-md border border-input bg-background px-3 py-2 text-left text-sm hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+                  "aria-pressed": isSelected,
+                  onClick: () => {
+                    setSelectedRecent(m);
+                    setLink("");
+                    if (status.kind !== "idle" && status.kind !== "loading") {
+                      setStatus({ kind: "idle" });
+                    }
+                  },
+                  className: cn(
+                    // Inset rings so the scroll container's overflow clip
+                    // can't shave the corners off the selected outline.
+                    "flex min-w-0 items-start gap-2.5 rounded-md border border-input bg-background px-3 py-2 text-left hover:bg-accent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
+                    isSelected && "border-primary! bg-accent ring-1 ring-inset ring-primary"
+                  ),
                   children: [
-                    /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-baseline justify-between gap-2", children: [
-                      /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded border px-1 py-px text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: asUser ? "You" : "Bot" }),
-                      /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-xs text-muted-foreground", children: [
-                        /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: new Date(Number(m.ts) * 1e3).toLocaleString() }),
+                    safeIcon ? /* @__PURE__ */ jsx("img", { src: safeIcon, alt: "", className: "h-9 w-9 shrink-0 rounded-md object-cover" }) : /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "aria-hidden": true,
+                        className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-muted text-sm font-semibold text-muted-foreground",
+                        children: authorName.charAt(0).toUpperCase()
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col gap-0.5", children: [
+                      /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [
+                        /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-semibold text-foreground", children: authorName }),
+                        /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded border px-1 py-px text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: asUser ? "You" : "Bot" })
+                      ] }),
+                      /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+                        new Date(Number(m.ts) * 1e3).toLocaleString(),
                         " ",
                         /* @__PURE__ */ jsxs("span", { className: "font-mono", children: [
                           "(",
                           m.ts,
                           ")"
                         ] })
-                      ] })
-                    ] }),
-                    m.label && /* @__PURE__ */ jsx("span", { className: "truncate text-sm text-muted-foreground", children: m.label })
+                      ] }),
+                      /* @__PURE__ */ jsx("span", { className: "line-clamp-2 text-sm text-foreground", children: previewText(m) })
+                    ] })
                   ]
                 },
                 `${m.channelId}:${m.ts}`
@@ -3052,7 +3271,15 @@ function LoadMessageDialog({
         ] }),
         /* @__PURE__ */ jsxs(DialogFooter, { children: [
           /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", onClick: () => onOpenChange(false), children: "Cancel" }),
-          /* @__PURE__ */ jsx(Button, { type: "button", onClick: handleLoad, disabled: status.kind === "loading" || !link.trim(), children: status.kind === "loading" ? "Loading\u2026" : "Load message" })
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              onClick: handleLoad,
+              disabled: status.kind === "loading" || !selectedRecent && !link.trim(),
+              children: status.kind === "loading" ? "Loading\u2026" : "Find message"
+            }
+          )
         ] })
       ]
     }
@@ -3271,18 +3498,13 @@ function SendDialog({
   const [channels, setChannels] = useState(null);
   const [channelsError, setChannelsError] = useState(null);
   const [channelId, setChannelId] = useState("");
-  const [userStatus, setUserStatus] = useState(null);
   const [sendAs, setSendAs] = useState("bot");
   const [status, setStatus] = useState({ kind: "idle" });
+  const { userStatus, polling, startSignIn } = useSlackSignIn(loadSendAsUserStatus, { open, enabled: true });
   const loadChannelsRef = useRef(loadChannels);
-  const loadSendAsUserStatusRef = useRef(loadSendAsUserStatus);
   useEffect(() => {
     loadChannelsRef.current = loadChannels;
-    loadSendAsUserStatusRef.current = loadSendAsUserStatus;
   });
-  const refreshSendAsUser = useCallback(() => {
-    loadSendAsUserStatusRef.current().then(setUserStatus).catch(() => setUserStatus({ canSendAsUser: false }));
-  }, []);
   useEffect(() => {
     if (!open) {
       return;
@@ -3290,7 +3512,6 @@ function SendDialog({
     setStatus({ kind: "idle" });
     setChannels(null);
     setChannelsError(null);
-    setUserStatus(null);
     setChannelId("");
     setSendAs("bot");
     let cancelled = false;
@@ -3306,19 +3527,10 @@ function SendDialog({
       }
       setChannelsError(e instanceof Error ? e.message : "Failed to load channels");
     });
-    refreshSendAsUser();
     return () => {
       cancelled = true;
     };
-  }, [open, refreshSendAsUser]);
-  useEffect(() => {
-    if (!open) {
-      return;
-    }
-    const handler = () => refreshSendAsUser();
-    window.addEventListener("focus", handler);
-    return () => window.removeEventListener("focus", handler);
-  }, [open, refreshSendAsUser]);
+  }, [open]);
   const handleSubmit = async () => {
     if (!channelId) {
       setStatus({ kind: "error", error: "Please pick a channel." });
@@ -3372,22 +3584,9 @@ function SendDialog({
             ]
           }
         ),
-        userStatus && !userStatus.canSendAsUser && userStatus.oauthUrl && isSafeHref(userStatus.oauthUrl) && /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
-          /* @__PURE__ */ jsxs(
-            "a",
-            {
-              href: userStatus.oauthUrl,
-              target: "_blank",
-              rel: "noopener noreferrer",
-              className: "inline-flex items-center gap-1 text-primary hover:underline",
-              children: [
-                "Sign in with Slack ",
-                /* @__PURE__ */ jsx(ExternalLink, { className: "h-3 w-3" })
-              ]
-            }
-          ),
-          " ",
-          "to post as yourself."
+        userStatus && !userStatus.canSendAsUser && userStatus.oauthUrl && isSafeHref(userStatus.oauthUrl) && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Connect your Slack account to post as yourself." }),
+          /* @__PURE__ */ jsx(SlackSignInButton, { onClick: startSignIn, polling })
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
@@ -9161,7 +9360,7 @@ function Toolbar2({
   onOpenLoad,
   onOpenUpdate,
   onExitEdit,
-  loadButtonLabel = "Load message",
+  loadButtonLabel = "Find message",
   updateButtonLabel = "Review & update"
 }) {
   const activeTheme = THEME_OPTIONS.find((t) => t.value === previewTheme) ?? THEME_OPTIONS[0];
@@ -9445,33 +9644,13 @@ function UpdateDialog({
   onShowIssues
 }) {
   const asUser = target.editableVia === "user";
-  const [userStatus, setUserStatus] = useState(null);
   const [status, setStatus] = useState({ kind: "idle" });
-  const loadSendAsUserStatusRef = useRef(loadSendAsUserStatus);
+  const { userStatus, polling, startSignIn } = useSlackSignIn(loadSendAsUserStatus, { open, enabled: asUser });
   useEffect(() => {
-    loadSendAsUserStatusRef.current = loadSendAsUserStatus;
-  });
-  const refreshSendAsUser = useCallback(() => {
-    loadSendAsUserStatusRef.current().then(setUserStatus).catch(() => setUserStatus({ canSendAsUser: false }));
-  }, []);
-  useEffect(() => {
-    if (!open) {
-      return;
-    }
-    setStatus({ kind: "idle" });
-    if (asUser) {
-      setUserStatus(null);
-      refreshSendAsUser();
-    }
-  }, [open, asUser, refreshSendAsUser]);
-  useEffect(() => {
-    if (!open || !asUser) {
-      return;
+    if (open) {
+      setStatus({ kind: "idle" });
     }
-    const handler = () => refreshSendAsUser();
-    window.addEventListener("focus", handler);
-    return () => window.removeEventListener("focus", handler);
-  }, [open, asUser, refreshSendAsUser]);
+  }, [open]);
   const needsSignIn = asUser && userStatus !== null && !userStatus.canSendAsUser;
   const handleSubmit = async () => {
     setStatus({ kind: "updating" });
@@ -9506,22 +9685,9 @@ function UpdateDialog({
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
         /* @__PURE__ */ jsx(Label, { children: "Posting as" }),
         /* @__PURE__ */ jsx("p", { className: "flex h-9 items-center rounded-md border border-input bg-muted px-3 text-sm text-muted-foreground", children: asUser ? "Your account" : "App bot" }),
-        needsSignIn && userStatus?.oauthUrl && isSafeHref(userStatus.oauthUrl) && /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
-          /* @__PURE__ */ jsxs(
-            "a",
-            {
-              href: userStatus.oauthUrl,
-              target: "_blank",
-              rel: "noopener noreferrer",
-              className: "inline-flex items-center gap-1 text-primary hover:underline",
-              children: [
-                "Sign in with Slack ",
-                /* @__PURE__ */ jsx(ExternalLink, { className: "h-3 w-3" })
-              ]
-            }
-          ),
-          " ",
-          "to update your own message."
+        needsSignIn && userStatus?.oauthUrl && isSafeHref(userStatus.oauthUrl) && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Connect your Slack account to edit your own messages." }),
+          /* @__PURE__ */ jsx(SlackSignInButton, { onClick: startSignIn, polling })
         ] }),
         needsSignIn && !userStatus?.oauthUrl && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Sign in with Slack to update your own message." })
       ] }),