feat(app): move IM into session side panel

Author: deepagent-ai

packages/app/src/app.tsx

@@ -56,7 +56,6 @@ const HomeRoute = lazy(() => import("@/pages/home"))
 const Session = lazy(() => import("@/pages/session"))
 const AgentSystemRoute = lazy(() => import("@/pages/agent-system"))
 const ReviewRoute = lazy(() => import("@/pages/review"))
-const IMRoute = lazy(() => import("@/pages/im"))
 
 const SessionRoute = Object.assign(
   () => (
@@ -343,7 +342,6 @@ export function AppInterface(props: {
               <Route path="/agent" component={AgentSystemRoute} />
               <Route path="/review" component={ReviewRoute} />
               <Route path="/session/:id?" component={SessionRoute} />
-              <Route path="/im" component={IMRoute} />
               </Route>
             </Dynamic>
           </ConnectionGate>

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

@@ -63,8 +63,8 @@ export const SettingsServersV2: Component = () => {
           <ButtonV2 variant="ghost-muted" icon="plus" onClick={openAdd}>
             {language.t("dialog.server.add.button")}
           </ButtonV2>
-          <ButtonV2 variant="ghost-muted" icon="cloud" onClick={openConnectServer}>
-            Connect to Server
+          <ButtonV2 variant="ghost-muted" icon="server" onClick={openConnectServer}>
+            {language.t("dialog.server.connect.button")}
           </ButtonV2>
           <WslAddServerButton />
         </div>

packages/app/src/components/settings-v2/servers.tsx

@@ -1,5 +1,17 @@
 import type { Accessor } from "solid-js"
 
+// Pure reducer for the right-side-panel mode. Kept out of the provider so the
+// open/close/toggle contract — most importantly "toggling the active tab closes
+// the panel" — is unit-testable without constructing the full LayoutProvider.
+// `undefined` means the panel is closed.
+export function toggledPanelMode<Mode extends string>(current: Mode | undefined, mode: Mode): Mode | undefined {
+  return current === mode ? undefined : mode
+}
+
+export function isPanelOpen(current: string | undefined): boolean {
+  return current !== undefined
+}
+
 export function ensureSessionKey(key: string, touch: (key: string) => void, seed: (key: string) => void) {
   touch(key)
   seed(key)

packages/app/src/context/layout-helpers.ts

@@ -1,6 +1,39 @@
 import { describe, expect, test } from "bun:test"
 import { createRoot, createSignal } from "solid-js"
-import { createSessionKeyReader, ensureSessionKey, pruneSessionKeys } from "./layout-helpers"
+import {
+  createSessionKeyReader,
+  ensureSessionKey,
+  isPanelOpen,
+  pruneSessionKeys,
+  toggledPanelMode,
+} from "./layout-helpers"
+
+describe("right-side-panel mode reducer", () => {
+  // Regression guard for the IM panel "进去出不来" bug: opening a panel must be
+  // reversible. These exercise the exact reducer the LayoutProvider's
+  // rightPanel.open/close/toggle delegate to.
+  test("opening a mode from closed sets that mode", () => {
+    expect(toggledPanelMode(undefined, "im")).toBe("im")
+  })
+
+  test("toggling the active mode closes the panel", () => {
+    // open IM, then toggle IM again → closed. This is the click-to-open,
+    // click-to-close contract the IM tab relies on.
+    const opened = toggledPanelMode(undefined, "im")
+    expect(opened).toBe("im")
+    expect(toggledPanelMode(opened, "im")).toBeUndefined()
+  })
+
+  test("toggling a different mode switches instead of closing", () => {
+    expect(toggledPanelMode("review", "im")).toBe("im")
+  })
+
+  test("isPanelOpen reflects presence of a mode", () => {
+    expect(isPanelOpen(undefined)).toBe(false)
+    expect(isPanelOpen("im")).toBe(true)
+    expect(isPanelOpen("review")).toBe(true)
+  })
+})
 
 describe("layout session-key helpers", () => {
   test("couples touch and scroll seed in order", () => {

packages/app/src/context/layout.test.ts

@@ -15,7 +15,13 @@ import { createScrollPersistence, type SessionScroll } from "./layout-scroll"
 import { createPathHelpers } from "./file/path"
 import type { ProjectAvatarVariant } from "@deepagent-code/ui/v2/project-avatar-v2"
 import { migrateLegacySessionStateKeys, ServerScope, SessionStateKey } from "@/utils/server-scope"
-import { createSessionKeyReader, ensureSessionKey, pruneSessionKeys } from "./layout-helpers"
+import {
+  createSessionKeyReader,
+  ensureSessionKey,
+  isPanelOpen,
+  pruneSessionKeys,
+  toggledPanelMode,
+} from "./layout-helpers"
 
 export { createSessionKeyReader, ensureSessionKey, pruneSessionKeys }
 
@@ -68,7 +74,18 @@ type SessionView = {
   reviewOpen?: string[]
   // U3/U4/U7: added "worktree" (isolated worktree diff/merge), "subagents" (child-session list),
   // "browser" (isolated WebContentsView).
-  rightPanelMode?: "menu" | "review" | "files" | "status" | "worktree" | "subagents" | "browser" | "plugins" | "profile" | "debug"
+  rightPanelMode?:
+    | "menu"
+    | "review"
+    | "files"
+    | "status"
+    | "worktree"
+    | "subagents"
+    | "browser"
+    | "plugins"
+    | "profile"
+    | "debug"
+    | "im"
   pendingMessage?: string
   pendingMessageAt?: number
   todoCollapsed?: boolean
@@ -883,15 +900,15 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
           },
           rightPanel: {
             mode: rightPanelMode,
-            opened: createMemo(() => rightPanelMode() !== undefined),
+            opened: createMemo(() => isPanelOpen(rightPanelMode())),
             open(mode: NonNullable<SessionView["rightPanelMode"]>) {
               setRightPanelMode(mode)
             },
             close() {
               setRightPanelMode(undefined)
             },
             toggle(mode: NonNullable<SessionView["rightPanelMode"]>) {
-              setRightPanelMode(rightPanelMode() === mode ? undefined : mode)
+              setRightPanelMode(toggledPanelMode(rightPanelMode(), mode))
             },
           },
           review: {

packages/app/src/context/layout.tsx

@@ -404,6 +404,7 @@ export const dict = {
   "dialog.server.add.error": "Could not connect to server",
   "dialog.server.add.checking": "Checking...",
   "dialog.server.add.button": "Add server",
+  "dialog.server.connect.button": "Connect to server",
   "dialog.server.add.name": "Server name (optional)",
   "dialog.server.add.namePlaceholder": "Localhost",
   "dialog.server.add.username": "Username (optional)",
@@ -673,7 +674,13 @@ export const dict = {
 
   "session.tab.session": "Session",
   "session.tab.review": "Review",
+  "session.tab.im": "Messages",
   "session.tab.context": "Context",
+  "im.loading": "Loading…",
+  "im.group.empty": "No groups yet",
+  "im.group.create": "New group",
+  "im.group.create.placeholder": "Group name, press Enter",
+  "im.group.create.failed": "Failed to create group",
   "session.panel.reviewAndFiles": "Review and files",
   "session.review.filesChanged": "{{count}} Files Changed",
   "session.review.change.one": "Change",

packages/app/src/i18n/en.ts

@@ -418,6 +418,7 @@ export const dict = {
   "dialog.server.add.error": "无法连接到服务器",
   "dialog.server.add.checking": "检查中...",
   "dialog.server.add.button": "添加服务器",
+  "dialog.server.connect.button": "连接到服务端",
   "dialog.server.add.name": "服务器名称（可选）",
   "dialog.server.add.namePlaceholder": "Localhost",
   "dialog.server.add.username": "用户名（可选）",
@@ -594,7 +595,13 @@ export const dict = {
 
   "session.tab.session": "会话",
   "session.tab.review": "审查",
+  "session.tab.im": "消息",
   "session.tab.context": "上下文",
+  "im.loading": "加载中…",
+  "im.group.empty": "还没有群组",
+  "im.group.create": "新建群组",
+  "im.group.create.placeholder": "群组名称，回车创建",
+  "im.group.create.failed": "创建群组失败",
   "session.panel.reviewAndFiles": "审查和文件",
   "session.review.filesChanged": "{{count}} 个文件变更",
   "session.review.change.one": "更改",

packages/app/src/i18n/zh.ts

@@ -0,0 +1,42 @@
+import { describe, expect, test, mock } from "bun:test"
+import { submitCreateGroup } from "./im-panel-helpers"
+import type { IMGroup } from "@/components/im/types"
+
+const group = (id: string, name: string): IMGroup => ({
+  id,
+  workspaceID: "ws",
+  projectID: null,
+  type: "project",
+  name,
+  createdBy: "server",
+  createdAt: 0,
+  updatedAt: 0,
+  deletedAt: null,
+})
+
+describe("submitCreateGroup", () => {
+  test("creates a group via the client (never window.prompt)", async () => {
+    const createGroup = mock(async (p: { name: string; type: "project" | "system" }) => group("grp_1", p.name))
+    const result = await submitCreateGroup("  Design  ", createGroup)
+
+    expect(createGroup).toHaveBeenCalledTimes(1)
+    // name is trimmed before sending
+    expect(createGroup.mock.calls[0][0]).toEqual({ name: "Design", type: "project" })
+    expect(result).toEqual({ group: group("grp_1", "Design") })
+  })
+
+  test("blank / whitespace name is a no-op and never calls the client", async () => {
+    const createGroup = mock(async () => group("grp_x", "x"))
+    expect(await submitCreateGroup("   ", createGroup)).toEqual({ skipped: true })
+    expect(await submitCreateGroup("", createGroup)).toEqual({ skipped: true })
+    expect(createGroup).not.toHaveBeenCalled()
+  })
+
+  test("surfaces a client failure as an error string", async () => {
+    const createGroup = mock(async () => {
+      throw new Error("boom")
+    })
+    const result = await submitCreateGroup("Team", createGroup)
+    expect(result).toEqual({ error: "boom" })
+  })
+})