@jskit-ai/create-app 0.1.94 → 0.1.95

package/templates/minimal-shell/src/pages/home/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <section class="generated-ui-screen generated-ui-screen--app home-start-screen d-flex flex-column ga-4">
+    <header>
+      <p class="text-overline text-medium-emphasis mb-1">Home</p>
+      <h1 class="home-start-screen__title">Home base</h1>
+      <p class="text-body-2 text-medium-emphasis mb-0">
+        The app runtime is online and ready for the first real workflow.
+      </p>
+    </header>
+
+    <v-sheet rounded="lg" border class="home-start-screen__panel">
+      <h2 class="text-h6 mb-2">No activity yet</h2>
+      <p class="text-body-2 text-medium-emphasis mb-0">
+        Recent work, saved records, and next actions will appear here once this app has data.
+      </p>
+    </v-sheet>
+  </section>
+</template>
+
+<style scoped>
+.generated-ui-screen {
+  --generated-ui-screen-title-size: 2rem;
+  --generated-ui-screen-panel-padding: 1rem;
+}
+
+.home-start-screen {
+  margin-inline: auto;
+  max-width: 48rem;
+}
+
+.home-start-screen__title {
+  font-size: var(--generated-ui-screen-title-size);
+  font-weight: 700;
+  letter-spacing: 0;
+  line-height: 1.08;
+  margin: 0 0 0.45rem;
+}
+
+.home-start-screen__panel {
+  padding: var(--generated-ui-screen-panel-padding);
+}
+
+@media (max-width: 640px) {
+  .generated-ui-screen {
+    --generated-ui-screen-title-size: 1.5rem;
+  }
+}
+</style>

package/templates/minimal-shell/src/pages/home.vue

@@ -0,0 +1,13 @@
+<route lang="json">
+{
+  "meta": {
+    "jskit": {
+      "surface": "home"
+    }
+  }
+}
+</route>
+
+<template>
+  <RouterView />
+</template>

package/templates/minimal-shell/src/views/NotFound.vue

@@ -0,0 +1,13 @@
+<script setup>
+const title = "Not Found";
+const message = "The page you requested does not exist.";
+</script>
+
+<template>
+  <v-container class="fill-height d-flex align-center justify-center">
+    <v-card class="pa-6 text-center" max-width="560" rounded="lg">
+      <v-card-title class="text-h4">{{ title }}</v-card-title>
+      <v-card-text class="text-medium-emphasis">{{ message }}</v-card-text>
+    </v-card>
+  </v-container>
+</template>

package/templates/minimal-shell/tests/client/smoke.vitest.js

@@ -0,0 +1,7 @@
+import { describe, expect, it } from "vitest";
+
+describe("__APP_NAME__ client smoke", () => {
+  it("runs vitest in __APP_NAME__", () => {
+    expect(true).toBe(true);
+  });
+});

package/templates/minimal-shell/tests/e2e/base-shell.spec.ts

