From 6ed00ce7b2715ba1ed6b6d68115cbdeed975f1e7 Mon Sep 17 00:00:00 2001
From: Eric <xplzv@126.com>
Date: Fri, 28 Aug 2026 15:09:38 +0800
Subject: [PATCH] feat(ui): prioritize AI assistant and simplify account menu

---
 i18n/locales/en.json                          |   2 +
 i18n/locales/zh.json                          |   2 +
 ui/chen/workspaces/DatabaseSessionSurface.vue |   4 +-
 ui/components/Header/ActionButtons.vue        | 123 +++------------
 ui/components/RightPanel/AiOverlayPanel.vue   |  38 +++++
 ui/components/RightPanel/aiPanel.vue          |   4 +-
 ui/components/RightPanel/rightPanel.vue       |  15 +-
 ui/components/SideBar/ProfileAppMenu.vue      | 141 ++++++++++++++++++
 ui/components/SideBar/profile.vue             | 101 ++++++-------
 ui/components/Workspace/shell.vue             |   2 +
 .../Workspace/terminalAiCommandPopover.vue    |  12 +-
 ui/composables/useAiPanel.test.ts             |  51 +++++++
 ui/composables/useAiPanel.ts                  |  32 ++++
 ui/composables/useRightPanel.ts               |  15 +-
 ui/layouts/default.vue                        |   6 +
 ui/pages/koko/connect.vue                     |  19 +--
 ui/pages/session/[assetId].vue                |  31 +++-
 17 files changed, 399 insertions(+), 199 deletions(-)
 create mode 100644 ui/components/RightPanel/AiOverlayPanel.vue
 create mode 100644 ui/components/SideBar/ProfileAppMenu.vue
 create mode 100644 ui/composables/useAiPanel.test.ts
 create mode 100644 ui/composables/useAiPanel.ts

diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 5dfd6e605..5e502e94e 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -247,6 +247,8 @@
   "RightPanel": {
     "Open": "Open right panel",
     "Close": "Close right panel",
+    "AIOpen": "Open AI assistant",
+    "AIClose": "Close AI assistant",
     "Session": "Session",
     "Control": "Control",
     "Files": "Files",
diff --git a/i18n/locales/zh.json b/i18n/locales/zh.json
index bc16331d3..2515d9d7c 100644
--- a/i18n/locales/zh.json
+++ b/i18n/locales/zh.json
@@ -247,6 +247,8 @@
   "RightPanel": {
     "Open": "打开右侧面板",
     "Close": "关闭右侧面板",
+    "AIOpen": "打开 AI 助手",
+    "AIClose": "关闭 AI 助手",
     "Session": "会话",
     "Control": "控制",
     "Files": "文件",
diff --git a/ui/chen/workspaces/DatabaseSessionSurface.vue b/ui/chen/workspaces/DatabaseSessionSurface.vue
index fe38190c9..09bab8480 100644
--- a/ui/chen/workspaces/DatabaseSessionSurface.vue
+++ b/ui/chen/workspaces/DatabaseSessionSurface.vue
@@ -92,7 +92,7 @@ const emit = defineEmits<{ reconnect: [] }>();
 
 const toast = useToast();
 const { locale, t } = useI18n();
-const { openWithTab } = useRightPanel();
+const { openAi } = useAiPanel();
 const { addErrorToast } = useErrorToast();
 const userInfoStore = useUserInfoStore();
 const { markSessionConnected, markSessionFailed } = useWorkspaceTabs();
@@ -597,7 +597,7 @@ function connectSqlAiSession() {
 }
 
 function openSqlAi() {
-  openWithTab("ai");
+  openAi();
 }
 
 function requestSqlAi(operation: ChenSqlAiOperation) {
diff --git a/ui/components/Header/ActionButtons.vue b/ui/components/Header/ActionButtons.vue
index d2eb659a0..9aa1f308d 100644
--- a/ui/components/Header/ActionButtons.vue
+++ b/ui/components/Header/ActionButtons.vue
@@ -1,120 +1,45 @@
 <script setup lang="ts">
-import type { DropdownMenuItem } from "@nuxt/ui";
-import type { LangType } from "~/types";
-
 import Profile from "~/components/SideBar/profile.vue";
 
-const { t, locales, locale } = useI18n();
-const { openSettings } = useSettingsWindow();
-const { themeDropdownItems } = useThemeOptions();
-const { setLang } = useSettingManager();
-const localePath = useLocalePath();
+const { t } = useI18n();
+const { activeWorkspaceMode } = useWorkspaceMode();
+const { activeTab: rightPanelTab, open: rightPanelOpen, toggle: toggleRightPanel } = useRightPanel();
+const { open: aiPanelOpen, toggleAi } = useAiPanel();
+const showRightPanelButton = computed(() => activeWorkspaceMode.value !== "files");
+const aiButtonLabel = computed(() => t(aiPanelOpen.value ? "RightPanel.AIClose" : "RightPanel.AIOpen"));
 
-const commonButtonProps = {
-  size: "sm" as const,
-  color: "neutral" as const
+const handleToggleAi = () => {
+  toggleAi(rightPanelOpen.value && rightPanelTab.value === "sftp" ? "sftp" : "workspace");
 };
-
-const { open: rightPanelOpen, toggle: toggleRightPanel } = useRightPanel();
-
-const languageItems = computed<DropdownMenuItem[]>(() =>
-  ((locales.value as Array<{ code?: string; name?: string } | string>) || []).map((item) => {
-    const code = typeof item === "string" ? item : item.code || "";
-    const label = typeof item === "string" ? item : item.name || code;
-
-    return {
-      label,
-      type: "checkbox",
-      checked: locale.value === code,
-      onUpdateChecked: (checked: boolean) => {
-        if (checked && code) setLang(code as LangType);
-      }
-    };
-  })
-);
-
-const toolItems = computed<DropdownMenuItem[]>(() => [
-  {
-    label: t("Menu.Player"),
-    icon: "lucide:clapperboard",
-    to: localePath("videoplayer")
-  },
-  {
-    label: t("Menu.Transcode"),
-    icon: "lucide:repeat-2",
-    to: localePath({ path: "/transcode" })
-  }
-]);
-
-const appMenuItems = computed<DropdownMenuItem[]>(() => [
-  {
-    label: t("Common.Language"),
-    icon: "i-lucide-languages",
-    children: languageItems.value
-  },
-  ...(isDesktopRuntime()
-    ? [
-        {
-          label: t("Menu.MyTools"),
-          icon: "i-lucide-wrench",
-          children: toolItems.value
-        } satisfies DropdownMenuItem
-      ]
-    : []),
-  {
-    label: t("Common.SwitchTheme"),
-    icon: "i-lucide-palette",
-    children: themeDropdownItems.value
-  },
-  { type: "separator" },
-  {
-    label: t("Common.Preferences"),
-    icon: "i-lucide-settings",
-    onSelect: () => void openSettings()
-  },
-  {
-    label: t("DesktopMenu.About"),
-    icon: "i-lucide-info",
-    onSelect: () => void openSettings("/setting/about")
-  }
-]);
 </script>
 
 <template>
   <section class="flex items-center h-full">
     <div class="flex items-center gap-1 px-2">
-      <UDropdownMenu
-        :items="appMenuItems"
-        size="sm"
-        :content="{ align: 'end', side: 'bottom', sideOffset: 6 }"
-        :ui="{
-          item: '!items-center leading-none',
-          itemLeadingIcon: 'size-4 shrink-0 block leading-none',
-          itemTrailingIcon: '!size-4 shrink-0 block leading-none',
-          itemLabel: 'block truncate text-start leading-none',
-          itemWrapper: 'min-w-0 flex-1 justify-start text-start'
-        }"
-      >
-        <UTooltip arrow :text="t('Common.AppMenu')">
-          <UButton
-            icon="i-lucide-settings"
-            :aria-label="t('Common.AppMenu')"
-            v-bind="commonButtonProps"
-            variant="ghost"
-            :ui="{ leadingIcon: 'size-4' }"
-          />
-        </UTooltip>
-      </UDropdownMenu>
+      <UTooltip arrow :text="aiButtonLabel">
+        <UButton
+          icon="i-lucide-sparkles"
+          :aria-label="aiButtonLabel"
+          :aria-pressed="aiPanelOpen"
+          size="sm"
+          color="primary"
+          :variant="aiPanelOpen ? 'soft' : 'ghost'"
+          :ui="{ leadingIcon: 'size-4' }"
+          @click="handleToggleAi"
+        />
+      </UTooltip>
 
       <Profile placement="topbar" />
 
-      <UTooltip arrow :text="rightPanelOpen ? t('RightPanel.Close') : t('RightPanel.Open')">
+      <UTooltip v-if="showRightPanelButton" arrow :text="rightPanelOpen ? t('RightPanel.Close') : t('RightPanel.Open')">
         <UButton
           :icon="rightPanelOpen ? 'i-lucide-panel-right-close' : 'i-lucide-panel-right'"
           :aria-label="rightPanelOpen ? t('RightPanel.Close') : t('RightPanel.Open')"
           :aria-pressed="rightPanelOpen"
-          v-bind="commonButtonProps"
+          size="sm"
+          color="neutral"
           :variant="rightPanelOpen ? 'soft' : 'ghost'"
+          :ui="{ leadingIcon: 'size-4' }"
           @click="toggleRightPanel"
         />
       </UTooltip>
diff --git a/ui/components/RightPanel/AiOverlayPanel.vue b/ui/components/RightPanel/AiOverlayPanel.vue
new file mode 100644
index 000000000..def0ccdd9
--- /dev/null
+++ b/ui/components/RightPanel/AiOverlayPanel.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+const emit = defineEmits<{ close: [] }>();
+const { t } = useI18n();
+const isNarrowScreen = useMediaQuery("(max-width: 767px)");
+</script>
+
+<template>
+  <div class="pointer-events-none absolute inset-0 z-50">
+    <button
+      v-if="isNarrowScreen"
+      type="button"
+      class="pointer-events-auto absolute inset-0 bg-black/35 backdrop-blur-[1px]"
+      :aria-label="t('RightPanel.AIClose')"
+      @click="emit('close')"
+    />
+
+    <aside
+      class="pointer-events-auto absolute inset-y-0 right-0 flex w-[min(380px,calc(100vw-3rem))] min-h-0 flex-col border-l border-[var(--app-border)] bg-[var(--app-panel-bg)] text-[var(--app-fg)] shadow-2xl"
+    >
+      <div class="flex h-10 shrink-0 items-center gap-2 border-b border-[var(--app-border)] px-3">
+        <UIcon name="i-lucide-sparkles" class="size-4 text-primary" />
+        <span class="min-w-0 flex-1 truncate text-sm font-semibold">{{ t("RightPanel.AI") }}</span>
+        <UButton
+          icon="i-lucide-x"
+          :aria-label="t('RightPanel.AIClose')"
+          color="neutral"
+          variant="ghost"
+          size="xs"
+          @click="emit('close')"
+        />
+      </div>
+
+      <div class="min-h-0 flex-1 overflow-hidden">
+        <RightPanelAiPanel />
+      </div>
+    </aside>
+  </div>
+</template>
diff --git a/ui/components/RightPanel/aiPanel.vue b/ui/components/RightPanel/aiPanel.vue
index 636511f09..28f013ae9 100644
--- a/ui/components/RightPanel/aiPanel.vue
+++ b/ui/components/RightPanel/aiPanel.vue
@@ -13,7 +13,7 @@ import { useAiPanelController } from "./ai/useAiPanelController";
 
 const { activePaneId, activeTab } = useWorkspaceTabs();
 const { activeWorkspaceMode } = useWorkspaceMode();
-const { aiSourceTab } = useRightPanel();
+const { source: aiSource } = useAiPanel();
 const { t } = useI18n();
 const activeSurface = computed(() => {
   if (activeWorkspaceMode.value === "files") return null;
@@ -31,7 +31,7 @@ const globalFileTargetId = computed(() => getActiveKokoFileAiTargetId(KOKO_GLOBA
 const compactFileOwnerId = computed(() => createKokoCompactFileAiOwnerId(activeSurface.value?.id || ""));
 const compactFileTargetId = computed(() => getActiveKokoFileAiTargetId(compactFileOwnerId.value) || "");
 const preferCompactFileAi = computed(
-  () => aiSourceTab.value === "sftp" && activeSurface.value?.protocol?.toLowerCase() === "ssh"
+  () => aiSource.value === "sftp" && activeSurface.value?.protocol?.toLowerCase() === "ssh"
 );
 const aiTargetId = computed(() =>
   resolveAiPanelTarget({
diff --git a/ui/components/RightPanel/rightPanel.vue b/ui/components/RightPanel/rightPanel.vue
index 0efb2b1d3..5d46e154c 100644
--- a/ui/components/RightPanel/rightPanel.vue
+++ b/ui/components/RightPanel/rightPanel.vue
@@ -5,7 +5,7 @@ import { getLionWorkspaceSession } from "@/lion/workspaces/useLionWorkspaceSessi
 const { t } = useI18n();
 const { activePaneId, activeTab: workspaceTab } = useWorkspaceTabs();
 const { activeWorkspaceMode } = useWorkspaceMode();
-const { activeTab, setActiveTab } = useRightPanel();
+const { activeTab, setActiveTab, setOpen } = useRightPanel();
 const activeSession = computed(() => {
   if (activeWorkspaceMode.value === "files") return null;
   const tab = workspaceTab.value;
@@ -18,12 +18,10 @@ const lionSession = computed(() => getLionWorkspaceSession(activeSession.value?.
 const showSftpTab = computed(() => activeSession.value?.protocol?.toLowerCase() === "ssh");
 
 const tabs = computed(() => {
-  if (activeWorkspaceMode.value === "files") {
-    return [{ value: "ai" as const, label: t("RightPanel.AI"), icon: "i-lucide-sparkles" }];
-  }
+  if (activeWorkspaceMode.value === "files") return [];
 
   const items: Array<{ value: RightPanelTab; label: string; icon: string; title?: string }> = [
-    { value: "session" as const, label: t("RightPanel.Session"), icon: "i-lucide-terminal" }
+    { value: "session", label: t("RightPanel.Session"), icon: "i-lucide-terminal" }
   ];
 
   if (lionSession.value) {
@@ -50,8 +48,6 @@ const tabs = computed(() => {
     });
   }
 
-  items.push({ value: "ai" as const, label: t("RightPanel.AI"), icon: "i-lucide-sparkles" });
-
   return items;
 });
 
@@ -59,7 +55,6 @@ const panelComponents = {
   session: defineAsyncComponent(() => import("~/components/RightPanel/sessionPanel.vue")),
   "lion-control": defineAsyncComponent(() => import("~/components/RightPanel/lionControlPanel.vue")),
   "lion-files": defineAsyncComponent(() => import("~/components/RightPanel/lionFilePanel.vue")),
-  ai: defineAsyncComponent(() => import("~/components/RightPanel/aiPanel.vue")),
   sftp: defineAsyncComponent(() => import("~/components/RightPanel/sftpPanel.vue"))
 } as const;
 
@@ -68,6 +63,10 @@ const activePanelComponent = computed(() => panelComponents[activeTab.value]);
 watch(
   tabs,
   (items) => {
+    if (!items.length) {
+      setOpen(false);
+      return;
+    }
     if (!items.some((item) => item.value === activeTab.value)) setActiveTab(items[0]?.value || "session");
   },
   { immediate: true }
diff --git a/ui/components/SideBar/ProfileAppMenu.vue b/ui/components/SideBar/ProfileAppMenu.vue
new file mode 100644
index 000000000..7f5f0247a
--- /dev/null
+++ b/ui/components/SideBar/ProfileAppMenu.vue
@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import type { DropdownMenuItem } from "@nuxt/ui";
+import type { LangType } from "~/types";
+
+const props = withDefaults(
+  defineProps<{
+    submenuSide?: "left" | "right";
+  }>(),
+  {
+    submenuSide: "left"
+  }
+);
+
+const emit = defineEmits<{
+  select: [];
+}>();
+
+const { t, locales, locale } = useI18n();
+const { openSettings } = useSettingsWindow();
+const { themeDropdownItems } = useThemeOptions();
+const { setLang } = useSettingManager();
+const localePath = useLocalePath();
+
+const submenuContent = computed(() => ({
+  align: props.submenuSide === "left" ? ("end" as const) : ("start" as const),
+  side: props.submenuSide,
+  sideOffset: 6
+}));
+
+const languageItems = computed<DropdownMenuItem[]>(() =>
+  ((locales.value as Array<{ code?: string; name?: string } | string>) || []).map((item) => {
+    const code = typeof item === "string" ? item : item.code || "";
+    const label = typeof item === "string" ? item : item.name || code;
+
+    return {
+      label,
+      type: "checkbox",
+      checked: locale.value === code,
+      onUpdateChecked: (checked: boolean) => {
+        if (checked && code) setLang(code as LangType);
+      }
+    };
+  })
+);
+
+const toolItems = computed<DropdownMenuItem[]>(() => [
+  {
+    label: t("Menu.Player"),
+    icon: "lucide:clapperboard",
+    to: localePath("videoplayer"),
+    onSelect: () => emit("select")
+  },
+  {
+    label: t("Menu.Transcode"),
+    icon: "lucide:repeat-2",
+    to: localePath({ path: "/transcode" }),
+    onSelect: () => emit("select")
+  }
+]);
+
+const openPreferences = async () => {
+  emit("select");
+  await openSettings();
+};
+
+const openAbout = async () => {
+  emit("select");
+  await openSettings("/setting/about");
+};
+</script>
+
+<template>
+  <div class="space-y-0.5">
+    <UDropdownMenu :items="languageItems" size="sm" :content="submenuContent">
+      <UButton
+        :label="t('Common.Language')"
+        icon="i-lucide-languages"
+        trailing-icon="i-lucide-chevron-right"
+        color="neutral"
+        variant="ghost"
+        size="sm"
+        block
+        class="justify-start"
+        :ui="{ trailingIcon: 'ms-auto' }"
+        @click.stop
+      />
+    </UDropdownMenu>
+
+    <UDropdownMenu v-if="isDesktopRuntime()" :items="toolItems" size="sm" :content="submenuContent">
+      <UButton
+        :label="t('Menu.MyTools')"
+        icon="i-lucide-wrench"
+        trailing-icon="i-lucide-chevron-right"
+        color="neutral"
+        variant="ghost"
+        size="sm"
+        block
+        class="justify-start"
+        :ui="{ trailingIcon: 'ms-auto' }"
+        @click.stop
+      />
+    </UDropdownMenu>
+
+    <UDropdownMenu :items="themeDropdownItems" size="sm" :content="submenuContent">
+      <UButton
+        :label="t('Common.SwitchTheme')"
+        icon="i-lucide-palette"
+        trailing-icon="i-lucide-chevron-right"
+        color="neutral"
+        variant="ghost"
+        size="sm"
+        block
+        class="justify-start"
+        :ui="{ trailingIcon: 'ms-auto' }"
+        @click.stop
+      />
+    </UDropdownMenu>
+
+    <UButton
+      :label="t('Common.Preferences')"
+      icon="i-lucide-settings"
+      color="neutral"
+      variant="ghost"
+      size="sm"
+      block
+      class="justify-start"
+      @click="openPreferences"
+    />
+
+    <UButton
+      :label="t('DesktopMenu.About')"
+      icon="i-lucide-info"
+      color="neutral"
+      variant="ghost"
+      size="sm"
+      block
+      class="justify-start"
+      @click="openAbout"
+    />
+  </div>
+</template>
diff --git a/ui/components/SideBar/profile.vue b/ui/components/SideBar/profile.vue
index 2d380afa6..70c90baa7 100644
--- a/ui/components/SideBar/profile.vue
+++ b/ui/components/SideBar/profile.vue
@@ -6,6 +6,7 @@ import type { UserData } from "~/types/index";
 import { useSettingManager } from "~/composables/useSettingManager";
 import { desktopApp, desktopEmit, desktopInvoke, desktopListen } from "~/shared/desktop/bridge";
 import { useUserInfoStore } from "~/store/modules/userInfo";
+import ProfileAppMenu from "./ProfileAppMenu.vue";
 import RecentSites from "./recentSites.vue";
 
 interface VersionAlertPayload {
@@ -123,11 +124,6 @@ const accountTooltip = computed(() => {
 });
 
 const accountSite = computed(() => currentUser.value?.siteName || currentUser.value?.site || "—");
-const accountOrganization = computed(() => currentUser.value?.org?.name || "—");
-const accountRoleList = computed(() =>
-  (currentUser.value?.system_roles || []).map((role) => role.display_name).filter(Boolean)
-);
-const accountRoles = computed(() => accountRoleList.value.join(", ") || t("UserProfile.NoRole"));
 
 const handleProfileOpenAutoFocus = (event: Event) => {
   if (profileOpenedByPointer.value) event.preventDefault();
@@ -369,6 +365,8 @@ const checkVersionBeforeOAuth = async (accountId: string, site: string) => {
  * @description 打开登录页面
  */
 function openLoginPage() {
+  profileOpen.value = false;
+
   if (!isDesktopRuntime()) {
     redirectToWebLogin();
     return;
@@ -700,7 +698,7 @@ onBeforeUnmount(() => {
 
 <template>
   <UPopover
-    v-if="loggedIn"
+    v-if="loggedIn || isTopbar"
     v-model:open="profileOpen"
     :content="{
       align: isTopbar ? 'end' : 'start',
@@ -710,7 +708,7 @@ onBeforeUnmount(() => {
     }"
     :ui="{
       content:
-        'w-64 overflow-hidden rounded-xl bg-[var(--app-surface-overlay)] p-0 shadow-[var(--theme-shadow-soft)] ring-1 ring-[var(--app-border)] backdrop-blur-md'
+        'max-h-[calc(100dvh-4rem)] w-64 overflow-y-auto rounded-xl bg-[var(--app-surface-overlay)] p-0 shadow-[var(--theme-shadow-soft)] ring-1 ring-[var(--app-border)] backdrop-blur-md'
     }"
   >
     <UTooltip v-if="isTopbar" arrow :text="accountTooltip">
@@ -747,50 +745,50 @@ onBeforeUnmount(() => {
 
     <template #content>
       <div class="w-full">
-        <button
-          type="button"
-          class="group flex w-full items-center gap-3 rounded-t-xl border-b border-default px-3 py-3 text-left transition-colors hover:bg-elevated focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"
-          @click="openUserSettings"
-        >
-          <UAvatar :alt="currentUser?.name || t('Common.User')" color="primary" size="md" class="shrink-0" />
-          <div class="min-w-0 flex-1">
-            <p class="truncate text-sm font-semibold text-highlighted">
-              {{ currentUser?.name || t("Common.User") }}
-            </p>
-            <p class="truncate text-xs text-muted" :title="accountSite">
-              {{ accountSite }}
-            </p>
-          </div>
-          <UIcon
-            name="i-lucide-chevron-right"
-            class="size-4 shrink-0 text-dimmed transition-transform group-hover:translate-x-0.5 group-hover:text-muted"
+        <template v-if="loggedIn">
+          <button
+            type="button"
+            class="group flex w-full items-center gap-3 rounded-t-xl px-3 py-3 text-left transition-colors hover:bg-elevated focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"
+            @click="openUserSettings"
+          >
+            <UAvatar :alt="currentUser?.name || t('Common.User')" color="primary" size="md" class="shrink-0" />
+            <div class="min-w-0 flex-1">
+              <p class="truncate text-sm font-semibold text-highlighted">
+                {{ currentUser?.name || t("Common.User") }}
+              </p>
+              <p class="truncate text-xs text-muted" :title="accountSite">
+                {{ accountSite }}
+              </p>
+            </div>
+            <UIcon
+              name="i-lucide-chevron-right"
+              class="size-4 shrink-0 text-dimmed transition-transform group-hover:translate-x-0.5 group-hover:text-muted"
+            />
+          </button>
+        </template>
+
+        <div v-else class="p-1.5">
+          <UButton
+            :label="t('Common.Login')"
+            icon="i-lucide-log-in"
+            color="primary"
+            variant="soft"
+            size="sm"
+            block
+            class="justify-start"
+            @click="openLoginPage"
           />
-        </button>
-
-        <div class="space-y-0.5 p-1.5 text-xs">
-          <div class="flex min-h-8 items-center gap-3 rounded-md px-2 py-1.5">
-            <span class="shrink-0 text-dimmed">{{ t("UserProfile.CurrentOrganization") }}</span>
-            <span class="min-w-0 truncate font-medium text-highlighted" :title="accountOrganization">
-              {{ accountOrganization }}
-            </span>
-          </div>
-          <div class="flex min-h-8 items-center gap-3 rounded-md px-2 py-1.5">
-            <span class="shrink-0 text-dimmed">{{ t("UserProfile.SystemRoles") }}</span>
-            <span
-              class="min-w-0 truncate font-medium text-highlighted"
-              :class="{ 'text-muted': accountRoleList.length === 0 }"
-              :title="accountRoles"
-            >
-              {{ accountRoles }}
-            </span>
-          </div>
         </div>
 
-        <div v-if="isDesktopRuntime()" class="border-t border-default p-1.5">
+        <div v-if="isTopbar" class="border-t border-default p-1.5">
+          <ProfileAppMenu :submenu-side="isTopbar ? 'left' : 'right'" @select="profileOpen = false" />
+        </div>
+
+        <div v-if="loggedIn && isDesktopRuntime()" class="border-t border-default p-1.5">
           <UDropdownMenu
             :items="siteSwitcherItems"
             size="sm"
-            :content="{ align: 'end', side: 'left', sideOffset: 6 }"
+            :content="{ align: 'end', side: isTopbar ? 'left' : 'right', sideOffset: 6 }"
             :ui="{ content: 'w-64 max-h-72 overflow-y-auto p-1' }"
           >
             <UButton
@@ -808,7 +806,7 @@ onBeforeUnmount(() => {
           </UDropdownMenu>
         </div>
 
-        <div class="border-t border-default p-1.5">
+        <div v-if="loggedIn" class="border-t border-default p-1.5">
           <UButton
             :label="t('Login.Logout')"
             icon="i-lucide-log-out"
@@ -824,17 +822,6 @@ onBeforeUnmount(() => {
     </template>
   </UPopover>
 
-  <UTooltip v-else-if="isTopbar" arrow :text="accountTooltip">
-    <UButton
-      color="neutral"
-      variant="ghost"
-      size="sm"
-      icon="i-lucide-circle-user-round"
-      :aria-label="accountTooltip"
-      @click="openLoginPage"
-    />
-  </UTooltip>
-
   <button
     v-else
     type="button"
diff --git a/ui/components/Workspace/shell.vue b/ui/components/Workspace/shell.vue
index 7e5188a10..8fcf7e3ee 100644
--- a/ui/components/Workspace/shell.vue
+++ b/ui/components/Workspace/shell.vue
@@ -201,6 +201,8 @@ onBeforeUnmount(() => {
           @pointerdown="startRightResizing"
         />
       </aside>
+
+      <slot name="overlayPanel" />
     </div>
 
     <div
diff --git a/ui/components/Workspace/terminalAiCommandPopover.vue b/ui/components/Workspace/terminalAiCommandPopover.vue
index 5838ff01a..01c8b8d6e 100644
--- a/ui/components/Workspace/terminalAiCommandPopover.vue
+++ b/ui/components/Workspace/terminalAiCommandPopover.vue
@@ -18,7 +18,7 @@ import {
 const props = defineProps<{ pane: WorkspacePane }>();
 const { t } = useI18n();
 const { isMacOS } = usePlatform();
-const { openWithTab } = useRightPanel();
+const { openAi } = useAiPanel();
 const open = ref(false);
 const submitting = ref(false);
 const error = ref("");
@@ -174,7 +174,7 @@ function startCursorTracking() {
 async function show(xterm: HTMLElement) {
   if (!available.value) return;
   if (isKokoTerminalAiBusy(props.pane.id)) {
-    openWithTab("ai");
+    openAi();
     return;
   }
 
@@ -212,7 +212,7 @@ function handleWindowKeydown(event: KeyboardEvent) {
 
   const action = terminalAiCommandShortcutAction(available.value, isKokoTerminalAiBusy(props.pane.id));
   if (action === "panel") {
-    openWithTab("ai");
+    openAi();
     return;
   }
   if (action === "popover") void show(xterm);
@@ -236,7 +236,7 @@ async function submit() {
 
   if (isKokoTerminalAiBusy(paneId)) {
     close(false);
-    openWithTab("ai");
+    openAi();
     return;
   }
 
@@ -247,13 +247,13 @@ async function submit() {
     if (current.draft.trim() === text) current.draft = "";
     if (props.pane.id !== paneId) return;
     close(false);
-    openWithTab("ai");
+    openAi();
   } catch (cause) {
     if (props.pane.id !== paneId) return;
     const code = cause instanceof Error && "code" in cause ? String(cause.code) : "";
     if (code === "response_active") {
       close(false);
-      openWithTab("ai");
+      openAi();
     } else if (code === "unavailable") {
       error.value = t("RightPanel.AIUnavailableForTerminal");
     } else {
diff --git a/ui/composables/useAiPanel.test.ts b/ui/composables/useAiPanel.test.ts
new file mode 100644
index 000000000..2b71b5747
--- /dev/null
+++ b/ui/composables/useAiPanel.test.ts
@@ -0,0 +1,51 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import { useAiPanel } from "./useAiPanel";
+import { useRightPanel } from "./useRightPanel";
+
+describe("AI overlay panel", () => {
+  beforeEach(() => {
+    const aiPanel = useAiPanel();
+    aiPanel.openAi();
+    aiPanel.setOpen(false);
+
+    const rightPanel = useRightPanel();
+    rightPanel.setOpen(false);
+    rightPanel.setActiveTab("session");
+    rightPanel.setPanelWidth(340);
+  });
+
+  it("opens with the selected workspace context without changing layout state", () => {
+    const panel = useAiPanel();
+    const rightPanel = useRightPanel();
+    rightPanel.setOpen(true);
+    rightPanel.setActiveTab("sftp");
+    rightPanel.setPanelWidth(412);
+
+    panel.toggleAi("sftp");
+
+    expect(panel.open.value).toBe(true);
+    expect(panel.source.value).toBe("sftp");
+    expect(rightPanel.open.value).toBe(true);
+    expect(rightPanel.activeTab.value).toBe("sftp");
+    expect(rightPanel.panelWidth.value).toBe(412);
+  });
+
+  it("closes on the next toggle without changing its context", () => {
+    const panel = useAiPanel();
+    panel.openAi("sftp");
+
+    panel.toggleAi();
+
+    expect(panel.open.value).toBe(false);
+    expect(panel.source.value).toBe("sftp");
+  });
+
+  it("uses the active workspace session for programmatic AI entry", () => {
+    const panel = useAiPanel();
+    panel.openAi("sftp");
+
+    panel.openAi();
+
+    expect(panel.source.value).toBe("workspace");
+  });
+});
diff --git a/ui/composables/useAiPanel.ts b/ui/composables/useAiPanel.ts
new file mode 100644
index 000000000..58e651d6a
--- /dev/null
+++ b/ui/composables/useAiPanel.ts
@@ -0,0 +1,32 @@
+export type AiPanelSource = "workspace" | "sftp";
+
+const open = shallowRef(false);
+const source = shallowRef<AiPanelSource>("workspace");
+
+export const useAiPanel = () => {
+  const setOpen = (value: boolean) => {
+    open.value = value;
+  };
+
+  const openAi = (nextSource: AiPanelSource = "workspace") => {
+    source.value = nextSource;
+    open.value = true;
+  };
+
+  const toggleAi = (nextSource: AiPanelSource = "workspace") => {
+    if (open.value) {
+      open.value = false;
+      return;
+    }
+
+    openAi(nextSource);
+  };
+
+  return {
+    open,
+    source,
+    setOpen,
+    openAi,
+    toggleAi
+  };
+};
diff --git a/ui/composables/useRightPanel.ts b/ui/composables/useRightPanel.ts
index ce69bce83..43f8ae70b 100644
--- a/ui/composables/useRightPanel.ts
+++ b/ui/composables/useRightPanel.ts
@@ -1,14 +1,12 @@
-export type RightPanelTab = "session" | "lion-control" | "lion-files" | "ai" | "sftp";
-export type RightPanelAiSourceTab = Exclude<RightPanelTab, "ai">;
+export type RightPanelTab = "session" | "lion-control" | "lion-files" | "sftp";
 
 const MIN_PANEL_WIDTH = 280;
 const MAX_PANEL_WIDTH = 520;
 const DEFAULT_PANEL_WIDTH = 340;
 
-const open = ref(false);
-const activeTab = ref<RightPanelTab>("session");
-const aiSourceTab = shallowRef<RightPanelAiSourceTab>("session");
-const panelWidth = ref(DEFAULT_PANEL_WIDTH);
+const open = shallowRef(false);
+const activeTab = shallowRef<RightPanelTab>("session");
+const panelWidth = shallowRef(DEFAULT_PANEL_WIDTH);
 
 export const useRightPanel = () => {
   const setOpen = (value: boolean) => {
@@ -20,14 +18,10 @@ export const useRightPanel = () => {
   };
 
   const setActiveTab = (tab: RightPanelTab) => {
-    if (tab !== "ai") aiSourceTab.value = tab;
     activeTab.value = tab;
   };
 
   const openWithTab = (tab: RightPanelTab) => {
-    // Programmatic AI entry points originate from the active workspace surface.
-    // Direct tab clicks preserve the last visible right-panel context (for example SFTP).
-    aiSourceTab.value = tab === "ai" ? "session" : tab;
     activeTab.value = tab;
     open.value = true;
   };
@@ -39,7 +33,6 @@ export const useRightPanel = () => {
   return {
     open,
     activeTab,
-    aiSourceTab,
     panelWidth,
     setOpen,
     toggle,
diff --git a/ui/layouts/default.vue b/ui/layouts/default.vue
index 6a9d94d00..223f10383 100644
--- a/ui/layouts/default.vue
+++ b/ui/layouts/default.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import AiOverlayPanel from "~/components/RightPanel/AiOverlayPanel.vue";
 import WorkspaceShell from "~/components/Workspace/shell.vue";
 import WorkspaceStatusFooter from "~/components/Workspace/statusFooter.vue";
 import {
@@ -35,6 +36,7 @@ const {
   statusBarVisible
 } = useSettingManager();
 const { open: rightPanelOpen, toggle: toggleRightPanel } = useRightPanel();
+const { open: aiPanelOpen, setOpen: setAiPanelOpen } = useAiPanel();
 const { open: settingsOpen, activeSection: activeSettingsSection, openSettings } = useSettingsWindow();
 const commandExecutionEnabled = computed(() => currentUser.value?.commandExecutionEnabled === true);
 const standaloneAssetWindow = ref(false);
@@ -283,6 +285,10 @@ onBeforeUnmount(() => {
         <RightPanel v-if="rightPanelOpen" />
       </template>
 
+      <template #overlayPanel>
+        <AiOverlayPanel v-if="aiPanelOpen && !focusMode" @close="setAiPanelOpen(false)" />
+      </template>
+
       <template #bottomPanel>
         <div v-if="activeWorkspaceMode === 'assets' && commandExecutionEnabled && batchPanelOpen" class="min-h-0">
           <WorkspaceBatchCommandBottomPanel />
diff --git a/ui/pages/koko/connect.vue b/ui/pages/koko/connect.vue
index 1bf134a13..2de2c1697 100644
--- a/ui/pages/koko/connect.vue
+++ b/ui/pages/koko/connect.vue
@@ -2,6 +2,7 @@
 import type { ConnectorSessionContext } from "@jumpserver/connectors-core";
 import { connectorSessionKey } from "@jumpserver/connectors-core";
 import { KokoConnectView } from "@jumpserver/koko";
+import AiOverlayPanel from "~/components/RightPanel/AiOverlayPanel.vue";
 import { getAuthenticatedTerminalCommandHistoryScope } from "~/composables/useTerminalCommandHistory";
 import { useUserInfoStore } from "~/store/modules/userInfo";
 
@@ -14,7 +15,7 @@ const { activePaneId } = useWorkspaceTabs();
 const { currentSite, currentUser, loggedIn } = storeToRefs(useUserInfoStore());
 const { bootstrapPersistedSession } = useAuthSession();
 const sessionContext = ref<ConnectorSessionContext | null>(null);
-const aiOpen = ref(true);
+const aiOpen = shallowRef(true);
 
 provide(connectorSessionKey, sessionContext);
 
@@ -80,20 +81,16 @@ onBeforeUnmount(() => {
       <UButton
         v-if="sessionContext"
         size="sm"
-        color="neutral"
-        variant="soft"
+        color="primary"
+        :variant="aiOpen ? 'soft' : 'ghost'"
         class="absolute right-3 top-3 z-40 shadow-md backdrop-blur-sm"
-        :icon="aiOpen ? 'i-lucide-panel-right-close' : 'i-lucide-sparkles'"
-        :aria-label="aiOpen ? t('RightPanel.Close') : t('RightPanel.AI')"
+        icon="i-lucide-sparkles"
+        :aria-label="t(aiOpen ? 'RightPanel.AIClose' : 'RightPanel.AIOpen')"
+        :aria-pressed="aiOpen"
         @click="aiOpen = !aiOpen"
       />
     </div>
 
-    <aside
-      v-if="sessionContext && aiOpen"
-      class="h-full min-h-0 w-[min(360px,42vw)] shrink-0 border-l border-default bg-default"
-    >
-      <RightPanelAiPanel />
-    </aside>
+    <AiOverlayPanel v-if="sessionContext && aiOpen" @close="aiOpen = false" />
   </div>
 </template>
diff --git a/ui/pages/session/[assetId].vue b/ui/pages/session/[assetId].vue
index fb5557564..6b40d3d5e 100644
--- a/ui/pages/session/[assetId].vue
+++ b/ui/pages/session/[assetId].vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import AiOverlayPanel from "~/components/RightPanel/AiOverlayPanel.vue";
 import { desktopInvoke } from "~/shared/desktop/bridge";
 import { useUserInfoStore } from "~/store/modules/userInfo";
 
@@ -10,7 +11,8 @@ const { initialTheme, listenOSThemeChange } = useThemeAdapter();
 const { registerSessionDisposer, activeTab } = useWorkspaceTabs();
 const { registerKokoTicketProvider } = useWorkspaceConnectors();
 const { ensureConnected, error } = useSessionWindowConnect();
-const { open: rightPanelOpen, toggle: toggleRightPanel, panelWidth } = useRightPanel();
+const { activeTab: rightPanelTab, open: rightPanelOpen, panelWidth, toggle: toggleRightPanel } = useRightPanel();
+const { open: aiPanelOpen, setOpen: setAiPanelOpen, toggleAi } = useAiPanel();
 const userInfoStore = useUserInfoStore();
 const { loggedIn } = storeToRefs(userInfoStore);
 
@@ -62,6 +64,10 @@ watch(
 const openLogin = () => {
   useEventBus().emit("login", undefined);
 };
+
+const handleToggleAi = () => {
+  toggleAi(rightPanelOpen.value && rightPanelTab.value === "sftp" ? "sftp" : "workspace");
+};
 </script>
 
 <template>
@@ -71,15 +77,32 @@ const openLogin = () => {
         <WorkspaceSessionPane :tab="activeTab" class="h-full min-h-0" />
         <WorkspacePaneSurfaceHost v-for="pane in activeTab.panes" :key="pane.id" :pane="pane" />
 
-        <div class="absolute top-2 z-40" :style="rightPanelOpen ? { right: `${panelWidth}px` } : { right: '12px' }">
+        <div
+          class="absolute top-2 z-40 flex items-center gap-1"
+          :style="rightPanelOpen ? { right: `${panelWidth}px` } : { right: '12px' }"
+        >
+          <UTooltip :text="t(aiPanelOpen ? 'RightPanel.AIClose' : 'RightPanel.AIOpen')" :delay-duration="150">
+            <UButton
+              size="sm"
+              color="primary"
+              :variant="aiPanelOpen ? 'soft' : 'ghost'"
+              class="shadow-md backdrop-blur-sm"
+              icon="i-lucide-sparkles"
+              :aria-label="t(aiPanelOpen ? 'RightPanel.AIClose' : 'RightPanel.AIOpen')"
+              :aria-pressed="aiPanelOpen"
+              @click="handleToggleAi"
+            />
+          </UTooltip>
+
           <UTooltip :text="rightPanelOpen ? t('RightPanel.Close') : t('RightPanel.Open')" :delay-duration="150">
             <UButton
               size="sm"
               color="neutral"
-              variant="soft"
+              :variant="rightPanelOpen ? 'soft' : 'ghost'"
               class="shadow-md backdrop-blur-sm"
               :icon="rightPanelOpen ? 'i-lucide-panel-right-close' : 'i-lucide-panel-right'"
               :aria-label="rightPanelOpen ? t('RightPanel.Close') : t('RightPanel.Open')"
+              :aria-pressed="rightPanelOpen"
               @click="toggleRightPanel"
             />
           </UTooltip>
@@ -122,5 +145,7 @@ const openLogin = () => {
         <UIcon name="i-lucide-loader-circle" class="size-6 animate-spin" />
       </div>
     </div>
+
+    <AiOverlayPanel v-if="activeTab && aiPanelOpen" @close="setAiPanelOpen(false)" />
   </div>
 </template>