gloomberb 0.17.6 → 0.18.0

package/src/plugins/builtin/chat/content/layout-metrics.ts

@@ -49,6 +49,7 @@ export function resolveChatContentHeightMetrics({
   replyTo,
   stackHeader = false,
   draftAttachmentCount = 0,
+  draftLinkCount = 0,
   promptRows = 0,
 }: {
   canSend: boolean;
@@ -61,6 +62,7 @@ export function resolveChatContentHeightMetrics({
   /** The narrow stack's Back row is drawn above the transcript. */
   stackHeader?: boolean;
   draftAttachmentCount?: number;
+  draftLinkCount?: number;
   /** Terminal rows the handle prompt above the composer takes. */
   promptRows?: number;
 }) {
@@ -77,6 +79,7 @@ export function resolveChatContentHeightMetrics({
     nativePaneChrome,
     replyTo,
     draftAttachmentCount,
+    draftLinkCount,
     promptRows,
   });
   // In the terminal the Back row replaces the top rule.

package/src/plugins/builtin/chat/content/shortcuts.ts

@@ -1,11 +1,13 @@
-import type { MutableRefObject } from "react";
+import { useState, type MutableRefObject } from "react";
 import { useShortcut } from "../../../../react/input";
 import type { ScrollBoxRenderable } from "../../../../ui";
 import type { ChatMessage } from "../../../../api-client";
 import { countEscapeTowardClose } from "../../../../utils/double-escape-close";
 import { isPlainKey } from "../../../../utils/keyboard";
+import { createOneShot } from "../../../../utils/one-shot";
 import { scrollToBottom } from "../layout";
 import type { ChatSidebarRow } from "../sidebar-rows";
+import type { ComposerShareLink } from "../pane-links/composer";
 
 export function useChatContentShortcuts({
   beginEditLatestMessage,
@@ -42,6 +44,8 @@ export function useChatContentShortcuts({
   returnToComposer,
   retryMessage,
   removeLastDraftAttachment,
+  draftLinksRef,
+  removeLastDraftLink,
   scrollRef,
   selectedIdx,
   setFollowMessages,
@@ -88,6 +92,10 @@ export function useChatContentShortcuts({
   retryMessage: (index: number) => void;
   /** Drops the last image waiting in the composer; false when there is none. */
   removeLastDraftAttachment: () => boolean;
+  /** The share links waiting as chips above the field: with any, the composer is not empty. */
+  draftLinksRef: MutableRefObject<ComposerShareLink[]>;
+  /** Drops the last of them; false when there is none. */
+  removeLastDraftLink: () => boolean;
   scrollRef: MutableRefObject<ScrollBoxRenderable | null>;
   selectedIdx: number;
   setFollowMessages: (followMessages: boolean) => void;
@@ -99,6 +107,10 @@ export function useChatContentShortcuts({
   sidebarCursorRow: ChatSidebarRow | null;
   sidebarFocusedRef: MutableRefObject<boolean>;
 }) {
+  // A terminal says a key is held only where its keyboard protocol can;
+  // elsewhere a held Backspace is a stream of presses, told apart by the gaps.
+  const [backspaceShot] = useState(createOneShot);
+
   useShortcut((event) => {
     if (!focused || commandBarOpen || !inputFocused || !mentionMenuOpen) return;
     if (
@@ -200,23 +212,29 @@ export function useChatContentShortcuts({
         } else {
           // Leaving an empty composer is the first half of a double-Esc close;
           // leaving a draft is not, so a quick Esc Esc never closes over it.
-          if (inputValueRef.current.trim().length === 0) countEscapeTowardClose(event);
+          if (inputValueRef.current.trim().length === 0 && draftLinksRef.current.length === 0) countEscapeTowardClose(event);
           blurInput();
         }
         return;
       }
 
-      // The terminal's image rows have no focus of their own: Backspace in an
-      // empty composer takes the last one back out.
-      if (
-        !nativePaneChrome
-        && isPlainKey(event, "backspace")
-        && inputValueRef.current.length === 0
-        && removeLastDraftAttachment()
-      ) {
-        event.preventDefault?.();
-        event.stopPropagation?.();
-        return;
+      // A pasted link is one chip, and the terminal's image rows have no
+      // focus of their own: Backspace in an empty composer takes the nearest
+      // one back out, the links right above the field first. One for each
+      // new press: a Backspace held to clear the text, or held on after one
+      // went, takes out nothing more. Every press counts toward the gap.
+      if (isPlainKey(event, "backspace")) {
+        const freshPress = nativePaneChrome ? event.repeat !== true : !backspaceShot.refuses({ repeat: event.repeat });
+        if (freshPress && !nativePaneChrome) backspaceShot.end();
+        if (
+          freshPress
+          && inputValueRef.current.length === 0
+          && (removeLastDraftLink() || (!nativePaneChrome && removeLastDraftAttachment()))
+        ) {
+          event.preventDefault?.();
+          event.stopPropagation?.();
+          return;
+        }
       }
 
       const verticalDirection = event.name === "up" || event.name === "down" ? event.name : null;
@@ -225,6 +243,7 @@ export function useChatContentShortcuts({
         && canSend
         && isPlainKey(event, "up")
         && inputValueRef.current.trim().length === 0
+        && draftLinksRef.current.length === 0
         && beginEditLatestMessage({ deferFocus: true })
       ) {
         event.preventDefault?.();

package/src/plugins/builtin/chat/content/snapshot.ts

@@ -3,6 +3,7 @@ import type { TextareaRenderable } from "../../../../ui";
 import type { ChatMessage } from "../../../../api-client";
 import type { ChatContentController } from "./types";
 import type { ChatPrependAnchor } from "./scroll";
+import { composerViewOfDraft, type ComposerShareLink } from "../pane-links/composer";
 
 type ChatSnapshot = ReturnType<ChatContentController["getSnapshot"]>;
 
@@ -19,6 +20,10 @@ interface ChatSnapshotStateArgs {
   inputRef: MutableRef<TextareaRenderable | null>;
   inputValueRef: MutableRef<string>;
   onComposerStateChange?: (draft: string, cursorOffset: number) => void;
+  /** The share links at the end of the saved draft, drawn as chips above the field. */
+  draftLinksRef: MutableRef<ComposerShareLink[]>;
+  /** Sets the chips; also updates `draftLinksRef`. */
+  onDraftLinksChange: (links: ComposerShareLink[]) => void;
   prependAnchorRef: MutableRef<ChatPrependAnchor | null>;
   setFollowMessages: Dispatch<SetStateAction<boolean>>;
   setSelectedIdx: Dispatch<SetStateAction<number>>;
@@ -26,30 +31,42 @@ interface ChatSnapshotStateArgs {
   useDefaultControllerChannel: boolean;
 }
 
+function sameLinks(a: readonly ComposerShareLink[], b: readonly ComposerShareLink[]): boolean {
+  return a.length === b.length && a.every((link, index) => link.url === b[index]!.url);
+}
+
 function syncDraftFromSnapshot({
   applyingExternalDraftRef,
+  draftLinksRef,
   inputRef,
   inputValueRef,
   onComposerStateChange,
+  onDraftLinksChange,
   snapshot,
   updateComposerRows,
 }: {
   applyingExternalDraftRef: MutableRef<boolean>;
+  draftLinksRef: MutableRef<ComposerShareLink[]>;
   inputRef: MutableRef<TextareaRenderable | null>;
   inputValueRef: MutableRef<string>;
   onComposerStateChange?: (draft: string, cursorOffset: number) => void;
+  onDraftLinksChange: (links: ComposerShareLink[]) => void;
   snapshot: ChatSnapshot;
   updateComposerRows: (draft: string) => void;
 }) {
-  if (inputValueRef.current !== snapshot.draft) {
-    inputValueRef.current = snapshot.draft;
-    updateComposerRows(snapshot.draft);
-    onComposerStateChange?.(snapshot.draft, snapshot.draft.length);
+  // Every snapshot carries the draft, this composer's own included: only one
+  // that changed elsewhere is read afresh, never what is being typed.
+  const { text, links } = composerViewOfDraft(snapshot.draft, { text: inputValueRef.current, links: draftLinksRef.current });
+  if (!sameLinks(draftLinksRef.current, links)) onDraftLinksChange(links);
+  if (inputValueRef.current !== text) {
+    inputValueRef.current = text;
+    updateComposerRows(text);
+    onComposerStateChange?.(text, text.length);
   }
   const textarea = inputRef.current;
-  if (textarea && textarea.editBuffer.getText() !== snapshot.draft) {
+  if (textarea && textarea.editBuffer.getText() !== text) {
     applyingExternalDraftRef.current = true;
-    textarea.setText(snapshot.draft);
+    textarea.setText(text);
     applyingExternalDraftRef.current = false;
   }
 }
@@ -69,6 +86,8 @@ export function useChatSnapshotState({
   inputRef,
   inputValueRef,
   onComposerStateChange,
+  draftLinksRef,
+  onDraftLinksChange,
   prependAnchorRef,
   setFollowMessages,
   setSelectedIdx,
@@ -128,9 +147,11 @@ export function useChatSnapshotState({
       setDraftAttachments(snapshot.draftAttachments);
       syncDraftFromSnapshot({
         applyingExternalDraftRef,
+        draftLinksRef,
         inputRef,
         inputValueRef,
         onComposerStateChange,
+        onDraftLinksChange,
         snapshot,
         updateComposerRows,
       });
@@ -149,9 +170,11 @@ export function useChatSnapshotState({
     applyingExternalDraftRef,
     channelId,
     controller,
+    draftLinksRef,
     inputRef,
     inputValueRef,
     onComposerStateChange,
+    onDraftLinksChange,
     prependAnchorRef,
     setFollowMessages,
     setSelectedIdx,

package/src/plugins/builtin/chat/ghost-user.ts

@@ -1,4 +1,4 @@
-import type { ChatUserSummary } from "../../../api-client";
+import type { ChatMessage, ChatUserSummary } from "../../../api-client";
 
 /**
  * A person on the Gloom Discord with no linked Gloom account. Their messages
@@ -18,14 +18,22 @@ export function isManagedBot(user: Pick<ChatUserSummary, "accountType"> | null |
 
 /**
  * A reply quotes its author by name only, so whether that author is a managed
- * assistant comes from the users the pane has seen.
+ * assistant comes from the users the pane has seen. A quoted announcement is
+ * Gloom speaking, not a bot, when the pane has it to tell.
  */
 export function isQuotedAuthorManagedBot(
   quoted: { user: { username?: string | null } },
   userByUsername: ReadonlyMap<string, ChatUserSummary>,
+  /** The quoted message, when the pane holds it. */
+  findQuoted?: () => Pick<ChatMessage, "announcement"> | null | undefined,
 ): boolean {
   const username = quoted.user.username?.toLowerCase();
-  return !!username && isManagedBot(userByUsername.get(username));
+  return !!username && isManagedBot(userByUsername.get(username)) && !findQuoted?.()?.announcement;
+}
+
+/** A message among those the pane holds, by id. */
+export function heldMessage(messages: readonly ChatMessage[], id: string | null | undefined): ChatMessage | null {
+  return id ? messages.find((message) => message.id === id) ?? null : null;
 }
 
 /** The name a message is signed with: the username, or for a ghost that has none the Discord name it carries. */

package/src/plugins/builtin/chat/layout.ts

@@ -27,6 +27,8 @@ export function isGroupedWithPrevious(messages: ChatMessage[], index: number) {
   const prev = messages[index - 1]!;
   const curr = messages[index]!;
   if (prev.user.id !== curr.user.id) return false;
+  // An announcement is a card of its own, with its own header.
+  if (prev.announcement || curr.announcement) return false;
   // The Discord tag sits on a header, so a linked person's Discord and app messages do not share one.
   if ((prev.origin === "discord") !== (curr.origin === "discord")) return false;
   return new Date(curr.createdAt).getTime() - new Date(prev.createdAt).getTime() < MESSAGE_GROUP_THRESHOLD_MS;

package/src/plugins/builtin/chat/message/desktop.tsx

@@ -1,12 +1,13 @@
 import { memo } from "react";
 import { Box, Text } from "../../../../ui";
+import { accentRuleOverlayStyle } from "../../../../components/ui/quote";
 import { useThemeColors } from "../../../../theme/theme-context";
 import { t } from "../../../../i18n";
 import { useAppLanguage } from "../../../../i18n/react";
 import { normalizeInlinePreview } from "../layout";
 import { DesktopChatMessageImages } from "../attachments/desktop";
 import { chatReplyQuoteText } from "../attachments/model";
-import { chatAuthorName, isQuotedAuthorManagedBot } from "../ghost-user";
+import { chatAuthorName, heldMessage, isQuotedAuthorManagedBot } from "../ghost-user";
 import { ChatBotIcon } from "./person-icons";
 import { ChatMessageActions, ChatMessageHeader, chatHeaderFitsEveryIcon } from "./header";
 import { MESSAGE_ACTION_WIDTH } from "../layout";
@@ -16,7 +17,7 @@ import { DesktopChatMessageText } from "./inline-tokens";
 import { DesktopChatPaneChip } from "./pane-chip";
 import { chatMessagePaneLinks } from "../pane-links/model";
 import { useSlowPendingSend } from "./pending-send";
-import { chatHighlightBg, getChatMessageRenderState } from "./render-state";
+import { chatAnnouncementBg, chatHighlightBg, getChatMessageRenderState } from "./render-state";
 import type { ChatMessageBaseProps } from "./types";
 
 const DESKTOP_MESSAGE_RIGHT_PADDING = 2;
@@ -99,7 +100,7 @@ export const DesktopChatMessage = memo(function DesktopChatMessage({
   ) : null;
   const actionProps = { state, index, beginReplyTo, beginEditMessage, retryMessage, reactAction, reactionPickerOpen };
   const { links: paneLinks, content } = chatMessagePaneLinks(msg);
-  // A share posted with its picture (what Share > Post to chat sends): the
+  // A share link sent with one picture, such as a pasted screenshot: the
   // picture is the chip's thumbnail rather than a second copy below it.
   const chipPreview = paneLinks.length === 1 && paneLinks[0]!.kind === "share"
     && msg.attachments?.length === 1 && !msg.attachmentReview
@@ -131,7 +132,12 @@ export const DesktopChatMessage = memo(function DesktopChatMessage({
       data-selected={state.isSelected ? "true" : "false"}
       data-hovered={state.isHovered ? "true" : "false"}
       data-highlighted={state.isHighlighted ? "true" : "false"}
-      style={{ "--chat-highlight-bg": chatHighlightBg(themeColors), minWidth: 0 }}
+      data-announcement={state.isAnnouncement ? "true" : undefined}
+      style={{
+        "--chat-highlight-bg": chatHighlightBg(themeColors),
+        minWidth: 0,
+        ...(state.isAnnouncement ? { position: "relative", "--chat-highlight-rest": chatAnnouncementBg("desktop") } : {}),
+      }}
     >
       {msg.replyTo && (
         <Box
@@ -148,7 +154,7 @@ export const DesktopChatMessage = memo(function DesktopChatMessage({
         >
           {/* One line: the quoted text ends in an ellipsis, the whole message is a click away. */}
           <Text fg={state.replyMetaColor} style={{ flexShrink: 0, whiteSpace: "pre" }}>{`${t("reply")} `}</Text>
-          {isQuotedAuthorManagedBot(msg.replyTo, userByUsername) ? (
+          {isQuotedAuthorManagedBot(msg.replyTo, userByUsername, () => heldMessage(messages, msg.replyToId)) ? (
             // The bot's icon stands where the colon would.
             <>
               <Text fg={state.replyAuthorColor} style={{ flexShrink: 0, whiteSpace: "pre" }}>{msg.replyTo.user.username}</Text>
@@ -262,6 +268,8 @@ export const DesktopChatMessage = memo(function DesktopChatMessage({
           />
         </Box>
       )}
+      {/* Last, so it draws over the rows' backgrounds. */}
+      {state.isAnnouncement && <Box data-gloom-role="chat-announcement-rule" style={accentRuleOverlayStyle()} />}
     </Box>
   );
 });

package/src/plugins/builtin/chat/message/header.tsx

@@ -3,7 +3,7 @@ import { Box, Text, useUiCapabilities, type BoxRenderable } from "../../../../ui
 import { t } from "../../../../i18n";
 import { displayWidth } from "../../../../utils/format";
 import { chatAuthorName, isDiscordGhost } from "../ghost-user";
-import { Button } from "../../../../components/ui";
+import { Badge, Button } from "../../../../components/ui";
 import { MESSAGE_ACTION_WIDTH } from "../layout";
 import { CHAT_PERSON_ICON_WIDTH, chatPersonIcons, fitChatPersonIcons } from "../people";
 import { ChatPersonIcons } from "./person-icons";
@@ -90,7 +90,7 @@ const WIDEST_HEADER_ACTIONS = 1 + MESSAGE_ACTION_WIDTH * 3;
  * no longer depend on the width, so a row need not draw again as it changes.
  */
 export function chatHeaderFitsEveryIcon(msg: ChatMessageBaseProps["msg"], rowWidth: number): boolean {
-  const icons = chatPersonIcons(msg.user).length;
+  const icons = chatHeaderIcons(msg).length;
   if (icons === 0) return true;
   const spare = rowWidth - 1 - displayWidth(chatAuthorName(msg.user))
     - (msg.origin === "discord" ? 8 : 0)
@@ -99,6 +99,19 @@ export function chatHeaderFitsEveryIcon(msg: ChatMessageBaseProps["msg"], rowWid
   return spare >= icons * CHAT_PERSON_ICON_WIDTH;
 }
 
+/** The mark an announcement carries beside its author, in place of the author's icons. */
+const ANNOUNCEMENT_LABEL = "Announcement";
+
+/** Cells the mark takes in the terminal: a cell of space, then the chip with a cell inside each edge. */
+function announcementMarkWidth(): number {
+  return 1 + displayWidth(t(ANNOUNCEMENT_LABEL)) + 2;
+}
+
+/** An announcement is signed by its mark alone: Gloom's account is not a bot speaking. */
+function chatHeaderIcons(msg: ChatMessageBaseProps["msg"]) {
+  return msg.announcement ? [] : chatPersonIcons(msg.user);
+}
+
 /**
  * Author, send status and inline actions for the first message of a group.
  *
@@ -106,7 +119,9 @@ export function chatHeaderFitsEveryIcon(msg: ChatMessageBaseProps["msg"], rowWid
  * the row is pointed at or selected, after the status, in the space the row
  * already has: nothing before them moves, and a row that is not pointed at
  * keeps no room for them. A row too narrow for its icons, its status and its
- * actions drops Pro first, then the role, and never cuts the name.
+ * actions drops Pro first, then the role, and never cuts the name. An
+ * announcement carries its mark beside the name instead, dropped only by a
+ * terminal row too narrow for it (the band and its rule still say what it is).
  */
 export function ChatMessageHeader({
   msg,
@@ -141,7 +156,8 @@ export function ChatMessageHeader({
       - (msg.origin === "discord" ? 8 : 0)
       - 1 - displayWidth(state.headerStatus)
       - state.actionsWidth;
-  const icons = chatPersonIcons(msg.user);
+  const icons = chatHeaderIcons(msg);
+  const showAnnouncementMark = msg.announcement === true && spare >= announcementMarkWidth();
   const besideName = fitChatPersonIcons(icons.filter((icon) => icon.id === "bot"), spare);
   const onPoint = fitChatPersonIcons(icons.filter((icon) => icon.id !== "bot"), spare - besideName.length * CHAT_PERSON_ICON_WIDTH);
   // An open reaction picker keeps the row's actions, so it keeps what stands before them too.
@@ -177,6 +193,12 @@ export function ChatMessageHeader({
         </Text>
       </Box>
       <ChatPersonIcons icons={besideName} selectedColor={iconColor} terminalTarget={profileTarget} />
+      {showAnnouncementMark && (
+        <>
+          <Text fg={state.headerStatusColor}> </Text>
+          <Badge label={ANNOUNCEMENT_LABEL} tone="accent" />
+        </>
+      )}
       {msg.origin === "discord" && <Text fg={state.originTagColor}> Discord</Text>}
       <Text fg={state.headerStatusColor}> {state.headerStatus}</Text>
       {showOnPoint && <ChatPersonIcons icons={onPoint} selectedColor={iconColor} terminalTarget={profileTarget} />}

package/src/plugins/builtin/chat/message/pane-chip.tsx

@@ -1,11 +1,15 @@
 import { createElement, useState } from "react";
 import type { ChatAttachment } from "../../../../api-client";
+import { IconButton } from "../../../../components/ui";
+import { tf } from "../../../../i18n";
 import { Box, Text, TextAttributes } from "../../../../ui";
 import { blendHex, colors } from "../../../../theme/colors";
 import { useThemeColors } from "../../../../theme/theme-context";
 import { formatInlinePreview } from "../layout";
 import { wirePaneTarget, type ChatMessagePaneLink } from "../pane-links/model";
 import { chatPaneLinkPane, useSharePreview } from "../pane-links/previews";
+import type { ComposerShareLink } from "../pane-links/composer";
+import { DESKTOP_DRAFT_STRIP_STYLE } from "../attachments/desktop";
 
 /**
  * A chip for something a message opens in the terminal: a shared pane (its
@@ -62,6 +66,7 @@ export function DesktopChatPaneChip({
   dimmed,
   onOpen,
   onPreviewError,
+  onRemove,
 }: {
   link: ChatMessagePaneLink;
   /** The picture the sender posted with the link: the chip's thumbnail. */
@@ -70,6 +75,8 @@ export function DesktopChatPaneChip({
   onOpen: (link: ChatMessagePaneLink) => void;
   /** The picture did not load, perhaps because its signed link expired. */
   onPreviewError?: (attachment: ChatAttachment) => void;
+  /** In the composer: the x at the chip's end that takes the link back out. */
+  onRemove?: () => void;
 }) {
   const themeColors = useThemeColors();
   const content = useChatPaneChipContent(link);
@@ -138,34 +145,36 @@ export function DesktopChatPaneChip({
     },
   }, text);
   const label = [content.title, content.detail].filter(Boolean).join(", ");
-  return createElement("button", {
-    type: "button",
-    "data-gloom-role": "chat-pane-chip",
-    "data-gloom-pane-link": link.kind === "share" ? `share:${link.id}` : link.link.kind,
+  const text = compact
+    ? createElement("span", {
+      key: "text",
+      style: { display: "flex", flexDirection: "row", gap: 6, minWidth: 0, alignItems: "baseline" },
+    }, line(content.title, "title"), content.detail ? line(content.detail, "detail") : null)
+    : createElement("span", {
+      key: "text",
+      style: { display: "flex", flexDirection: "column", justifyContent: "center", minWidth: 0, flex: "1 1 auto", gap: 1 },
+    }, line(content.title, "title"), line(content.detail, "detail"));
+  const frame = {
+    boxSizing: "border-box",
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: compact ? 6 : 8,
+    height,
+    width: compact ? "auto" : `min(100%, ${CHIP_MAX_WIDTH}px)`,
+    maxWidth: "100%",
+    flex: "none",
+    margin: "2px 0",
+    padding: compact ? "0 10px 0 5px" : "4px 10px 4px 4px",
+    border: `1px solid ${border}`,
+    borderRadius: 6,
+    background: surface,
+    opacity: dimmed ? 0.6 : 1,
+    overflow: "hidden",
+  };
+  const pressable = {
     "aria-label": label || undefined,
     title: link.kind === "share" ? link.url : undefined,
-    style: {
-      boxSizing: "border-box",
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center",
-      gap: compact ? 6 : 8,
-      height,
-      width: compact ? "auto" : `min(100%, ${CHIP_MAX_WIDTH}px)`,
-      maxWidth: "100%",
-      flex: "none",
-      margin: "2px 0",
-      padding: compact ? "0 10px 0 5px" : "4px 10px 4px 4px",
-      border: `1px solid ${border}`,
-      borderRadius: 6,
-      background: surface,
-      opacity: dimmed ? 0.6 : 1,
-      cursor: "pointer",
-      font: "inherit",
-      color: "inherit",
-      textAlign: "left",
-      overflow: "hidden",
-    },
     onMouseEnter: () => setHovered(true),
     onMouseLeave: () => setHovered(false),
     // A press on the chip is not a press on the row behind it.
@@ -174,15 +183,102 @@ export function DesktopChatPaneChip({
       event.stopPropagation();
       onOpen(link);
     },
-  }, lead, compact
-    ? createElement("span", {
-      key: "text",
-      style: { display: "flex", flexDirection: "row", gap: 6, minWidth: 0, alignItems: "baseline" },
-    }, line(content.title, "title"), content.detail ? line(content.detail, "detail") : null)
-    : createElement("span", {
-      key: "text",
-      style: { display: "flex", flexDirection: "column", justifyContent: "center", minWidth: 0, flex: "1 1 auto", gap: 1 },
-    }, line(content.title, "title"), line(content.detail, "detail")));
+  };
+  const buttonReset = { cursor: "pointer", font: "inherit", color: "inherit", textAlign: "left" };
+  const dataAttributes = {
+    "data-gloom-role": "chat-pane-chip",
+    "data-gloom-pane-link": link.kind === "share" ? `share:${link.id}` : link.link.kind,
+  };
+  if (!onRemove) {
+    return createElement("button", { type: "button", ...dataAttributes, ...pressable, style: { ...frame, ...buttonReset } }, lead, text);
+  }
+  // The same chip with its x inside the frame, where a waiting image keeps its own.
+  return createElement("div", { ...dataAttributes, style: { ...frame, paddingRight: 4 } },
+    createElement("button", {
+      key: "open",
+      type: "button",
+      ...pressable,
+      style: {
+        ...buttonReset,
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        gap: frame.gap,
+        flex: "1 1 auto",
+        minWidth: 0,
+        height: "100%",
+        padding: 0,
+        border: "none",
+        background: "transparent",
+      },
+    }, lead, text),
+    <IconButton key="remove" icon="close" label={tf("Remove {name}", { name: content.title })} onPress={onRemove} />);
+}
+
+/**
+ * The share links waiting in the composer, above the field: the chips the
+ * message will show, each with its x. A draft from an older app can hold the
+ * same link twice, so a chip is known by its place: its x takes out that one.
+ */
+export function DesktopComposerPaneChips({
+  links,
+  onOpen,
+  onRemove,
+}: {
+  links: readonly ComposerShareLink[];
+  onOpen: (link: ChatMessagePaneLink) => void;
+  /** Takes out the chip at this place in `links`. */
+  onRemove: (index: number) => void;
+}) {
+  if (links.length === 0) return null;
+  return (
+    <Box flexDirection="column" data-gloom-role="chat-draft-links" style={DESKTOP_DRAFT_STRIP_STYLE}>
+      {links.map((link, index) => (
+        <DesktopChatPaneChip key={`${index}:${link.id}`} link={link} dimmed={false} onOpen={onOpen} onRemove={() => onRemove(index)} />
+      ))}
+    </Box>
+  );
+}
+
+/** The terminal's composer rows for waiting share links: the chip a message draws, then its x at the row's end. */
+export function TerminalComposerPaneChips({
+  links,
+  width,
+  onOpen,
+  onRemove,
+}: {
+  links: readonly ComposerShareLink[];
+  width: number;
+  onOpen: (link: ChatMessagePaneLink) => void;
+  /** Takes out the chip at this place in `links`, as on the desktop. */
+  onRemove: (index: number) => void;
+}) {
+  // Lined up with the field's text after its prompt, as a message's chips line up with its text.
+  const inset = 3;
+  const removeWidth = 3;
+  return (
+    <>
+      {links.map((link, index) => (
+        <Box key={`${index}:${link.id}`} width={width} height={1} flexDirection="row">
+          <Box width={inset} />
+          <TerminalChatPaneChip
+            link={link}
+            width={Math.max(1, width - inset - removeWidth - 1)}
+            selected={false}
+            selectedTextColor={colors.textBright}
+            onOpen={onOpen}
+          />
+          <Box flexGrow={1} />
+          <TerminalComposerChipRemove link={link} onRemove={() => onRemove(index)} />
+        </Box>
+      ))}
+    </>
+  );
+}
+
+function TerminalComposerChipRemove({ link, onRemove }: { link: ComposerShareLink; onRemove: () => void }) {
+  const content = useChatPaneChipContent(link);
+  return <IconButton icon="close" label={tf("Remove {name}", { name: content.title })} onPress={onRemove} />;
 }
 
 /** One row in the terminal: the pane's letter, the title and the pane, cut to the line. */