feat(desktop): add conversation-style DM composer

desktop/playwright.config.ts

@@ -45,6 +45,7 @@ export default defineConfig({
         "**/edit-agent.spec.ts",
         "**/doctor-cta-screenshots.spec.ts",
         "**/pubkey-display-screenshots.spec.ts",
+        "**/dm-new-message-screenshots.spec.ts",
         "**/file-attachment.spec.ts",
         "**/image-attachment-gallery.spec.ts",
         "**/composer-image-draw.spec.ts",

desktop/src/app/AppShell.helpers.ts

@@ -5,6 +5,7 @@ import type { SearchHit } from "@/shared/api/types";
 export type AppView =
   | "home"
   | "channel"
+  | "messages"
   | "agents"
   | "workflows"
   | "pulse"
@@ -117,6 +118,13 @@ export function deriveShellRoute(pathname: string): {
     };
   }
 
+  if (pathname === "/messages/new") {
+    return {
+      selectedChannelId: null,
+      selectedView: "messages",
+    };
+  }
+
   if (pathname === "/agents") {
     return {
       selectedChannelId: null,

desktop/src/app/AppShell.tsx

@@ -109,7 +109,6 @@ export function AppShell() {
   const [searchFocusRequest, setSearchFocusRequest] = React.useState(0);
   const [browseDialogType, setBrowseDialogType] =
     React.useState<BrowseDialogType>(null);
-  const [isNewDmOpen, setIsNewDmOpen] = React.useState(false);
   const [isCreateChannelOpen, setIsCreateChannelOpen] = React.useState(false);
   const [isHuddleDrawerOpen, setIsHuddleDrawerOpen] = React.useState(false);
   const mainInsetRef = React.useRef<HTMLElement>(null);
@@ -119,6 +118,7 @@ export function AppShell() {
     goAgents,
     goChannel,
     goHome,
+    goNewMessage,
     goProjects,
     goPulse,
     goSettings,
@@ -547,7 +547,10 @@ export function AppShell() {
   // Dispatch `buzz://message` deep links into the router.
   useMessageDeepLinks();
 
-  const handleOpenNewDm = React.useCallback(() => setIsNewDmOpen(true), []);
+  const handleOpenNewDm = React.useCallback(
+    () => void goNewMessage(),
+    [goNewMessage],
+  );
   const handleOpenCreateChannel = React.useCallback(
     () => setIsCreateChannelOpen(true),
     [],
@@ -754,16 +757,14 @@ export function AppShell() {
                           isCreatingChannel={createChannelMutation.isPending}
                           isCreatingForum={createForumMutation.isPending}
                           isLoading={channelsQuery.isLoading}
-                          isOpeningDm={openDmMutation.isPending}
-                          isNewDmOpen={isNewDmOpen}
                           isCreateChannelOpen={isCreateChannelOpen}
                           isPresencePending={presenceSession.isPending}
                           onAddWorkspace={(workspace) => {
                             const id = workspacesHook.addWorkspace(workspace);
                             handleSwitchWorkspace(id);
                           }}
                           onAddWorkspaceOpenChange={setIsAddWorkspaceOpen}
-                          onNewDmOpenChange={setIsNewDmOpen}
+                          onNewMessage={handleOpenNewDm}
                           onCreateChannelOpenChange={setIsCreateChannelOpen}
                           onOpenAddWorkspace={() => setIsAddWorkspaceOpen(true)}
                           onUpdateWorkspace={workspacesHook.updateWorkspace}

desktop/src/app/navigation/useAppNavigation.ts

@@ -185,6 +185,17 @@ export function useAppNavigation() {
     [commitNavigation],
   );
 
+  const goNewMessage = React.useCallback(
+    (behavior?: NavigationBehavior) =>
+      commitNavigation(
+        {
+          to: "/messages/new",
+        },
+        behavior,
+      ),
+    [commitNavigation],
+  );
+
   const goForumPost = React.useCallback(
     (
       channelId: string,
@@ -284,6 +295,7 @@ export function useAppNavigation() {
     goChannel,
     goForumPost,
     goHome,
+    goNewMessage,
     goProject,
     goProjects,
     goPulse,

desktop/src/app/routeTree.gen.ts

@@ -14,6 +14,7 @@ import { Route as agentsRouteImport } from "./routes/agents";
 import { Route as indexRouteImport } from "./routes/index";
 import { Route as workflowsDotworkflowIdRouteImport } from "./routes/workflows.$workflowId";
 import { Route as projectsDotprojectIdRouteImport } from "./routes/projects.$projectId";
+import { Route as messagesDotnewRouteImport } from "./routes/messages.new";
 import { Route as channelsDotchannelIdRouteImport } from "./routes/channels.$channelId";
 import { Route as channelsDotchannelIdDotpostsDotpostIdRouteImport } from "./routes/channels.$channelId.posts.$postId";
 
@@ -62,6 +63,11 @@ const projectsDotprojectIdRoute = projectsDotprojectIdRouteImport.update({
   path: "/projects/$projectId",
   getParentRoute: () => rootRouteImport,
 } as any);
+const messagesDotnewRoute = messagesDotnewRouteImport.update({
+  id: "/messages/new",
+  path: "/messages/new",
+  getParentRoute: () => rootRouteImport,
+} as any);
 const channelsDotchannelIdRoute = channelsDotchannelIdRouteImport.update({
   id: "/channels/$channelId",
   path: "/channels/$channelId",
@@ -83,6 +89,7 @@ export interface FileRoutesByFullPath {
   "/settings": typeof settingsRoute;
   "/workflows": typeof workflowsRoute;
   "/channels/$channelId": typeof channelsDotchannelIdRoute;
+  "/messages/new": typeof messagesDotnewRoute;
   "/projects/$projectId": typeof projectsDotprojectIdRoute;
   "/workflows/$workflowId": typeof workflowsDotworkflowIdRoute;
   "/channels/$channelId/posts/$postId": typeof channelsDotchannelIdDotpostsDotpostIdRoute;
@@ -96,6 +103,7 @@ export interface FileRoutesByTo {
   "/settings": typeof settingsRoute;
   "/workflows": typeof workflowsRoute;
   "/channels/$channelId": typeof channelsDotchannelIdRoute;
+  "/messages/new": typeof messagesDotnewRoute;
   "/projects/$projectId": typeof projectsDotprojectIdRoute;
   "/workflows/$workflowId": typeof workflowsDotworkflowIdRoute;
   "/channels/$channelId/posts/$postId": typeof channelsDotchannelIdDotpostsDotpostIdRoute;
@@ -110,6 +118,7 @@ export interface FileRoutesById {
   "/settings": typeof settingsRoute;
   "/workflows": typeof workflowsRoute;
   "/channels/$channelId": typeof channelsDotchannelIdRoute;
+  "/messages/new": typeof messagesDotnewRoute;
   "/projects/$projectId": typeof projectsDotprojectIdRoute;
   "/workflows/$workflowId": typeof workflowsDotworkflowIdRoute;
   "/channels/$channelId/posts/$postId": typeof channelsDotchannelIdDotpostsDotpostIdRoute;
@@ -125,6 +134,7 @@ export interface FileRouteTypes {
     | "/settings"
     | "/workflows"
     | "/channels/$channelId"
+    | "/messages/new"
     | "/projects/$projectId"
     | "/workflows/$workflowId"
     | "/channels/$channelId/posts/$postId";
@@ -138,6 +148,7 @@ export interface FileRouteTypes {
     | "/settings"
     | "/workflows"
     | "/channels/$channelId"
+    | "/messages/new"
     | "/projects/$projectId"
     | "/workflows/$workflowId"
     | "/channels/$channelId/posts/$postId";
@@ -151,6 +162,7 @@ export interface FileRouteTypes {
     | "/settings"
     | "/workflows"
     | "/channels/$channelId"
+    | "/messages/new"
     | "/projects/$projectId"
     | "/workflows/$workflowId"
     | "/channels/$channelId/posts/$postId";
@@ -165,6 +177,7 @@ export interface RootRouteChildren {
   settingsRoute: typeof settingsRoute;
   workflowsRoute: typeof workflowsRoute;
   channelsDotchannelIdRoute: typeof channelsDotchannelIdRoute;
+  messagesDotnewRoute: typeof messagesDotnewRoute;
   projectsDotprojectIdRoute: typeof projectsDotprojectIdRoute;
   workflowsDotworkflowIdRoute: typeof workflowsDotworkflowIdRoute;
   channelsDotchannelIdDotpostsDotpostIdRoute: typeof channelsDotchannelIdDotpostsDotpostIdRoute;
@@ -235,6 +248,13 @@ declare module "@tanstack/react-router" {
       preLoaderRoute: typeof projectsDotprojectIdRouteImport;
       parentRoute: typeof rootRouteImport;
     };
+    "/messages/new": {
+      id: "/messages/new";
+      path: "/messages/new";
+      fullPath: "/messages/new";
+      preLoaderRoute: typeof messagesDotnewRouteImport;
+      parentRoute: typeof rootRouteImport;
+    };
     "/channels/$channelId": {
       id: "/channels/$channelId";
       path: "/channels/$channelId";
@@ -261,6 +281,7 @@ const rootRouteChildren: RootRouteChildren = {
   settingsRoute: settingsRoute,
   workflowsRoute: workflowsRoute,
   channelsDotchannelIdRoute: channelsDotchannelIdRoute,
+  messagesDotnewRoute: messagesDotnewRoute,
   projectsDotprojectIdRoute: projectsDotprojectIdRoute,
   workflowsDotworkflowIdRoute: workflowsDotworkflowIdRoute,
   channelsDotchannelIdDotpostsDotpostIdRoute:

desktop/src/app/routes.ts

@@ -10,6 +10,7 @@ export const routes = rootRoute("root.tsx", [
   route("/workflows/$workflowId", "workflows.$workflowId.tsx"),
   route("/projects", "projects.tsx"),
   route("/projects/$projectId", "projects.$projectId.tsx"),
+  route("/messages/new", "messages.new.tsx"),
   route("/channels/$channelId", "channels.$channelId.tsx"),
   route(
     "/channels/$channelId/posts/$postId",

desktop/src/app/routes/messages.new.tsx

@@ -0,0 +1,7 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { NewMessageScreen } from "@/features/messages/ui/NewMessageScreen";
+
+export const Route = createFileRoute("/messages/new")({
+  component: NewMessageScreen,
+});

desktop/src/features/agents/hooks.ts

@@ -6,8 +6,11 @@ import {
   createChannelManagedAgents,
   ensureChannelAgentPresetInChannel,
 } from "@/features/agents/channelAgents";
-import { channelsQueryKey } from "@/features/channels/hooks";
 import { resolveSnapshotAvatarPng } from "@/features/agents/ui/snapshotAvatarPng";
+import {
+  channelsQueryKey,
+  upsertCachedChannelMember,
+} from "@/features/channels/hooks";
 import { evictUsersBatchEntries } from "@/features/profile/hooks";
 import {
   createManagedAgent,
@@ -58,6 +61,7 @@ import type {
   AcpRuntime,
   AgentPersona,
   AgentTeam,
+  Channel,
   CreateManagedAgentInput,
   CreatePersonaInput,
   CreateTeamInput,
@@ -95,14 +99,22 @@ export const managedAgentPrereqsQueryKey = ["managed-agent-prereqs"] as const;
 export const backendProvidersQueryKey = ["backend-providers"] as const;
 export const gitBashPrerequisiteQueryKey = ["git-bash-prerequisite"] as const;
 
+type InvalidateAgentQueriesOptions = {
+  refetchChannels?: boolean;
+};
+
 async function invalidateAgentQueries(
   queryClient: ReturnType<typeof useQueryClient>,
   channelId: string | null,
+  options: InvalidateAgentQueriesOptions = {},
 ) {
   await Promise.all([
     queryClient.invalidateQueries({ queryKey: managedAgentsQueryKey }),
     queryClient.invalidateQueries({ queryKey: relayAgentsQueryKey }),
-    queryClient.invalidateQueries({ queryKey: channelsQueryKey }),
+    queryClient.invalidateQueries({
+      queryKey: channelsQueryKey,
+      refetchType: options.refetchChannels === false ? "none" : "active",
+    }),
     ...(channelId
       ? [
           queryClient.invalidateQueries({
@@ -122,9 +134,27 @@ function refreshAgentQueriesInBackground(task: () => Promise<unknown>) {
 function invalidateAgentQueriesInBackground(
   queryClient: ReturnType<typeof useQueryClient>,
   channelId: string | null,
+  options?: InvalidateAgentQueriesOptions,
 ) {
   refreshAgentQueriesInBackground(() =>
-    invalidateAgentQueries(queryClient, channelId),
+    invalidateAgentQueries(queryClient, channelId, options),
+  );
+}
+
+function isCachedDmChannel(
+  queryClient: ReturnType<typeof useQueryClient>,
+  channelId: string | null,
+) {
+  if (!channelId) {
+    return false;
+  }
+
+  return Boolean(
+    queryClient
+      .getQueryData<Channel[]>(channelsQueryKey)
+      ?.some(
+        (channel) => channel.id === channelId && channel.channelType === "dm",
+      ),
   );
 }
 
@@ -524,13 +554,33 @@ export function useAttachManagedAgentToChannelMutation(
 
       return attachManagedAgentToChannel(effectiveChannelId, rest);
     },
+    onSuccess: (result, variables) => {
+      const effectiveChannelId = variables.channelId ?? channelId;
+      if (!effectiveChannelId) {
+        return;
+      }
+
+      queryClient.setQueryData<Channel[]>(channelsQueryKey, (current) =>
+        upsertCachedChannelMember(current, effectiveChannelId, {
+          membershipAdded: result.membershipAdded,
+          name: result.agent.name,
+          pubkey: result.agent.pubkey,
+        }),
+      );
+    },
     onSettled: (_data, _err, variables) => {
       // Invalidate the effective channel (the one the server actually mutated)
       // so its membership/agent state stays fresh. Invalidating the live
       // hook-closure channelId when the user has already switched away would
       // leave the compose-time channel stale.
       const effectiveChannelId = variables?.channelId ?? channelId;
-      invalidateAgentQueriesInBackground(queryClient, effectiveChannelId);
+      // Stream membership is already applied to channelsQueryKey by onSuccess,
+      // so avoid replacing it with a lagged snapshot. DM membership is
+      // immutable: adding the agent creates a separate conversation, so refresh
+      // the list to discover that target instead of decorating the source DM.
+      invalidateAgentQueriesInBackground(queryClient, effectiveChannelId, {
+        refetchChannels: isCachedDmChannel(queryClient, effectiveChannelId),
+      });
     },
   });
 }
@@ -578,9 +628,28 @@ export function useCreateChannelManagedAgentMutation(channelId: string | null) {
       const failure = result.failures[0];
       throw new Error(failure?.error ?? "Could not create agent.");
     },
+    onSuccess: (result, variables) => {
+      const effectiveChannelId = variables.channelId ?? channelId;
+      if (!effectiveChannelId) {
+        return;
+      }
+
+      queryClient.setQueryData<Channel[]>(channelsQueryKey, (current) =>
+        upsertCachedChannelMember(current, effectiveChannelId, {
+          membershipAdded: result.membershipAdded,
+          name: result.agent.name,
+          pubkey: result.agent.pubkey,
+        }),
+      );
+    },
     onSettled: (_data, _err, variables) => {
       const effectiveChannelId = variables?.channelId ?? channelId;
-      invalidateAgentQueriesInBackground(queryClient, effectiveChannelId);
+      // Stream membership is already applied to channelsQueryKey by onSuccess,
+      // while immutable DM membership produces a separate conversation that
+      // must be discovered by refetching the channel list.
+      invalidateAgentQueriesInBackground(queryClient, effectiveChannelId, {
+        refetchChannels: isCachedDmChannel(queryClient, effectiveChannelId),
+      });
     },
   });
 }