@lark-base-open/base-database-cli 1.1.0 → 1.3.7

package/templates/database-starter/page/src/components/floating-button/index.tsx

@@ -1,84 +1,60 @@
 import { useCallback, useEffect, useState } from 'react'
+import editDefaultIcon from './assets/edit-default.svg'
+import editActiveIcon from './assets/edit-active.svg'
 import { fetchProjectMeta, type ProjectMeta } from './utils/project-meta'
-import { ChatbotEntry, resolveChatbotDisplayName } from './chatbot-entry'
 import {
   getDatabaseContext,
   resolveDatabaseContext,
   siteRuntime,
 } from '../../lib/database-runtime'
-
-export type FloatingButtonLanguage = 'en' | 'zh'
-
-interface FloatingButtonProps {
-  language?: FloatingButtonLanguage
-  showChatbotEntry?: boolean
-}
+import { useUiLanguage, type UiLanguage } from '../../lib/ui-language'
 
 interface FloatingButtonI18n {
   editSite: string
+  hidePanel: string
 }
 
 const BASE_DATABASE_OVERVIEW_URL = 'https://feishu.cn/base/site/detail/overview'
-const CHATBOT_SIDEBAR_DEFAULT_WIDTH = 420
 const FLOATING_BUTTON_PAGE_GAP = 24
 const EMPTY_PROJECT_META: ProjectMeta = {
   baseBindings: [],
-  chatList: [],
   description: '',
   isOwner: false,
+  allowEdit: false,
   name: '',
   organization: '',
 }
-const FLOATING_BUTTON_I18N: Record<FloatingButtonLanguage, FloatingButtonI18n> =
-  {
-    en: {
-      editSite: 'Edit application',
-    },
-    zh: {
-      editSite: '编辑应用',
-    },
-  }
+const FLOATING_BUTTON_I18N: Record<UiLanguage, FloatingButtonI18n> = {
+  en: {
+    editSite: 'Edit and manage your apps',
+    hidePanel: 'Hide until next visit',
+  },
+  zh: {
+    editSite: '编辑与管理应用',
+    hidePanel: '隐藏面板',
+  },
+  ja: {
+    editSite: 'アプリを編集・管理',
+    hidePanel: '次回のアクセスまで非表示',
+  },
+}
 
-/** 渲染 Base Database 悬浮按钮入口：编辑、Chatbot。
- *
- * 原来这里还有一个「三个点」菜单，承载当前账号 / 组织 / 退出登录。它已经下掉了：
- * 悬浮控件是应用之外的一层浮层，用户不会去那里找账号。身份信息改由应用自己的导航
- * 承载，见 `page/src/components/database-user-menu`。
- *
- * @param props.language 界面语言，支持 en 和 zh，默认 en。
- * @param props.showChatbotEntry 是否显示 Chatbot 入口，默认 true。
- * @returns 悬浮按钮组。
+/** 渲染有管理权限的访问者在正式环境中的编辑入口。
+ * @returns 编辑按钮；Preview 或无管理权限时不显示。
  */
