@squadbase/vantage-template 0.0.2 → 0.1.0-dev.0faf4cb

package/base-template/package.json

@@ -11,9 +11,9 @@
     "routes": "vantage routes"
   },
   "dependencies": {
-    "@squadbase/react": "^0.0.1",
-    "@squadbase/vantage": "^0.5.0",
-    "@squadbase/vantage-sdk": "^0.1.0-dev.0",
+    "@squadbase/react": "^0.1.0",
+    "@squadbase/vantage": "0.6.1-dev.90c1a41",
+    "@squadbase/vantage-sdk": "^0.1.0",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.468.0",
     "react": "^19.2.7",

package/base-template/pipelines/pyproject.toml

@@ -0,0 +1,5 @@
+[project]
+name = "pipelines"
+version = "0.1.0"
+requires-python = ">=3.11"
+dependencies = ["adamas>=0.2.0", "pandas", "requests"]

package/base-template/squadbase.yml

@@ -3,3 +3,4 @@ version: "1"
 build:
   framework: squadbase-vantage
   runtime: node20
+  package_manager: bun

package/base-template/src/_error.tsx

@@ -1,14 +1,10 @@
-import { Button, ErrorState } from "@squadbase/vantage/ui"
+import { RecoveringState } from "./components/build-recovery"
 
+/**
+ * ルートルート(= `_layout.tsx`)が throw したときの画面。ページのレンダリングエラーは
+ * ここには来ない — フレームワークの既定エラー画面が受け止め、その上を `BuildRecovery` が
+ * 覆う(→ `components/build-recovery.tsx`)。どちらも見た目と復帰の仕方は揃えてある。
+ */
 export default function RouteError({ error }: { error: unknown }) {
-  const message = error instanceof Error ? error.message : String(error)
-  return (
-    <div className="flex min-h-[50vh] items-center justify-center">
-      <ErrorState
-        title="This page failed to render"
-        message={message}
-        action={<Button onClick={() => window.location.reload()}>Reload</Button>}
-      />
-    </div>
-  )
+  return <RecoveringState error={error} />
 }

package/base-template/src/_layout.tsx

@@ -4,6 +4,7 @@ import { Link, Outlet, useCurrentRoute, useRoutes } from "@squadbase/vantage/rou
 import { AppShell } from "@squadbase/vantage/components"
 import type { NavGroup } from "@squadbase/vantage/components"
 
+import { BuildRecovery } from "./components/build-recovery"
 import { UserCard } from "./components/user-card"
 
 /**
@@ -43,6 +44,10 @@ function useNavGroups(): NavGroup[] {
  * the React root, so there is no `main.tsx` to wrap. `SquadbaseProvider` supplies
  * the signed-in user to `useUser()`; the QueryClient provider is already
  * installed by the runtime.
+ *
+ * `BuildRecovery` は構築中の一時的なエラーを「進行中」表示に見せて自動復帰させる
+ * (→ `components/build-recovery.tsx`)。外すと、書き込み途中の一瞬のエラーが
+ * 「Something went wrong」のままリロードするまで残る。
  */
 export default function RootLayout() {
   return (
@@ -53,7 +58,9 @@ export default function RootLayout() {
         actions={<UserCard />}
         linkComponent={RouterLink}
       >
-        <Outlet />
+        <BuildRecovery>
+          <Outlet />
+        </BuildRecovery>
       </AppShell>
     </SquadbaseProvider>
   )

package/base-template/src/components/build-recovery.tsx

@@ -0,0 +1,219 @@
+import { useEffect, useRef, useState, type ReactNode } from "react"
+import { Check, Copy } from "lucide-react"
+import { Button, Spinner } from "@squadbase/vantage/ui"
+
+/**
+ * ダッシュボードを組み立てている最中は、ファイルが書き終わる順番の都合で一瞬だけ
+ * ページが throw することがある(存在しないモジュールの import、まだ書き終わっていない
+ * コンポーネント)。それ自体は通り過ぎる状態なのに、ユーザーには 2 つの形で残ってしまう。
+ *
+ * 1. **見た目が「失敗」に見える。** ページのレンダリングエラーを受け止めるのは
+ *    Vantage の既定エラー画面("Something went wrong")で、これはテンプレートからは
+ *    差し替えられない — `_error.tsx` はルートルート専用で、ページごとの
+ *    `errorComponent` は現行プロトタイプではまだ結線されていない。
+ * 2. **直しても戻らない。** エラーを掴んでいるのは TanStack の CatchBoundary で、
+ *    そのリセットはルートの再ロードに紐づいている。HMR でソースが差し替わっても
+ *    リセットされないので、リロードするまでエラー画面が貼り付いたままになる。
+ *
+ * そこで、既定エラー画面が出たことを DOM から検知して「進行中」表示を被せ、dev では
+ * 短い待ち時間のあと自動でリロードして復帰させる(回数は上限つき)。旧 Vite テンプレートの
+ * `_router.tsx` と同じ考え方で、一時的なエラーを失敗ではなく更新中として見せる。
+ *
+ * `_layout.tsx` が `<Outlet />` を包む形で 1 度だけ使う。**外さないこと** — 外すと
+ * 構築中のエラーがそのまま「Something went wrong」として残る。
+ */
+
+/**
+ * 既定エラー画面の目印。`role="alert"` の中の `h2` は Vantage の `DefaultError` だけが
+ * 持つ(`@squadbase/vantage/ui` の `ErrorState` は見出しを `<p>` で描くので当たらない)。
+ */
+const FRAMEWORK_ERROR_SELECTOR = '[role="alert"] h2'
+
+/** 書き込みの連鎖が落ち着くのを待ってからリロードする。 */
+const RELOAD_DELAY_MS = 1200
+
+/** 直らないエラーで無限リロードしないための上限。使い切ったら手動の案内に降りる。 */
+const MAX_RELOADS = 3
+
+/** これだけ待っても復帰しなければ、「進行中」表示から控えめな再読み込み案内へ降格する。 */
+const DEGRADE_AFTER_MS = 6000
+
+/** エラーなしでこれだけ描画できたら、自動リロードの回数を使い切っていない扱いに戻す。 */
+const SETTLE_MS = 5000
+
+const RELOAD_COUNT_KEY = "vantage:build-recovery-reloads"
+
+/** コピーしたことが伝わればいいので、確認表示はすぐ元に戻す。 */
+const COPIED_FEEDBACK_MS = 2000
+
+function errorMessage(error: unknown): string {
+  if (error == null) return ""
+  return error instanceof Error ? (error.stack ?? error.message) : String(error)
+}
+
+function readReloadCount(): number {
+  try {
+    return Number(sessionStorage.getItem(RELOAD_COUNT_KEY)) || 0
+  } catch {
+    // sessionStorage が使えない環境では自動リロードを諦める(上限を超えた扱い)。
+    return MAX_RELOADS
+  }
+}
+
+function writeReloadCount(count: number): void {
+  try {
+    sessionStorage.setItem(RELOAD_COUNT_KEY, String(count))
+  } catch {
+    // 書けなくても致命ではない。次の判定で MAX_RELOADS 扱いになるだけ。
+  }
+}
+
+function clearReloadCount(): void {
+  try {
+    sessionStorage.removeItem(RELOAD_COUNT_KEY)
+  } catch {
+    // 同上。
+  }
+}
+
+/**
+ * 「進行中」表示。最初はローディングと見分けのつかない穏やかな見た目で、一定時間
+ * 復帰しなければ控えめな再読み込み案内に降格する。dev では降格の前に自動リロードを試す。
+ */
+export function RecoveringState({ error }: { error?: unknown }) {
+  const [degraded, setDegraded] = useState(false)
+
+  useEffect(() => {
+    // dev の構築中は、少し待てばファイルが揃って直っていることがほとんど。
+    // リロードすれば CatchBoundary も lazy import のキャッシュもまとめて捨てられる。
+    if (import.meta.env.DEV) {
+      const attempts = readReloadCount()
+      if (attempts < MAX_RELOADS) {
+        const timer = setTimeout(() => {
+          writeReloadCount(attempts + 1)
+          window.location.reload()
+        }, RELOAD_DELAY_MS)
+        return () => clearTimeout(timer)
+      }
+    }
+    const timer = setTimeout(() => setDegraded(true), DEGRADE_AFTER_MS)
+    return () => clearTimeout(timer)
+  }, [])
+
+  if (!degraded) {
+    return (
+      <div
+        className="flex min-h-[50vh] flex-col items-center justify-center gap-3"
+        role="status"
+        aria-live="polite"
+      >
+        <Spinner className="size-6 text-muted-foreground" />
+        <p className="text-base text-muted-foreground">Working on it…</p>
+      </div>
+    )
+  }
+
+  const message = errorMessage(error)
+
+  return (
+    <div className="flex min-h-[50vh] flex-col items-center justify-center gap-4 p-8">
+      <p className="text-center text-base text-muted-foreground">
+        This view is taking longer than expected to update.
+      </p>
+      <div className="flex items-center gap-2">
+        <Button onClick={() => window.location.reload()}>Reload</Button>
+        {message ? <CopyLogButton message={message} /> : null}
+      </div>
+      {/*
+        ここまで来た人はエラー本文を AI に貼り戻して直してもらう。畳んでおくと辿り着けない
+        ので開いたまま出す。フレームワークの既定エラー画面も同じ本文を隠さず出しているので、
+        これで新しく何かが露出するわけではない。
+      */}
+      {message ? (
+        <pre className="max-h-64 w-full max-w-2xl select-text overflow-auto whitespace-pre-wrap break-words rounded-md border border-border bg-muted p-4 text-left text-xs text-muted-foreground">
+          {message}
+        </pre>
+      ) : null}
+    </div>
+  )
+}
+
+/**
+ * エラー本文をクリップボードへ。`<pre>` は選択できるので、これが失敗しても手で
+ * コピーする道は残る — 失敗しても黙って何もしない。
+ */
+function CopyLogButton({ message }: { message: string }) {
+  const [copied, setCopied] = useState(false)
+
+  useEffect(() => {
+    if (!copied) return
+    const timer = setTimeout(() => setCopied(false), COPIED_FEEDBACK_MS)
+    return () => clearTimeout(timer)
+  }, [copied])
+
+  return (
+    <Button
+      variant="outline"
+      onClick={() => {
+        navigator.clipboard?.writeText(message).then(
+          () => setCopied(true),
+          () => {},
+        )
+      }}
+    >
+      {copied ? <Check className="size-4" /> : <Copy className="size-4" />}
+      {copied ? "Copied" : "Copy log"}
+    </Button>
+  )
+}
+
+/**
+ * 子の中に既定エラー画面が現れたら、その上に「進行中」表示を被せる。エラー画面自体は
+ * DOM に残したまま覆うだけなので、復帰したかどうかは同じ MutationObserver で追える。
+ */
+export function BuildRecovery({ children }: { children: ReactNode }) {
+  const hostRef = useRef<HTMLDivElement>(null)
+  // エラー本文。`null` は「壊れていない」を兼ねる。既定エラー画面は throw された値を
+  // 保持していないので、DOM に描かれた本文を読み取るのが唯一の入手経路になる。
+  const [message, setMessage] = useState<string | null>(null)
+
+  useEffect(() => {
+    const host = hostRef.current
+    if (!host) return
+    const sync = () => {
+      const heading = host.querySelector(FRAMEWORK_ERROR_SELECTOR)
+      // 覆って見えなくする以上、支援技術にも読ませない。`role="alert"` のままだと
+      // 「Something went wrong」がそのまま読み上げられてしまう。属性は observe の
+      // 対象外(childList / subtree のみ)なので、この書き換えでは再入しない。
+      heading?.closest('[role="alert"]')?.setAttribute("aria-hidden", "true")
+      // 既定エラー画面は見出しの直後の段落に本文を描く。取れなくても覆う判断は変えない。
+      setMessage(heading === null ? null : (heading.nextElementSibling?.textContent ?? ""))
+    }
+    sync()
+    const observer = new MutationObserver(sync)
+    observer.observe(host, { childList: true, subtree: true })
+    return () => observer.disconnect()
+  }, [])
+
+  const crashed = message !== null
+
+  useEffect(() => {
+    if (crashed) return
+    // 無事に描けている状態がしばらく続いたら、自動リロードの残数を戻す。
+    const timer = setTimeout(clearReloadCount, SETTLE_MS)
+    return () => clearTimeout(timer)
+  }, [crashed])
+
+  return (
+    // 通常時は `relative` を足すだけでレイアウトに影響させない。覆うときだけ、
+    // 被せる「進行中」表示が収まる高さを確保する。
+    <div ref={hostRef} className={crashed ? "relative min-h-[50vh]" : "relative"}>
+      {children}
+      {crashed ? (
+        <div className="absolute inset-0 z-10 overflow-auto bg-background">
+          <RecoveringState error={message} />
+        </div>
+      ) : null}
+    </div>
+  )
+}

package/base-template/src/styles.css

@@ -16,3 +16,22 @@
   /* --primary: hsl(221 83% 53%); */
   /* --radius: 0.625rem; */
 }
+
+/* vantage-template:chart-preset — regenerated by `chart`; edits here are lost */
+:root {
+  --chart-1: var(--color-blue-600);
+  --chart-2: var(--color-teal-500);
+  --chart-3: var(--color-fuchsia-500);
+  --chart-4: var(--color-violet-500);
+  --chart-5: var(--color-gray-400);
+}
+
+.dark,
+[data-theme="dark"] {
+  --chart-1: var(--color-blue-400);
+  --chart-2: var(--color-teal-400);
+  --chart-3: var(--color-fuchsia-400);
+  --chart-4: var(--color-violet-400);
+  --chart-5: var(--color-gray-500);
+}
+/* vantage-template:chart-preset:end */

package/dist/index.js

@@ -391,7 +391,7 @@ async function relabelFile(generateObject, jsonSchema, model, intent, path, cont
     system: SYSTEM_PROMPT,
     prompt: userPrompt,
     temperature: 0.3,
-    maxTokens: 8e3
+    maxOutputTokens: 8e3
   });
   const object = result.object;
   if (process.env.SQUADBASE_AI_DEBUG) {
@@ -1022,27 +1022,36 @@ function initProject(options) {
     applyChartPreset(targetDir, options.chart);
     log("cyan", `  chart preset: ${options.chart}`);
   }
+  const packageManager = isBunAvailable() ? "bun" : "npm";
   if (options.skipInstall) {
     log("green", "\nProject initialized successfully!");
     log("dim", "\nNext steps:");
-    log("dim", "  npm install");
-    log("dim", "  npm run dev");
+    log("dim", `  ${packageManager} install`);
+    log("dim", `  ${packageManager} run dev`);
     return;
   }
-  log("green", "\nInstalling dependencies...");
-  const install = spawnSync("npm", ["install"], {
+  log("green", `
+Installing dependencies with ${packageManager}...`);
+  const install = spawnSync(packageManager, ["install"], {
     cwd: targetDir,
     stdio: "inherit",
     shell: process.platform === "win32"
   });
   if (install.error || install.status !== 0) {
     log("red", "\nDependency installation failed.");
-    log("yellow", "Run 'npm install' manually in the project directory.");
+    log("yellow", `Run '${packageManager} install' manually in the project directory.`);
     process.exit(1);
   }
   log("green", "\nProject initialized successfully!");
   log("dim", "\nNext steps:");
-  log("dim", "  npm run dev");
+  log("dim", `  ${packageManager} run dev`);
+}
+function isBunAvailable() {
+  const probe = spawnSync("bun", ["--version"], {
+    stdio: "ignore",
+    shell: process.platform === "win32"
+  });
+  return !probe.error && probe.status === 0;
 }
 
 // src/commands/list.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squadbase/vantage-template",
-  "version": "0.0.2",
+  "version": "0.1.0-dev.0faf4cb",
   "description": "CLI tool for initializing and customizing Squadbase Vantage projects.",
   "keywords": [
     "squadbase",
@@ -12,12 +12,12 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/squadbase/squadbase-templates.git",
-    "directory": "vantage-template"
+    "url": "git+https://github.com/squadbase/squadbase-monorepo.git",
+    "directory": "packages/vantage-template"
   },
-  "homepage": "https://github.com/squadbase/squadbase-templates/tree/main/vantage-template#readme",
+  "homepage": "https://github.com/squadbase/squadbase-monorepo/tree/main/packages/vantage-template#readme",
   "bugs": {
-    "url": "https://github.com/squadbase/squadbase-templates/issues"
+    "url": "https://github.com/squadbase/squadbase-monorepo/issues"
   },
   "type": "module",
   "engines": {
@@ -33,12 +33,18 @@
     "chart-presets"
   ],
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
   },
   "scripts": {
-    "sync-base": "rsync -a --delete --exclude='node_modules' --exclude='dist' --exclude='.vantage' --exclude='package-lock.json' --exclude='*.tsbuildinfo' --exclude='*.log' ../vantage/ base-template/ && mv base-template/.gitignore base-template/_gitignore",
+    "sync-base": "rsync -a --delete --exclude='node_modules' --exclude='dist' --exclude='.vantage' --exclude='*.tsbuildinfo' --exclude='*.log' template/ base-template/ && mv base-template/.gitignore base-template/_gitignore",
     "build": "npm run sync-base && tsup",
-    "prepublishOnly": "npm --prefix .. run agents:check && npm run build",
+    "type-check": "tsc",
+    "agents": "node scripts/build-agents.cjs",
+    "agents:check": "node scripts/build-agents.cjs --check",
+    "template:install": "bun install --cwd template --frozen-lockfile",
+    "template:build": "npm --prefix template run build",
+    "prepublishOnly": "npm run agents:check && npm run build",
     "release": "npm publish --@squadbase:registry=https://registry.npmjs.org",
     "dev": "node scripts/dev.mjs",
     "screenshot": "node scripts/screenshot.mjs"
@@ -50,9 +56,9 @@
     "typescript": "~5.7.0"
   },
   "optionalDependencies": {
-    "@ai-sdk/anthropic": "^1.0.0",
-    "@ai-sdk/google": "^1.0.0",
-    "@ai-sdk/openai": "^1.0.0",
-    "ai": "^4.0.0"
+    "@ai-sdk/anthropic": "^2.0.0",
+    "@ai-sdk/google": "^2.0.0",
+    "@ai-sdk/openai": "^2.0.0",
+    "ai": "^5.0.52"
   }
 }

package/ui-templates/chart-grid/pages/index.tsx

@@ -223,7 +223,7 @@ function heatmapOption(
         type: "heatmap",
         data: data.map((c) => [xAxis.indexOf(c.x), yAxis.indexOf(c.y), c.value]),
         label: { show: false },
-        emphasis: { itemStyle: { shadowBlur: 8, shadowColor: "rgba(0,0,0,0.4)" } },
+        emphasis: { itemStyle: { shadowBlur: 8 } },
       },
     ],
   }

