@h-ai/cli 0.1.0-alpha9 → 1.0.0-beta.2

package/templates/apps/h5/messages/ja-JP.json

@@ -0,0 +1,40 @@
+{
+  "app_title": "H5アプリ",
+  "app_description": "hai Agent Frameworkで構築したH5モバイルアプリ",
+  "nav_home": "ホーム",
+  "nav_discover": "見つける",
+  "nav_profile": "プロフィール",
+  "page_home_title": "ホーム",
+  "page_home_desc": "H5アプリへようこそ",
+  "page_home_search": "検索...",
+  "page_home_feature1": "機能1",
+  "page_home_feature2": "機能2",
+  "page_home_feature3": "機能3",
+  "page_home_feature4": "機能4",
+  "page_home_latest": "最新情報",
+  "page_home_welcome": "H5アプリへようこそ",
+  "page_discover_title": "見つける",
+  "page_discover_desc": "さらに多くのコンテンツを探す。",
+  "page_profile_title": "プロフィール",
+  "page_profile_desc": "個人情報を管理します",
+  "page_profile_username": "ユーザー名",
+  "page_profile_login_hint": "タップしてログイン",
+  "page_profile_info": "個人情報",
+  "page_profile_settings": "設定",
+  "page_profile_about": "会社概要",
+  "auth_login_title": "ログイン",
+  "auth_login_submit": "ログイン",
+  "auth_login_loading": "ログイン中...",
+  "auth_login_failed": "ログインに失敗しました",
+  "auth_login_to_register": "アカウントをお持ちでない方は新規登録",
+  "auth_register_title": "登録",
+  "auth_register_submit": "登録",
+  "auth_register_loading": "登録中...",
+  "auth_register_failed": "登録に失敗しました",
+  "auth_register_to_login": "既にアカウントをお持ちの方はログイン",
+  "auth_label_username": "ユーザー名",
+  "auth_label_password": "パスワード",
+  "auth_label_confirm_password": "パスワードの確認",
+  "auth_error_network": "ネットワークエラー",
+  "auth_error_password_mismatch": "パスワードが一致しません"
+}

package/templates/apps/h5/messages/zh-CN.json

@@ -4,6 +4,8 @@
   "nav_home": "首页",
   "nav_discover": "发现",
   "nav_profile": "我的",
+  "page_home_title": "首页",
+  "page_home_desc": "欢迎使用 H5 应用",
   "page_home_search": "搜索...",
   "page_home_feature1": "功能一",
   "page_home_feature2": "功能二",
@@ -14,6 +16,7 @@
   "page_discover_title": "发现",
   "page_discover_desc": "探索更多精彩内容。",
   "page_profile_title": "我的",
+  "page_profile_desc": "管理您的个人信息",
   "page_profile_username": "用户名",
   "page_profile_login_hint": "点击登录",
   "page_profile_info": "个人信息",

package/templates/apps/h5/src/routes/+layout.svelte.hbs

@@ -1,24 +1,85 @@
 {{!-- H5 应用根布局 --}}
-<script lang="ts">
+<script lang='ts'>
   /**
    * H5 应用根布局
    */
+  import type { BottomNavItem } from '@h-ai/ui'
   import type { Snippet } from 'svelte'