@@ -0,0 +1,57 @@
+import { expect, test } from "@playwright/test";
+
+const BASE_URL = String(process.env.PLAYWRIGHT_BASE_URL || "http://127.0.0.1:5173").replace(/\/+$/u, "");
+const SMOKE_PATH = String(process.env.JSKIT_PLAYWRIGHT_SMOKE_PATH || "/home");
+
+const viewports = [
+  { name: "compact", width: 390, height: 844 },
+  { name: "medium", width: 768, height: 1024 },
+  { name: "expanded", width: 1280, height: 900 }
+];
+
+async function expectNoHorizontalOverflow(page) {
+  const metrics = await page.evaluate(() => ({
+    clientWidth: document.documentElement.clientWidth,
+    scrollWidth: document.documentElement.scrollWidth
+  }));
+
+  expect(metrics.scrollWidth).toBeLessThanOrEqual(metrics.clientWidth + 1);
+}
+
+async function expectGeneratedScreenContract(page) {
+  const screen = page.locator(".generated-ui-screen").first();
+
+  await expect(screen).toBeVisible();
+  await expect(screen).toHaveClass(/generated-ui-screen--app/u);
+  await expect(screen.locator("h1").first()).toBeVisible();
+}
+
+async function expectVisibleTapTargets(page) {
+  const targetHeights = await page.locator("a[href], button, [role='button'], .v-btn, .v-list-item").evaluateAll(
+    (elements) => elements
+      .filter((element) => {
+        const rect = element.getBoundingClientRect();
+        const style = window.getComputedStyle(element);
+        return style.display !== "none" && style.visibility !== "hidden" && rect.width > 0 && rect.height > 0;
+      })
+      .map((element) => element.getBoundingClientRect().height)
+  );
+
+  for (const height of targetHeights) {
+    expect(height).toBeGreaterThanOrEqual(48);
+  }
+}
+
+test.describe("generated base app responsive smoke", () => {
+  for (const viewport of viewports) {
+    test(`${viewport.name} home route renders without horizontal overflow`, async ({ page }) => {
+      await page.setViewportSize({ width: viewport.width, height: viewport.height });
+      await page.goto(`${BASE_URL}${SMOKE_PATH}`);
+      await expect(page.locator("body")).toBeVisible();
+      await expect(page.getByText("Home base")).toBeVisible();
+      await expectGeneratedScreenContract(page);
+      await expectVisibleTapTargets(page);
+      await expectNoHorizontalOverflow(page);
+    });
+  }
+});

package/templates/minimal-shell/tests/server/minimalShell.validator.test.js

