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/channelAgents.ts

@@ -84,6 +84,12 @@ export type CreateChannelManagedAgentResult =
     runtimeId: string;
   };
 
+export type ProvisionChannelManagedAgentResult = {
+  agent: ManagedAgent;
+  created: boolean;
+  runtimeId: string;
+};
+
 export type CreateChannelManagedAgentBatchFailure = {
   kind: "generic" | "persona";
   name: string;
@@ -238,16 +244,13 @@ export async function ensureChannelAgentPresetInChannel(
   };
 }
 
-export async function createChannelManagedAgent(
-  channelId: string,
+export async function provisionChannelManagedAgent(
   input: CreateChannelManagedAgentInput,
   context?: {
     managedAgents?: ManagedAgent[];
     channelMemberPubkeys?: ReadonlySet<string>;
   },
-): Promise<CreateChannelManagedAgentResult> {
-  const role = input.role ?? "bot";
-  const ensureRunning = input.ensureRunning ?? true;
+): Promise<ProvisionChannelManagedAgentResult> {
   const trimmedName = input.name.trim();
 
   if (trimmedName.length === 0) {
@@ -285,13 +288,8 @@ export async function createChannelManagedAgent(
           ).agent
         : reusable;
 
-      const attached = await attachManagedAgentToChannel(channelId, {
-        agent: updatedAgent,
-        role,
-        ensureRunning,
-      });
       return {
-        ...attached,
+        agent: updatedAgent,
         created: false,
         runtimeId: input.runtime.id,
       };
@@ -328,13 +326,8 @@ export async function createChannelManagedAgent(
           ).agent
         : reusable;
 
-      const attached = await attachManagedAgentToChannel(channelId, {
-        agent: updatedAgent,
-        role,
-        ensureRunning,
-      });
       return {
-        ...attached,
+        agent: updatedAgent,
         created: false,
         runtimeId: input.runtime.id,
       };
@@ -373,16 +366,32 @@ export async function createChannelManagedAgent(
     throw new Error(created.spawnError);
   }
 
-  const attached = await attachManagedAgentToChannel(channelId, {
+  return {
     agent: created.agent,
-    role,
-    ensureRunning,
+    created: true,
+    runtimeId: input.runtime.id,
+  };
+}
+
+export async function createChannelManagedAgent(
+  channelId: string,
+  input: CreateChannelManagedAgentInput,
+  context?: {
+    managedAgents?: ManagedAgent[];
+    channelMemberPubkeys?: ReadonlySet<string>;
+  },
+): Promise<CreateChannelManagedAgentResult> {
+  const provisioned = await provisionChannelManagedAgent(input, context);
+  const attached = await attachManagedAgentToChannel(channelId, {
+    agent: provisioned.agent,
+    role: input.role ?? "bot",
+    ensureRunning: input.ensureRunning ?? true,
   });
 
   return {
     ...attached,
-    created: true,
-    runtimeId: input.runtime.id,
+    created: provisioned.created,
+    runtimeId: provisioned.runtimeId,
   };
 }