@notis_ai/cli 0.2.0-beta.155.1 → 0.2.0-beta.157.1

package/src/runtime/app-test-server.js

@@ -0,0 +1,292 @@
+/** Temporary, explicit app verification/screenshot server. Never mounts a Workspace app. */
+import { createServer } from 'node:http';
+import { existsSync, readFileSync, statSync } from 'node:fs';
+import { dirname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { exportNameFromPath, getBundleDir, loadAppConfig, readManifest } from './app-platform.js';
+
+const CONTENT_TYPES = { '.js': 'application/javascript; charset=utf-8', '.css': 'text/css; charset=utf-8', '.map': 'application/json; charset=utf-8' };
+const CLI_ROOT = resolve(dirname(fileURLToPath(import.meta.url)), '../..');
+const REPO_ROOT = resolve(CLI_ROOT, '../..');
+const HARNESS_TEMPLATE_PATH = join(CLI_ROOT, 'template', '.harness', 'index.html.tmpl');
+const FALLBACK_REACT_VERSION = '19.0.0';
+
+function extFor(pathname) {
+  const idx = pathname.lastIndexOf('.');
+  return idx === -1 ? '' : pathname.slice(idx);
+}
+
+function isAllowedOrigin(origin) {
+  if (!origin) return true;
+  try {
+    const parsed = new URL(origin);
+    if (parsed.protocol === 'notis-app:') return true;
+    if (!['http:', 'https:'].includes(parsed.protocol)) return false;
+    return ['localhost', '127.0.0.1', '::1', '[::1]'].includes(parsed.hostname);
+  } catch {
+    return false;
+  }
+}
+
+function corsHeaders(origin) {
+  const allowOrigin = origin && isAllowedOrigin(origin) ? origin : '*';
+  return {
+    'Access-Control-Allow-Origin': allowOrigin,
+    'Access-Control-Allow-Methods': 'GET, HEAD, POST, OPTIONS',
+    'Access-Control-Allow-Headers': 'Content-Type, Cache-Control',
+    'Cache-Control': 'no-store',
+  };
+}
+
+function safeJoin(baseDir, relPath) {
+  const normalized = relPath.replace(/\\/g, '/').replace(/^\/+/, '');
+  if (normalized.includes('..')) return null;
+  return join(baseDir, normalized);
+}
+
+function scriptJson(value) {
+  return JSON.stringify(value)
+    .replace(/</g, '\\u003c')
+    .replace(/\u2028/g, '\\u2028')
+    .replace(/\u2029/g, '\\u2029');
+}
+
+function readJsonFile(path) {
+  if (!existsSync(path)) {
+    return null;
+  }
+  try {
+    return JSON.parse(readFileSync(path, 'utf-8'));
+  } catch {
+    return null;
+  }
+}
+
+function reactVersionFromPeer(peerRange) {
+  if (typeof peerRange !== 'string' || !peerRange) {
+    return FALLBACK_REACT_VERSION;
+  }
+  const exact = peerRange.match(/\d+\.\d+\.\d+/);
+  if (exact && !/[<>=~^*x]/i.test(peerRange.replace(exact[0], ''))) {
+    return exact[0];
+  }
+  if (peerRange.includes('19') || peerRange.includes('18')) {
+    return FALLBACK_REACT_VERSION;
+  }
+  return FALLBACK_REACT_VERSION;
+}
+
+function resolveHarnessReactVersion(projectDir) {
+  const candidates = [
+    join(projectDir, 'node_modules', '@notis', 'sdk', 'package.json'),
+    join(REPO_ROOT, 'packages', 'sdk', 'package.json'),
+    join(CLI_ROOT, 'template', 'packages', 'sdk', 'package.json'),
+  ];
+  for (const candidate of candidates) {
+    const pkg = readJsonFile(candidate);
+    const peer = pkg?.peerDependencies?.react;
+    if (peer) {
+      return reactVersionFromPeer(peer);
+    }
+  }
+  return FALLBACK_REACT_VERSION;
+}
+
+function titleFromSlug(slug) {
+  return String(slug || '')
+    .replace(/[-_]+/g, ' ')
+    .replace(/\b\w/g, (char) => char.toUpperCase());
+}
+
+function normalizeDatabaseDescriptors(databases) {
+  return (Array.isArray(databases) ? databases : [])
+    .map((entry) => {
+      if (typeof entry === 'string') {
+        return {
+          slug: entry,
+          title: titleFromSlug(entry),
+          description: null,
+          icon: null,
+          properties: [],
+        };
+      }
+      if (entry && typeof entry === 'object' && typeof entry.slug === 'string') {
+        return {
+          slug: entry.slug,
+          title: entry.title || titleFromSlug(entry.slug),
+          description: entry.description || null,
+          icon: entry.icon || null,
+          properties: Array.isArray(entry.properties) ? entry.properties : [],
+        };
+      }
+      return null;
+    })
+    .filter(Boolean);
+}
+
+function normalizeToolDescriptors(tools) {
+  return (Array.isArray(tools) ? tools : [])
+    .map((entry) => {
+      if (typeof entry === 'string') {
+        return { name: entry };
+      }
+      if (entry && typeof entry === 'object' && typeof entry.name === 'string') {
+        return entry;
+      }
+      return null;
+    })
+    .filter(Boolean);
+}
+
+function defaultRouteForManifest(manifest) {
+  const routes = Array.isArray(manifest?.routes) ? manifest.routes : [];
+  return routes.find((route) => route?.default) || routes[0] || null;
+}
+
+function findHarnessRoute(manifest, routeSlug) {
+  const routes = Array.isArray(manifest?.routes) ? manifest.routes : [];
+  if (!routeSlug) {
+    return defaultRouteForManifest(manifest);
+  }
+  return routes.find((route) => route?.slug === routeSlug) || null;
+}
+
+function buildHarnessDescriptor({ state, manifest, appConfig, route, scenario = null }) {
+  const databases = normalizeDatabaseDescriptors(
+    Array.isArray(appConfig?.databases) && appConfig.databases.length
+      ? appConfig.databases
+      : manifest.databases,
+  );
+  const tools = normalizeToolDescriptors(
+    Array.isArray(appConfig?.tools) && appConfig.tools.length
+      ? appConfig.tools
+      : manifest.tools,
+  );
+
+  return {
+    app: {
+      id: state.appId || 'harness-app',
+      slug: state.slug,
+      name: manifest.app?.name || appConfig?.name || state.slug,
+      icon: manifest.app?.icon || appConfig?.icon || null,
+      description: manifest.app?.description || appConfig?.description || null,
+    },
+    route: {
+      slug: route.slug,
+      path: route.path || '/',
+      name: route.name || titleFromSlug(route.slug),
+      icon: route.icon || null,
+      parentSlug: route.parentSlug || null,
+      default: Boolean(route.default),
+      resourceDeepLinks: route.resourceDeepLinks === true,
+      collection: route.collection || null,
+    },
+    databases,
+    context: { collectionItem: null, resourceId: null, screenshotScenario: scenario },
+    tools,
+  };
+}
+
+function plainObject(value) {
+  return value && typeof value === 'object' && !Array.isArray(value) ? value : {};
+}
+
+/**
+ * Resolve the fixture payload injected into one harness page load.
+ *
+ * A scenario may override individual `tools` / `requests` keys on top of the
+ * file-level defaults, which is how one route renders both its populated and
+ * its empty state. Each capture is its own page load, so a shallow per-key
+ * merge is all the isolation a scenario needs.
+ */
+function harnessFixtures(projectDir, scenario) {
+  const fixtureConfig = readJsonFile(join(projectDir, 'metadata', 'screenshot-fixtures.json')) || {};
+  const scenarios = plainObject(fixtureConfig.scenarios);
+  const selected = scenario ? plainObject(scenarios[scenario]) : null;
+  return {
+    tools: { ...plainObject(fixtureConfig.tools), ...plainObject(selected?.tools) },
+    requests: { ...plainObject(fixtureConfig.requests), ...plainObject(selected?.requests) },
+    scenario: selected && Object.keys(selected).length > 0 ? selected : null,
+  };
+}
+
+function renderHarnessHtml({ state, manifest, appConfig, route, harnessOptions, scenario = null }) {
+  const template = readFileSync(HARNESS_TEMPLATE_PATH, 'utf-8');
+  const descriptor = buildHarnessDescriptor({ state, manifest, appConfig, route, scenario });
+  const routeExport = route.export_name || route.exportName || exportNameFromPath(route.path || '/');
+  const replacements = {
+    '{{REACT_VERSION}}': resolveHarnessReactVersion(state.projectDir),
+    '{{ROUTE_EXPORT}}': scriptJson(routeExport),
+    '{{RUNTIME_DESCRIPTOR}}': scriptJson(descriptor),
+    '{{MODE}}': scriptJson(harnessOptions.mode || 'stub'),
+    '{{API_BASE}}': scriptJson(harnessOptions.apiBase || null),
+    '{{JWT}}': scriptJson(harnessOptions.jwt || null),
+    '{{FIXTURES}}': scriptJson(harnessFixtures(state.projectDir, scenario)),
+  };
+  let html = template;
+  for (const [token, value] of Object.entries(replacements)) {
+    html = html.replaceAll(token, value);
+  }
+  return html;
+}
+
+
+/** Serve only explicitly supplied built projects, without discovery or filesystem watchers. */
+export async function startAppTestServer({ apps, port, harness = {} }) {
+  if (!Array.isArray(apps) || !apps.length) throw new Error('At least one built app is required.');
+  const states = new Map();
+  for (const app of apps) {
+    states.set(app.slug, {
+      ...app,
+      manifest: readManifest(app.projectDir),
+      appConfig: await loadAppConfig(app.projectDir),
+      bundleDir: getBundleDir(app.projectDir),
+    });
+  }
+  const server = createServer((req, res) => {
+    const headers = corsHeaders(req.headers.origin || '');
+    const respond = (status, content, contentType = 'text/plain; charset=utf-8') => {
+      res.writeHead(status, { ...headers, 'Content-Type': contentType });
+      res.end(req.method === 'HEAD' ? undefined : content);
+    };
+    try {
+      if (req.headers.origin && !isAllowedOrigin(req.headers.origin)) return respond(403, 'origin not allowed');
+      if (req.method === 'OPTIONS') return respond(204, '');
+      if (!['GET', 'HEAD'].includes(req.method)) return respond(405, 'method not allowed');
+      const url = new URL(req.url || '/', 'http://127.0.0.1');
+      if (url.pathname === '/healthz') return respond(200, JSON.stringify({ ok: true }), 'application/json');
+      const match = url.pathname.match(/^\/a\/([^/]+)\/(.*)$/);
+      const state = match && states.get(decodeURIComponent(match[1]));
+      if (!state) return respond(404, 'not found');
+      if (match[2] === 'harness') {
+        const route = findHarnessRoute(state.manifest, url.searchParams.get('route') || '');
+        if (!route) return respond(404, 'unknown route');
+        return respond(200, renderHarnessHtml({ state, manifest: state.manifest, appConfig: state.appConfig, route, harnessOptions: harness, scenario: url.searchParams.get('scenario') }), 'text/html; charset=utf-8');
+      }
+      if (match[2].startsWith('bundle/')) {
+        const relativePath = decodeURIComponent(match[2].slice('bundle/'.length));
+        const file = safeJoin(state.bundleDir, relativePath);
+        if (!file || !existsSync(file) || !statSync(file).isFile()) return respond(404, 'not found');
+        return respond(200, readFileSync(file), CONTENT_TYPES[extFor(file)] || 'application/octet-stream');
+      }
+      return respond(404, 'not found');
+    } catch (error) {
+      return respond(500, error instanceof Error ? error.message : String(error));
+    }
+  });
+  await new Promise((accept, reject) => {
+    server.once('error', reject);
+    server.listen(port, '127.0.0.1', () => { server.off('error', reject); accept(); });
+  });
+  let closing;
+  return {
+    port: server.address().port,
+    close() {
+      closing ||= new Promise((accept) => {
+        server.close(accept);
+        server.closeAllConnections?.();
+      });
+      return closing;
+    },
+  };
+}

package/template/app/page.tsx

@@ -1,60 +1,62 @@
 'use client';
 
-import { getDocumentPreview, useDocuments, useNotis } from '@notis/sdk';
+import { getDocumentPreview, useDocuments, useNotis, Skeleton, ViewSkeleton } from '@notis/sdk';
 import { Badge } from '@/components/ui/badge';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { PageHeading } from '@/components/page-heading';
 
+// Reference page for the flat Notis design bar: a plain page header, bare
+// figures, and a hairline-free list. No bordered boxes, no dividers, no
+// palette colors, no loading text. `notis apps build` enforces these rules.
 export default function HomePage() {
   const { app, ready } = useNotis();
   // Documents come back normalized: plain property values, camelCase fields,
   // and typed content (contentMarkdown / contentBlocknote / plainText).
-  const { documents, loading } = useDocuments('items', { pageSize: 25 });
+  const { documents, loading, hasData, error, refetch } = useDocuments('items', { pageSize: 25 });
 
   return (
-    <main className="notis-app-shell space-y-6">
-      <Card>
-        <CardHeader className="space-y-3">
-          <Badge variant="secondary" className="w-fit">Installed app</Badge>
-          <div className="space-y-2">
-            <CardTitle>{ready ? app?.name : 'Loading...'}</CardTitle>
-            <CardDescription>
-              {ready ? app?.description : 'Loading app metadata...'}
-            </CardDescription>
-          </div>
-        </CardHeader>
-      </Card>
+    <main className="notis-app-shell space-y-8">
+      <PageHeading
+        title={ready ? app?.name ?? 'Items' : <Skeleton style={{ width: 160, height: 28 }} />}
+        description={ready ? app?.description ?? undefined : <Skeleton style={{ width: 240 }} />}
+      />
+
+      <section className="grid grid-cols-2 gap-x-6 gap-y-4 sm:grid-cols-4">
+        <div className="min-w-0">
+          <p className="text-xs font-medium text-muted-foreground">Items</p>
+          <p className="mt-1 text-2xl font-semibold tabular-nums">
+            {hasData ? documents.length : <Skeleton style={{ width: 48, height: 28 }} />}
+          </p>
+        </div>
+      </section>
 
-      <Card>
-        <CardHeader>
-          <CardTitle>Items</CardTitle>
-          <CardDescription>Use shadcn surfaces and portal tokens so the app feels native inside Notis.</CardDescription>
-        </CardHeader>
-        <CardContent>
-          {loading ? (
-            <p className="text-sm text-muted-foreground">Loading...</p>
-          ) : documents.length === 0 ? (
-            <div className="rounded-xl border border-dashed border-border px-4 py-10 text-center text-sm text-muted-foreground">
-              No items yet. Deploy the app and create some.
-            </div>
-          ) : (
-            <div className="space-y-3">
-              {documents.map((doc) => (
-                <div key={doc.id} className="rounded-xl border border-border bg-background px-4 py-3">
-                  <div className="flex items-center justify-between gap-3">
-                    <p className="font-medium">{doc.title || 'Untitled'}</p>
-                    {typeof doc.properties.status === 'string' ? (
-                      <Badge variant="outline">{doc.properties.status}</Badge>
-                    ) : null}
-                  </div>
-                  <p className="mt-1 line-clamp-1 text-xs text-muted-foreground">
-                    {getDocumentPreview(doc)}
-                  </p>
+      <section className="space-y-3">
+        <h2 className="text-base font-semibold">Recent items</h2>
+        {error ? (
+          <p role="alert" className="rounded-xl bg-destructive/10 px-4 py-3 text-sm text-destructive">
+            {error.message}{' '}
+            <button type="button" className="font-medium underline" onClick={refetch}>Retry</button>
+          </p>
+        ) : null}
+        {loading ? (
+          <ViewSkeleton variant="table" rows={4} />
+        ) : !hasData ? null : documents.length === 0 ? (
+          <p className="px-4 py-10 text-center text-sm text-muted-foreground">No items yet. Create your first item.</p>
+        ) : (
+          <div className="space-y-2 lg:space-y-0">
+            {documents.map((doc) => (
+              <div key={doc.id} className="list-row flex items-center justify-between gap-3">
+                <div className="min-w-0">
+                  <p className="truncate text-sm font-medium">{doc.title || 'Untitled'}</p>
+                  <p className="mt-0.5 truncate text-xs text-muted-foreground">{getDocumentPreview(doc)}</p>
                 </div>
-              ))}
-            </div>
-          )}
-        </CardContent>
-      </Card>
+                {typeof doc.properties.status === 'string' ? (
+                  <Badge variant="secondary" className="shrink-0">{doc.properties.status}</Badge>
+                ) : null}
+              </div>
+            ))}
+          </div>
+        )}
+      </section>
     </main>
   );
 }

package/template/components/page-heading.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+
+// Mirrors the portal's PortalPageHeader: plain title, one-line description,
+// actions on the right. No eyebrow, no rule underneath.
+export function PageHeading({
+  title,
+  description,
+  actions,
+}: {
+  title: ReactNode;
+  description?: ReactNode;
+  actions?: ReactNode;
+}) {
+  return (
+    <header className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+      <div className="min-w-0 flex-1">
+        <h1 className="text-2xl font-semibold tracking-tight text-foreground">{title}</h1>
+        {description ? <p className="mt-1.5 text-sm text-muted-foreground">{description}</p> : null}
+      </div>
+      {actions ? <div className="flex shrink-0 flex-wrap items-center gap-2 sm:justify-end">{actions}</div> : null}
+    </header>
+  );
+}

package/template/components/ui/badge.tsx

@@ -4,13 +4,16 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
 
 const badgeVariants = cva(
-  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  'inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium transition-colors',
   {
     variants: {
       variant: {
-        default: 'border-transparent bg-primary/10 text-primary',
-        secondary: 'border-transparent bg-secondary text-secondary-foreground',
-        outline: 'text-foreground',
+        default: 'bg-primary/10 text-primary',
+        secondary: 'bg-foreground/[0.07] text-foreground',
+        destructive: 'bg-destructive/10 text-destructive',
+        // `outline` is kept for API compatibility and renders as plain text: the
+        // design bar has no outlined badges.
+        outline: 'bg-transparent text-foreground',
       },
     },
     defaultVariants: {

package/template/components/ui/card.tsx

@@ -2,20 +2,33 @@ import * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
+// Surfaces are flat: a tinted panel on the page, and a plain background panel
+// when nested inside another Card. No borders, no dividers, no shadows.
+const CardDepthContext = React.createContext(0);
+
 const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn('rounded-2xl border bg-card text-card-foreground shadow-sm', className)}
-      {...props}
-    />
-  ),
+  ({ className, ...props }, ref) => {
+    const depth = React.useContext(CardDepthContext);
+    return (
+      <CardDepthContext.Provider value={depth + 1}>
+        <div
+          ref={ref}
+          className={cn(
+            'min-w-0 rounded-2xl text-card-foreground',
+            depth === 0 ? 'bg-muted' : 'bg-background',
+            className,
+          )}
+          {...props}
+        />
+      </CardDepthContext.Provider>
+    );
+  },
 );
 Card.displayName = 'Card';
 
 const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-5', className)} {...props} />
   ),
 );
 CardHeader.displayName = 'CardHeader';
