@sentry/junior-dashboard 0.279.0 → 0.280.0

package/src/client/conversations/ConversationPage.tsx

@@ -1,25 +1,32 @@
 import {
   useCallback,
   useEffect,
+  useEffectEvent,
   useMemo,
   useRef,
   useState,
   useSyncExternalStore,
   type ReactNode,
 } from "react";
-import { useSearchParams } from "react-router";
+import { useNavigate, useSearchParams } from "react-router";
 import type {
   ConversationDetailReport,
   ConversationFeed,
+  ConversationReportEvent,
 } from "@sentry/junior/api/schema";
 
 import type { ConversationData } from "./queries";
 import {
   useArchiveConversation,
+  type ArchivedFromConversationState,
   type PendingArchiveConversationUpdate,
 } from "./conversationArchive";
 import { usePinConversation } from "./usePinConversation";
 import { conversationIsResponding } from "./transcript";
+import {
+  ConversationCatchUpContext,
+  useConversationCatchUp,
+} from "./conversationCatchUpState";
 import { buildConversationMarkdown } from "../markdownExport";
 import { CopyButton } from "../components/CopyButton";
 import {
@@ -39,6 +46,7 @@ import {
   memoryAnchorKey,
   useConversationMemories,
   type ConversationMemoryState,
+  type MemoryJump,
   type OpenMemoryPopover,
 } from "./conversationMemory";
 import { ConversationEventDetails } from "./ConversationEventDetails";
@@ -57,14 +65,13 @@ import {
 import { cn } from "../styles";
 import { ConversationForkLinks } from "./ConversationForkLinks";
 import { ConversationAgentTree } from "./ConversationAgentTree";
+import { conversationContextTags } from "./ConversationContextTags";
 import { conversationLinks } from "./ConversationLinkedWork";
 import {
   ConversationAnnotations,
   conversationCost,
-  conversationLocation,
   ConversationPrivacyChip,
   ConversationStats,
-  hasConversationAnnotations,
   hasConversationStats,
 } from "./ConversationMeta";
 import {
@@ -100,9 +107,10 @@ import {
 import { TranscriptLoading } from "./TranscriptLoading";
 import { recordTranscriptShown } from "../sentry";
 import {
-  useUnreadHistory,
+  useHistoryAround,
+  type HistoryStart,
   type TranscriptHistory,
-} from "./transcriptUnreadHistory";
+} from "./transcriptAroundHistory";
 import type { TranscriptViewMode } from "./transcriptRenderModel";
 import {
   SubagentTranscriptDrawer,
@@ -184,7 +192,7 @@ export function ConversationPage(props: {
   const [turnContext, setTurnContext] = useState<TurnContextSelection>();
   const [memoryPopover, setMemoryPopover] = useState<OpenMemoryPopover>();
   // A memory chosen in details waits here until its transcript row renders.
-  const [memoryJump, setMemoryJump] = useState<OpenMemoryPopover>();
+  const [memoryJump, setMemoryJump] = useState<MemoryJump>();
   // The page stays mounted across Conversations. Memory state belongs to one.
   const [memoryConversationId, setMemoryConversationId] = useState(
     props.conversationId,
@@ -214,11 +222,33 @@ export function ConversationPage(props: {
   const [startAtUnread] = useState(
     () => readConversationStartPosition() === "unread",
   );
+  // A link at open shows its row, so the transcript does not open at the
+  // latest message or the read position, unless the link fails first.
+  const [startAtLink, setStartAtLink] = useState(
+    () => selectedEventSeq !== undefined || linkedTurnId !== undefined,
+  );
   const detail = props.detail;
   // Jump to latest, a send, or the mobile keyboard skips the newer pages for
   // the rest of the visit. It can come before the unread page loads.
   const [showLatest, setShowLatest] = useState(false);
-  const opensAtUnread = startAtUnread && !showLatest;
+  // A link at open wins over the read position. When the loaded rows hold
+  // the link, the transcript keeps them and does not page to the read
+  // position.
+  const opensAtUnread = startAtUnread && !showLatest && !startAtLink;
+  // A linked row that the transcript does not hold. The transcript opens at
+  // the page around it until the reader jumps to the latest. A link at open
+  // starts there, so the first render reads no other page.
+  const [linkStart, setLinkStart] = useState(() =>
+    linkedTurnId !== undefined
+      ? unheldLinkStart(detail.data?.events, { turn: linkedTurnId })
+      : selectedEventSeq === undefined
+        ? undefined
+        : unheldLinkStart(detail.data?.events, { event: selectedEventSeq }),
+  );
+  const showLatestPage = useCallback(() => {
+    setShowLatest(true);
+    setLinkStart(undefined);
+  }, []);
   const memoryList = useConversationMemories(conversationId).data;
   const memoryState = useMemo<ConversationMemoryState>(
     () => ({
@@ -229,41 +259,78 @@ export function ConversationPage(props: {
     [memoryList, memoryPopover],
   );
   const archive = useArchiveConversation(conversationId);
+  const navigate = useNavigate();
   const pin = usePinConversation(conversationId);
   const markRead = useMarkConversationRead(conversationId);
   const readAtOpen = useReadPositionAtOpen(detail.data, detail.fetchedDetail);
-  const unreadHistory = useUnreadHistory({
+  const dropLink = useCallback(() => {
+    setLinkStart(undefined);
+    setStartAtLink(false);
+    setMemoryJump(undefined);
+    setSearchParams(
+      (current) => {
+        const next = new URLSearchParams(current);
+        next.delete(CONVERSATION_EVENT_PARAM);
+        next.delete(CONVERSATION_TURN_PARAM);
+        return next;
+      },
+      { replace: true },
+    );
+  }, [setSearchParams]);
+  const unreadCursor = opensAtUnread ? readAtOpen.unreadCursor : undefined;
+  const aroundHistory = useHistoryAround({
     conversationId,
     // Cached earlier pages from a past visit would look like newer events.
     detail: detail.latest,
-    onShowLatest: () => setShowLatest(true),
-    unreadCursor: opensAtUnread ? readAtOpen.unreadCursor : undefined,
-    unreadPage: readAtOpen.unreadPage,
+    onShowLatest: showLatestPage,
+    // A link that fails to load is dropped. The transcript goes back to
+    // where it was.
+    ...(linkStart
+      ? { onStartFailed: dropLink, start: linkStart }
+      : unreadCursor
+        ? {
+            start: { around: unreadCursor },
+            ...(readAtOpen.unreadPage
+              ? { startPage: readAtOpen.unreadPage }
+              : undefined),
+          }
+        : undefined),
   });
-  // The page is keyed by Conversation, so this is the cached copy at open.
-  const [cachedAtOpen] = useState(() => detail.data);
-  // A reader far behind sees the events from their read position. Others
-  // see the latest page and the pages before it. A cached transcript stays
-  // on screen until this visit's fetch tells where to open and the unread
-  // events load. It loads no earlier pages and shows no marker: both would
-  // come from the cached read position. It reports no reads, because it sits
-  // at rows the reader has not read yet. Then the transcript opens at the
-  // "New" marker, if the reader has not moved.
-  const holdCachedTranscript = Boolean(
-    cachedAtOpen &&
-    (unreadHistory?.isPending || (opensAtUnread && !detail.fetchedAtOpen)),
+  // The transcript on screen, so it can stay while the next one loads. The
+  // page is keyed by Conversation, so at open this is the cached copy.
+  const shownRef = useRef(detail.data);
+  // A reader far behind sees the events from their read position, and a
+  // link shows the events around its row. Others see the latest page and
+  // the pages before it. The transcript on screen stays until this visit's
+  // fetch tells where to open and the page around that row loads. It loads
+  // no earlier pages and shows no marker: at open, both would come from the
+  // cached read position. It reports no reads, because it can sit at rows
+  // the reader has not read yet. Then the transcript opens at the row, if
+  // the reader has not moved.
+  const holdShown = Boolean(
+    shownRef.current &&
+    (aroundHistory?.isPending ||
+      (opensAtUnread && !linkStart && !detail.fetchedAtOpen)),
   );
-  const history: TranscriptHistory = holdCachedTranscript
+  const transcriptPending =
+    detail.isPending || Boolean(aroundHistory?.isPending && !shownRef.current);
+  const history: TranscriptHistory = holdShown
     ? {
         ...detail,
-        data: cachedAtOpen,
+        data: shownRef.current,
         hasPreviousPage: false,
         isLoadingPreviousPage: false,
         loadPreviousPage: () => {},
       }
-    : (unreadHistory ?? detail);
-  const transcriptPending =
-    detail.isPending || Boolean(unreadHistory?.isPending && !cachedAtOpen);
+    : (aroundHistory ?? detail);
+  if (history.data) shownRef.current = history.data;
+  const catchUp = useConversationCatchUp({
+    conversationId,
+    events: history.data?.events,
+    hasNewerPage: Boolean(history.newer),
+    hasPreviousPage: history.hasPreviousPage,
+    unread: holdShown ? undefined : readAtOpen.unread,
+  });
   const feedConversation = conversations.find(
     (item) => item.id === conversationId,
   );
@@ -277,6 +344,7 @@ export function ConversationPage(props: {
       <ParticipantAvatarStack participants={participants} size="detail" />
     ) : null;
   const conversationDetail = detail.data;
+  const links = conversationLinks(conversationDetail);
   const title =
     conversationDetailTitle(detail.data) ??
     conversationDisplayTitle(conversation);
@@ -342,53 +410,29 @@ export function ConversationPage(props: {
     },
     [eventOpen, setSelectedEventSeq],
   );
-  // A linked event, Turn, or memory can be outside the loaded pages. Look
-  // for it one page at a time, in the direction where it can be.
-  const historyRef = useRef(history);
-  historyRef.current = history;
-  const loadToward = useCallback((search: HistorySearch | undefined) => {
-    if (search === "load-earlier") historyRef.current.loadPreviousPage();
-    else if (search === "load-newer") historyRef.current.newer?.load();
-  }, []);
-  const searchHistory = (direction: HistorySearchDirection) =>
-    nextHistorySearch(history, direction, holdCachedTranscript);
-  const oldestLoadedSeq = transcript?.events[0]?.seq;
-  const newestLoadedSeq = transcript?.events.at(-1)?.seq;
-  const linkedEventDirection: HistorySearchDirection | undefined =
-    selectedEventSeq === undefined ||
-    oldestLoadedSeq === undefined ||
-    newestLoadedSeq === undefined
-      ? undefined
-      : selectedEventSeq < oldestLoadedSeq
-        ? "earlier"
-        : selectedEventSeq > newestLoadedSeq &&
-            (history.newer || holdCachedTranscript)
-          ? "newer"
-          : undefined;
-  // Replace a found Turn link with a link to its first event, or drop it
-  // when history has no such event.
+  // A linked event, Turn, or memory can be outside the loaded rows. Then the
+  // transcript opens at the page around it, which the server finds by the
+  // event seq or Turn id. Only a new link does this, so a reader who jumps to
+  // the latest stays there. Returns false when the loaded rows hold the link.
+  const openLink = useEffectEvent((link: ConversationLink) => {
+    const start = unheldLinkStart(history.data?.events, link);
+    if (start) setLinkStart(start);
+    return Boolean(start);
+  });
+  useEffect(() => {
+    if (linkedTurnId !== undefined) openLink({ turn: linkedTurnId });
+    else if (selectedEventSeq !== undefined) {
+      openLink({ event: selectedEventSeq });
+    }
+  }, [linkedTurnId, selectedEventSeq]);
+  // Replace a found Turn link with a link to its first event.
   const linkedTurnSeq = linkedTurnId
     ? turnStartedEventSeq(transcript?.events, linkedTurnId)
     : undefined;
-  const linkedTurnMissing =
-    linkedTurnId !== undefined &&
-    linkedTurnSeq === undefined &&
-    transcript !== undefined;
-  const linkedSearch = linkedEventDirection
-    ? searchHistory(linkedEventDirection)
-    : linkedTurnMissing
-      ? searchHistory("any")
-      : undefined;
-  useEffect(() => loadToward(linkedSearch), [linkedSearch, loadToward]);
-  const linkedTurnNotFound = linkedTurnMissing && linkedSearch === "end";
   useEffect(() => {
     if (linkedTurnSeq !== undefined) setSelectedEventSeq(linkedTurnSeq);
-    else if (linkedTurnNotFound) setSelectedEventSeq(undefined);
-  }, [linkedTurnNotFound, linkedTurnSeq, setSelectedEventSeq]);
-  // Show a chosen memory at its transcript row. Wait for the first page, then
-  // load pages toward the row until it renders, or stop when history ends.
-  const memorySearch =
-    memoryJump && transcript ? searchHistory("any") : undefined;
+  }, [linkedTurnSeq, setSelectedEventSeq]);
+  // Show a chosen memory at its transcript row, once the row renders.
   useEffect(() => {
     if (!memoryJump || !transcript) return;
     const anchor = pageRef.current?.querySelector(
@@ -398,22 +442,17 @@ export function ConversationPage(props: {
       anchor.scrollIntoView({ block: "center" });
       setMemoryPopover(memoryJump);
       setMemoryJump(undefined);
-    } else if (memorySearch === "failed" || memorySearch === "end") {
+    } else if (!holdShown && !openLink({ event: memoryJump.seq })) {
+      // The loaded rows hold the event, but no row shows the memory.
       setMemoryJump(undefined);
-    } else {
-      loadToward(memorySearch);
     }
-  }, [loadToward, memoryJump, memorySearch, transcript, view]);
+  }, [holdShown, memoryJump, transcript, view]);
   // Keep the panel while the transcript or a linked event loads, and for the
   // render before a found Turn link becomes an event link.
   const eventLoading =
     eventOpen &&
     !selectedEvent &&
-    (transcriptPending ||
-      linkedTurnSeq !== undefined ||
-      linkedSearch === "load-earlier" ||
-      linkedSearch === "load-newer" ||
-      linkedSearch === "wait");
+    (transcriptPending || holdShown || linkedTurnId !== undefined);
   const showEvent = Boolean(selectedEvent) || eventLoading;
   // Step through the same filtered rows that the event log shows.
   const events = transcript?.events;
@@ -436,9 +475,9 @@ export function ConversationPage(props: {
     [turnContext?.id],
   );
   const requestPin = useCallback(() => {
-    setShowLatest(true);
+    showLatestPage();
     setPinRequestVersion((version) => version + 1);
-  }, []);
+  }, [showLatestPage]);
   const onOpenSubagentTranscript = useCallback(
     ({
       part,
@@ -489,8 +528,9 @@ export function ConversationPage(props: {
             agentTree={
               agentTree ? <ConversationAgentTree nodes={agentTree} /> : null
             }
+            contextTags={conversationContextTags(conversation)}
             conversationId={conversationId}
-            cost={conversationCost(conversation, detail.data, "below")}
+            cost={conversationCost(conversation, conversationDetail, "below")}
             detailsOpen={showDetails}
             onDetailsClick={() => {
               if (eventOpen) setSelectedEventSeq(undefined);
@@ -529,9 +569,7 @@ export function ConversationPage(props: {
               />
             }
             linkedWork={
-              hasConversationAnnotations(detail.data?.annotations) ? (
-                <ConversationAnnotations detail={detail.data} />
-              ) : null
+              links.length ? <ConversationAnnotations links={links} /> : null
             }
             pin={{
               // The API lets only participants pin, the same as archive.
@@ -545,15 +583,25 @@ export function ConversationPage(props: {
               archived: Boolean(conversation?.archivedAt),
               disabled: !conversation || archive.isPending,
               error: Boolean(archive.error),
-              onClick: () =>
+              onClick: () => {
+                const archived = !conversation!.archivedAt;
                 archive.mutate({
-                  archived: !conversation?.archivedAt,
+                  archived,
                   lastSeenAt: conversation!.lastSeenAt,
-                }),
+                });
+                // Archiving hides this conversation, so go home at once.
+                // The mutation keeps running after this page unmounts.
+                if (archived) {
+                  navigate("/", {
+                    state: {
+                      archivedConversation: conversation!,
+                    } satisfies ArchivedFromConversationState,
+                  });
+                }
+              },
               pending: archive.isPending,
             }}
             live={live}
-            location={conversationLocation(conversation, detail.data)}
             onSearchChange={setSearch}
             onViewChange={onViewChange}
             privacy={
@@ -600,39 +648,40 @@ export function ConversationPage(props: {
                     </div>
                   ) : null}
                   <ConversationMemoryContext value={memoryState}>
-                    <Transcript
-                      hasPreviousPage={history.hasPreviousPage}
-                      historyError={history.historyError}
-                      historyVersion={history.historyVersion}
-                      lastReadSeq={readAtOpen.lastReadSeq}
-                      live={live}
-                      loadingPreviousPage={history.isLoadingPreviousPage}
-                      newerHistory={history.newer}
-                      onLoadPreviousPage={history.loadPreviousPage}
-                      onRead={holdCachedTranscript ? undefined : markRead}
-                      onSelectedEventSeqChange={setSelectedEventSeq}
-                      // Sends and the thinking row belong after the latest event.
-                      pendingMessages={
-                        history.newer ? undefined : detail.inlineMessages
-                      }
-                      pinRequestVersion={pinRequestVersion}
-                      responding={
-                        !detail.error &&
-                        !history.newer &&
-                        conversationIsResponding(detail.data)
-                      }
-                      onOpenSubagentTranscript={onOpenSubagentTranscript}
-                      search={search}
-                      onSearchChange={setSearch}
-                      selectedEventSeq={selectedEventSeq}
-                      startAtUnread={startAtUnread}
-                      transcript={transcript}
-                      turnContextPanel={turnContextPanel}
-                      unread={
-                        holdCachedTranscript ? undefined : readAtOpen.unread
-                      }
-                      view={view}
-                    />
+                    <ConversationCatchUpContext value={catchUp}>
+                      <Transcript
+                        hasPreviousPage={history.hasPreviousPage}
+                        historyError={history.historyError}
+                        historyVersion={history.historyVersion}
+                        lastReadSeq={readAtOpen.lastReadSeq}
+                        live={live}
+                        loadingPreviousPage={history.isLoadingPreviousPage}
+                        newerHistory={history.newer}
+                        onLoadPreviousPage={history.loadPreviousPage}
+                        onRead={holdShown ? undefined : markRead}
+                        onSelectedEventSeqChange={setSelectedEventSeq}
+                        // Sends and the thinking row belong after the latest event.
+                        pendingMessages={
+                          history.newer ? undefined : detail.inlineMessages
+                        }
+                        pinRequestVersion={pinRequestVersion}
+                        responding={
+                          !detail.error &&
+                          !history.newer &&
+                          conversationIsResponding(detail.data)
+                        }
+                        onOpenSubagentTranscript={onOpenSubagentTranscript}
+                        search={search}
+                        onSearchChange={setSearch}
+                        selectedEventSeq={selectedEventSeq}
+                        startAtLink={startAtLink}
+                        startAtUnread={startAtUnread}
+                        transcript={transcript}
+                        turnContextPanel={turnContextPanel}
+                        unread={holdShown ? undefined : readAtOpen.unread}
+                        view={view}
+                      />
+                    </ConversationCatchUpContext>
                   </ConversationMemoryContext>
                 </>
               )}
@@ -697,11 +746,12 @@ export function ConversationPage(props: {
               setSearch("");
               setMemoryJump({
                 memoryId: entry.memory.id,
+                seq: entry.seq,
                 source: entry.source,
                 turnId: entry.turnId,
               });
             }}
-            links={conversationLinks(detail.data)}
+            links={links}
             overview={
               hasConversationStats({
                 conversation,
@@ -812,32 +862,20 @@ function committedMessageIds(
 
 const EMPTY_MESSAGE_IDS: readonly string[] = [];
 
-type HistorySearchDirection = "any" | "earlier" | "newer";
-type HistorySearch = "end" | "failed" | "load-earlier" | "load-newer" | "wait";
+type ConversationLink = { event: number } | { turn: string };
 
-/**
- * The next step to find a row that the loaded pages do not have: load one
- * more page toward it, or wait for the page that loads. "any" looks at newer
- * pages first. A failed page stops the search, but the link stays, so a
- * retry can still find the row.
- */
-function nextHistorySearch(
-  history: TranscriptHistory,
-  direction: HistorySearchDirection,
-  held: boolean,
-): HistorySearch {
-  if (held || history.isLoadingPreviousPage || history.newer?.loading) {
-    return "wait";
-  }
-  if (direction !== "earlier" && history.newer && !history.newer.error) {
-    return "load-newer";
-  }
-  if (
-    direction !== "newer" &&
-    history.hasPreviousPage &&
-    !history.historyError
-  ) {
-    return "load-earlier";
-  }
-  return history.historyError || history.newer?.error ? "failed" : "end";
+/** The page to open for a link, or nothing when `events` hold its row. */
+function unheldLinkStart(
+  events: readonly ConversationReportEvent[] | undefined,
+  link: ConversationLink,
+): HistoryStart | undefined {
+  const seq =
+    "event" in link ? link.event : turnStartedEventSeq(events, link.turn);
+  const held =
+    seq !== undefined &&
+    events !== undefined &&
+    seq >= (events[0]?.seq ?? Infinity) &&
+    seq <= (events.at(-1)?.seq ?? -Infinity);
+  if (held) return undefined;
+  return "event" in link ? { event: String(link.event) } : { turn: link.turn };
 }

package/src/client/conversations/ShareConversationButton.tsx

@@ -3,18 +3,10 @@ import { useHref } from "react-router";
 import { Check, Share2 } from "lucide-react";
 
 import { Button } from "../components/ui/button";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "../components/ui/tooltip";
 import { conversationPath } from "./conversationRoutes";
 
 /** Share a conversation link without changing who can access it. */
-export function ShareConversationButton(props: {
-  conversationId: string;
-  layout?: "button" | "icon" | "menu";
-}) {
+export function ShareConversationButton(props: { conversationId: string }) {
   const href = useHref(conversationPath(props.conversationId));
   const [status, setStatus] = useState<
     "idle" | "sharing" | "copied" | "copy-failed" | "share-failed"
@@ -68,55 +60,18 @@ export function ShareConversationButton(props: {
     }
   }
 
-  const content = (
+  return (
     <>
-      <Icon aria-hidden="true" size={16} strokeWidth={2} />
-      <span>{label}</span>
-    </>
-  );
-  const button =
-    props.layout === "icon" ? (
-      <Tooltip>
-        <TooltipTrigger
-          render={
-            <Button
-              focusableWhenDisabled
-              aria-label={label}
-              className="text-dashboard-text-muted"
-              disabled={status === "sharing"}
-              onClick={() => void shareLink()}
-              size="icon"
-            >
-              <Icon aria-hidden="true" size={15} />
-            </Button>
-          }
-        />
-        <TooltipContent size="compact" side="bottom">
-          {label}
-        </TooltipContent>
-      </Tooltip>
-    ) : props.layout === "menu" ? (
       <Button
         aria-label={label}
         disabled={status === "sharing"}
+        focusableWhenDisabled
         onClick={() => void shareLink()}
         size="menu"
       >
-        {content}
-      </Button>
-    ) : (
-      <Button
-        aria-label={label}
-        disabled={status === "sharing"}
-        onClick={() => void shareLink()}
-      >
-        {content}
+        <Icon aria-hidden="true" size={16} strokeWidth={2} />
+        <span>{label}</span>
       </Button>
-    );
-
-  return (
-    <>
-      {button}
       <span className="sr-only" role="status">
         {feedback}
       </span>

package/src/client/conversations/SlackMark.tsx

@@ -9,10 +9,22 @@ export function SlackMark(props: { className?: string }) {
       viewBox="0 0 127 127"
     >
       {/* Keep the geometry from packages/docs/public/integrations/slack.svg. */}
-      <path d="M27.2 80c0 7.3-5.9 13.2-13.2 13.2C6.7 93.2.8 87.3.8 80c0-7.3 5.9-13.2 13.2-13.2h13.2V80zm6.6 0c0-7.3 5.9-13.2 13.2-13.2 7.3 0 13.2 5.9 13.2 13.2v33c0 7.3-5.9 13.2-13.2 13.2-7.3 0-13.2-5.9-13.2-13.2V80z" />
-      <path d="M47 27c-7.3 0-13.2-5.9-13.2-13.2C33.8 6.5 39.7.6 47 .6c7.3 0 13.2 5.9 13.2 13.2V27H47zm0 6.7c7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2H13.9C6.6 60.1.7 54.2.7 46.9c0-7.3 5.9-13.2 13.2-13.2H47z" />
-      <path d="M99.9 46.9c0-7.3 5.9-13.2 13.2-13.2 7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2H99.9V46.9zm-6.6 0c0 7.3-5.9 13.2-13.2 13.2-7.3 0-13.2-5.9-13.2-13.2V13.8C66.9 6.5 72.8.6 80.1.6c7.3 0 13.2 5.9 13.2 13.2v33.1z" />
-      <path d="M80.1 99.8c7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2-7.3 0-13.2-5.9-13.2-13.2V99.8h13.2zm0-6.6c-7.3 0-13.2-5.9-13.2-13.2 0-7.3 5.9-13.2 13.2-13.2h33.1c7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2H80.1z" />
+      <path
+        className="[--slack-mark-color:#E01E5A]"
+        d="M27.2 80c0 7.3-5.9 13.2-13.2 13.2C6.7 93.2.8 87.3.8 80c0-7.3 5.9-13.2 13.2-13.2h13.2V80zm6.6 0c0-7.3 5.9-13.2 13.2-13.2 7.3 0 13.2 5.9 13.2 13.2v33c0 7.3-5.9 13.2-13.2 13.2-7.3 0-13.2-5.9-13.2-13.2V80z"
+      />
+      <path
+        className="[--slack-mark-color:#36C5F0]"
+        d="M47 27c-7.3 0-13.2-5.9-13.2-13.2C33.8 6.5 39.7.6 47 .6c7.3 0 13.2 5.9 13.2 13.2V27H47zm0 6.7c7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2H13.9C6.6 60.1.7 54.2.7 46.9c0-7.3 5.9-13.2 13.2-13.2H47z"
+      />
+      <path
+        className="[--slack-mark-color:#2EB67D]"
+        d="M99.9 46.9c0-7.3 5.9-13.2 13.2-13.2 7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2H99.9V46.9zm-6.6 0c0 7.3-5.9 13.2-13.2 13.2-7.3 0-13.2-5.9-13.2-13.2V13.8C66.9 6.5 72.8.6 80.1.6c7.3 0 13.2 5.9 13.2 13.2v33.1z"
+      />
+      <path
+        className="[--slack-mark-color:#ECB22E]"
+        d="M80.1 99.8c7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2-7.3 0-13.2-5.9-13.2-13.2V99.8h13.2zm0-6.6c-7.3 0-13.2-5.9-13.2-13.2 0-7.3 5.9-13.2 13.2-13.2h33.1c7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2H80.1z"
+      />
     </svg>
   );
 }