@jskit-ai/create-app 0.1.74 → 0.1.76

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/create-app",
-  "version": "0.1.74",
+  "version": "0.1.76",
   "description": "Scaffold minimal JSKIT app shells.",
   "type": "module",
   "files": [

package/templates/ai-seed/AGENTS.md

@@ -34,5 +34,6 @@ What to do now:
    `npx @jskit-ai/create-app <app-name> --target . --force --tenancy-mode <mode>`
    Use the current directory name as `<app-name>` unless the developer explicitly wants a different app name.
 9. After that, run `npm install`.
-10. Then stop, re-read the overwritten `AGENTS.md`, and continue with the normal JSKIT app workflow from that file. Do not rely on memory from the seed stage.
-11. Do not install JSKIT runtime packages until the new app `AGENTS.md` has been re-read.
+10. If this app is being tested against a local JSKIT checkout with linked packages, run `npm run devlinks` immediately after `npm install`.
+11. Then stop, re-read the overwritten `AGENTS.md`, and continue with the normal JSKIT app workflow from that file. Do not rely on memory from the seed stage.
+12. Do not install JSKIT runtime packages until the new app `AGENTS.md` has been re-read.

package/templates/base-shell/package.json

@@ -23,6 +23,7 @@
     "lint": "eslint .",
     "test": "node --test",
     "test:client": "vitest run tests/client",
+    "test:e2e": "playwright test tests/e2e",
     "verify": "jskit app verify && npm run --if-present verify:app",
     "release": "jskit app release",
     "jskit:update": "jskit app update-packages"
@@ -31,6 +32,7 @@
     "@local/main": "file:packages/main",
     "@fastify/static": "^9.1.1",
     "@jskit-ai/kernel": "0.x",
+    "@tanstack/vue-query": "^5.90.5",
     "fastify": "^5.7.4",
     "json-rest-schema": "^1.0.13",
     "pinia": "^3.0.4",
@@ -43,6 +45,7 @@
     "@jskit-ai/agent-docs": "0.x",
     "@jskit-ai/config-eslint": "0.x",
     "@jskit-ai/jskit-cli": "0.x",
+    "@playwright/test": "^1.57.0",
     "@vitejs/plugin-vue": "^5.2.1",
     "eslint": "^9.39.1",
     "vite": "^6.1.0",

package/templates/base-shell/src/main.js

@@ -1,5 +1,6 @@
 import { createApp } from "vue";
 import { createPinia } from "pinia";
+import { QueryClient, VueQueryPlugin } from "@tanstack/vue-query";
 import { createRouter, createWebHistory } from "vue-router/auto";
 import { routes } from "vue-router/auto-routes";
 import "vuetify/styles";
@@ -11,6 +12,10 @@ import App from "./App.vue";
 import NotFoundView from "./views/NotFound.vue";
 import { bootInstalledClientModules } from "virtual:jskit-client-bootstrap";
 import { createSurfaceRuntime } from "@jskit-ai/kernel/shared/surface/runtime";
+import {
+  shouldRetryTransientQueryFailure,
+  transientQueryRetryDelay
+} from "@jskit-ai/kernel/shared/support";
 import {
   bootstrapClientShellApp,
   createShellRouter
@@ -51,13 +56,28 @@ const vuetify = createVuetify({
   }
 });
 const pinia = createPinia();
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: true,
+      retry: shouldRetryTransientQueryFailure,
+      retryDelay: transientQueryRetryDelay
+    }
+  }
+});
 
 void bootstrapClientShellApp({
   createApp,
   rootComponent: App,
   appConfig: config,
-  appPlugins: [pinia, vuetify],
+  appPlugins: [
+    pinia,
+    [VueQueryPlugin, { queryClient }],
+    vuetify
+  ],
   pinia,
+  queryClient,
   router,
   bootClientModules: bootInstalledClientModules,
   surfaceRuntime,

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

@@ -1,12 +1,42 @@
 <template>
-  <v-card class="mx-auto" max-width="960" rounded="xl" border elevation="1">
-    <v-card-item class="px-6 py-5 px-md-8 py-md-7">
-      <v-card-title class="text-h4">welcome</v-card-title>
-      <v-card-subtitle class="text-subtitle-1 mt-2">starter app</v-card-subtitle>
-    </v-card-item>
-    <v-divider />
-    <v-card-text class="px-6 py-5 px-md-8 py-md-7 text-body-1 text-medium-emphasis">
-      Start by adding packages and pages to this app.
-    </v-card-text>
-  </v-card>
+  <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: clamp(1.5rem, 3vw, 2.5rem);
+  --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.03em;
+  line-height: 1.08;
+  margin: 0 0 0.45rem;
+}
+
+.home-start-screen__panel {
+  padding: var(--generated-ui-screen-panel-padding);
+}
+</style>

package/templates/base-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);
+    });
+  }
+});