Let a conversation be deleted, and its thread with it (#197)

* feat: let a conversation be deleted, and its Intelligence thread with it

Nothing removed a channel, so the roster only ever grew (#196). Adds
DELETE /api/channels/:channelId: the channel row, its memberships,
agent links, and thread mapping go through the FK cascades that
already existed for them, and the deployment asks Intelligence to
permanently delete the thread itself.

The local delete commits first. A rejected or unreachable upstream
thread delete is non-fatal and leaves the channel gone from the
roster either way, with an audit row (channel.deleted) naming the
thread and whether Intelligence actually forgot it - a channel gone
locally with an orphaned thread is a smaller, more honest failure
than one still sitting in the roster with its history silently
wiped.

Removal fans out over the existing channel_activity NOTIFY topic so
other open tabs see it live. The sidebar row gets an options menu
with a two-button confirm dialog (new alert-dialog.tsx, wrapping
@base-ui/react/alert-dialog).

* Keep the roster memoized, attribute the row, and stop a failed delete vanishing

The confirm button was AlertDialogAction, which renders the primitive's
Close: it shut the dialog the instant it was pressed, before the request
it started was answered. A delete that failed then reported nothing at
all, leaving the conversation in the roster with no explanation, and
"Deleting…" could never appear. A plain button waits for the answer,
closes on success, and shows the server's message otherwise.

DELETE answers 200 with historyLeftBehind rather than a bare 204. The
thread deletion is the half that can fail on its own, and 204 said the
whole act succeeded whichever way it went, so a screen had no way to
avoid claiming a message history was gone while it was still on the
platform.

The roster row lost its memo for a stated reason that does not hold:
memo compares props and says nothing about a hook, and use-channel-events
preserves row identity precisely so rows do not re-render.

The audit row dropped the actor in single-user mode, believing
audit_events.actor_user_id has a foreign key into users. It has none, and
initializeDevActorUser writes that row at start-up anyway. Single-user is
the mode .env.example ships switched on, so that was the default row, and
it recorded that a conversation was deleted but not by whom.

Also move a tab that is looking at the channel another tab just deleted,
which was left on a route that no longer resolves, and cover the audit
row, which nothing tested.

---------

Co-authored-by: David McKay <davidmckayv@users.noreply.github.com>

Author: CristianPeralta

CHANGELOG.md

@@ -235,6 +235,29 @@ one they are, so those match too.
 No configuration changes and nothing is stored differently; a deployment that was already on the
 light theme sees no difference at all.
 
+### A conversation can be deleted
+
+Nothing removed a channel. Starting one was the only lever the product gave a person, and every
+conversation with every coworker sat in the roster forever, growing on every message the way
+`DEFAULT_CHANNEL_PAGE`'s own note already described: a page that was instant in a demo returns
+thousands of rows for anybody who has actually been using the product a while, one that never shrinks
+again.
+
+Deleting a channel now removes it for good. The channel row goes, and its memberships, its linked
+coworkers, and its Intelligence thread mapping go with it through the same foreign-key cascades that
+already existed for them — no migration needed, only a query that finally uses them. The deployment
+also asks Intelligence to permanently delete the thread itself, so the message history is not just
+unlisted, it is gone from the platform too.
+
+A thread the platform refuses to delete does not hold the channel hostage. The local removal already
+committed by the time that call runs, so a rejected or unreachable upstream delete leaves the channel
+gone from the roster regardless, with an audit row (`channel.deleted`) naming the thread and whether
+Intelligence actually forgot it. A channel that is gone locally with an orphaned thread still on the
+platform is a smaller, more honest failure than a channel sitting in the roster with its history
+silently wiped out from under it, and the audit trail is where an administrator finds the one that
+did not clean up completely. `DELETE /api/channels/:channelId` answers with `historyLeftBehind`, so a
+screen showing the outcome does not have to guess which of the two happened.
+
 ## 0.0.4
 
 ### A click citing a ref this deployment cannot resolve is refused

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

@@ -1,10 +1,34 @@
-import { Link } from "@tanstack/react-router";
-import { memo } from "react";
+import { IconDots } from "@tabler/icons-react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { Link, useNavigate, useParams } from "@tanstack/react-router";
+import { memo, useState } from "react";
+import { deleteChannelMutationOptions } from "@/lib/channels/mutations";
 import { ChannelAvatar } from "../channels/avatar";
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "../ui/alert-dialog";
+import { Button } from "../ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
 
 /**
  * Memoized roster row. `use-channel-events` preserves unchanged row identity, and
  * `content-visibility` keeps off-screen rows cheap without virtualization.
+ *
+ * State inside a row is no reason to drop the memo: `memo` compares the props it is handed and has
+ * nothing to say about a hook. Dropping it re-renders every row in the roster whenever the sidebar
+ * renders, which is the cost the identity-preserving patch in `use-channel-events` exists to avoid.
  */
 export const Channel = memo(function Channel({
   channelId,
@@ -19,32 +43,132 @@ export const Channel = memo(function Channel({
   lastMessage?: string;
   lastMessageAt?: string;
 }) {
+  const queryClient = useQueryClient();
+  const navigate = useNavigate();
+  // `strict: false`: this row renders in the sidebar on every screen, not only while its own
+  // channel is open, so there may be no `channelId` route param to read at all.
+  const { channelId: openChannelId } = useParams({ strict: false });
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const deleteChannel = useMutation(deleteChannelMutationOptions(queryClient));
+
+  const handleDelete = async () => {
+    // Navigate away first: the row this menu lives on unmounts the moment the list invalidates,
+    // and a screen still pointed at a channel id that no longer resolves is worse than a screen
+    // that moved on a beat early.
+    if (openChannelId === channelId) {
+      await navigate({ to: "/" });
+    }
+    try {
+      await deleteChannel.mutateAsync(channelId);
+      /*
+       * Closed on success rather than left to the unmount.
+       *
+       * The row does go away when the roster invalidates, taking this dialog with it, but that is a
+       * side effect of a cache write and not something this component controls.
+       */
+      setDeleteDialogOpen(false);
+    } catch {
+      /*
+       * Left open, deliberately. A delete that failed leaves the row exactly where it was, so
+       * closing would return the person to a roster that still lists the conversation they just
+       * asked to be rid of, with nothing anywhere saying why. The message is rendered below;
+       * `mutateAsync` rejects rather than swallowing, which is why this catch exists at all.
+       */
+    }
+  };
+
   return (
-    <Link
-      to="/channel/$channelId"
-      params={{ channelId }}
-      type="button"
-      className="flex flex-row py-2 px-2 gap-2 items-center w-full hover:bg-foreground/5 rounded-lg [contain-intrinsic-size:auto_3.25rem] [content-visibility:auto]"
-      activeProps={{
-        className: "bg-foreground/5",
-      }}
-    >
-      <div className="">
-        <ChannelAvatar participantIds={participantIds} size={32} />
-      </div>
-      <div className="flex-col min-w-0 flex-1">
-        <div className="flex flex-row items-center justify-between gap-2">
-          <span className="text-[14px] tracking-[-1%] truncate">{name}</span>
-          <div className="text-[12px] text-muted-foreground/70">
-            {lastMessageAt}
-          </div>
+    <div className="group/channel relative">
+      <Link
+        to="/channel/$channelId"
+        params={{ channelId }}
+        type="button"
+        className="flex flex-row py-2 px-2 gap-2 items-center w-full hover:bg-foreground/5 rounded-lg [contain-intrinsic-size:auto_3.25rem] [content-visibility:auto]"
+        activeProps={{
+          className: "bg-foreground/5",
+        }}
+      >
+        <div className="">
+          <ChannelAvatar participantIds={participantIds} size={32} />
         </div>
-        <div className="mt-px flex h-4 items-center gap-1.5">
-          <span className="min-w-0 flex-1 truncate text-[12px] leading-4 text-muted-foreground">
-            {lastMessage}
-          </span>
+        <div className="flex-col min-w-0 flex-1">
+          <div className="flex flex-row items-center justify-between gap-2">
+            <span className="text-[14px] tracking-[-1%] truncate">{name}</span>
+            <div className="group-hover/channel:invisible text-[12px] text-muted-foreground/70">
+              {lastMessageAt}
+            </div>
+          </div>
+          <div className="mt-px flex h-4 items-center gap-1.5">
+            <span className="min-w-0 flex-1 truncate text-[12px] leading-4 text-muted-foreground">
+              {lastMessage}
+            </span>
+          </div>
         </div>
+      </Link>
+      <div className="absolute right-1 top-1/2 -translate-y-1/2 opacity-0 group-hover/channel:opacity-100 focus-within:opacity-100">
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            render={
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                aria-label={`Options for ${name}`}
+              >
+                <IconDots />
+              </Button>
+            }
+          />
+          <DropdownMenuContent align="end">
+            <DropdownMenuGroup>
+              {/* Only opens the dialog below; the menu closes on click, too early to confirm anything. */}
+              <DropdownMenuItem
+                onClick={() => setDeleteDialogOpen(true)}
+                variant="destructive"
+              >
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
       </div>
-    </Link>
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete this conversation?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This deletes your conversation with{" "}
+              <span className="font-medium text-foreground">{name}</span>,
+              including its message history. This cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          {deleteChannel.isError ? (
+            <p className="text-destructive text-sm" role="alert">
+              {deleteChannel.error.message}
+            </p>
+          ) : null}
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={deleteChannel.isPending}>
+              Cancel
+            </AlertDialogCancel>
+            {/*
+             * A plain button, not `AlertDialogAction`.
+             *
+             * That one renders the primitive's `Close`, so it shuts the dialog the instant it is
+             * pressed, before the request it starts has been answered. Nothing then reports a
+             * delete that failed: the dialog is gone, the conversation is still in the roster, and
+             * the person is left to work out for themselves that the thing they asked for did not
+             * happen. It also means "Deleting…" below could never appear.
+             */}
+            <Button
+              disabled={deleteChannel.isPending}
+              onClick={() => void handleDelete()}
+              variant="destructive"
+            >
+              {deleteChannel.isPending ? "Deleting…" : "Delete"}
+            </Button>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
   );
 });

app/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,150 @@
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+import type * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+/**
+ * A modal for an action a click cannot undo. Built on `AlertDialogRoot` rather than `Dialog`'s
+ * `DialogRoot`: it carries `role="alertdialog"` and is announced immediately, and has no corner
+ * close button — the only way out is one of the footer's own buttons.
+ */
+function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  );
+}
+
+function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  );
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: AlertDialogPrimitive.Backdrop.Props) {
+  return (
+    <AlertDialogPrimitive.Backdrop
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: AlertDialogPrimitive.Popup.Props) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Popup
+        data-slot="alert-dialog-content"
+        className={cn(
+          "-translate-x-1/2 -translate-y-1/2 fixed top-1/2 left-1/2 z-50 flex w-[calc(100%-2rem)] max-w-md flex-col gap-4 rounded-xl border border-border bg-popover p-5 text-sm text-popover-foreground shadow-lg transition duration-150 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0",
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-1", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn("flex flex-row items-center justify-end gap-2", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: AlertDialogPrimitive.Title.Props) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("font-heading font-medium text-base text-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: AlertDialogPrimitive.Description.Props) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm text-pretty", className)}
+      {...props}
+    />
+  );
+}
+
+/** The button that answers "no" or "not now." Closes without running anything else. */
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  return (
+    <AlertDialogPrimitive.Close
+      render={<Button variant="outline" className={className} {...props} />}
+    />
+  );
+}
+
+/**
+ * The button that carries out the action, styled destructive by default since that is the only
+ * reason this component exists rather than the ordinary `Dialog`. Pass `onClick` to run the action;
+ * closing is automatic, the same as `AlertDialogCancel`.
+ */
+function AlertDialogAction({
+  className,
+  variant = "destructive",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  return (
+    <AlertDialogPrimitive.Close
+      render={<Button variant={variant} className={className} {...props} />}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};