package/ui-templates/chart-grid-ja/pages/index.tsx

@@ -223,7 +223,7 @@ function heatmapOption(
         type: "heatmap",
         data: data.map((c) => [xAxis.indexOf(c.x), yAxis.indexOf(c.y), c.value]),
         label: { show: false },
-        emphasis: { itemStyle: { shadowBlur: 8, shadowColor: "rgba(0,0,0,0.4)" } },
+        emphasis: { itemStyle: { shadowBlur: 8 } },
       },
     ],
   }

package/ui-templates/funnel/pages/index.tsx

@@ -113,13 +113,13 @@ const summaryCards = [
     label: "Best step",
     value: "31.9%",
     sub: "Highest step conversion",
-    icon: <TrendingUp className="size-4 text-emerald-600" />,
+    icon: <TrendingUp className="size-4 text-chart-2" />,
   },
   {
     label: "Biggest drop",
     value: "68.2%",
     sub: "Largest step drop-off",
-    icon: <TrendingDown className="size-4 text-rose-600" />,
+    icon: <TrendingDown className="size-4 text-destructive" />,
   },
 ]
 

package/ui-templates/funnel-ja/pages/index.tsx

@@ -112,13 +112,13 @@ const summaryCards = [
     label: "最良ステップ",
     value: "31.9%",
     sub: "最も高いステップ転換率",
-    icon: <TrendingUp className="size-4 text-emerald-600" />,
+    icon: <TrendingUp className="size-4 text-chart-2" />,
   },
   {
     label: "最大の離脱",
     value: "68.2%",
     sub: "最大のステップ離脱率",
-    icon: <TrendingDown className="size-4 text-rose-600" />,
+    icon: <TrendingDown className="size-4 text-destructive" />,
   },
 ]