@@ -0,0 +1,131 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { access, readdir, readFile } from "node:fs/promises";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const APP_ROOT = path.resolve(__dirname, "../..");
+
+const EXPECTED_MANAGED_SCRIPTS = Object.freeze({
+  devlinks: "jskit app link-local-packages",
+  verify: "jskit app verify && npm run --if-present verify:app",
+  release: "jskit app release",
+  "jskit:update": "jskit app update-packages"
+});
+
+const REQUIRED_TOP_LEVEL_ENTRIES = Object.freeze([
+  "AGENTS.md",
+  "app.json",
+  "Procfile",
+  "bin",
+  "config",
+  "eslint.config.mjs",
+  "favicon.svg",
+  "index.html",
+  "jsconfig.json",
+  "package.json",
+  "packages",
+  "scripts",
+  "server",
+  "server.js",
+  "src",
+  "tests",
+  "vite.config.mjs",
+  "vite.shared.mjs"
+]);
+
+async function readPackageJson() {
+  const packageJsonPath = path.join(APP_ROOT, "package.json");
+  const raw = await readFile(packageJsonPath, "utf8");
+  return JSON.parse(raw);
+}
+
+async function readTopLevelEntries() {
+  const entries = await readdir(APP_ROOT, { withFileTypes: true });
+  const ignored = new Set([
+    "node_modules",
+    "dist",
+    "coverage",
+    "test-results",
+    "package-lock.json",
+    "pnpm-lock.yaml",
+    "yarn.lock"
+  ]);
+  return entries
+    .map((entry) => entry.name)
+    .filter((name) => !name.startsWith("."))
+    .filter((name) => !ignored.has(name));
+}
+
+async function listFilesRecursive(directory) {
+  const entries = await readdir(directory, { withFileTypes: true });
+  const files = [];
+  for (const entry of entries) {
+    const absolutePath = path.join(directory, entry.name);
+    if (entry.isDirectory()) {
+      files.push(...(await listFilesRecursive(absolutePath)));
+      continue;
+    }
+    files.push(absolutePath);
+  }
+  return files;
+}
+
+test("latest JSKIT app keeps managed wrapper scripts and JSKIT dependency specifiers", async () => {
+  const packageJson = await readPackageJson();
+  const runtimeDependencies = Object.entries(packageJson.dependencies || {}).filter(([name]) =>
+    name.startsWith("@jskit-ai/")
+  );
+  const devDependencies = Object.entries(packageJson.devDependencies || {}).filter(([name]) =>
+    name.startsWith("@jskit-ai/")
+  );
+
+  assert.ok(runtimeDependencies.length > 0, "Expected JSKIT runtime dependencies to be present.");
+  assert.ok(devDependencies.length > 0, "Expected JSKIT dev dependencies to be present.");
+
+  for (const [name, value] of [...runtimeDependencies, ...devDependencies]) {
+    assert.match(value, /^(0\.x|\d+\.\d+\.\d+)$/, `Expected ${name} to use a managed JSKIT version specifier.`);
+  }
+
+  for (const [scriptName, expectedValue] of Object.entries(EXPECTED_MANAGED_SCRIPTS)) {
+    assert.equal(packageJson.scripts?.[scriptName], expectedValue, `Unexpected ${scriptName} script.`);
+  }
+});
+
+test("latest JSKIT scaffold files are present at the app root", async () => {
+  const entries = await readTopLevelEntries();
+  for (const requiredEntry of REQUIRED_TOP_LEVEL_ENTRIES) {
+    assert.equal(entries.includes(requiredEntry), true, `Missing top-level scaffold entry: ${requiredEntry}`);
+  }
+});
+
+test("starter shell keeps the default hosted CI workflow simple", async () => {
+  const workflowSource = await readFile(path.join(APP_ROOT, ".github", "workflows", "verify.yml"), "utf8");
+
+  assert.match(workflowSource, /run: npm run verify/);
+  assert.doesNotMatch(workflowSource, /jskit app verify --against/);
+  assert.doesNotMatch(workflowSource, /jskit app verify-ui/);
+});
+
+test("starter shell does not include the app.manifest scaffold", async () => {
+  await assert.rejects(access(path.join(APP_ROOT, "framework/app.manifest.mjs")), /ENOENT/);
+});
+
+test("local package source avoids brittle deep relative imports", async () => {
+  const packageSourceFiles = await listFilesRecursive(path.join(APP_ROOT, "packages"));
+  const brittleImportPattern = /\bfrom\s+["'](?:\.\.\/){5,}[^"']+["']/;
+
+  for (const filePath of packageSourceFiles) {
+    if (!filePath.endsWith(".js") && !filePath.endsWith(".mjs")) {
+      continue;
+    }
+    const source = await readFile(filePath, "utf8");
+    assert.equal(
+      brittleImportPattern.test(source),
+      false,
+      `Found brittle deep relative import in ${path.relative(APP_ROOT, filePath)}`
+    );
+  }
+});

package/templates/minimal-shell/tests/server/smoke.test.js

@@ -0,0 +1,16 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { createServer } from "../../server.js";
+
+test("GET /api/health returns built-in health response", async () => {
+  const app = await createServer();
+  const response = await app.inject({
+    method: "GET",
+    url: "/api/health"
+  });
+
+  assert.equal(response.statusCode, 200);
+  assert.equal(response.json().ok, true);
+
+  await app.close();
+});

package/templates/minimal-shell/vite.config.mjs

