See a Slack conversation, and finish one, in OpenBot

The Slack side of a conversation was only in Slack: a person could not
read what their coworker had done, and the account link and the secure
prompt a Slack turn sends somebody to had nowhere to land.

Three surfaces, all behind the existing session guard. Confirming a
Slack account is theirs happens on a page that reads the signed link
token and binds only to the OpenBot user completing the flow, with a
sign-in return that comes back to the same confirmation rather than the
roster. Taking the wheel or answering a secure prompt happens on the
coworker's own screen, reached from the expiring link in the thread.
And a Slack thread appears in the conversation sidebar, labelled, next
to the channels it already lists, opening a read-only transcript of the
turns as they were stored.

The computer tools a Slack turn calls are declared once, in shared, so
the browser and the channel offer the same contract rather than two
drifting copies of it.

Author: jerelvelarde

app/src/components/app-sidebar/app-sidebar.tsx

@@ -51,19 +51,39 @@ import {
   channelListQueryOptions,
 } from "@/lib/channels/queries";
 import { useChannelEvents } from "@/lib/channels/use-channel-events";
+import { externalThreadListQueryOptions } from "@/lib/external/queries";
 import { appConfig } from "@/lib/generated/application-config";
 import { EASE_OUT, ENTRANCE_SECONDS } from "@/lib/motion";
 import { relativeTime } from "@/lib/relative-time";
 import { Button } from "../ui/button";
 import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "../ui/empty";
 import { Channel } from "./channel";
+import {
+  conversationRoster,
+  matchingRoster,
+  type RosterSourceStatus,
+  rosterKey,
+  shouldShowEmptyRoster,
+  shouldShowSearchEmpty,
+  type SidebarRosterRow,
+} from "./roster";
+import { SlackChannel, SlackRosterProblem } from "./slack-channel";
 
 const appLinkOptions = { to: "/" } satisfies LinkOptions;
 const adminLinkOptions = { to: "/admin" } satisfies LinkOptions;
 const settingsLinkOptions = { to: "/settings" } satisfies LinkOptions;
 
 const userMenuItemClassName = "gap-2 px-2 py-1.5";
 
