@allbluecn/web-app 0.22.4 → 0.23.1

package/src/components/agents/agent-bindings-tab.tsx

@@ -1,6 +1,6 @@
 
 import { useMemo } from 'react'
-import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { Link2, Loader2 } from 'lucide-react'
 import { toast } from '@/components/ui/toast'
 import {
@@ -11,8 +11,12 @@ import {
   SelectValue,
 } from '@/components/ui/select'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { listAgentsFn } from '@/server/serverFns/agents/agent-crud'
-import { listBindingsFn, upsertBindingFn } from '@/server/serverFns/agents/bindings'
+import { upsertBindingFn } from '@/server/serverFns/agents/bindings'
+import {
+  AGENT_BINDINGS_QUERY_KEY,
+  agentBindingsQueryOptions,
+  agentsQueryOptions,
+} from '@/lib/queries/agents'
 import { BIZ_AGENT_KEYS, BIZ_KEY_LABELS, type BizAgentKey } from '@/server/ai-gateway/runs/biz-keys'
 import { m } from '@/paraglide/messages.js'
 
@@ -34,15 +38,9 @@ type AgentOption = {
 export function AgentBindingsTab() {
   const queryClient = useQueryClient()
 
-  const bindingsQuery = useQuery({
-    queryKey: ['agent-bindings'],
-    queryFn: () => listBindingsFn(),
-  })
+  const bindingsQuery = useQuery(agentBindingsQueryOptions())
 
-  const agentsQuery = useQuery({
-    queryKey: ['agents'],
-    queryFn: () => listAgentsFn(),
-  })
+  const agentsQuery = useQuery(agentsQueryOptions())
 
   const bindingByBizKey = useMemo(() => {
     const map = new Map<string, BindingRow>()
@@ -65,44 +63,60 @@ export function AgentBindingsTab() {
     [agentsQuery.data],
   )
 
-  const handleChange = async (bizKey: BizAgentKey, agentId: string | null) => {
-    const previous = bindingByBizKey.get(bizKey)
-    if (previous?.agentId === agentId) return
-
-    const previousRows = ((bindingsQuery.data as BindingRow[] | undefined) ?? []).map((r) => ({
-      ...r,
-    }))
-
-    const optimistic: BindingRow[] = previousRows.filter((r) => r.bizKey !== bizKey)
-
-    if (agentId !== null) {
-      optimistic.push({
-        bizKey,
-        agentId,
-        agent: {
-          id: agentId,
-          name: '',
-          avatarEmoji: null,
-          isDefault: false,
-        },
+  // 官方乐观更新三段式（TanStack Query Optimistic Updates 指南）：
+  // onMutate —— cancelQueries 取消在途 refetch（防其迟到返回旧值覆盖乐观写）+
+  //             快照 previousRows + 乐观写缓存 + 返回 context；
+  // onError  —— 回滚快照（仅复原本 bizKey 的行，函数式更新保留并发变更）+ toast；
+  // onSettled —— invalidate 对齐服务端真相。
+  const upsertMutation = useMutation({
+    mutationFn: (vars: { bizKey: BizAgentKey; agentId: string | null }) =>
+      upsertBindingFn({ data: vars }),
+    onMutate: async (vars) => {
+      await queryClient.cancelQueries({ queryKey: AGENT_BINDINGS_QUERY_KEY })
+      const previousRows =
+        queryClient.getQueryData<BindingRow[]>(AGENT_BINDINGS_QUERY_KEY) ?? []
+      queryClient.setQueryData<BindingRow[]>(AGENT_BINDINGS_QUERY_KEY, (old) => {
+        const rest = (old ?? []).filter((r) => r.bizKey !== vars.bizKey)
+        if (vars.agentId === null) return rest
+        return [
+          ...rest,
+          {
+            bizKey: vars.bizKey,
+            agentId: vars.agentId,
+            agent: {
+              id: vars.agentId,
+              name: '',
+              avatarEmoji: null,
+              isDefault: false,
+            },
+          },
+        ]
       })
-    }
-
-    queryClient.setQueryData<BindingRow[]>(['agent-bindings'], optimistic)
-
-    try {
-      await upsertBindingFn({ data: { bizKey, agentId } })
-      await queryClient.invalidateQueries({ queryKey: ['agent-bindings'] })
-      toast.success(agentId === null ? m.agents_bindings_unbound() : m.agents_bindings_saved())
-    } catch (err) {
-      // 回滚只复原本 bizKey 的行（函数式更新），避免渲染期闭包快照覆盖并发变更
-      queryClient.setQueryData<BindingRow[]>(['agent-bindings'], (old) => {
-        const rest = (old ?? previousRows).filter((r) => r.bizKey !== bizKey)
-        return previous ? [previous, ...rest] : rest
+      return { previousRows }
+    },
+    onSuccess: (_data, vars) => {
+      toast.success(vars.agentId === null ? m.agents_bindings_unbound() : m.agents_bindings_saved())
+    },
+    onError: (err, vars, ctx) => {
+      // 回滚只复原本 bizKey 的行（函数式更新），避免整表快照覆盖并发变更
+      queryClient.setQueryData<BindingRow[]>(AGENT_BINDINGS_QUERY_KEY, (old) => {
+        const base = ctx?.previousRows ?? []
+        const rest = (old ?? base).filter((r) => r.bizKey !== vars.bizKey)
+        const prevRow = base.find((r) => r.bizKey === vars.bizKey)
+        return prevRow ? [prevRow, ...rest] : rest
       })
       const message = err instanceof Error ? err.message : m.agents_bindings_failed()
       toast.error(message)
-    }
+    },
+    onSettled: () => {
+      void queryClient.invalidateQueries({ queryKey: AGENT_BINDINGS_QUERY_KEY })
+    },
+  })
+
+  const handleChange = (bizKey: BizAgentKey, agentId: string | null) => {
+    const previous = bindingByBizKey.get(bizKey)
+    if (previous?.agentId === agentId) return
+    upsertMutation.mutate({ bizKey, agentId })
   }
 
   return (

package/src/components/agents/agent-form-dialog.tsx

@@ -24,7 +24,8 @@ import {
   X,
 } from 'lucide-react'
 import { createAgentFn, updateAgentFn } from '@/server/serverFns/agents/agent-crud'
-import { setDefaultAgentFn, getPersonaHintFn } from '@/server/serverFns/agents/bindings'
+import { setDefaultAgentFn } from '@/server/serverFns/agents/bindings'
+import { personaHintQueryOptions } from '@/lib/queries/agents'
 import { AGENT_TOOL_KEYS } from '@/server/ai-gateway/tools/select'
 import { agentFormSchema, type AgentFormValues } from './schemas/agent-form'
 import { useAgentHandlers } from './use-agent-handlers'
@@ -48,8 +49,7 @@ export function AgentFormDialog({ open, onOpenChange, agent, onSuccess }: AgentF
   const [setDefault, setSetDefault] = useState(!!agent?.isDefault)
 
   const personaHintQuery = useQuery({
-    queryKey: ['persona-hint'],
-    queryFn: () => getPersonaHintFn(),
+    ...personaHintQueryOptions(),
     enabled: open && !isEdit,
     staleTime: Infinity,
   })

package/src/components/agents/agent-selector.tsx

@@ -7,7 +7,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
-import { listAgentsFn } from '@/server/serverFns/agents/agent-crud'
+import { agentsQueryOptions } from '@/lib/queries/agents'
 import type { AgentData } from './agents-page'
 import { m } from "@/paraglide/messages.js";
 
@@ -27,8 +27,7 @@ export function AgentSelector({
   agents: externalAgents,
   className,
 }: AgentSelectorProps) {const { data: agents } = useQuery({
-    queryKey: ['agents'],
-    queryFn: () => listAgentsFn(),
+    ...agentsQueryOptions(),
     staleTime: 30_000,
   })
   const agentList = externalAgents ?? agents ?? []

package/src/components/agents/agents-page.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import {
   Bot,
   ScrollText,
@@ -15,9 +15,14 @@ import {
 import { Button } from '@/components/ui/button'
 import { FeatureGate } from '@/components/billing/feature-gate'
 import { NameConfirmDialog } from '@/components/shared-kit/dialogs/name-confirm-dialog'
-import { listAgentsFn } from '@/server/serverFns/agents/agent-crud'
-import { listSkillsFn, deleteSkillFn } from '@/server/serverFns/agents/skill-crud'
 import { deleteAgentFn } from '@/server/serverFns/agents/agent-crud'
+import { deleteSkillFn } from '@/server/serverFns/agents/skill-crud'
+import {
+  AGENTS_QUERY_KEY,
+  SKILLS_QUERY_KEY,
+  agentsQueryOptions,
+  skillsQueryOptions,
+} from '@/lib/queries/agents'
 import { AgentBindingsTab } from './agent-bindings-tab'
 import { AgentCard } from './agent-card'
 import { AgentFormDialog } from './agent-form-dialog'
@@ -61,52 +66,82 @@ export function AgentsPage() {const queryClient = useQueryClient()
   const [agentToDelete, setAgentToDelete] = useState<AgentData | null>(null)
   const [skillToDelete, setSkillToDelete] = useState<SkillData | null>(null)
 
-  const agentsQuery = useQuery({
-    queryKey: ['agents'],
-    queryFn: () => listAgentsFn(),
-  })
+  const agentsQuery = useQuery(agentsQueryOptions())
 
-  const skillsQuery = useQuery({
-    queryKey: ['skills'],
-    queryFn: () => listSkillsFn(),
-  })
+  const skillsQuery = useQuery(skillsQueryOptions())
 
   const refresh = () => {
-    queryClient.invalidateQueries({ queryKey: ['agents'] })
-    queryClient.invalidateQueries({ queryKey: ['skills'] })
+    queryClient.invalidateQueries({ queryKey: AGENTS_QUERY_KEY })
+    queryClient.invalidateQueries({ queryKey: SKILLS_QUERY_KEY })
   }
 
   const handleAgentEdit = (agent: AgentData) => {
     setEditingAgent(agent)
   }
 
+  // 官方乐观更新三段式（TanStack Query Optimistic Updates 指南）：
+  // onMutate —— cancelQueries 取消在途 refetch（防其迟到把已删项写回缓存）+
+  //             快照 + 乐观移除（删除即时生效，不必等服务端确认）；
+  // onError  —— 回滚快照 + toast；onSettled —— invalidate 对齐服务端真相。
+  const deleteAgentMutation = useMutation({
+    mutationFn: (id: string) => deleteAgentFn({ data: { id } }),
+    onMutate: async (id) => {
+      await queryClient.cancelQueries({ queryKey: AGENTS_QUERY_KEY })
+      const previousAgents = queryClient.getQueryData<AgentData[]>(AGENTS_QUERY_KEY)
+      queryClient.setQueryData<AgentData[]>(AGENTS_QUERY_KEY, (old) =>
+        old ? old.filter((a) => a.id !== id) : old,
+      )
+      return { previousAgents }
+    },
+    onError: (err, _id, ctx) => {
+      if (ctx?.previousAgents !== undefined) {
+        queryClient.setQueryData(AGENTS_QUERY_KEY, ctx.previousAgents)
+      }
+      handleSaveError(err, 'agents_agent_deleteFailed')
+    },
+    onSettled: () => {
+      void queryClient.invalidateQueries({ queryKey: AGENTS_QUERY_KEY })
+      void queryClient.invalidateQueries({ queryKey: SKILLS_QUERY_KEY })
+    },
+  })
+
+  const deleteSkillMutation = useMutation({
+    mutationFn: (id: string) => deleteSkillFn({ data: { id } }),
+    onMutate: async (id) => {
+      await queryClient.cancelQueries({ queryKey: SKILLS_QUERY_KEY })
+      const previousSkills = queryClient.getQueryData<SkillData[]>(SKILLS_QUERY_KEY)
+      queryClient.setQueryData<SkillData[]>(SKILLS_QUERY_KEY, (old) =>
+        old ? old.filter((s) => s.id !== id) : old,
+      )
+      return { previousSkills }
+    },
+    onError: (err, _id, ctx) => {
+      if (ctx?.previousSkills !== undefined) {
+        queryClient.setQueryData(SKILLS_QUERY_KEY, ctx.previousSkills)
+      }
+      handleSaveError(err, 'agents_skill_deleteFailed')
+    },
+    onSettled: () => {
+      void queryClient.invalidateQueries({ queryKey: AGENTS_QUERY_KEY })
+      void queryClient.invalidateQueries({ queryKey: SKILLS_QUERY_KEY })
+    },
+  })
+
   const handleDeleteAgent = async () => {
     if (!agentToDelete) return
     try {
-      await deleteAgentFn({ data: { id: agentToDelete.id } })
-      queryClient.setQueryData(
-        ['agents'],
-        (old: AgentData[] | undefined) =>
-          old ? old.filter((a) => a.id !== agentToDelete.id) : old,
-      )
-      refresh()
-    } catch (err) {
-      handleSaveError(err, 'agents_agent_deleteFailed')
+      await deleteAgentMutation.mutateAsync(agentToDelete.id)
+    } catch {
+      // onError 已 toast + 回滚；吞掉 rejection 维持 NameConfirmDialog「失败也关闭」行为
     }
   }
 
   const handleDeleteSkill = async () => {
     if (!skillToDelete) return
     try {
-      await deleteSkillFn({ data: { id: skillToDelete.id } })
-      queryClient.setQueryData(
-        ['skills'],
-        (old: SkillData[] | undefined) =>
-          old ? old.filter((s) => s.id !== skillToDelete.id) : old,
-      )
-      refresh()
-    } catch (err) {
-      handleSaveError(err, 'agents_skill_deleteFailed')
+      await deleteSkillMutation.mutateAsync(skillToDelete.id)
+    } catch {
+      // onError 已 toast + 回滚；吞掉 rejection 维持 NameConfirmDialog「失败也关闭」行为
     }
   }
 

package/src/components/agents/slash-skill-menu.tsx

@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import { ScrollText, Wand2 } from 'lucide-react'
-import { listSkillsFn } from '@/server/serverFns/agents/skill-crud'
+import { skillsQueryOptions } from '@/lib/queries/agents'
 import { m } from "@/paraglide/messages.js";
 
 export interface SlashSkillMenuProps {
@@ -24,8 +24,7 @@ export function SlashSkillMenu({
   trigger,
   applyTemplate,
 }: SlashSkillMenuProps) {const { data: skills, isLoading } = useQuery({
-    queryKey: ['skills'],
-    queryFn: () => listSkillsFn(),
+    ...skillsQueryOptions(),
     enabled: open,
     staleTime: 30_000,
   })

package/src/components/auth/__tests__/session-guard.test.tsx

@@ -0,0 +1,74 @@
+import { render } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import type { DesktopBridgeApi } from '@/lib/desktop-bridge-types'
+
+vi.mock('@/lib/auth/auth-client', () => ({
+  useSession: vi.fn(),
+}))
+
+vi.mock('@tanstack/react-router', () => ({
+  useRouter: vi.fn(),
+}))
+
+vi.mock('@/lib/desktop-bridge-types', () => ({
+  getDesktopBridge: vi.fn(),
+}))
+
+import { useSession } from '@/lib/auth/auth-client'
+import { useRouter } from '@tanstack/react-router'
+import { getDesktopBridge } from '@/lib/desktop-bridge-types'
+import { SessionGuard } from '../session-guard'
+
+const mockUseSession = useSession as ReturnType<typeof vi.fn>
+const mockUseRouter = useRouter as ReturnType<typeof vi.fn>
+const mockGetDesktopBridge = getDesktopBridge as ReturnType<typeof vi.fn>
+
+function mockRouter() {
+  const navigate = vi.fn()
+  mockUseRouter.mockReturnValue({ navigate })
+  return navigate
+}
+
+function renderGuard() {
+  return render(
+    <SessionGuard>
+      <div>受保护内容</div>
+    </SessionGuard>,
+  )
+}
+
+describe('SessionGuard 桌面防御', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('桌面态：无会话时不导航到 /login（防御 getSessionFn 故障误踢）', () => {
+    mockGetDesktopBridge.mockReturnValue({} as DesktopBridgeApi)
+    mockUseSession.mockReturnValue({ data: null, isLoading: false })
+    const navigate = mockRouter()
+
+    renderGuard()
+
+    expect(navigate).not.toHaveBeenCalled()
+  })
+
+  it('桌面态：无会话时放行渲染 children', () => {
+    mockGetDesktopBridge.mockReturnValue({} as DesktopBridgeApi)
+    mockUseSession.mockReturnValue({ data: null, isLoading: false })
+
+    const { getByText } = renderGuard()
+
+    expect(getByText('受保护内容')).toBeTruthy()
+  })
+
+  it('web 态：无会话时跳转 /login 且不渲染 children（行为不变）', () => {
+    mockGetDesktopBridge.mockReturnValue(null)
+    mockUseSession.mockReturnValue({ data: null, isLoading: false })
+    const navigate = mockRouter()
+
+    const { queryByText } = renderGuard()
+
+    expect(navigate).toHaveBeenCalledWith({ to: '/login' })
+    expect(queryByText('受保护内容')).toBeNull()
+  })
+})

package/src/components/auth/session-guard.tsx

@@ -16,6 +16,7 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { useSession } from "@/lib/auth/auth-client";
+import { getDesktopBridge } from "@/lib/desktop-bridge-types";
 import { useRouter } from "@tanstack/react-router";
 import { useEffect, useRef } from "react";
 
@@ -25,6 +26,8 @@ export function SessionGuard({ children }: { children: React.ReactNode }) {
   const hasSession = useRef(false);
 
   useEffect(() => {
+    // 桌面本地优先：无会话由 guest 合成会话链兜底，防御 getSessionFn 故障误踢到登录页
+    if (getDesktopBridge()) return;
     if (!isLoading && !session) {
       // navigate 是全局路由副作用（非 setState），卸载后触发无害；按仓内约定显式 void 悬空 Promise
       void router.navigate({ to: "/login" });
@@ -35,6 +38,11 @@ export function SessionGuard({ children }: { children: React.ReactNode }) {
     hasSession.current = true;
   }
 
+  // 桌面态一律放行渲染 children（Guard 只防 web 未登录访问）
+  if (getDesktopBridge()) {
+    return <>{children}</>;
+  }
+
   if (isLoading && !hasSession.current) {
     return null;
   }

package/src/components/billing/login-prompt-dialog.tsx

@@ -10,7 +10,7 @@ import {
 import { Button } from '@/components/ui/button'
 import { Loader2, LogIn } from 'lucide-react'
 import { toast } from '@/components/ui/toast'
-import { openLoginUrl } from '@/server/remote-auth'
+import { openLoginUrl } from '@/lib/remote-auth-client'
 import { m } from "@/paraglide/messages.js";
 import { errorMessage } from "@/lib/toast-error";
 

package/src/components/billing/subscription-provider.tsx

@@ -1,7 +1,6 @@
 import { createContext, useContext, useState, useEffect, type ReactElement } from 'react'
 import { getEffectivePlanFn } from '@/server/serverFns/billing'
 import { BillingUnavailableError, type ProFeature } from '@allbluecn/kernel'
-import { getTauriInvoke } from '@/lib/desktop-detect'
 import { implementedModules } from '@/plugins/modules.gen'
 import { FeatureRegistry, OSS_BASE_FEATURES, type FeatureKey, type ResourceSnapshots } from '@allbluecn/kernel'
 
@@ -92,21 +91,8 @@ export function SubscriptionProvider({
     }
   }, [])
 
-  useEffect(() => {
-    if (state.loading) return
-    let cancelled = false
-    getTauriInvoke().then((invoke) => {
-      if (cancelled || !invoke) return
-      invoke('update_plan_state', {
-        planName: state.planName,
-        features: state.features,
-      }).catch(() => {
-      })
-    })
-    return () => {
-      cancelled = true
-    }
-  }, [state.planName, state.features, state.loading])
+  // 注：Tauri 时代的 update_plan_state invoke（向 Rust 壳推送 plan 状态）已随
+  // Tauri 残留清除；Electron 壳如需 plan 展示由 desktopBridge 重建（本地优先设计 P2）。
 
   return (
     <SubscriptionContext.Provider value={state}>

package/src/components/bug/__tests__/peek-modes.test.tsx

@@ -102,6 +102,14 @@ vi.mock("@tanstack/react-virtual", async (importOriginal) => {
   };
 });
 
+// useAppHotkeys 需要 HotkeysProvider appHotkeys 挂载；单测无全局 Provider，
+import { appHotkeys } from "@/lib/hotkeys/registry"
+// 局部替换该 hook 返回应用声明，其余（useHotkey/useHotkeys）保持官方真实实现
+vi.mock("@tanstack/react-hotkeys", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@tanstack/react-hotkeys")>()
+  return { ...actual, useAppHotkeys: () => appHotkeys }
+})
+
 import { BugPeekPanel } from "../peek-panel";
 import { BugListView } from "../bug-list-view";
 import type { BugDetail } from "@/shared/bug/types";