-export function FloatingButton({
-  language = 'en',
-  showChatbotEntry = true,
-}: FloatingButtonProps) {
+export function FloatingButton() {
   const [projectMeta, setProjectMeta] = useState<ProjectMeta | null>(null)
-  const [isFloatingDataLoaded, setIsFloatingDataLoaded] = useState(false)
-  const [isChatbotOpen, setIsChatbotOpen] = useState(false)
-  const [chatbotSidebarWidth, setChatbotSidebarWidth] = useState(
-    CHATBOT_SIDEBAR_DEFAULT_WIDTH,
+  const [isHidden, setIsHidden] = useState(false)
+  const [activeTooltip, setActiveTooltip] = useState<'edit' | 'hide' | null>(
+    null,
   )
-  // 编辑只在线上给 owner。Preview 本身就只有 owner 进得来，isOwner 恒为 true，
-  // 靠它永远隐藏不掉，必须显式按产物环境判断。
+  // Preview 不展示返回编辑态入口；按钮显隐不替代宿主点击时的鉴权。
   const shouldShowEditButton =
-    projectMeta?.isOwner === true && getDatabaseContext().env === 'prod'
-  const shouldOffsetForChatbot = showChatbotEntry && isChatbotOpen
-  const shouldShowFloatingControls =
-    shouldShowEditButton || (showChatbotEntry && !isChatbotOpen)
-  const floatingButtonRight = shouldOffsetForChatbot
-    ? chatbotSidebarWidth + FLOATING_BUTTON_PAGE_GAP
-    : FLOATING_BUTTON_PAGE_GAP
-  const i18n = FLOATING_BUTTON_I18N[language]
-  const genericChatbotName = language === 'zh' ? '智能助手' : 'AI assistant'
-  const chatbotFallbackName = resolveChatbotDisplayName(
-    projectMeta?.name ?? '',
-    genericChatbotName,
-  )
+    projectMeta?.allowEdit === true && getDatabaseContext().env === 'prod'
+  const i18n = FLOATING_BUTTON_I18N[useUiLanguage()]
 
   useEffect(() => {
     let isCurrentRequest = true
-    setIsFloatingDataLoaded(false)
 
     /** 读取悬浮控件所需的项目资源数据。 */
     async function loadFloatingData(): Promise<void> {
@@ -91,7 +67,6 @@ export function FloatingButton({
       }
 
       setProjectMeta(nextProjectMeta)
-      setIsFloatingDataLoaded(true)
     }
 
     void loadFloatingData()
@@ -101,18 +76,6 @@ export function FloatingButton({
     }
   }, [])
 
-  useEffect(() => {
-    if (showChatbotEntry) {
-      return
-    }
-
-    setIsChatbotOpen(false)
-  }, [showChatbotEntry])
-
-  const handleChatbotOpenChange = useCallback((nextIsOpen: boolean) => {
-    setIsChatbotOpen(nextIsOpen)
-  }, [])
-
   // 编辑按钮走 site.v1 契约：应用发 request-edit，宿主切编辑态后广播 mode-changed。
   // 应用被独立访问（无宿主）时事件无人消费，回落为打开 Site 管理页。
   const requestEdit = useCallback(() => {
@@ -124,41 +87,63 @@ export function FloatingButton({
     })
   }, [])
 
-  if (!isFloatingDataLoaded || !projectMeta) {
+  if (!shouldShowEditButton || isHidden) {
     return null
   }
 
   return (
     <div
-      className={`fixed bottom-10 flex items-center pr-0 ${shouldOffsetForChatbot ? 'z-[80]' : 'z-40'}`}
-      style={{ right: floatingButtonRight }}
+      className="group fixed bottom-10 z-40 flex items-center"
+      style={{ right: FLOATING_BUTTON_PAGE_GAP }}
     >
+      {activeTooltip ? (
+        <div
+          role="tooltip"
+          className="pointer-events-none absolute right-0 bottom-[calc(100%+14px)] z-10 whitespace-nowrap rounded-lg bg-[#1f2329] px-3 py-2 text-sm text-white shadow-lg"
+        >
+          {activeTooltip === 'edit' ? i18n.editSite : i18n.hidePanel}
+          <span className="absolute -bottom-1 right-[22px] size-2 rotate-45 bg-[#1f2329]" />
+        </div>
+      ) : null}
       <div
-        className={`${shouldShowFloatingControls ? 'relative z-[80] flex' : 'hidden'} items-center gap-1.5 rounded-full bg-white p-0.5 shadow-[0_4px_4px_rgba(31,35,41,0.06),0_6px_6px_rgba(31,35,41,0.04),0_8px_12px_rgba(31,35,41,0.04)]`}
+        className="relative flex items-center rounded-full bg-white p-0.5 shadow-[0_4px_4px_rgba(31,35,41,0.06),0_6px_6px_rgba(31,35,41,0.04),0_8px_12px_rgba(31,35,41,0.04)]"
         data-floating-controls="true"
       >
-        {shouldShowEditButton ? (
-          <button
-            type="button"
-            aria-label={i18n.editSite}
-            title={i18n.editSite}
-            className="flex size-12 cursor-pointer items-center justify-center rounded-full bg-transparent text-[#2b2f36] outline-none transition-colors hover:bg-[#1f2329]/5 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:bg-[#1f2329]/10"
-            onClick={requestEdit}
-          >
-            <EditIcon />
-          </button>
-        ) : null}
-
-        {showChatbotEntry ? (
-          <ChatbotEntry
-            chatbots={projectMeta.chatList}
-            baseId={projectMeta.baseBindings[0]?.baseToken}
-            className="shrink-0"
-            fallbackName={chatbotFallbackName}
-            onOpenChange={handleChatbotOpenChange}
-            onSidebarWidthChange={setChatbotSidebarWidth}
+        <button
+          type="button"
+          aria-label={i18n.editSite}
+          className="group/edit flex size-12 cursor-pointer items-center justify-center rounded-full bg-transparent outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+          onMouseEnter={() => setActiveTooltip('edit')}
+          onMouseLeave={() => setActiveTooltip(null)}
+          onFocus={() => setActiveTooltip('edit')}
+          onBlur={() => setActiveTooltip(null)}
+          onClick={requestEdit}
+        >
+          <img
+            src={editDefaultIcon}
+            alt=""
+            className="size-5 group-hover/edit:hidden group-focus-visible/edit:hidden"
           />
-        ) : null}
+          <img
+            src={editActiveIcon}
+            alt=""
+            className="hidden size-5 group-hover/edit:block group-focus-visible/edit:block"
+          />
+        </button>
+        <button
+          type="button"
+          aria-label={i18n.hidePanel}
+          className="absolute -top-1 -right-1 flex size-4 items-center justify-center rounded-full bg-[#c8c9cc] text-[#646a73] opacity-0 transition-opacity group-hover:opacity-100 hover:bg-[#b7b9bd] focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-[#1456f0]"
+          onMouseEnter={() => setActiveTooltip('hide')}
+          onMouseLeave={() => setActiveTooltip(null)}
+          onFocus={() => setActiveTooltip('hide')}
+          onBlur={() => setActiveTooltip(null)}
+          onClick={() => setIsHidden(true)}
+        >
+          <span aria-hidden="true" className="text-[14px] leading-none">
+            ×
+          </span>
+        </button>
       </div>
     </div>
   )
@@ -171,26 +156,4 @@ function openExternalUrl(url: string): void {
   window.open(url, '_blank', 'noopener,noreferrer')
 }
 
-/** 编辑应用图标。
- * @returns 铅笔图标节点。
- */
-function EditIcon() {
-  return (
-    <svg
-      aria-hidden="true"
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.8"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M12 20h9" />
-      <path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z" />
-    </svg>
-  )
-}
-
 export default FloatingButton

package/templates/database-starter/page/src/components/floating-button/utils/project-meta.test.ts

@@ -1,16 +1,31 @@
-import { describe, expect, it } from 'vitest'
-import { parseProjectMetaResponse } from './project-meta'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { fetchProjectMeta, parseProjectMetaResponse } from './project-meta'
 
-function projectResponse(isOwner: unknown) {
+const runtime = vi.hoisted(() => ({
+  fetch: vi.fn(),
+  resolveDatabaseContext: vi.fn(),
+}))
+
+vi.mock('../../../lib/database-runtime', async (importOriginal) => ({
+  ...(await importOriginal<object>()),
+  ...runtime,
+}))
+
+afterEach(() => {
+  vi.unstubAllGlobals()
+  vi.clearAllMocks()
+})
+
+function projectResponse(isOwner: unknown, allowEdit?: unknown) {
   return {
     code: 0,
     data: {
       isOwner,
       site: {
         baseBindings: [],
-        chatbots: [],
         description: 'Owner visibility test',
         name: 'Owner visibility test',
+        ...(allowEdit === undefined ? {} : { allowEdit }),
       },
     },
   }
@@ -32,48 +47,103 @@ describe('project owner visibility', () => {
   })
 })
 
-describe('project chatbot parsing', () => {
-  // 接口的 chatbot 字段全部可选，缺字段不能连带丢掉 isOwner 与应用名称。
-  function responseWithChatbots(chatbots: unknown) {
-    return {
+describe('edit entry permission', () => {
+  it('shows admins and owners when the server allows editing', () => {
+    expect(
+      parseProjectMetaResponse(projectResponse(false, true)).allowEdit,
+    ).toBe(true)
+  })
+
+  it('respects explicit denial and falls back to owner only for old responses', () => {
+    expect(
+      parseProjectMetaResponse(projectResponse(true, false)).allowEdit,
+    ).toBe(false)
+    expect(parseProjectMetaResponse(projectResponse(true)).allowEdit).toBe(true)
+    expect(parseProjectMetaResponse(projectResponse(false)).allowEdit).toBe(
+      false,
+    )
+    expect(
+      parseProjectMetaResponse(projectResponse(false, 'true')).allowEdit,
+    ).toBe(false)
+    expect(
+      parseProjectMetaResponse(projectResponse(true, 'true')).allowEdit,
+    ).toBe(false)
+  })
+})
+
+describe('project metadata', () => {
+  it('preserves page identity and valid Base bindings', () => {
+    const meta = parseProjectMetaResponse({
       code: 0,
       data: {
         isOwner: true,
         site: {
-          baseBindings: [{ baseToken: 'bascnBase', tableIds: ['tbl_a'] }],
-          chatbots,
+          name: ' 应用名称 ',
           description: '应用描述',
-          name: '应用名称',
+          organization: '所属组织',
+          baseBindings: [
+            null,
+            { tableIds: ['missing-token'] },
+            { baseToken: ' bascnBase ', tableIds: ['tbl_a', 42] },
+          ],
         },
       },
-    }
-  }
-
-  it('keeps the rest of the meta when a chatbot omits optional fields', () => {
-    const meta = parseProjectMetaResponse(
-      responseWithChatbots([{ id: 'chat_1' }]),
-    )
+    })
+    expect(meta).toEqual({
+      isOwner: true,
+      allowEdit: true,
+      name: '应用名称',
+      description: '应用描述',
+      organization: '所属组织',
+      baseBindings: [{ baseToken: 'bascnBase', tableIds: ['tbl_a'] }],
+    })
+  })
 
-    expect(meta.isOwner).toBe(true)
-    expect(meta.name).toBe('应用名称')
-    expect(meta.baseBindings).toEqual([
-      { baseToken: 'bascnBase', tableIds: ['tbl_a'] },
-    ])
-    expect(meta.chatList).toEqual([{ id: 'chat_1', name: '', iconInfo: '' }])
+  it.each([
+    null,
+    { code: 1 },
+    { code: 0, data: { site: null, isOwner: true } },
+  ])('fails closed for an invalid response', (response) => {
+    expect(parseProjectMetaResponse(response)).toEqual({
+      isOwner: false,
+      allowEdit: false,
+      name: '',
+      description: '',
+      organization: '',
+      baseBindings: [],
+    })
   })
 
-  it('drops entries without a usable id and keeps the valid ones', () => {
-    const meta = parseProjectMetaResponse(
-      responseWithChatbots([
-        { name: '没有 id' },
-        'not-an-object',
-        { id: 'chat_2', name: '有效', iconInfo: '{"key":"k","type":2}' },
-      ]),
-    )
+  it.each(['prod', 'preview'])(
+    'fetches only application metadata in %s',
+    async (env) => {
+      runtime.resolveDatabaseContext.mockResolvedValue({
+        env,
+        gatewayOrigin: '',
+        token: 'meta_test',
+      })
+      runtime.fetch.mockResolvedValue({
+        ok: true,
+        json: async () => projectResponse(true),
+      })
+      class MetaElement {
+        content = ''
+      }
+      const description = new MetaElement()
+      const document = { title: '', querySelector: vi.fn(() => description) }
+      vi.stubGlobal('document', document)
+      vi.stubGlobal('HTMLMetaElement', MetaElement)
 
-    expect(meta.isOwner).toBe(true)
-    expect(meta.chatList).toEqual([
-      { id: 'chat_2', name: '有效', iconInfo: '{"key":"k","type":2}' },
-    ])
-  })
+      const meta = await fetchProjectMeta()
+      expect(runtime.fetch).toHaveBeenCalledWith(
+        `/space/api/bitable/site/v1/meta_test/invoke_get${env === 'preview' ? '?env=preview' : ''}`,
+        { method: 'GET' },
+      )
+      expect(meta.isOwner).toBe(true)
+      expect(document.title).toBe('Owner visibility test')
+      expect(description.content).toBe('Owner visibility test')
+      expect(await fetchProjectMeta()).toBe(meta)
+      expect(runtime.fetch).toHaveBeenCalledTimes(1)
+    },
+  )
 })

package/templates/database-starter/page/src/components/floating-button/utils/project-meta.ts

@@ -5,12 +5,6 @@ import {
   type DatabaseContext,
 } from '../../../lib/database-runtime'
 
-interface ProjectChat {
-  id: string
-  name: string
-  iconInfo: string
-}
-
 export interface ProjectBaseBinding {
   baseToken: string
   tableIds: string[]
@@ -18,11 +12,11 @@ export interface ProjectBaseBinding {
 
 export interface ProjectMeta {
   baseBindings: ProjectBaseBinding[]
-  chatList: ProjectChat[]
   name: string
   description: string
   isOwner: boolean
-  /** 应用所属组织（企业）名，浮层菜单展示用；服务端未下发时为空串。 */
+  allowEdit: boolean
+  /** 应用所属组织（企业）名，账号菜单展示用；服务端未下发时为空串。 */
   organization: string
 }
 
@@ -60,15 +54,15 @@ function readStringArray(value: unknown): string[] {
 }
 
 /** 构造空项目 meta。
- * @returns chatList 为空的项目 meta。
+ * @returns 不包含所有者权限的空项目 meta。
  */
 function createEmptyProjectMeta(): ProjectMeta {
   return {
     baseBindings: [],
-    chatList: [],
     name: '',
     description: '',
     isOwner: false,
+    allowEdit: false,
     organization: '',
   }
 }
@@ -130,41 +124,9 @@ function parseProjectBaseBindings(
   }, [])
 }
 
-/** 解析 Site 绑定的 chatbot 列表。
- *
- * 接口的 chatbot 字段全部可选：缺 id 的条目无法跳转，直接丢弃；名称与图标缺失时
- * 留空交由展示层兜底。单个 chatbot 字段不全不能影响整个项目 meta 的解析。
- *
- * @param rawChatbots 接口返回的 chatbots 字段。
- * @returns 可用于展示的 chatbot 列表。
- */
-function parseProjectChats(rawChatbots: unknown): ProjectChat[] {
-  if (!Array.isArray(rawChatbots)) {
-    return []
-  }
-
-  return rawChatbots.reduce<ProjectChat[]>((chats, chatbot) => {
-    if (!isRecord(chatbot)) {
-      return chats
-    }
-
-    const id = readOptionalString(chatbot, 'id')
-    if (!id) {
-      return chats
-    }
-
-    chats.push({
-      id,
-      name: readOptionalString(chatbot, 'name'),
-      iconInfo: readOptionalString(chatbot, 'iconInfo'),
-    })
-    return chats
-  }, [])
-}
-
 /** 将资源接口响应转换为页面需要的项目 meta。
  * @param rawResponse 接口原始响应。
- * @returns 提取后的应用名称、描述和 chatbot 列表；接口或结构异常时返回空数据。
+ * @returns 提取后的应用名称、描述、所属组织、Base 绑定及所有者状态；接口或结构异常时返回空数据。
  */
 export function parseProjectMetaResponse(rawResponse: unknown): ProjectMeta {
   if (!isRecord(rawResponse)) {
@@ -187,10 +149,14 @@ export function parseProjectMetaResponse(rawResponse: unknown): ProjectMeta {
 
   return {
     baseBindings: parseProjectBaseBindings(site.baseBindings),
-    chatList: parseProjectChats(site.chatbots),
     description: readOptionalString(site, 'description'),
     name: readOptionalString(site, 'name'),
     isOwner: data.isOwner === true,
+    // 老服务端尚未下发 allowEdit 时保留 Owner 入口；显式 false 必须优先。
+    allowEdit:
+      site.allowEdit === undefined
+        ? data.isOwner === true
+        : site.allowEdit === true,
     organization: readOptionalString(site, 'organization'),
   }
 }
@@ -206,12 +172,9 @@ async function requestProjectMeta(
   context: DatabaseContext,
 ): Promise<ProjectMeta> {
   try {
-    const response = await databaseFetch(
-      buildDatabaseInvokeGetPath(context, true),
-      {
-        method: 'GET',
-      },
-    )
+    const response = await databaseFetch(buildDatabaseInvokeGetPath(context), {
+      method: 'GET',
+    })
 
     if (!response.ok) {
       return createEmptyProjectMeta()

package/templates/database-starter/page/src/components/ui-language.test.tsx

@@ -0,0 +1,101 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+const runtime = vi.hoisted(() => ({ getRuntimeContext: vi.fn() }))
+vi.mock('../lib/database-runtime', () => ({ siteRuntime: runtime }))
+
+import UserSelectorEditor from './UserSelectorEditor'
+import UserSelectorPanel from './UserSelectorPanel'
+import { PageState } from './feedback/page-state'
+import { AttachmentImage } from '../lib/attachment-image'
+import App from '../App'
+import {
+  getUiLanguage,
+  getUiLocale,
+  selectUiLanguage,
+} from '../lib/ui-language'
+
+afterEach(() => {
+  vi.unstubAllGlobals()
+  runtime.getRuntimeContext.mockReset()
+})
+
+describe('built-in component language', () => {
+  it('prefers supported host locales, then browser locales, then English', () => {
+    expect(selectUiLanguage('ja-JP', 'zh-CN')).toBe('ja')
+    expect(selectUiLanguage('zh_CN', 'ja-JP')).toBe('zh')
+    expect(selectUiLanguage('zh-TW', 'ja-JP')).toBe('zh')
+    expect(getUiLocale('zh')).toBe('zh-CN')
+    expect(selectUiLanguage('fr-FR', 'ja-JP')).toBe('ja')
+    expect(selectUiLanguage(undefined, 'fr-FR')).toBe('en')
+    expect(selectUiLanguage(undefined, undefined)).toBe('en')
+  })
+
+  it('uses the browser language before the host context resolves', () => {
+    vi.stubGlobal('navigator', { language: 'ja-JP' })
+    vi.stubGlobal('document', { documentElement: { lang: 'en' } })
+
+    expect(getUiLanguage()).toBe('ja')
+    expect(getUiLocale()).toBe('ja-JP')
+  })
+
+  it('uses English on server render until the browser resolves the locale', () => {
+    expect(renderToStaticMarkup(<App />)).toContain(
+      'Start with a real business workflow',
+    )
+    expect(renderToStaticMarkup(<UserSelectorEditor value={null} />)).toContain(
+      'Select members',
+    )
+    expect(renderToStaticMarkup(<UserSelectorPanel />)).toContain(
+      'No recommended members yet',
+    )
+    expect(renderToStaticMarkup(<PageState status="error" />)).toContain(
+      'Please try again later',
+    )
+    expect(
+      renderToStaticMarkup(
+        <AttachmentImage
+          attachment={{
+            tableId: 'tblA',
+            fieldId: 'fldA',
+            recordId: 'recA',
+            fileToken: 'fileA',
+          }}
+          alt="attachment"
+        />,
+      ),
+    ).toContain('Loading image')
+  })
+
+  it('uses browser lang until the host locale arrives, then applies the host locale', async () => {
+    vi.resetModules()
+    vi.stubGlobal('navigator', { language: 'zh-CN' })
+    vi.stubGlobal('document', { documentElement: { lang: 'en' } })
+    let resolveContext!: (value: { locale: string }) => void
+    runtime.getRuntimeContext.mockReturnValue(
+      new Promise((resolve) => {
+        resolveContext = resolve
+      }),
+    )
+    const language = await import('../lib/ui-language')
+    const request = language.initializeUiLanguage()
+
+    expect(document.documentElement.lang).toBe('zh-CN')
+    resolveContext({ locale: 'ja-JP' })
+    expect(await request).toBe('ja')
+    expect(language.getUiLanguage()).toBe('ja')
+    expect(document.documentElement.lang).toBe('ja-JP')
+    expect(runtime.getRuntimeContext).toHaveBeenCalledTimes(1)
+  })
+
+  it('falls back to the browser when the host request fails', async () => {
+    vi.resetModules()
+    vi.stubGlobal('navigator', { language: 'ja-JP' })
+    vi.stubGlobal('document', { documentElement: { lang: 'en' } })
+    runtime.getRuntimeContext.mockRejectedValue(new Error('unavailable'))
+    const language = await import('../lib/ui-language')
+
+    expect(await language.initializeUiLanguage()).toBe('ja')
+    expect(document.documentElement.lang).toBe('ja-JP')
+  })
+})