create-next-imagicma 0.1.2 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-imagicma",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "type": "module",
   "bin": {
     "create-next-imagicma": "./bin/create-next-imagicma.mjs"

package/template/process-compose.yaml

@@ -1,5 +1,5 @@
 version: "0.5"
-log_location: ".opencode/logs/process-compose.log"
+log_location: ".imagicma/process-compose.log"
 
 processes:
   web:

package/template-hono/.env.example

@@ -1,8 +1,5 @@
-# 复制为 .env.local 并填入真实值（.env.local 不会被提交）
+# 复制为 .env.local 后按需覆盖（.env.local 不会被提交）
 #
-# Postgres 连接串（Drizzle + pg 使用）
-# 示例：
-# DATABASE_URL="postgres://user:pass@localhost:5432/mydb"
-DATABASE_URL=""
-
+# 可选：自定义 SQLite 文件位置；默认使用 ./.data/app.db
+# DATABASE_FILE="./.data/app.db"
 

package/template-hono/AGENTS.md

@@ -12,7 +12,7 @@
 - 前端：React 19 + React Router + Tailwind v4 + shadcn/ui
 - 请求层：React Query + fetch
 - 契约：Zod（`shared/routes.ts`）
-- 数据库：优先 Postgres + Drizzle；若 `DATABASE_URL` 缺失，默认走 SQLite（零配置）并保持 API 契约不变
+- 数据库：SQLite + Drizzle（默认 `./.data/app.db`，无需 `DATABASE_URL`；可用 `DATABASE_FILE` 覆盖）
 
 ## 目录约定
 

package/template-hono/README.md

@@ -6,7 +6,7 @@
 
 - 前端：React 19、React Router、Tailwind CSS v4、shadcn/ui、React Query
 - 后端：Hono（Node runtime）
-- 数据层：Drizzle ORM + PostgreSQL (`pg`)
+- 数据层：Drizzle ORM + SQLite（默认 `./.data/app.db`）
 - 校验契约：Zod（`shared/routes.ts`）
 
 ## 目录结构（重点）
@@ -44,15 +44,36 @@ pnpm start
 
 ## 数据库
 
-1. 复制 `.env.example` 为 `.env.local`
-2. 填写 `DATABASE_URL`
-3. 初始化结构：
+首次运行前初始化结构：
 
 ```bash
 pnpm db:push
 ```
 
+- 默认数据库文件：`./.data/app.db`
+- 如需自定义位置，可复制 `.env.example` 为 `.env.local` 后设置 `DATABASE_FILE`
+
 ## 验证路径
 
 - API：`GET /api/greeting`
 - 页面：`/hello`
+
+## E2E 与 `run_test`
+
+- Playwright 配置位于 [`playwright.config.ts`](/Users/alexliu/Project/imagicma-all/imagicma-template/hono-app/playwright.config.ts)
+- 测试契约位于 [`hono-app/.imagicma/testing-manifest.json`](/Users/alexliu/Project/imagicma-all/imagicma-template/hono-app/.imagicma/testing-manifest.json)
+- 本地回归命令：
+
+```bash
+pnpm test:e2e
+```
+
+- `run_test` 驱动 Playwright 时会注入：
+  - `IMAGICMA_RUN_ID`
+  - `IMAGICMA_RUN_TEST_RUNTIME_ROOT`
+  - `IMAGICMA_RUN_TEST_SKIP_WEBSERVER`
+  - `BASE_URL`
+
+fixtures 约定：
+- `tests/e2e/fixtures/imagicma.ts` 必须把浏览器 warning/error、page errors、失败网络请求与 current URL 写入 `IMAGICMA_RUN_TEST_RUNTIME_ROOT`
+- `testing-manifest.json` 负责声明稳定页面、selectors、fixtures 与 auth profile，供 `run_test` 编译阶段使用

package/template-hono/client/src/components/ErrorBoundary.tsx

@@ -1,35 +1,102 @@
 import React from "react";
+import {
+  canUsePreviewRepair,
+  sendPreviewRepairRequest,
+} from "@/lib/imagicma-preview-repair";
 
 type AppErrorBoundaryState = {
   error: Error | null;
+  componentStack: string;
+  repairStatus: "idle" | "sending" | "synced" | "failed";
+  repairMessage: string;
 };
 
 export class AppErrorBoundary extends React.Component<
   { children: React.ReactNode },
   AppErrorBoundaryState
 > {
-  state: AppErrorBoundaryState = { error: null };
+  state: AppErrorBoundaryState = {
+    error: null,
+    componentStack: "",
+    repairStatus: "idle",
+    repairMessage: "",
+  };
 
   static getDerivedStateFromError(error: Error): AppErrorBoundaryState {
-    return { error };
+    return {
+      error,
+      componentStack: "",
+      repairStatus: "idle",
+      repairMessage: "",
+    };
   }
 
-  componentDidCatch(error: Error) {
+  componentDidCatch(error: Error, info: React.ErrorInfo) {
     console.error(error);
+    this.setState({
+      componentStack: info.componentStack || "",
+      repairStatus: "idle",
+      repairMessage: "",
+    });
   }
 
-  private reset = () => {
-    this.setState({ error: null });
+  private handleRepair = async () => {
+    const { error, componentStack } = this.state;
+    if (!error) return;
+
+    this.setState({
+      repairStatus: "sending",
+      repairMessage: "正在同步修复草稿到主界面…",
+    });
+
+    try {
+      const ack = await sendPreviewRepairRequest({
+        pageUrl: window.location.href,
+        errorName: (error.name || "Error").trim(),
+        errorMessage: (error.message || "发生未知错误").trim(),
+        errorStack: error.stack || undefined,
+        componentStack: componentStack || undefined,
+        timestamp: Date.now(),
+      });
+
+      if (ack.status === "ok") {
+        this.setState({
+          repairStatus: "synced",
+          repairMessage: ack.message?.trim() || "已同步修复草稿到主界面，请回到对话区确认发送。",
+        });
+        return;
+      }
+
+      this.setState({
+        repairStatus: "failed",
+        repairMessage: ack.message?.trim() || "同步失败，请稍后重试或手动刷新页面。",
+      });
+    } catch (error) {
+      this.setState({
+        repairStatus: "failed",
+        repairMessage:
+          error instanceof Error && error.message
+            ? error.message
+            : "同步失败，请稍后重试或手动刷新页面。",
+      });
+    }
   };
 
   render() {
-    const { error } = this.state;
+    const { error, repairStatus, repairMessage } = this.state;
     if (!error) {
       return this.props.children;
     }
 
     const isDev = import.meta.env.DEV;
     const message = isDev ? (error.message || "发生未知错误").trim() : "";
+    const showRepairButton = canUsePreviewRepair();
+    const repairButtonLabel =
+      repairStatus === "sending"
+        ? "同步中..."
+        : repairStatus === "synced"
+          ? "已同步"
+          : "一键修复";
 
     return (
       <div
@@ -41,7 +108,7 @@ export class AppErrorBoundary extends React.Component<
           <div className="flex flex-col items-center text-center">
             <h1 className="text-3xl font-semibold tracking-tight">预览暂时不可用</h1>
             <p className="mt-4 max-w-md text-base leading-7 text-white/80">
-              检测到错误。修复后可点击“重试”恢复，或直接刷新页面。
+              检测到错误。你可以把错误信息同步回主界面，让系统生成修复草稿，或直接刷新页面。
             </p>
 
             {isDev && message ? (
@@ -50,14 +117,21 @@ export class AppErrorBoundary extends React.Component<
               </pre>
             ) : null}
 
+            {repairMessage ? (
+              <p className="mt-4 max-w-md text-sm leading-6 text-white/80">{repairMessage}</p>
+            ) : null}
+
             <div className="mt-8 flex w-full flex-col gap-3 sm:flex-row sm:justify-center">
-              <button
-                type="button"
-                className="inline-flex h-11 w-full items-center justify-center rounded-full bg-white px-5 text-sm font-medium text-black transition-colors hover:bg-white/90 sm:w-auto"
-                onClick={this.reset}
-              >
-                重试
-              </button>
+              {showRepairButton ? (
+                <button
+                  type="button"
+                  className="inline-flex h-11 w-full items-center justify-center rounded-full bg-white px-5 text-sm font-medium text-black transition-colors hover:bg-white/90 disabled:cursor-not-allowed disabled:bg-white/70 sm:w-auto"
+                  onClick={this.handleRepair}
+                  disabled={repairStatus === "sending" || repairStatus === "synced"}
+                >
+                  {repairButtonLabel}
+                </button>
+              ) : null}
               <button
                 type="button"
                 className="inline-flex h-11 w-full items-center justify-center rounded-full border border-white/20 bg-white/10 px-5 text-sm font-medium text-white transition-colors hover:bg-white/15 sm:w-auto"

package/template-hono/client/src/components/HelloClient.tsx

@@ -62,7 +62,7 @@ function EnvHint() {
   return (
     <div className="text-sm text-muted-foreground">
       <p>
-        若 API 报错请检查：是否已在 <code>.env.local</code> 设置 <code>DATABASE_URL</code>，并执行 <code>npm run db:push</code>。
+        默认使用 <code>./.data/app.db</code>。若 API 报错，请先执行 <code>pnpm db:push</code> 初始化 SQLite；需要自定义位置时可在 <code>.env.local</code> 设置 <code>DATABASE_FILE</code>。
       </p>
     </div>
   );

package/template-hono/client/src/lib/imagicma-preview-repair.ts

@@ -0,0 +1,137 @@
+export const PREVIEW_REPAIR_CHANNEL = "imagicma.preview-repair";
+export const PREVIEW_REPAIR_VERSION = 1;
+
+export type PreviewRepairAckStatus = "ok" | "error";
+
+export interface PreviewRepairPayload {
+  pageUrl: string;
+  errorName: string;
+  errorMessage: string;
+  errorStack?: string;
+  componentStack?: string;
+  timestamp: number;
+}
+
+export interface PreviewRepairAck {
+  status: PreviewRepairAckStatus;
+  message?: string;
+}
+
+const PROD_PARENT_ORIGINS = new Set(["https://agentma.cn", "https://imagicma.cn"]);
+const LOCAL_PARENT_RE = /^https?:\/\/(localhost|127\.0\.0\.1)(:\d+)?$/i;
+const LOCAL_IMAGICMA_PARENT_RE = /^https?:\/\/([a-z0-9-]+\.)?local\.(agentma\.cn|imagicma\.cn)(:\d+)?$/i;
+const DEFAULT_TIMEOUT_MS = 4000;
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null;
+}
+
+function trimText(value: unknown): string {
+  return typeof value === "string" ? value.trim() : "";
+}
+
+function createRequestId(): string {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return `repair_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 10)}`;
+}
+
+export function isInIframe(): boolean {
+  return typeof window !== "undefined" && window.parent !== window;
+}
+
+export function isAllowedRepairParentOrigin(origin: string): boolean {
+  if (!origin) return false;
+  return PROD_PARENT_ORIGINS.has(origin) || LOCAL_PARENT_RE.test(origin) || LOCAL_IMAGICMA_PARENT_RE.test(origin);
+}
+
+export function resolveRepairParentOrigin(referrer: string = document.referrer): string | null {
+  const source = trimText(referrer);
+  if (!source) return null;
+
+  try {
+    const origin = new URL(source).origin;
+    return isAllowedRepairParentOrigin(origin) ? origin : null;
+  } catch {
+    return null;
+  }
+}
+
+function isAckMessage(value: unknown): value is {
+  channel: typeof PREVIEW_REPAIR_CHANNEL;
+  version: typeof PREVIEW_REPAIR_VERSION;
+  type: "IMAGICMA_PREVIEW_REPAIR_ACK";
+  requestId: string;
+  payload: PreviewRepairAck;
+} {
+  if (!isRecord(value)) return false;
+  if (value.channel !== PREVIEW_REPAIR_CHANNEL) return false;
+  if (value.version !== PREVIEW_REPAIR_VERSION) return false;
+  if (value.type !== "IMAGICMA_PREVIEW_REPAIR_ACK") return false;
+  if (typeof value.requestId !== "string" || value.requestId.length === 0) return false;
+  if (!isRecord(value.payload)) return false;
+  if (value.payload.status !== "ok" && value.payload.status !== "error") return false;
+  if (value.payload.message !== undefined && typeof value.payload.message !== "string") return false;
+  return true;
+}
+
+export function canUsePreviewRepair(): boolean {
+  return isInIframe() && !!resolveRepairParentOrigin();
+}
+
+export function sendPreviewRepairRequest(
+  payload: PreviewRepairPayload,
+  options?: { timeoutMs?: number },
+): Promise<PreviewRepairAck> {
+  if (!isInIframe()) {
+    return Promise.reject(new Error("当前页面不在 iframe 中"));
+  }
+
+  const parentOrigin = resolveRepairParentOrigin();
+  if (!parentOrigin) {
+    return Promise.reject(new Error("当前父页面来源不在允许名单中"));
+  }
+
+  const requestId = createRequestId();
+  const timeoutMs = options?.timeoutMs ?? DEFAULT_TIMEOUT_MS;
+
+  return new Promise((resolve, reject) => {
+    const cleanup = () => {
+      window.removeEventListener("message", handleMessage);
+      window.clearTimeout(timer);
+    };
+
+    const handleMessage = (event: MessageEvent) => {
+      if (event.source !== window.parent) return;
+      if (event.origin !== parentOrigin) return;
+      if (!isAckMessage(event.data)) return;
+      if (event.data.requestId !== requestId) return;
+      cleanup();
+      resolve(event.data.payload);
+    };
+
+    const timer = window.setTimeout(() => {
+      cleanup();
+      reject(new Error("主界面响应超时，请稍后重试或手动刷新页面"));
+    }, timeoutMs);
+
+    window.addEventListener("message", handleMessage);
+
+    try {
+      window.parent.postMessage(
+        {
+          channel: PREVIEW_REPAIR_CHANNEL,
+          version: PREVIEW_REPAIR_VERSION,
+          type: "IMAGICMA_PREVIEW_REPAIR_REQUEST",
+          requestId,
+          payload,
+        },
+        parentOrigin,
+      );
+    } catch (error) {
+      cleanup();
+      reject(error instanceof Error ? error : new Error("发送修复请求失败"));
+    }
+  });
+}

package/template-hono/client/src/pages/home.tsx

@@ -1,6 +1,74 @@
+import { useState } from "react";
+
 export default function Home() {
+  const [query, setQuery] = useState("");
+  const [includeExamples, setIncludeExamples] = useState(true);
+  const [submitted, setSubmitted] = useState("");
+
   return (
-    <div style={{ display: "none" }}>请优先修改本页</div>
+    <main
+      data-testid="page.home"
+      className="mx-auto flex min-h-screen max-w-3xl flex-col justify-center gap-6 px-6 py-12"
+    >
+      <div className="space-y-2">
+        <span
+          data-testid="badge.template-ready"
+          className="inline-flex rounded-full bg-slate-900 px-3 py-1 text-xs font-medium text-white"
+        >
+          imagicma hono template
+        </span>
+        <h1 className="text-4xl font-semibold tracking-tight text-slate-950">
+          Start building with a testable baseline
+        </h1>
+        <p className="max-w-2xl text-sm text-slate-600">
+          This page is intentionally simple and visible so generated projects start with a stable smoke-test target.
+        </p>
+      </div>
+
+      <form
+        data-testid="form.quick-start"
+        className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm"
+        onSubmit={(event) => {
+          event.preventDefault();
+          setSubmitted(`${query || "Untitled"}|examples:${includeExamples ? "on" : "off"}`);
+        }}
+      >
+        <div className="space-y-4">
+          <label className="flex flex-col gap-2 text-sm font-medium text-slate-700">
+            Project brief
+            <input
+              data-testid="input.project-brief"
+              className="rounded-lg border border-slate-300 px-3 py-2 text-sm"
+              placeholder="Describe the app you want to build"
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+            />
+          </label>
+
+          <label className="flex items-center gap-2 text-sm text-slate-700">
+            <input
+              data-testid="checkbox.include-examples"
+              type="checkbox"
+              checked={includeExamples}
+              onChange={(event) => setIncludeExamples(event.target.checked)}
+            />
+            Include example content
+          </label>
+
+          <button
+            data-testid="button.submit-brief"
+            type="submit"
+            className="rounded-lg bg-slate-950 px-4 py-2 text-sm font-medium text-white"
+          >
+            Save brief
+          </button>
+        </div>
+      </form>
+
+      <section data-testid="panel.submission" className="rounded-2xl border border-dashed border-slate-300 p-4 text-sm text-slate-600">
+        <div className="font-medium text-slate-900">Latest submission</div>
+        <div>{submitted || "No brief submitted yet."}</div>
+      </section>
+    </main>
   );
 }
-

package/template-hono/drizzle.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from "drizzle-kit";
 import fs from "node:fs";
 import path from "node:path";
+import { ensureDatabaseUrl } from "./server/database-path";
 
 function tryLoadEnvFile(file: string) {
   const filepath = path.resolve(process.cwd(), file);
@@ -33,18 +34,13 @@ function tryLoadEnvFile(file: string) {
 
 tryLoadEnvFile(".env.local");
 tryLoadEnvFile(".env");
-
-if (!process.env.DATABASE_URL) {
-  throw new Error(
-    "DATABASE_URL 未设置：请在 .env.local 中配置 Postgres 连接串（或在 shell 环境变量中导出）。",
-  );
-}
+const databaseUrl = ensureDatabaseUrl();
 
 export default defineConfig({
   out: "./migrations",
   schema: "./shared/schema.ts",
-  dialect: "postgresql",
+  dialect: "sqlite",
   dbCredentials: {
-    url: process.env.DATABASE_URL,
+    url: databaseUrl,
   },
 });

package/template-hono/gitignore

@@ -7,6 +7,7 @@
 !.yarn/plugins
 !.yarn/releases
 !.yarn/versions
+.imagicma
 
 # testing
 /coverage
@@ -14,6 +15,7 @@
 # build outputs
 /dist
 /build
+/.data
 
 # misc
 .DS_Store

package/template-hono/package.json

@@ -10,9 +10,13 @@
     "start": "node ./scripts/imagicma-start.mjs",
     "check": "tsc -p tsconfig.json --noEmit && tsc -p tsconfig.server.json --noEmit",
     "db:push": "drizzle-kit push",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:headed": "playwright test --headed"
   },
   "dependencies": {
+    "@libsql/client": "^0.17.0",
     "@hono/node-server": "^1.19.9",
     "@hono/zod-validator": "^0.7.6",
     "@radix-ui/react-accordion": "^1.2.4",
@@ -54,7 +58,6 @@
     "input-otp": "^1.4.2",
     "lucide-react": "^0.453.0",
     "next-themes": "^0.4.6",
-    "pg": "^8.16.3",
     "react": "19.2.3",
     "react-day-picker": "^9.13.0",
     "react-dom": "19.2.3",
@@ -67,6 +70,7 @@
     "zod": "^4.1.5"
   },
   "devDependencies": {
+    "@playwright/test": "^1.57.0",
     "@hono/vite-dev-server": "^0.25.0",
     "@tailwindcss/postcss": "^4",
     "@types/node": "^20",

package/template-hono/playwright.config.ts

@@ -0,0 +1,40 @@
+import { defineConfig } from "@playwright/test";
+import { join } from "node:path";
+
+const runtimeRoot = process.env.IMAGICMA_RUN_TEST_RUNTIME_ROOT;
+const baseURL = process.env.BASE_URL || "http://127.0.0.1:5001";
+
+export default defineConfig({
+  testDir: "./tests/e2e",
+  fullyParallel: false,
+  workers: 1,
+  timeout: 60_000,
+  retries: 0,
+  outputDir: runtimeRoot ? join(runtimeRoot, "test-results") : "test-results",
+  reporter: runtimeRoot
+    ? [
+        ["line"],
+        ["json", { outputFile: join(runtimeRoot, "playwright-results.json") }],
+        ["html", { outputFolder: join(runtimeRoot, "html-report"), open: "never" }],
+        ["junit", { outputFile: join(runtimeRoot, "junit.xml") }],
+      ]
+    : [
+        ["html", { outputFolder: "playwright-report", open: "never" }],
+        ["list"],
+      ],
+  use: {
+    baseURL,
+    trace: "retain-on-failure",
+    screenshot: "only-on-failure",
+    video: "retain-on-failure",
+    headless: true,
+  },
+  webServer: process.env.IMAGICMA_RUN_TEST_SKIP_WEBSERVER === "1"
+    ? undefined
+    : {
+        command: "pnpm dev",
+        url: baseURL,
+        reuseExistingServer: true,
+        timeout: 120_000,
+      },
+});