@@ -24,7 +37,7 @@ const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HT
   ({ className, ...props }, ref) => (
     <h3
       ref={ref}
-      className={cn('text-xl font-semibold leading-none tracking-tight', className)}
+      className={cn('text-base font-semibold leading-none tracking-tight', className)}
       {...props}
     />
   ),
@@ -41,14 +54,14 @@ CardDescription.displayName = 'CardDescription';
 
 const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+    <div ref={ref} className={cn('p-5 pt-0', className)} {...props} />
   ),
 );
 CardContent.displayName = 'CardContent';
 
 const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+    <div ref={ref} className={cn('flex items-center p-5 pt-0', className)} {...props} />
   ),
 );
 CardFooter.displayName = 'CardFooter';

package/template/components/ui/native-select.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { CaretDown } from '@phosphor-icons/react';
+
+import { cn } from '@/lib/utils';
+
+// Borderless native select: a tinted pill with a caret. Keeps the platform
+// dropdown (no portal needed inside the app surface) and the portal focus ring.
+const NativeSelect = React.forwardRef<HTMLSelectElement, React.SelectHTMLAttributes<HTMLSelectElement>>(
+  ({ className, children, ...props }, ref) => (
+    <span className={cn('relative inline-flex', className)}>
+      <select
+        ref={ref}
+        className="h-9 w-full appearance-none rounded-md bg-muted pl-3 pr-8 text-sm text-foreground outline-none transition-colors hover:bg-muted/70 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+        {...props}
+      >
+        {children}
+      </select>
+      <CaretDown className="pointer-events-none absolute right-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+    </span>
+  ),
+);
+NativeSelect.displayName = 'NativeSelect';
+
+export { NativeSelect };

package/template/notis.config.ts

@@ -2,7 +2,6 @@ import { defineNotisApp } from '@notis/sdk/config';
 
 export default defineNotisApp({
   name: 'my-notis-app',
-  devSlug: 'my-notis-app',
   title: 'My Notis App',
   description: 'A focused Notis app with one route and one database-backed workflow.',
   icon: 'phosphor:squares-four',

package/template/package.json

@@ -5,8 +5,8 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "vite build"
+    "dev": "vite --configLoader runner",
+    "build": "vite build --configLoader runner"
   },
   "dependencies": {
     "@notis/sdk": "file:./packages/sdk",

package/template/packages/sdk/package.json

@@ -12,8 +12,7 @@
     "./styles.css": "./src/styles.css"
   },
   "files": [
-    "src",
-    "template"
+    "src"
   ],
   "scripts": {
     "type-check": "tsc --noEmit"