+function rosterSourceStatus(query: {
+  isError: boolean;
+  isSuccess: boolean;
+}): RosterSourceStatus {
+  if (query.isSuccess) return "success";
+  if (query.isError) return "error";
+  return "pending";
+}
+
 function UserAvatar() {
   const { data: currentUser } = useQuery(currentUserQueryOptions());
   const initials =
@@ -86,36 +106,6 @@ function UserAvatar() {
  */
 const MAX_ANIMATED_ROWS = 60;
 
-/**
- * The roster, narrowed to what the person typed.
- *
- * Matches the channel's name, its summary, and the last message, because those are the things the
- * row can actually show — searching against something invisible returns results a person cannot
- * account for. The last message is included because it is still what the second line draws until the
- * conversation has been named. Message history beyond that line is not here to search: it lives in
- * the thread store, and reaching for it is a server endpoint rather than a filter.
- *
- * An empty query returns the input array unchanged rather than a copy, so typing and clearing does
- * not hand `AnimatePresence` a new array identity and restage the whole list.
- */
-export function matchingChannels(
-  channels: ChannelSummary[] | undefined,
-  query: string,
-): ChannelSummary[] {
-  if (!channels) {
-    return [];
-  }
-  const needle = query.trim().toLowerCase();
-  if (!needle) {
-    return channels;
-  }
-  return channels.filter((channel) =>
-    [channel.name, channel.summary, channel.lastMessage].some((field) =>
-      field?.toLowerCase().includes(needle),
-    ),
-  );
-}
-
 /**
  * Pinned channels first, everything else after, newest activity first within each group.
  *
@@ -162,9 +152,11 @@ export function isUnread(
  * moves under the cursor.
  */
 function ChannelRow({
+  animateVisibility,
   channel,
   animateOrder,
 }: {
+  animateVisibility: boolean;
   channel: ChannelSummary;
   animateOrder: boolean;
 }) {
@@ -178,12 +170,18 @@ function ChannelRow({
   });
   return (
     <motion.div
-      animate={{ opacity: 1, transform: "translateY(0px)" }}
-      initial={{
-        opacity: 0,
-        transform: shouldReduceMotion ? "none" : "translateY(-8px)",
-      }}
-      exit={{ opacity: 0 }}
+      animate={
+        animateVisibility ? { opacity: 1, transform: "translateY(0px)" } : false
+      }
+      initial={
+        animateVisibility
+          ? {
+              opacity: 0,
+              transform: shouldReduceMotion ? "none" : "translateY(-8px)",
+            }
+          : false
+      }
+      exit={animateVisibility ? { opacity: 0 } : undefined}
       layout={animateOrder && !shouldReduceMotion ? "position" : false}
       transition={{ duration: ENTRANCE_SECONDS, ease: EASE_OUT }}
     >
@@ -206,25 +204,68 @@ function ChannelRow({
   );
 }
 
+function SlackRow({
+  animateVisibility,
+  animateOrder,
+  thread,
+}: {
+  animateVisibility: boolean;
+  animateOrder: boolean;
+  thread: SidebarRosterRow & { kind: "slack" };
+}) {
+  const shouldReduceMotion = useReducedMotion();
+  return (
+    <motion.div
+      animate={
+        animateVisibility ? { opacity: 1, transform: "translateY(0px)" } : false
+      }
+      initial={
+        animateVisibility
+          ? {
+              opacity: 0,
+              transform: shouldReduceMotion ? "none" : "translateY(-8px)",
+            }
+          : false
+      }
+      exit={animateVisibility ? { opacity: 0 } : undefined}
+      layout={animateOrder && !shouldReduceMotion ? "position" : false}
+      transition={{ duration: ENTRANCE_SECONDS, ease: EASE_OUT }}
+    >
+      <SlackChannel
+        lastMessageAt={
+          thread.thread.lastMessageAt
+            ? relativeTime(thread.thread.lastMessageAt)
+            : undefined
+        }
+        thread={thread.thread}
+      />
+    </motion.div>
+  );
+}
+
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
   const { data: currentUser } = useQuery(currentUserQueryOptions());
   const queryClient = useQueryClient();
   const navigate = useNavigate();
   const signOut = useMutation(signOutMutationOptions(queryClient));
   const channels = useInfiniteQuery(channelListQueryOptions());
+  const slackThreads = useInfiniteQuery(externalThreadListQueryOptions());
   // One socket for the app, opened where the roster is kept live.
   useChannelEvents();
   const [search, setSearch] = useState("");
   const searching = search.trim().length > 0;
-  const visibleChannels = pinnedFirst(matchingChannels(channels.data, search));
+  const roster = conversationRoster(channels.data, slackThreads.data);
+  const visibleRoster = matchingRoster(roster, search);
+  const channelStatus = rosterSourceStatus(channels);
+  const slackThreadStatus = rosterSourceStatus(slackThreads);
   /*
    * FILTERING DOES NOT ANIMATE. Rows exit and relayout on every keystroke otherwise, which is a
    * list thrashing under somebody who is still typing — and the moving target is the very thing
    * they are trying to read. Order animation is for a channel that was just spoken in, which is
    * occasional; this is not.
    */
-  const animateOrder =
-    !searching && (channels.data?.length ?? 0) <= MAX_ANIMATED_ROWS;
+  const animateOrder = !searching && roster.length <= MAX_ANIMATED_ROWS;
+  const animateVisibility = !searching;
 
   const handleSignOut = async () => {
     await signOut.mutateAsync();
@@ -268,7 +309,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
             <SidebarMenuItem>
               <InputGroup className="bg-background text-sm rounded-lg h-9">
                 <InputGroupInput
-                  aria-label="Search channels"
+                  aria-label="Search conversations"
                   onChange={(event) => setSearch(event.target.value)}
                   placeholder="Search..."
                   value={search}
@@ -285,7 +326,12 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
              * the box has to say so and quote it back — told "you don't have channels yet" while
              * holding a typo, a person reads their conversations as gone.
              */}
-            {searching && visibleChannels.length === 0 ? (
+            {shouldShowSearchEmpty(
+              visibleRoster,
+              search,
+              channelStatus,
+              slackThreadStatus,
+            ) ? (
               <div className="py-4">
                 <Empty className="border border-dashed min-h-[40dvh]">
                   <EmptyHeader>
@@ -298,7 +344,13 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
                 </Empty>
               </div>
             ) : null}
-            {!searching && channels.data?.length === 0 ? (
+            {!searching &&
+            shouldShowEmptyRoster(
+              channels.data,
+              slackThreads.data,
+              channels.isSuccess,
+              slackThreads.isSuccess,
+            ) ? (
               <div className="py-4">
                 <Empty className="border border-dashed min-h-[40dvh]">
                   <EmptyHeader>
@@ -311,14 +363,32 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
                 </Empty>
               </div>
             ) : null}
+            {slackThreads.isError ? (
+              <SlackRosterProblem
+                isRetrying={slackThreads.isFetching}
+                onRetry={() => {
+                  void slackThreads.refetch();
+                }}
+              />
+            ) : null}
             <AnimatePresence initial={false}>
-              {visibleChannels.map((channel) => (
-                <ChannelRow
-                  key={channel.id}
-                  animateOrder={animateOrder}
-                  channel={channel}
-                />
-              ))}
+              {visibleRoster.map((row) =>
+                row.kind === "openbot" ? (
+                  <ChannelRow
+                    key={rosterKey(row)}
+                    animateVisibility={animateVisibility}
+                    animateOrder={animateOrder}
+                    channel={row.channel}
+                  />
+                ) : (
+                  <SlackRow
+                    key={rosterKey(row)}
+                    animateVisibility={animateVisibility}
+                    animateOrder={animateOrder}
+                    thread={row}
+                  />
+                ),
+              )}
             </AnimatePresence>
           </SidebarGroup>
         </SidebarMenu>

app/src/components/app-sidebar/roster.ts

@@ -0,0 +1,135 @@
+import { linkOptions, type LinkOptions } from "@tanstack/react-router";
+import type { ChannelSummary } from "@/lib/channels/queries";
+import type { ExternalThreadSummary } from "@/lib/external/queries";
+
+export type SidebarRosterRow =
+  | { kind: "openbot"; channel: ChannelSummary }
+  | { kind: "slack"; thread: ExternalThreadSummary };
+
+export type RosterSourceStatus = "pending" | "success" | "error";
+
+const openbotChannelRoute = "/channel/$channelId" as const;
+const slackThreadRoute = "/slack/thread/$threadId" as const;
+
+export function rosterKey(row: SidebarRosterRow): string {
+  return row.kind === "openbot"
+    ? `openbot:${row.channel.id}`
+    : `slack:${row.thread.threadId}`;
+}
+
+function activityAt(row: SidebarRosterRow): string {
+  const source = row.kind === "openbot" ? row.channel : row.thread;
+  return source.lastMessageAt ?? source.createdAt;
+}
+
+export function conversationRoster(
+  channels: ChannelSummary[] = [],
+  slackThreads: ExternalThreadSummary[] = [],
+): SidebarRosterRow[] {
+  const nativeRows = channels.map(
+    (channel): SidebarRosterRow & { kind: "openbot" } => ({
+      kind: "openbot",
+      channel,
+    }),
+  );
+  const slackRows = slackThreads.map(
+    (thread): SidebarRosterRow & { kind: "slack" } => ({
+      kind: "slack",
+      thread,
+    }),
+  );
+  const pinned = nativeRows.filter(
+    (row) => row.kind === "openbot" && row.channel.pinned,
+  );
+  const remaining = [
+    ...nativeRows.filter((row) => !row.channel.pinned),
+    ...slackRows,
+  ];
+
+  return [
+    ...pinned.sort(byActivityThenKey),
+    ...remaining.sort(byActivityThenKey),
+  ];
+}
+
+function byActivityThenKey(a: SidebarRosterRow, b: SidebarRosterRow): number {
+  const activity = activityAt(b).localeCompare(activityAt(a));
+  if (activity !== 0) return activity;
+  return rosterKey(a).localeCompare(rosterKey(b));
+}
+
+export function matchingRoster(
+  rows: SidebarRosterRow[] | undefined,
+  query: string,
+): SidebarRosterRow[] {
+  if (!rows) {
+    return [];
+  }
+  const needle = query.trim().toLowerCase();
+  if (!needle) {
+    return rows;
+  }
+  return rows.filter((row) =>
+    [rosterName(row), rosterSummary(row), rosterLastMessage(row)].some(
+      (field) => field?.toLowerCase().includes(needle),
+    ),
+  );
+}
+
+export function rosterName(row: SidebarRosterRow): string {
+  return row.kind === "openbot" ? row.channel.name : row.thread.agentName;
+}
+
+/**
+ * What the row was named, once a conversation has one. A Slack thread has none: it is named by the
+ * coworker it is pinned to, which {@link rosterName} already returns.
+ */
+export function rosterSummary(row: SidebarRosterRow): string | null {
+  return row.kind === "openbot" ? row.channel.summary : null;
+}
+
+export function rosterLastMessage(row: SidebarRosterRow): string | null {
+  return row.kind === "openbot"
+    ? row.channel.lastMessage
+    : row.thread.lastMessage;
+}
+
+export function rosterDestination(row: SidebarRosterRow): LinkOptions {
+  return row.kind === "openbot"
+    ? linkOptions({
+        to: openbotChannelRoute,
+        params: { channelId: row.channel.id },
+      })
+    : linkOptions({
+        to: slackThreadRoute,
+        params: { threadId: row.thread.threadId },
+      });
+}
+
+export function shouldShowEmptyRoster(
+  channels: readonly ChannelSummary[] | undefined,
+  slackThreads: readonly ExternalThreadSummary[] | undefined,
+  channelsLoaded: boolean,
+  slackThreadsLoaded: boolean,
+): boolean {
+  return (
+    channelsLoaded &&
+    slackThreadsLoaded &&
+    channels?.length === 0 &&
+    slackThreads?.length === 0
+  );
+}
+
+export function shouldShowSearchEmpty(
+  visibleRows: readonly SidebarRosterRow[],
+  query: string,
+  channelsStatus: RosterSourceStatus,
+  slackThreadsStatus: RosterSourceStatus,
+): boolean {
+  return (
+    query.trim().length > 0 &&
+    channelsStatus === "success" &&
+    slackThreadsStatus === "success" &&
+    visibleRows.length === 0
+  );
+}