-  import '../app.css'
 {{#if hasI18n}}
   import { browser } from '$app/environment'
-  import { setGlobalLocale } from '@h-ai/ui'
-  import { getLocale } from '$lib/paraglide/runtime.js'
+{{else}}
+{{#if features.crypto}}
+  import { browser } from '$app/environment'
+{{/if}}
+{{/if}}
+  import { goto } from '$app/navigation'
+  import { base, resolve } from '$app/paths'
+  import { page } from '$app/state'
+{{#if hasI18n}}
   import * as m from '$lib/paraglide/messages'
+  import { getLocale, setLocale } from '$lib/paraglide/runtime.js'
+{{/if}}
+{{#if features.crypto}}
+  import { crypto } from '@h-ai/crypto'
+  import { kit } from '@h-ai/kit'
+{{else}}
+{{#if features.iam}}
+  import { kit } from '@h-ai/kit'
 {{/if}}
+{{/if}}
+{{#if hasI18n}}
+  import { AppBar, BottomNav, LanguageSwitch, setGlobalLocale } from '@h-ai/ui'
+{{else}}
+  import { AppBar, BottomNav } from '@h-ai/ui'
+{{/if}}
+{{#if features.crypto}}
+  import { untrack } from 'svelte'
+{{/if}}
+  import '../app.css'
 
   interface Props {
     children: Snippet
   }
 
-  let { children }: Props = $props()
+  const { children }: Props = $props()
+{{#if features.crypto}}
+  if (browser)
+    kit.client.installBrowserTransport(untrack(() => page.data.kitConfig), { crypto, basePath: base })
+{{/if}}
+{{#if features.iam}}
+  const authActions = kit.client.createAuthActions({ basePath: `${base}/api/auth` })
+  $effect(() => authActions.bindPageExit({ enabled: page.data.iamPublicConfig?.session.endOnPageHide }))
+{{/if}}
+
+  const navItems: (BottomNavItem & { path: '/' | '/discover' | '/profile' })[] = [
+{{#if hasI18n}}
+    { id: 'home', path: '/', label: m.nav_home(), iconClass: 'icon-[tabler--home]' },
+    { id: 'discover', path: '/discover', label: m.nav_discover(), iconClass: 'icon-[tabler--compass]' },
+    { id: 'profile', path: '/profile', label: m.nav_profile(), iconClass: 'icon-[tabler--user]' },
+{{else}}
+    { id: 'home', path: '/', label: '首页', iconClass: 'icon-[tabler--home]' },
+    { id: 'discover', path: '/discover', label: '发现', iconClass: 'icon-[tabler--compass]' },
+    { id: 'profile', path: '/profile', label: '我的', iconClass: 'icon-[tabler--user]' },
+{{/if}}
+  ]
+
+  const localPath = $derived(page.url.pathname.slice(base.length) || '/')
+  const activeNav = $derived(navItems.find(item => item.path === localPath)?.id)
+  // 所有页面共用页头页脚；仅业务页面显示底部导航。
+  const isAuthPage = $derived(localPath.startsWith('/auth'))
+
+  function handleNavigation(id: string) {
+    const item = navItems.find(item => item.id === id)
+    if (item)
+      void goto(resolve(item.path, {}))
+  }
 {{#if hasI18n}}
 
+  function handleLanguageChange(language: string) {
+    setGlobalLocale(language)
+    setLocale(language as Parameters<typeof setLocale>[0])
+  }
+
   if (browser) {
     const paraglideLocale = getLocale()
     setGlobalLocale(paraglideLocale)
@@ -26,32 +87,26 @@
 {{/if}}
 </script>
 
-<div class="min-h-screen flex flex-col bg-base-200">
-  <main class="flex-1 pb-16">
-    {@render children()}
-  </main>
+<svelte:head>
+  <title>{page.data.appConfig.name}</title>
+</svelte:head>
 
-  <nav class="btm-nav btm-nav-sm">
-    <a href="/" class="text-primary">
-{{#if hasI18n}}
-      <span class="btm-nav-label">{m.nav_home()}</span>
-{{else}}
-      <span class="btm-nav-label">首页</span>
-{{/if}}
-    </a>
-    <a href="/discover">
+<div class='hai-mobile-viewport'>
+  <div class='hai-mobile-shell min-w-0'>
+    <AppBar title={page.data.appConfig.name} safeArea fixed={false}>
 {{#if hasI18n}}
-      <span class="btm-nav-label">{m.nav_discover()}</span>
-{{else}}
-      <span class="btm-nav-label">发现</span>
-{{/if}}
-    </a>
-    <a href="/profile">
-{{#if hasI18n}}
-      <span class="btm-nav-label">{m.nav_profile()}</span>
-{{else}}
-      <span class="btm-nav-label">我的</span>
+      {#snippet trailing()}
+        <LanguageSwitch currentLanguage={getLocale()} onchange={handleLanguageChange} compact />
+      {/snippet}
 {{/if}}
-    </a>
-  </nav>
+    </AppBar>
+    <main class='hai-mobile-main'>{@render children()}</main>
+    <footer class='border-t border-base-300 bg-base-100 p-2 text-center text-xs text-base-content/60'>
+      {page.data.appConfig.name} · {page.data.appConfig.version} · {page.data.appConfig.env}
+    </footer>
+    {#if !isAuthPage}
+      <BottomNav items={navItems} active={activeNav} onchange={handleNavigation} centered maxWidth='none' safeArea />
+    {/if}
+  </div>
 </div>
+<ToastContainer />

package/templates/apps/h5/src/routes/+page.svelte.hbs

@@ -1,27 +1,39 @@
 {{!-- H5 首页 --}}
-<script lang="ts">
+<script lang='ts'>
+  import { page } from '$app/state'
   /**
    * H5 首页
    */
 {{#if hasI18n}}
   import * as m from '$lib/paraglide/messages'
 {{/if}}
+  import { Card } from '@h-ai/ui'
 </script>
 
 <svelte:head>
 {{#if hasI18n}}
-  <title>{m.app_title()}</title>
+  <title>{page.data.appConfig.name}</title>
 {{else}}
-  <title>H5 应用</title>
+  <title>{page.data.appConfig.name}</title>
 {{/if}}
 </svelte:head>
 
-<section class="p-4">
+<section class='p-4 space-y-4'>
 {{#if hasI18n}}
-  <h1 class="text-2xl font-bold mb-4">{m.page_home_title()}</h1>
-  <p class="text-gray-600">{m.page_home_desc()}</p>
+  <h1 class='text-2xl font-black tracking-tight'>{m.page_home_title()}</h1>
+  <Card shadow='sm' class='bg-base-100'>
+    <div class='flex items-center gap-3'>
+      <span class='icon-[tabler--home] size-8 text-primary'></span>
+      <p class='text-base-content/70'>{m.page_home_desc()}</p>
+    </div>
+  </Card>
 {{else}}
-  <h1 class="text-2xl font-bold mb-4">首页</h1>
-  <p class="text-gray-600">欢迎使用 H5 应用</p>
+  <h1 class='text-2xl font-black tracking-tight'>首页</h1>
+  <Card shadow='sm' class='bg-base-100'>
+    <div class='flex items-center gap-3'>
+      <span class='icon-[tabler--home] size-8 text-primary'></span>
+      <p class='text-base-content/70'>欢迎使用 H5 应用</p>
+    </div>
+  </Card>
 {{/if}}
 </section>

package/templates/apps/h5/src/routes/discover/+page.svelte.hbs

@@ -1,11 +1,12 @@
 {{!-- 发现页面 --}}
-<script lang="ts">
+<script lang='ts'>
   /**
    * 发现页面
    */
 {{#if hasI18n}}
   import * as m from '$lib/paraglide/messages'
 {{/if}}
+  import { Card } from '@h-ai/ui'
 </script>
 
 <svelte:head>
@@ -16,12 +17,22 @@
 {{/if}}
 </svelte:head>
 
-<section class="p-4">
+<section class='p-4 space-y-4'>
 {{#if hasI18n}}
-  <h1 class="text-2xl font-bold mb-4">{m.page_discover_title()}</h1>
-  <p class="text-gray-600">{m.page_discover_desc()}</p>
+  <h1 class='text-2xl font-black tracking-tight'>{m.page_discover_title()}</h1>
+  <Card shadow='sm' class='bg-base-100'>
+    <div class='flex items-center gap-3'>
+      <span class='icon-[tabler--compass] size-8 text-primary'></span>
+      <p class='text-base-content/70'>{m.page_discover_desc()}</p>
+    </div>
+  </Card>
 {{else}}
-  <h1 class="text-2xl font-bold mb-4">发现</h1>
-  <p class="text-gray-600">探索更多精彩内容</p>
+  <h1 class='text-2xl font-black tracking-tight'>发现</h1>
+  <Card shadow='sm' class='bg-base-100'>
+    <div class='flex items-center gap-3'>
+      <span class='icon-[tabler--compass] size-8 text-primary'></span>
+      <p class='text-base-content/70'>探索更多精彩内容</p>
+    </div>
+  </Card>
 {{/if}}
 </section>

package/templates/apps/h5/src/routes/profile/+page.svelte.hbs

@@ -1,11 +1,12 @@
 {{!-- 个人中心页面 --}}
-<script lang="ts">
+<script lang='ts'>
   /**
    * 个人中心页面
    */
 {{#if hasI18n}}
   import * as m from '$lib/paraglide/messages'
 {{/if}}
+  import { Card } from '@h-ai/ui'
 </script>
 
 <svelte:head>
@@ -16,12 +17,22 @@
 {{/if}}
 </svelte:head>
 
-<section class="p-4">
+<section class='p-4 space-y-4'>
 {{#if hasI18n}}
-  <h1 class="text-2xl font-bold mb-4">{m.page_profile_title()}</h1>
-  <p class="text-gray-600">{m.page_profile_desc()}</p>
+  <h1 class='text-2xl font-black tracking-tight'>{m.page_profile_title()}</h1>
+  <Card shadow='sm' class='bg-base-100'>
+    <div class='flex items-center gap-3'>
+      <span class='icon-[tabler--user] size-8 text-primary'></span>
+      <p class='text-base-content/70'>{m.page_profile_desc()}</p>
+    </div>
+  </Card>
 {{else}}
-  <h1 class="text-2xl font-bold mb-4">我的</h1>
-  <p class="text-gray-600">管理您的个人信息</p>
+  <h1 class='text-2xl font-black tracking-tight'>我的</h1>
+  <Card shadow='sm' class='bg-base-100'>
+    <div class='flex items-center gap-3'>
+      <span class='icon-[tabler--user] size-8 text-primary'></span>
+      <p class='text-base-content/70'>管理您的个人信息</p>
+    </div>
+  </Card>
 {{/if}}
 </section>

package/templates/apps/mobile-app/.env.hbs

@@ -0,0 +1,3 @@
+# {{projectName}} — 环境变量
+# Android 模拟器使用 10.0.2.2 访问宿主机；真机请改为局域网 IP。
+PUBLIC_API_BASE=http://10.0.2.2:3000/api/v1

package/templates/apps/{android-app → mobile-app}/capacitor.config.ts.hbs

@@ -3,10 +3,10 @@ import type { CapacitorConfig } from '@capacitor/cli'
 const config: CapacitorConfig = {
   appId: 'com.hai.{{projectName}}',
   appName: '{{projectName}}',
-  webDir: 'build',
+  webDir: 'dist',
   server: {
     androidScheme: 'https',
   },
 }
 
-export default config
+export default config

package/templates/apps/mobile-app/index.html.hbs

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="{{defaultLocale}}">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta name="theme-color" content="#2563eb" />
+    <title></title>
+    <script src="./runtime-config.js"></script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./src/main.ts"></script>
+  </body>
+</html>

package/templates/apps/mobile-app/messages/en-US.json

@@ -0,0 +1,36 @@
+{
+  "$schema": "https://inlang.com/schema/inlang-message-format",
+  "app_title": "Mobile Workspace",
+  "app_description": "A mobile app built with hai Agent Framework + Capacitor + Svelte 5",
+  "boot_failed_title": "Boot failed",
+  "common_retry": "Retry",
+  "common_refresh": "Refresh",
+  "common_enabled": "Enabled",
+  "common_disabled": "Disabled",
+  "nav_home": "Workspace",
+  "nav_tasks": "Tasks",
+  "nav_profile": "Profile",
+  "hero_eyebrow": "Mobile Workspace",
+  "hero_title": "A real mobile-first starting point",
+  "hero_subtitle": "Capacitor native capabilities, secure token storage, unified API client and @h-ai/ui mobile components are wired in.",
+  "feature_native_title": "Native ready",
+  "feature_native_desc": "Status bar, safe areas and device runtime are ready for push, camera and more plugins.",
+  "feature_api_title": "Unified API",
+  "feature_api_desc": "Connect to your backend through PUBLIC_API_BASE. Tokens use secure storage on native devices.",
+  "status_title": "Runtime status",
+  "status_api_label": "API base",
+  "status_runtime_label": "Runtime",
+  "status_runtime_native": "Native app",
+  "status_runtime_web": "Browser preview",
+  "status_token_label": "Token storage",
+  "status_token_native": "Secure storage",
+  "status_token_memory": "Memory storage",
+  "tasks_title": "Today's tasks",
+  "tasks_sync": "Wire backend APIs",
+  "tasks_polish": "Polish mobile UX",
+  "tasks_release": "Prepare native packaging",
+  "profile_title": "App settings",
+  "profile_language": "Locale follows Paraglide",
+  "profile_theme": "Theme follows @h-ai/ui",
+  "profile_secure": "Sensitive tokens avoid localStorage"
+}

package/templates/apps/mobile-app/messages/ja-JP.json

@@ -0,0 +1,36 @@
+{
+  "$schema": "https://inlang.com/schema/inlang-message-format",
+  "app_title": "モバイルワークスペース",
+  "app_description": "hai Agent Framework + Capacitor + Svelte 5で構築したモバイルアプリ",
+  "boot_failed_title": "起動に失敗しました",
+  "common_retry": "再試行",
+  "common_refresh": "更新",
+  "common_enabled": "有効",
+  "common_disabled": "無効",
+  "nav_home": "ワークスペース",
+  "nav_tasks": "タスク",
+  "nav_profile": "プロフィール",
+  "hero_eyebrow": "モバイルワークスペース",
+  "hero_title": "モバイルを中心にした実用的な出発点",
+  "hero_subtitle": "Capacitorのネイティブ機能、安全なトークン保存、共通APIクライアント、@h-ai/uiのモバイルコンポーネントを組み込んでいます。",
+  "feature_native_title": "ネイティブ対応",
+  "feature_native_desc": "ステータスバー、セーフエリア、デバイスランタイムを設定済み。プッシュ通知やカメラなどのプラグインを追加できます。",
+  "feature_api_title": "共通API",
+  "feature_api_desc": "PUBLIC_API_BASEでバックエンドに接続します。ネイティブ端末ではトークンを安全なストレージに保存します。",
+  "status_title": "実行状態",
+  "status_api_label": "APIベースURL",
+  "status_runtime_label": "実行環境",
+  "status_runtime_native": "ネイティブアプリ",
+  "status_runtime_web": "ブラウザープレビュー",
+  "status_token_label": "トークン保存",
+  "status_token_native": "安全なストレージ",
+  "status_token_memory": "メモリー内保存",
+  "tasks_title": "本日のタスク",
+  "tasks_sync": "バックエンドAPIを接続",
+  "tasks_polish": "モバイルUXを改善",
+  "tasks_release": "ネイティブのパッケージ化を準備",
+  "profile_title": "アプリ設定",
+  "profile_language": "言語はParaglideに従います",
+  "profile_theme": "テーマは@h-ai/uiに従います",
+  "profile_secure": "機密トークンはlocalStorageに保存しません"
+}

package/templates/apps/mobile-app/messages/zh-CN.json

@@ -0,0 +1,36 @@
+{
+  "$schema": "https://inlang.com/schema/inlang-message-format",
+  "app_title": "移动工作台",
+  "app_description": "基于 hai Agent Framework + Capacitor + Svelte 5 构建的移动应用",
+  "boot_failed_title": "启动失败",
+  "common_retry": "重试",
+  "common_refresh": "刷新",
+  "common_enabled": "已启用",
+  "common_disabled": "未启用",
+  "nav_home": "工作台",
+  "nav_tasks": "任务",
+  "nav_profile": "我的",
+  "hero_eyebrow": "Mobile Workspace",
+  "hero_title": "真正可用的移动端起点",
+  "hero_subtitle": "Capacitor 原生能力、安全 Token 存储、统一 API Client 与 @h-ai/ui 移动组件已经接好。",
+  "feature_native_title": "原生能力",
+  "feature_native_desc": "状态栏、安全区与设备信息就绪，可继续接入推送、相机等插件。",
+  "feature_api_title": "统一 API",
+  "feature_api_desc": "通过 PUBLIC_API_BASE 连接服务端，Token 在原生端走安全存储。",
+  "status_title": "运行状态",
+  "status_api_label": "API 地址",
+  "status_runtime_label": "运行环境",
+  "status_runtime_native": "原生 App",
+  "status_runtime_web": "浏览器预览",
+  "status_token_label": "Token 存储",
+  "status_token_native": "安全存储",
+  "status_token_memory": "内存存储",
+  "tasks_title": "今日任务",
+  "tasks_sync": "同步后端接口",
+  "tasks_polish": "打磨移动端体验",
+  "tasks_release": "准备原生打包",
+  "profile_title": "应用设置",
+  "profile_language": "语言跟随 Paraglide",
+  "profile_theme": "主题跟随 @h-ai/ui",
+  "profile_secure": "敏感 Token 不落 localStorage"
+}

package/templates/apps/mobile-app/public/runtime-config.js

@@ -0,0 +1 @@
+globalThis.__HAI_PUBLIC_CONFIG__ ??= {}

package/templates/apps/mobile-app/src/App.svelte.hbs

@@ -0,0 +1,153 @@
+<script lang='ts'>
+{{#if features.iam}}
+  import type { IamPublicConfig } from '@h-ai/api-contract'
+{{/if}}
+  import type { Component } from 'svelte'
+{{#if features.iam}}
+  import { apiClient } from '@h-ai/api-client'
+{{/if}}
+  import { applyTheme, getSavedTheme, LanguageSwitch, setGlobalLocale } from '@h-ai/ui'
+{{#if features.iam}}
+  import { AuthPanel } from '@h-ai/ui/components/scenes/iam/index'
+  import { authErrorMessage } from '@h-ai/ui/i18n'
+{{/if}}
+  import { errorMessage, useToastFeedback } from '@h-ai/ui/toast'
+  import { onMount } from 'svelte'
+
+  import { closeApi, initApi, usesNativeTokenStorage } from './lib/api.js'
+  import { appConfig, initClientCore } from './lib/app-config.js'
+  import { initCapacitor, isNativeApp } from './lib/capacitor.js'
+  import { HashRouter } from './lib/navigation/hash-router.svelte.js'
+  import * as m from './lib/paraglide/messages.js'
+  import { getLocale, setLocale } from './lib/paraglide/runtime.js'
+
+{{#if features.iam}}
+  const authActions = apiClient.createAuthActions(apiClient)
+  let authConfig = $state<IamPublicConfig | null>(null)
+  let authenticated = $state(false)
+  let resetToken = $state('')
+
+  function handleAuthenticated() {
+    if (resetToken) {
+      const url = new URL(location.href)
+      url.searchParams.delete('token')
+      history.replaceState(history.state, '', url)
+    }
+    resetToken = ''
+    authenticated = true
+  }
+{{/if}}
+
+  const pages = import.meta.glob<{ default: Component<{ nativeRuntime: boolean, nativeTokenStorage: boolean }> }>('./lib/pages/**/*.svelte')
+  const router = new HashRouter(Object.keys(pages), '/home')
+  const pageComponent = $derived(pages[router.file]())
+
+  let booting = $state(true)
+  let bootError = $state<string | null>(null)
+  let nativeRuntime = $state(false)
+  let nativeTokenStorage = $state(false)
+
+  const navItems = $derived([
+    { id: 'home', label: m.nav_home(), iconClass: 'icon-[tabler--layout-dashboard]' },
+    { id: 'tasks', label: m.nav_tasks(), iconClass: 'icon-[tabler--checkbox]' },
+    { id: 'profile', label: m.nav_profile(), iconClass: 'icon-[tabler--user-circle]' },
+  ])
+
+  async function bootstrap(): Promise<void> {
+    bootError = null
+    try {
+      initClientCore()
+      document.title = appConfig.name
+      applyTheme(getSavedTheme(), false)
+      setGlobalLocale(getLocale())
+      document.documentElement.lang = getLocale()
+      await initCapacitor()
+      await initApi()
+{{#if features.iam}}
+      const config = await authActions.publicConfig()
+      if (!config.success) {
+        bootError = authErrorMessage(config.error)
+        return
+      }
+      authConfig = config.data
+      if (!authConfig)
+        throw new Error(m.boot_failed_title())
+      const me = await apiClient.iam.auth.currentUser()
+      authenticated = !resetToken && me.success
+{{/if}}
+      nativeRuntime = await isNativeApp()
+      nativeTokenStorage = await usesNativeTokenStorage()
+    }
+    catch (error) {
+      bootError = errorMessage(error, m.boot_failed_title())
+    }
+    finally {
+      booting = false
+    }
+  }
+
+  function handleLanguageChange(language: string): void {
+    setGlobalLocale(language)
+    setLocale(language as Parameters<typeof setLocale>[0])
+  }
+
+  /** 切换底部导航；例如 handleTabChange('tasks') 会写入 #/tasks。 */
+  function handleTabChange(id: string): void {
+    router.navigate(`/${id}`)
+  }
+
+  onMount(() => {
+    const stopRouting = router.start()
+{{#if features.iam}}
+    resetToken = new URL(location.href).searchParams.get('token') ?? ''
+{{/if}}
+    void bootstrap()
+
+    return () => {
+      stopRouting()
+      void closeApi()
+    }
+  })
+  useToastFeedback(() => bootError)
+</script>
+
+<div class='hai-mobile-viewport'>
+  <div class='hai-mobile-shell min-w-0'>
+    <AppBar title={appConfig.name} safeArea fixed={false} class='bg-base-100/95 backdrop-blur border-base-content/8'>
+      {#snippet trailing()}
+        <LanguageSwitch currentLanguage={getLocale()} onchange={handleLanguageChange} compact />
+      {/snippet}
+    </AppBar>
+    <main class='hai-mobile-main'>
+      {#if booting}
+        <div class='grid min-h-64 place-items-center'><span class='loading loading-spinner loading-lg'></span></div>
+      {:else if bootError}
+        <section class='flex min-h-64 flex-col items-center justify-center gap-3 p-6 text-center'>
+          <h1 class='text-lg font-bold'>{m.boot_failed_title()}</h1>
+          <Button variant='primary' size='sm' onclick={() => location.reload()}>{m.common_retry()}</Button>
+        </section>
+{{#if features.iam}}
+      {:else if !authenticated}
+        <AuthPanel config={authConfig} actions={authActions} {resetToken} initialMode={resetToken ? 'reset' : 'login'} onauthenticated={handleAuthenticated} />
+{{/if}}
+      {:else}
+        {#await pageComponent}
+          <div class='grid min-h-64 place-items-center'><span class='loading loading-spinner'></span></div>
+        {:then { default: Page }}
+          <Page {nativeRuntime} {nativeTokenStorage} />
+        {/await}
+      {/if}
+    </main>
+    <footer class='border-t border-base-content/8 bg-base-100 p-2 text-center text-xs text-base-content/50'>
+      {appConfig.name} · {appConfig.version} · {appConfig.env}
+    </footer>
+{{#if features.iam}}
+    {#if authenticated && !booting && !bootError}
+{{/if}}
+      <BottomNav items={navItems} active={router.path.slice(1)} onchange={handleTabChange} safeArea centered maxWidth='none' />
+{{#if features.iam}}
+    {/if}
+{{/if}}
+  </div>
+</div>
+<ToastContainer />