@@ -0,0 +1,84 @@
+import { fileURLToPath, URL } from "node:url";
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import vuetify from "vite-plugin-vuetify";
+import VueRouter from "vue-router/vite";
+import { createJskitClientBootstrapPlugin } from "@jskit-ai/kernel/client/vite";
+import { loadViteDevProxyEntries, toPositiveInt } from "./vite.shared.mjs";
+
+const devPort = toPositiveInt(process.env.VITE_DEV_PORT, 5173);
+const apiProxyTarget = String(process.env.VITE_API_PROXY_TARGET || "").trim() || "http://localhost:3000";
+const viteModuleProxyEntries = loadViteDevProxyEntries({
+  appRootUrl: import.meta.url,
+  fallbackTarget: apiProxyTarget
+});
+const clientEntry = (() => {
+  const normalized = String(process.env.VITE_CLIENT_ENTRY || "").trim();
+  if (!normalized) {
+    return "/src/main.js";
+  }
+  if (normalized.startsWith("/")) {
+    return normalized;
+  }
+  if (normalized.startsWith("src/")) {
+    return `/${normalized}`;
+  }
+  return `/src/${normalized}`;
+})();
+
+export default defineConfig({
+  resolve: {
+    preserveSymlinks: true,
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url))
+    }
+  },
+  plugins: [
+    createJskitClientBootstrapPlugin(),
+    VueRouter({
+      routesFolder: "src/pages",
+      dts: "src/typed-router.d.ts",
+      // nestedChildren deprecated: JSKIT now relies on native index/... nesting instead of route rewrites.
+      // beforeWriteFiles: reparentNestedChildrenToIndexOwners
+    }),
+    vue(),
+    vuetify({
+      autoImport: true
+    }),
+    {
+      name: "jskit-client-entry",
+      transformIndexHtml(source) {
+        return String(source || "")
+          .replace(/\/src\/%VITE_CLIENT_ENTRY%/g, clientEntry)
+          .replace(/\/src\/main\.js/g, clientEntry);
+      }
+    }
+  ],
+  test: {
+    include: ["tests/client/**/*.vitest.js"]
+  },
+  optimizeDeps: {
+    entries: [
+      "index.html",
+      "src/**/*.{js,ts,vue}"
+    ]
+  },
+  server: {
+    port: devPort,
+    warmup: {
+      clientFiles: [
+        "src/main.{js,ts}",
+        "src/router/**/*.{js,ts}",
+        "src/pages/**/*.{js,ts,vue}",
+        "src/components/**/*.{js,ts,vue}"
+      ]
+    },
+    proxy: {
+      "/api": {
+        target: apiProxyTarget,
+        changeOrigin: true
+      },
+      ...viteModuleProxyEntries
+    }
+  }
+});

package/templates/minimal-shell/vite.shared.mjs

@@ -0,0 +1,59 @@
+import { existsSync, readFileSync } from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const VITE_DEV_PROXY_CONFIG_RELATIVE_PATH = ".jskit/vite.dev.proxy.json";
+
+function toPositiveInt(value, fallback) {
+  const parsed = Number.parseInt(String(value || "").trim(), 10);
+  if (Number.isInteger(parsed) && parsed > 0) {
+    return parsed;
+  }
+  return fallback;
+}
+
+function loadViteDevProxyEntries({ appRootUrl = import.meta.url, fallbackTarget = "" } = {}) {
+  const appRootPath = fileURLToPath(new URL(".", appRootUrl));
+  const absoluteConfigPath = path.join(appRootPath, VITE_DEV_PROXY_CONFIG_RELATIVE_PATH);
+  if (!existsSync(absoluteConfigPath)) {
+    return Object.freeze({});
+  }
+
+  let source = {};
+  try {
+    source = JSON.parse(readFileSync(absoluteConfigPath, "utf8"));
+  } catch {
+    return Object.freeze({});
+  }
+
+  const entries = Array.isArray(source?.entries) ? source.entries : [];
+  const proxy = {};
+  for (const entry of entries) {
+    const record = entry && typeof entry === "object" && !Array.isArray(entry) ? entry : {};
+    const routePath = String(record.path || "").trim();
+    if (!routePath || !routePath.startsWith("/")) {
+      continue;
+    }
+
+    const target = String(record.target || "").trim() || String(fallbackTarget || "").trim();
+    if (!target) {
+      continue;
+    }
+
+    const proxyConfig = {
+      target
+    };
+    if (Object.hasOwn(record, "changeOrigin")) {
+      proxyConfig.changeOrigin = record.changeOrigin === true;
+    }
+    if (Object.hasOwn(record, "ws")) {
+      proxyConfig.ws = record.ws === true;
+    }
+
+    proxy[routePath] = proxyConfig;
+  }
+
+  return Object.freeze(proxy);
+}
+
+export { toPositiveInt, loadViteDevProxyEntries };