@h-ai/cli 0.1.0-alpha.20 → 0.1.0-alpha.22

package/templates/apps/fullstack/apps/{{projectName}}-web/src/App.svelte.hbs

@@ -0,0 +1,153 @@
+{{! @skipIfEmpty }}
+{{#if fullstack.frontends.web}}
+<script lang="ts">
+  import type { AppInfo } from '{{fullstack.sharedPackageName}}'
+  import * as appM from './lib/paraglide/messages.js'
+  import { setLocale } from './lib/paraglide/runtime.js'
+  import { Alert, Button, Card, Skeleton } from '@h-ai/ui'
+  import { onMount } from 'svelte'
+  import { AppShell, fetchAppInfo, messages as sharedM } from '{{fullstack.sharedPackageName}}'
+
+  let info = $state<AppInfo | null>(null)
+  let loading = $state(true)
+  let errorMessage = $state('')
+
+  function syncLocale(locale: string) {
+    setLocale(locale as Parameters<typeof setLocale>[0])
+  }
+
+  async function refreshStatus() {
+    loading = true
+    errorMessage = ''
+    try {
+      info = await fetchAppInfo({ clientName: '{{projectName}}-web' })
+    }
+    catch {
+      info = null
+      errorMessage = sharedM.home_error()
+    }
+    finally {
+      loading = false
+    }
+  }
+
+  onMount(() => {
+    document.title = appM.page_title({ name: sharedM.app_name() })
+    void refreshStatus()
+  })
+</script>
+
+<AppShell platform="web" onLocaleChange={syncLocale}>
+  <section class="space-y-8">
+    <div class="grid gap-6 lg:grid-cols-[1.2fr_0.8fr]">
+      <section class="relative overflow-hidden rounded-[2rem] border border-base-300/70 bg-gradient-to-br from-primary/15 via-base-100 to-secondary/15 p-6 shadow-2xl shadow-primary/10 lg:p-10">
+        <div class="absolute right-8 top-8 hidden size-28 rounded-full bg-primary/20 blur-3xl sm:block"></div>
+        <div class="relative z-10 max-w-2xl space-y-6">
+          <span class="badge badge-primary badge-lg gap-2">
+            <span class="icon-[tabler--rocket] size-4"></span>
+            {appM.hero_badge()}
+          </span>
+          <div class="space-y-4">
+            <h1 class="text-4xl font-black tracking-tight text-base-content sm:text-5xl">
+              {appM.hero_title({ name: sharedM.app_name() })}
+            </h1>
+            <p class="max-w-xl text-lg leading-8 text-base-content/70">
+              {appM.hero_subtitle()}
+            </p>
+          </div>
+          <div class="flex flex-wrap gap-3">
+            <a class="btn btn-primary shadow-lg shadow-primary/20" href="#status">
+              <span class="icon-[tabler--activity-heartbeat] size-5"></span>
+              {appM.hero_primary_action()}
+            </a>
+            <a class="btn btn-ghost" href="#customize">
+              <span class="icon-[tabler--adjustments] size-5"></span>
+              {appM.hero_secondary_action()}
+            </a>
+          </div>
+        </div>
+      </section>
+
+      <aside class="rounded-[2rem] border border-base-300/70 bg-base-100/80 p-5 shadow-xl backdrop-blur">
+        <div class="mockup-window border border-base-300 bg-base-200/70">
+          <div class="space-y-4 bg-base-100 p-5">
+            <div class="flex items-center justify-between">
+              <div>
+                <p class="text-sm font-semibold">{appM.preview_title()}</p>
+                <p class="text-xs text-base-content/55">{appM.preview_body()}</p>
+              </div>
+              <span class="badge badge-success badge-outline">{appM.platform_name()}</span>
+            </div>
+            <div class="grid gap-3 text-sm">
+              <div class="rounded-2xl bg-primary/10 p-4">
+                <span class="icon-[tabler--components] mb-2 size-6 text-primary"></span>
+                <p class="font-semibold">{appM.preview_metric_shared()}</p>
+              </div>
+              <div class="grid grid-cols-2 gap-3">
+                <div class="rounded-2xl bg-secondary/10 p-4">
+                  <span class="icon-[tabler--language] mb-2 size-6 text-secondary"></span>
+                  <p class="font-semibold">{appM.preview_metric_local()}</p>
+                </div>
+                <div class="rounded-2xl bg-accent/10 p-4">
+                  <span class="icon-[tabler--palette] mb-2 size-6 text-accent"></span>
+                  <p class="font-semibold">{appM.preview_metric_theme()}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </aside>
+    </div>
+
+    <div class="grid gap-6 lg:grid-cols-[0.95fr_1.05fr]">
+      <div id="status">
+        <Card title={appM.status_title()} bordered shadow="md" class="bg-base-100/90 backdrop-blur">
+          <p class="mb-5 text-sm text-base-content/65">{appM.status_description()}</p>
+          {#if loading}
+            <Skeleton variant="title" class="mb-3" />
+            <Skeleton count={3} />
+            <p class="sr-only" data-testid="service-status">{sharedM.home_loading()}</p>
+          {:else if info}
+            <Alert variant="success" title={appM.status_online({ name: info.name })}>
+              <p data-testid="service-status">{info.name}</p>
+            </Alert>
+            <dl class="mt-5 grid gap-3 text-sm sm:grid-cols-2">
+              <div class="rounded-box border border-base-300/70 bg-base-200/60 p-4">
+                <dt class="text-xs text-base-content/55">{appM.status_version()}</dt>
+                <dd class="mt-1 font-semibold">{info.version}</dd>
+              </div>
+              <div class="rounded-box border border-base-300/70 bg-base-200/60 p-4">
+                <dt class="text-xs text-base-content/55">{appM.status_started({ time: info.startedAt })}</dt>
+                <dd class="mt-1 font-semibold">{appM.status_frontends_count({ count: String(info.frontends.length) })}</dd>
+              </div>
+            </dl>
+          {:else}
+            <Alert variant="error" title={sharedM.home_error()}>
+              <p data-testid="service-status">{errorMessage}</p>
+            </Alert>
+          {/if}
+
+          <div class="mt-5">
+            <Button type="button" variant="primary" loading={loading} onclick={refreshStatus}>
+              {sharedM.home_refresh()}
+            </Button>
+          </div>
+        </Card>
+      </div>
+
+      <section id="customize" class="grid gap-4 sm:grid-cols-2">
+        <div class="rounded-[1.5rem] border border-base-300/70 bg-base-100/90 p-5 shadow-md">
+          <span class="icon-[tabler--package] mb-4 size-7 text-primary"></span>
+          <h2 class="text-lg font-bold">{appM.custom_shared_title()}</h2>
+          <p class="mt-2 text-sm leading-6 text-base-content/65">{appM.custom_shared_body()}</p>
+        </div>
+        <div class="rounded-[1.5rem] border border-base-300/70 bg-base-100/90 p-5 shadow-md">
+          <span class="icon-[tabler--message-language] mb-4 size-7 text-secondary"></span>
+          <h2 class="text-lg font-bold">{appM.custom_local_title()}</h2>
+          <p class="mt-2 text-sm leading-6 text-base-content/65">{appM.custom_local_body()}</p>
+        </div>
+      </section>
+    </div>
+  </section>
+</AppShell>
+{{/if}}

package/templates/apps/fullstack/apps/{{projectName}}-web/src/app.d.ts.hbs

@@ -1,6 +1,5 @@
 {{! @skipIfEmpty }}
 {{#if fullstack.frontends.web}}
-/// <reference types="@sveltejs/kit" />
 /// <reference types="vite/client" />
 
 import '@h-ai/ui/auto-import'

package/templates/apps/fullstack/apps/{{projectName}}-web/src/main.ts.hbs

@@ -0,0 +1,14 @@
+{{! @skipIfEmpty }}
+{{#if fullstack.frontends.web}}
+import { mount } from 'svelte'
+import App from './App.svelte'
+import './app.css'
+
+const target = document.getElementById('app')
+if (!target)
+  throw new Error('Root element #app not found')
+
+const app = mount(App, { target })
+
+export default app
+{{/if}}

package/templates/apps/fullstack/apps/{{projectName}}-web/svelte.config.js.hbs

@@ -1,19 +1,15 @@
 {{! @skipIfEmpty }}
 {{#if fullstack.frontends.web}}
 import { autoImportHaiUi } from '@h-ai/ui/auto-import'
-import adapter from '@sveltejs/adapter-auto'
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
 
-/** @type {import('@sveltejs/kit').Config} */
+/** @type {import('@sveltejs/vite-plugin-svelte').SvelteConfig} */
 const config = {
   preprocess: [autoImportHaiUi(), vitePreprocess()],
   compilerOptions: {
     // 使用 Svelte 5 Runes，和 @h-ai/ui 组件库保持一致。
     runes: true,
   },
-  kit: {
-    adapter: adapter(),
-  },
 }
 
 export default config

package/templates/apps/fullstack/apps/{{projectName}}-web/tsconfig.json.hbs

@@ -1,17 +1,23 @@
 {{! @skipIfEmpty }}
 {{#if fullstack.frontends.web}}
 {
-  "extends": "./.svelte-kit/tsconfig.json",
   "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "moduleDetection": "force",
+    "module": "ESNext",
     "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "types": ["svelte", "vite/client", "node", "vitest/globals"],
     "allowJs": true,
     "checkJs": false,
     "strict": true,
+    "noEmit": true,
+    "isolatedModules": true,
     "verbatimModuleSyntax": true,
     "skipLibCheck": true
   },
-  "include": ["src/**/*", "src/**/*.svelte", "tests/**/*"],
-  "exclude": ["node_modules", ".svelte-kit", "build"]
+  "include": ["src/**/*.ts", "src/**/*.svelte", "tests/**/*.ts", "vite.config.ts", "svelte.config.js"],
+  "exclude": ["node_modules", "dist", "build"]
 }
 {{/if}}

package/templates/apps/fullstack/apps/{{projectName}}-web/vite.config.ts.hbs

@@ -1,23 +1,24 @@
 {{! @skipIfEmpty }}
 {{#if fullstack.frontends.web}}
 import { paraglideVitePlugin } from '@inlang/paraglide-js'
-import { sveltekit } from '@sveltejs/kit/vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
 import tailwindcss from '@tailwindcss/vite'
 import { defineConfig } from 'vitest/config'
 
 export default defineConfig({
   plugins: [
+    svelte(),
     paraglideVitePlugin({
       project: './project.inlang',
       outdir: './src/lib/paraglide',
       strategy: ['cookie', 'baseLocale'],
     }),
-    sveltekit(),
     tailwindcss(),
   ],
   optimizeDeps: {
     exclude: ['bits-ui'],
   },
+  envPrefix: ['VITE_', 'PUBLIC_'],
   ssr: {
     noExternal: [/@h-ai\//, /{{fullstack.sharedPackageName}}/],
   },

package/templates/apps/fullstack/e2e/fullstack.spec.ts.hbs

@@ -1,7 +1,8 @@
 import { expect, test } from '@playwright/test'
 import { APP_API_ROUTES } from '{{fullstack.contractPackageName}}'
 
-const apiBaseUrl = 'http://127.0.0.1:3000'
+const DEFAULT_SERVICE_BASE_URL = 'http://127.0.0.1:3000'
+const apiBaseUrl = process.env.SERVICE_BASE_URL || DEFAULT_SERVICE_BASE_URL
 
 test('service health endpoint is ready', async ({ request }) => {
   const response = await request.get(apiBaseUrl + APP_API_ROUTES.health)

package/templates/apps/fullstack/eslint.config.js

@@ -3,7 +3,6 @@ import antfu from '@antfu/eslint-config'
 export default antfu({
   formatters: true,
   ignores: [
-    '**/.svelte-kit/**',
     '**/build/**',
     '**/dist/**',
     '**/src/lib/paraglide/**',

package/templates/apps/fullstack/package.json.hbs

@@ -9,7 +9,10 @@
     "i18n:compile": "pnpm --filter {{fullstack.sharedPackageName}} paraglide:compile{{#each fullstack.frontendApps}} && pnpm --filter {{packageName}} paraglide:compile{{/each}}",
     "postinstall": "pnpm i18n:compile",
     "dev": "pnpm --filter {{fullstack.contractPackageName}} build && pnpm i18n:compile && pnpm --parallel --filter {{fullstack.servPackageName}}{{#each fullstack.frontendApps}} --filter {{packageName}}{{/each}} dev",
+    "compile": "pnpm typecheck && pnpm build",
     "build": "pnpm --filter {{fullstack.contractPackageName}} build && pnpm i18n:compile && pnpm -r --if-present build",
+    "package": "pnpm build{{#if fullstack.frontends.web}} && pnpm --filter {{projectName}}-web package{{/if}}{{#if fullstack.frontends.app}} && pnpm --filter {{projectName}}-app package{{/if}}{{#if fullstack.frontends.desktop}} && pnpm --filter {{projectName}}-desktop package{{/if}}",
+    "deploy": "pnpm package",
     "typecheck": "pnpm --filter {{fullstack.contractPackageName}} build && pnpm i18n:compile && pnpm -r --if-present typecheck",
     "lint": "pnpm -r --if-present lint",
     "test": "pnpm --filter {{fullstack.contractPackageName}} build && pnpm i18n:compile && pnpm -r --if-present test",
@@ -21,22 +24,20 @@
     "{{fullstack.sharedPackageName}}": "workspace:*"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "{{fullstack.versions.antfuEslintConfig}}",
-    "@playwright/test": "{{fullstack.versions.playwright}}",
-    "@sveltejs/adapter-auto": "{{fullstack.versions.adapterAuto}}",
-    "@sveltejs/kit": "{{fullstack.versions.svelteKit}}",
-    "@sveltejs/vite-plugin-svelte": "{{fullstack.versions.sveltePlugin}}",
-    "@types/node": "{{fullstack.versions.nodeTypes}}",
-    "eslint": "{{fullstack.versions.eslint}}",
-    "eslint-plugin-format": "{{fullstack.versions.eslintPluginFormat}}",
-    "eslint-plugin-svelte": "{{fullstack.versions.eslintPluginSvelte}}",
-    "rimraf": "{{fullstack.versions.rimraf}}",
-    "svelte": "{{fullstack.versions.svelte}}",
-    "svelte-check": "{{fullstack.versions.svelteCheck}}",
-    "svelte-eslint-parser": "{{fullstack.versions.svelteEslintParser}}",
-    "tsup": "{{fullstack.versions.tsup}}",
-    "typescript": "{{fullstack.versions.typescript}}",
-    "vite": "{{fullstack.versions.vite}}",
-    "vitest": "{{fullstack.versions.vitest}}"
+    "@antfu/eslint-config": "{{fullstack.packageSpecifiers.antfuEslintConfig}}",
+    "@playwright/test": "{{fullstack.packageSpecifiers.playwright}}",
+    "@sveltejs/vite-plugin-svelte": "{{fullstack.packageSpecifiers.sveltePlugin}}",
+    "@types/node": "{{fullstack.packageSpecifiers.nodeTypes}}",
+    "eslint": "{{fullstack.packageSpecifiers.eslint}}",
+    "eslint-plugin-format": "{{fullstack.packageSpecifiers.eslintPluginFormat}}",
+    "eslint-plugin-svelte": "{{fullstack.packageSpecifiers.eslintPluginSvelte}}",
+    "rimraf": "{{fullstack.packageSpecifiers.rimraf}}",
+    "svelte": "{{fullstack.packageSpecifiers.svelte}}",
+    "svelte-check": "{{fullstack.packageSpecifiers.svelteCheck}}",
+    "svelte-eslint-parser": "{{fullstack.packageSpecifiers.svelteEslintParser}}",
+    "tsup": "{{fullstack.packageSpecifiers.tsup}}",
+    "typescript": "{{fullstack.packageSpecifiers.typescript}}",
+    "vite": "{{fullstack.packageSpecifiers.vite}}",
+    "vitest": "{{fullstack.packageSpecifiers.vitest}}"
   }
 }

package/templates/apps/fullstack/packages/{{projectName}}-contract/package.json.hbs

@@ -20,8 +20,8 @@
     "clean": "rimraf dist .turbo"
   },
   "dependencies": {
-    "@h-ai/api-contract": "{{fullstack.versions.apiContract}}",
-    "@h-ai/core": "{{fullstack.versions.core}}",
-    "zod": "{{fullstack.versions.zod}}"
+    "@h-ai/api-contract": "{{haiPackageSpecifier}}",
+    "@h-ai/core": "{{haiPackageSpecifier}}",
+    "zod": "{{fullstack.packageSpecifiers.zod}}"
   }
 }

package/templates/apps/fullstack/packages/{{projectName}}-serv/README.md.hbs

@@ -7,9 +7,9 @@
 - `config/_core.yml`：应用元信息（名称 / 版本 / 环境 / 语言），启动时由 `core.config` 加载。
 - `config/_serv.yml`：服务端运行时设置（CORS 来源等）。
 - `src/index.ts`：进程入口，先 `core.init({ configDir: './config' })` 加载配置再启动监听。
-- `src/server-app.ts`：服务装配入口，挂载健康检查、OpenAPI、docs 与 procedures；应用名称 / 版本与 CORS 来源均取自上述配置。
+- `src/app-server.ts`：服务装配入口，挂载健康检查、OpenAPI、docs 与 procedures；应用名称 / 版本与 CORS 来源均取自上述配置。
 - `src/server/procedures/app-procedures.ts`：app 领域 procedures，对应 contract 中的 `app.info` / `app.echo` 路由。
-- `tests/server-app.test.ts`：通过 `ServerApp.request()` 验证健康检查与业务路由。
+- `tests/app-server.test.ts`：通过 `ServerApp.request()` 验证健康检查与业务路由。
 
 ## 开发
 

package/templates/apps/fullstack/packages/{{projectName}}-serv/package.json.hbs

@@ -22,8 +22,8 @@
     "start": "node dist/index.js"
   },
   "dependencies": {
-    "@h-ai/core": "{{fullstack.versions.core}}",
-    "@h-ai/serv": "{{fullstack.versions.serv}}",
+    "@h-ai/core": "{{haiPackageSpecifier}}",
+    "@h-ai/serv": "{{haiPackageSpecifier}}",
     "{{fullstack.contractPackageName}}": "workspace:*"
   }
 }

package/templates/apps/fullstack/packages/{{projectName}}-serv/src/index.ts.hbs

@@ -1,7 +1,7 @@
 import process from 'node:process'
 import { core } from '@h-ai/core'
 import { serv } from '@h-ai/serv'
-import { createServerApp } from './server-app.js'
+import { createServerApp } from './app-server.js'
 
 // 加载 config/ 下的 _core.yml / _serv.yml 等配置文件（约定优于配置）
 core.init({ configDir: './config', logging: { level: 'info' } })

package/templates/apps/fullstack/packages/{{projectName}}-serv/tests/{server-app.test.ts.hbs → app-server.test.ts.hbs}

@@ -1,6 +1,6 @@
 import { APP_API_ROUTES } from '{{fullstack.contractPackageName}}'
 import { describe, expect, it } from 'vitest'
-import { createServerApp } from '../src/server-app.js'
+import { createServerApp } from '../src/app-server.js'
 
 describe('{{fullstack.servPackageName}}', () => {
   it('returns health status', async () => {

package/templates/apps/fullstack/packages/{{projectName}}-shared/package.json.hbs

@@ -29,16 +29,17 @@
     "clean": "rimraf .turbo src/lib/paraglide"
   },
   "dependencies": {
-    "@h-ai/api-client": "{{fullstack.versions.apiClient}}",
-    "@h-ai/ui": "{{fullstack.versions.ui}}",
+    "@h-ai/api-client": "{{haiPackageSpecifier}}",
+    "@h-ai/ui": "{{haiPackageSpecifier}}",
     "{{fullstack.contractPackageName}}": "workspace:*"
   },
   "devDependencies": {
-    "@inlang/paraglide-js": "{{fullstack.versions.inlangParaglide}}",
-    "@inlang/plugin-message-format": "{{fullstack.versions.inlangMessageFormat}}",
-    "svelte": "{{fullstack.versions.svelte}}",
-    "svelte-check": "{{fullstack.versions.svelteCheck}}",
-    "typescript": "{{fullstack.versions.typescript}}",
-    "vitest": "{{fullstack.versions.vitest}}"
+    "@inlang/paraglide-js": "{{fullstack.packageSpecifiers.inlangParaglide}}",
+    "@inlang/plugin-message-format": "{{fullstack.packageSpecifiers.inlangMessageFormat}}",
+    "svelte": "{{fullstack.packageSpecifiers.svelte}}",
+    "svelte-check": "{{fullstack.packageSpecifiers.svelteCheck}}",
+    "typescript": "{{fullstack.packageSpecifiers.typescript}}",
+    "vite": "{{fullstack.packageSpecifiers.vite}}",
+    "vitest": "{{fullstack.packageSpecifiers.vitest}}"
   }
 }

package/templates/apps/fullstack/packages/{{projectName}}-shared/src/index.ts.hbs

@@ -1,7 +1,7 @@
 export { default as AppShell } from './lib/components/AppShell.svelte'
 export { default as LanguageSwitcher } from './lib/components/LanguageSwitcher.svelte'
 export { default as ThemeSwitcher } from './lib/components/ThemeSwitcher.svelte'
-export { AVAILABLE_THEMES, themeStore } from './lib/stores/theme.svelte.js'
+export { AVAILABLE_THEMES, themeStore } from './lib/stores/theme-store.svelte.js'
 export type { AppInfo, FetchAppInfoOptions } from './lib/api/api-client.js'
 export { fetchAppInfo } from './lib/api/api-client.js'
 export * as messages from './lib/paraglide/messages.js'

package/templates/apps/fullstack/packages/{{projectName}}-shared/src/lib/api/api-client.ts.hbs

@@ -14,7 +14,7 @@ export interface FetchAppInfoOptions {
 
 export async function fetchAppInfo(options: FetchAppInfoOptions = {}): Promise<AppInfo> {
   const fetchFn = options.fetchFn ?? fetch
-  const baseUrl = options.baseUrl ?? DEFAULT_API_ORIGIN
+  const baseUrl = options.baseUrl ?? resolveDefaultApiOrigin()
   const clientName = options.clientName ?? '{{projectName}}-shared'
 
   const client = apiClient.create({{fullstack.contractExportName}})
@@ -37,6 +37,10 @@ export async function fetchAppInfo(options: FetchAppInfoOptions = {}): Promise<A
   }
 }
 
+function resolveDefaultApiOrigin(): string {
+  return import.meta.env.PUBLIC_API_BASE ?? DEFAULT_API_ORIGIN
+}
+
 function normalizeApiBaseUrl(value: string): string {
   const trimmed = trimTrailingSlash(value)
   return trimmed.endsWith(APP_HTTP_ROUTES.apiPrefix)

package/templates/apps/fullstack/packages/{{projectName}}-shared/src/lib/components/ThemeSwitcher.svelte.hbs

@@ -1,6 +1,6 @@
 <script lang="ts">
   import * as m from '../paraglide/messages.js'
-  import { AVAILABLE_THEMES, themeStore } from '../stores/theme.svelte.js'
+  import { AVAILABLE_THEMES, themeStore } from '../stores/theme-store.svelte.js'
 
   function handleChange(event: Event) {
     const target = event.target as HTMLSelectElement

package/templates/apps/fullstack/packages/{{projectName}}-shared/tsconfig.json.hbs

@@ -9,7 +9,7 @@
     "noEmit": true,
     "skipLibCheck": true,
     "strict": true,
-    "types": ["svelte"],
+    "types": ["svelte", "vite/client"],
     "verbatimModuleSyntax": true
   },
   "include": ["src/**/*", "src/**/*.svelte"],

package/templates/apps/fullstack/playwright.config.ts.hbs

@@ -1,6 +1,39 @@
 import process from 'node:process'
 import { defineConfig } from '@playwright/test'
 
+const defaultBaseURL = '{{#if fullstack.e2eFrontend}}http://127.0.0.1:{{fullstack.e2eFrontend.port}}{{else}}http://127.0.0.1:3000{{/if}}'
+const defaultServiceBaseURL = 'http://127.0.0.1:3000'
+const baseURL = process.env.BASE_URL || defaultBaseURL
+const frontendHost = resolveHostFromBaseUrl(baseURL, '127.0.0.1')
+const frontendPort = resolvePortFromBaseUrl(baseURL, '{{#if fullstack.e2eFrontend}}{{fullstack.e2eFrontend.port}}{{else}}3000{{/if}}')
+const serviceBaseURL = process.env.SERVICE_BASE_URL || defaultServiceBaseURL
+const serviceHost = resolveHostFromBaseUrl(serviceBaseURL, '127.0.0.1')
+const servicePort = resolvePortFromBaseUrl(serviceBaseURL, '3000')
+
+function resolveHostFromBaseUrl(urlString: string, fallbackHost: string): string {
+  try {
+    const url = new URL(urlString)
+    return url.hostname || fallbackHost
+  }
+  catch {
+    return fallbackHost
+  }
+}
+
+function resolvePortFromBaseUrl(urlString: string, fallbackPort: string): string {
+  try {
+    const url = new URL(urlString)
+    if (url.port) {
+      return url.port
+    }
+
+    return url.protocol === 'https:' ? '443' : '80'
+  }
+  catch {
+    return fallbackPort
+  }
+}
+
 export default defineConfig({
   testDir: './e2e',
   fullyParallel: false,
@@ -10,7 +43,7 @@ export default defineConfig({
   reporter: 'list',
   timeout: 30_000,
   use: {
-    baseURL: '{{#if fullstack.e2eFrontend}}http://127.0.0.1:{{fullstack.e2eFrontend.port}}{{else}}http://127.0.0.1:3000{{/if}}',
+    baseURL,
     channel: 'chrome',
     trace: 'on-first-retry',
     screenshot: 'only-on-failure',
@@ -19,14 +52,18 @@ export default defineConfig({
     {
       name: '{{fullstack.servPackageName}}',
       command: 'pnpm --filter {{fullstack.servPackageName}} start',
-      url: 'http://127.0.0.1:3000/health',
+      env: {
+        HOST: serviceHost,
+        PORT: servicePort,
+      },
+      url: `${serviceBaseURL}/health`,
       reuseExistingServer: false,
       timeout: 120_000,
     }{{#if fullstack.e2eFrontend}},
     {
       name: '{{fullstack.e2eFrontend.packageName}}',
-      command: 'pnpm --filter {{fullstack.e2eFrontend.packageName}} preview',
-      url: 'http://127.0.0.1:{{fullstack.e2eFrontend.port}}',
+      command: `pnpm --filter {{fullstack.e2eFrontend.packageName}} exec vite preview --host ${frontendHost} --port ${frontendPort} --strictPort`,
+      url: baseURL,
       reuseExistingServer: false,
       timeout: 120_000,
     }{{/if}},

package/templates/apps/fullstack/pnpm-workspace.yaml.hbs

@@ -0,0 +1,15 @@
+{{! @skipIfEmpty }}
+shellEmulator: true
+
+trustPolicy: no-downgrade
+
+packages:
+  - packages/*
+  - apps/*
+
+{{#if useCatalogProtocol}}
+catalog:
+{{#each haiCatalogPackages}}
+  '{{@key}}': {{this}}
+{{/each}}
+{{/if}}

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,13 @@
+<!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>{{projectName}}</title>
+  </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"
+}