npm - @notis_ai/cli - Versions diffs - 0.2.0-beta.16.1 → 0.2.0-beta.160.1 - Mend

@notis_ai/cli 0.2.0-beta.16.1 → 0.2.0-beta.160.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (154) hide show

package/README.md +433 -133
package/config/notis_app_boundary_rules.json +50 -0
package/config/notis_app_design_rules.json +135 -0
package/dist/agent-hooks/notis-agent-hook.mjs +18672 -0
package/dist/base-skills/notis-apps/SKILL.md +70 -0
package/dist/base-skills/notis-apps/references/architecture.md +164 -0
package/dist/base-skills/notis-apps/references/context.md +81 -0
package/dist/base-skills/notis-apps/references/design.md +165 -0
package/dist/base-skills/notis-apps/references/reading.md +89 -0
package/dist/base-skills/notis-apps/references/release.md +99 -0
package/dist/base-skills/notis-apps/references/sdk.md +62 -0
package/dist/base-skills/notis-apps/references/troubleshooting.md +23 -0
package/dist/base-skills/notis-cli/SKILL.md +140 -0
package/dist/base-skills/notis-cli/references/app-delivery.md +18 -0
package/dist/base-skills/notis-cli/references/native-databases.md +20 -0
package/dist/base-skills/notis-cli/references/tool-examples.md +56 -0
package/dist/base-skills/notis-cli/references/troubleshooting.md +39 -0
package/dist/base-skills/notis-query/SKILL.md +67 -0
package/dist/base-skills/notis-query/references/database-discovery.md +59 -0
package/dist/base-skills/notis-query/references/documents.md +50 -0
package/dist/base-skills/notis-query/references/query.md +543 -0
package/dist/skill-sync/index.js +1626 -0
package/dist/skill-sync/index.js.map +7 -0
package/dist/skill-sync-worker.mjs +2990 -0
package/package.json +16 -6
package/skills/notis-apps/cli.md +313 -0
package/skills/notis-cli/AGENT_INSTRUCTIONS.md +39 -0
package/skills/notis-onboarding/BRIEF.md +129 -0
package/skills/notis-query/cli.md +39 -0
package/src/agent-hook-entry.js +5 -0
package/src/cli.js +294 -25
package/src/command-specs/agents.js +392 -0
package/src/command-specs/apps.js +1470 -202
package/src/command-specs/auth.js +114 -137
package/src/command-specs/diagnostics.js +716 -0
package/src/command-specs/handover.js +374 -0
package/src/command-specs/helpers.js +84 -82
package/src/command-specs/index.js +25 -6
package/src/command-specs/meta.js +150 -18
package/src/command-specs/onboarding.js +290 -0
package/src/command-specs/profile.js +358 -0
package/src/command-specs/reports.js +86 -0
package/src/command-specs/skills.js +75 -0
package/src/command-specs/smoke.js +386 -0
package/src/command-specs/tools.js +455 -139
package/src/runtime/agent-browser.js +632 -0
package/src/runtime/agent-memory-state.js +126 -0
package/src/runtime/agent-setup.js +383 -0
package/src/runtime/app-boundary-validator.js +404 -0
package/src/runtime/app-changelog.js +79 -0
package/src/runtime/app-platform.js +2633 -210
package/src/runtime/app-registry-scaffolds.js +367 -0
package/src/runtime/app-test-server.js +292 -0
package/src/runtime/assets/store-screenshot-dark.png +0 -0
package/src/runtime/auth-recovery.js +110 -0
package/src/runtime/base-skills.d.ts +20 -0
package/src/runtime/base-skills.js +167 -0
package/src/runtime/channel.js +133 -0
package/src/runtime/delegated-context.js +68 -0
package/src/runtime/errors.js +1 -0
package/src/runtime/git.js +233 -0
package/src/runtime/login-listener.js +15 -0
package/src/runtime/oauth.js +2622 -0
package/src/runtime/output.js +37 -5
package/src/runtime/ports.js +31 -0
package/src/runtime/profiles.js +906 -55
package/src/runtime/skill-sync/cloud-client.ts +99 -0
package/src/runtime/skill-sync/index.ts +697 -0
package/src/runtime/skill-sync/local-scanner.ts +1046 -0
package/src/runtime/skill-sync/symlink-manager.ts +433 -0
package/src/runtime/skill-sync/sync-plan.ts +22 -0
package/src/runtime/skill-sync/types.ts +110 -0
package/src/runtime/skill-sync/write-cloud-skill.ts +50 -0
package/src/runtime/skill-sync-service.js +109 -0
package/src/runtime/store-screenshot.js +143 -0
package/src/runtime/sync-skills.d.ts +37 -0
package/src/runtime/sync-skills.js +231 -0
package/src/runtime/telemetry.js +92 -0
package/src/runtime/transport.js +324 -45
package/src/skill-sync-worker-entry.js +2 -0
package/src/skill-sync-worker.js +50 -0
package/template/.harness/index.html.tmpl +430 -0
package/template/CHANGELOG.md +5 -0
package/template/app/layout.tsx +5 -2
package/template/app/page.tsx +49 -42
package/template/components/page-heading.tsx +23 -0
package/template/components/ui/badge.tsx +7 -4
package/template/components/ui/card.tsx +24 -11
package/template/components/ui/native-select.tsx +24 -0
package/template/notis.config.ts +24 -6
package/template/package-lock.json +4137 -0
package/template/package.json +5 -5
package/template/packages/{notis-sdk → sdk}/package.json +13 -3
package/template/packages/sdk/src/agentContext.ts +36 -0
package/template/packages/sdk/src/components/DocumentEditor.tsx +103 -0
package/template/packages/sdk/src/components/Markdown.tsx +60 -0
package/template/packages/sdk/src/components/MarkdownEditor.tsx +121 -0
package/template/packages/sdk/src/components/MultiSelectActionBar.tsx +285 -0
package/template/packages/sdk/src/components/MultiSelectCheckbox.tsx +97 -0
package/template/packages/sdk/src/components/MultiSelectDragOverlay.tsx +39 -0
package/template/packages/sdk/src/components/NotisCommentBoundary.tsx +172 -0
package/template/packages/sdk/src/components/NotisSelectionBoundary.tsx +59 -0
package/template/packages/sdk/src/components/ShortcutHints.tsx +56 -0
package/template/packages/sdk/src/components/Skeleton.tsx +24 -0
package/template/packages/sdk/src/config.ts +257 -0
package/template/packages/sdk/src/documents.ts +256 -0
package/template/packages/sdk/src/hooks/useActiveResource.ts +19 -0
package/template/packages/sdk/src/hooks/useAgentContext.ts +23 -0
package/template/packages/sdk/src/hooks/useCloudComputer.ts +64 -0
package/template/packages/sdk/src/hooks/useCollectionInteractions.ts +836 -0
package/template/packages/sdk/src/hooks/useDatabaseSchema.ts +49 -0
package/template/packages/sdk/src/hooks/useDatabaseSubscription.ts +76 -0
package/template/packages/sdk/src/hooks/useDocument.ts +43 -0
package/template/packages/sdk/src/hooks/useDocuments.ts +84 -0
package/template/packages/sdk/src/hooks/useHandover.ts +78 -0
package/template/packages/sdk/src/hooks/useLongPressSelection.ts +79 -0
package/template/packages/sdk/src/hooks/useMultiSelect.ts +95 -0
package/template/packages/{notis-sdk → sdk}/src/hooks/useNotis.ts +10 -4
package/template/packages/{notis-sdk → sdk}/src/hooks/useNotisNavigation.ts +11 -8
package/template/packages/sdk/src/hooks/useQuery.ts +71 -0
package/template/packages/sdk/src/hooks/useTool.ts +65 -0
package/template/packages/sdk/src/hooks/useToolQuery.ts +12 -0
package/template/packages/sdk/src/hooks/useTopBarSearch.ts +81 -0
package/template/packages/sdk/src/hooks/useUpsertDocument.ts +95 -0
package/template/packages/sdk/src/index.ts +161 -0
package/template/packages/sdk/src/interactions/actions.ts +59 -0
package/template/packages/sdk/src/interactions/shortcuts.tsx +694 -0
package/template/packages/sdk/src/interactions/visibility.ts +13 -0
package/template/packages/sdk/src/interactions.ts +45 -0
package/template/packages/sdk/src/provider.tsx +44 -0
package/template/packages/sdk/src/queryCache.ts +170 -0
package/template/packages/sdk/src/runtime.ts +451 -0
package/template/packages/sdk/src/styles.css +213 -0
package/template/packages/sdk/src/tailwind.ts +56 -0
package/template/packages/{notis-sdk → sdk}/src/vite.ts +5 -1
package/template/tailwind.config.ts +1 -0
package/src/command-specs/db.js +0 -163
package/src/runtime/app-preview-server.js +0 -312
package/template/packages/notis-sdk/src/config.ts +0 -48
package/template/packages/notis-sdk/src/helpers.ts +0 -131
package/template/packages/notis-sdk/src/hooks/useAppState.ts +0 -50
package/template/packages/notis-sdk/src/hooks/useCollectionItem.ts +0 -58
package/template/packages/notis-sdk/src/hooks/useDatabase.ts +0 -87
package/template/packages/notis-sdk/src/hooks/useDocument.ts +0 -61
package/template/packages/notis-sdk/src/hooks/useTool.ts +0 -49
package/template/packages/notis-sdk/src/hooks/useUpsertDocument.ts +0 -57
package/template/packages/notis-sdk/src/index.ts +0 -47
package/template/packages/notis-sdk/src/provider.tsx +0 -44
package/template/packages/notis-sdk/src/runtime.ts +0 -159
package/template/packages/notis-sdk/src/styles.css +0 -123
/package/template/packages/{notis-sdk → sdk}/src/hooks/useBackend.ts +0 -0
/package/template/packages/{notis-sdk → sdk}/src/hooks/useTools.ts +0 -0
/package/template/packages/{notis-sdk → sdk}/src/ui.ts +0 -0
/package/template/packages/{notis-sdk → sdk}/tsconfig.json +0 -0

package/template/.harness/index.html.tmpl ADDED Viewed

@@ -0,0 +1,430 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Notis App Harness</title>
+  <script>
+    const harnessTheme = new URLSearchParams(window.location.search).get('theme') === 'dark' ? 'dark' : 'light';
+    document.documentElement.classList.toggle('dark', harnessTheme === 'dark');
+    document.documentElement.dataset.theme = harnessTheme;
+  </script>
+  <link rel="stylesheet" href="./bundle/app.css">
+  <script type="importmap">
+  {
+    "imports": {
+      "react": "https://esm.sh/react@{{REACT_VERSION}}",
+      "react-dom": "https://esm.sh/react-dom@{{REACT_VERSION}}",
+      "react/jsx-runtime": "https://esm.sh/react@{{REACT_VERSION}}/jsx-runtime",
+      "react-dom/client": "https://esm.sh/react-dom@{{REACT_VERSION}}/client"
+    }
+  }
+  </script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
+  <style>
+    /*
+     * Portal-parity theme tokens. In production the portal copies its computed
+     * :root custom properties onto the app root, so app CSS written against
+     * hsl(var(--token)) resolves to the real portal palette. The harness mirrors
+     * the portal's light theme here so dev renders and listing screenshots look
+     * exactly like the app inside the portal. Keep in sync with
+     * portal/src/app/globals.css (:root).
+     */
+    :root {
+      color-scheme: light;
+      --background: 0 0% 100%;
+      --foreground: 222.2 84% 4.9%;
+      --card: 0 0% 100%;
+      --card-foreground: 222.2 84% 4.9%;
+      --popover: 0 0% 100%;
+      --popover-foreground: 222.2 84% 4.9%;
+      --primary: 222.2 47.4% 11.2%;
+      --primary-foreground: 210 40% 98%;
+      --secondary: 210 40% 96.1%;
+      --secondary-foreground: 222.2 47.4% 11.2%;
+      --muted: 210 40% 96.1%;
+      --muted-foreground: 0 0% 46.9%;
+      --accent: 210 40% 96.1%;
+      --accent-foreground: 222.2 47.4% 11.2%;
+      --destructive: 0 84.2% 60.2%;
+      --destructive-foreground: 210 40% 98%;
+      --border: 214.3 31.8% 91.4%;
+      --input: 214.3 31.8% 91.4%;
+      --ring: 222.2 84% 4.9%;
+      --radius: 0.5rem;
+      --chart-1: 210 100% 49%;
+      --chart-2: 173 58% 39%;
+      --chart-3: 197 37% 24%;
+      --chart-4: 43 74% 66%;
+      --chart-5: 27 87% 67%;
+    }
+    :root.dark {
+      color-scheme: dark;
+      --background: 0 0% 13%;
+      --foreground: 210 40% 98%;
+      --card: 0 0% 13%;
+      --card-foreground: 210 40% 98%;
+      --popover: 0 0% 13%;
+      --popover-foreground: 210 40% 98%;
+      --primary: 210 40% 98%;
+      --primary-foreground: 222.2 47.4% 11.2%;
+      --secondary: 0 0% 18%;
+      --secondary-foreground: 210 40% 98%;
+      --muted: 0 0% 18%;
+      --muted-foreground: 0 0% 65.1%;
+      --accent: 0 0% 18%;
+      --accent-foreground: 210 40% 98%;
+      --destructive: 0 84.2% 60.2%;
+      --destructive-foreground: 210 40% 98%;
+      --border: 0 0% 23.5%;
+      --input: 0 0% 23.5%;
+      --ring: 212.7 26.8% 83.9%;
+      --chart-1: 220 70% 50%;
+      --chart-2: 160 60% 45%;
+      --chart-3: 30 80% 55%;
+      --chart-4: 280 65% 60%;
+      --chart-5: 340 75% 55%;
+    }
+    body {
+      margin: 0;
+      font-family: 'Inter', system-ui, -apple-system, sans-serif;
+      background: hsl(var(--background));
+      color: hsl(var(--foreground));
+      -webkit-font-smoothing: antialiased;
+    }
+    #harness-status { position: fixed; top: 0; left: 0; right: 0; padding: 4px 8px; font-size: 11px; background: #111; color: #0f0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; z-index: 9999; }
+    #root { padding-top: 24px; min-height: 100vh; }
+  </style>
+</head>
+<body>
+  <div id="harness-status">harness: booting</div>
+  <div id="root"></div>
+  <script type="module">
+    const routeExport = {{ROUTE_EXPORT}};
+    const descriptor = {{RUNTIME_DESCRIPTOR}};
+    const mode = {{MODE}};
+    const apiBase = {{API_BASE}};
+    const jwt = {{JWT}};
+    const fixtures = {{FIXTURES}};
+    /**
+     * Resolves the canned response for one tool call.
+     *
+     * A plain `"TOOL_NAME"` key answers every call to that tool. An app that
+     * reaches several databases through a single tool needs to vary the
+     * payload per call, so a key may also be scoped to one argument with
+     * `"TOOL_NAME#arg=value"` — for example
+     * `"LOCAL_NOTIS_DATABASE_QUERY#database_slug=notes"`. Scoped keys are
+     * checked first; the unscoped key stays the fallback.
+     */
+    function lookupToolFixture(name, args) {
+      const tools = fixtures && fixtures.tools;
+      if (!tools) return undefined;
+      for (const key of Object.keys(tools)) {
+        const sep = key.indexOf('#');
+        if (sep === -1 || key.slice(0, sep) !== name) continue;
+        const scope = key.slice(sep + 1);
+        const eq = scope.indexOf('=');
+        if (eq === -1) continue;
+        if (String(args[scope.slice(0, eq)]) === scope.slice(eq + 1)) {
+          return tools[key];
+        }
+      }
+      return Object.prototype.hasOwnProperty.call(tools, name) ? tools[name] : undefined;
+    }
+    const status = document.getElementById('harness-status');
+    const setStatus = (msg, color = '#0f0') => {
+      status.textContent = `harness: ${msg}`;
+      status.style.color = color;
+    };
+    window.__harness = {
+      errors: [],
+      runtimeCalls: [],
+      renderStarted: false,
+      mounted: false,
+      mode,
+      route: descriptor.route && descriptor.route.slug,
+      scenario: descriptor.context && descriptor.context.screenshotScenario,
+    };
+    window.addEventListener('error', (event) => {
+      window.__harness.errors.push({
+        type: 'window.error',
+        message: event.message,
+        stack: event.error && event.error.stack,
+      });
+    });
+    window.addEventListener('unhandledrejection', (event) => {
+      window.__harness.errors.push({
+        type: 'unhandledrejection',
+        reason: String((event.reason && event.reason.stack) || event.reason),
+      });
+    });
+    /**
+     * Records one runtime call and hands back the entry so the caller can
+     * stamp its outcome once the promise settles. Verify reads `ok` to tell a
+     * route that rendered from real data apart from one that only rendered its
+     * error states, so every runtime path must settle its own entry.
+     */
+    function record(op, args) {
+      const entry = { op, args, ok: null, error: null, durationMs: null };
+      entry.startedAt = Date.now();
+      window.__harness.runtimeCalls.push(entry);
+      return entry;
+    }
+    function settle(entry, error) {
+      entry.durationMs = Date.now() - entry.startedAt;
+      delete entry.startedAt;
+      entry.ok = !error;
+      entry.error = error ? (error.message ? String(error.message) : String(error)) : null;
+    }
+    async function tracked(entry, run) {
+      try {
+        const value = await run();
+        settle(entry, null);
+        return value;
+      } catch (error) {
+        settle(entry, error);
+        throw error;
+      }
+    }
+    async function readJsonOrSnippet(response) {
+      const text = await response.text().catch(() => '');
+      if (!text) return { payload: null, snippet: null };
+      try {
+        return { payload: JSON.parse(text), snippet: null };
+      } catch {
+        const trimmed = text.trim();
+        return { payload: null, snippet: trimmed.length > 120 ? `${trimmed.slice(0, 120)}...` : trimmed };
+      }
+    }
+    async function runtimeQuery(body) {
+      if (!apiBase || !jwt || !descriptor.app || !descriptor.app.id) {
+        throw new Error('live harness mode requires apiBase, jwt, and app id');
+      }
+      const response = await fetch(`${String(apiBase).replace(/\/$/, '')}/portal_views/runtime_query`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${jwt}`,
+        },
+        body: JSON.stringify({
+          app_id: descriptor.app.id,
+          route_slug: descriptor.route && descriptor.route.slug,
+          ...body,
+        }),
+      });
+      const { payload, snippet } = await readJsonOrSnippet(response);
+      if (!response.ok) {
+        const message = (payload && (payload.error || payload.message)) || snippet || `status ${response.status}`;
+        throw new Error(`Runtime request failed: ${message}`);
+      }
+      if (!payload) {
+        throw new Error(snippet ? `Runtime response was not JSON: ${snippet}` : 'Runtime response was empty');
+      }
+      if (payload.status === 'error' || payload.error) {
+        throw new Error(payload.message || payload.error || 'Runtime request failed');
+      }
+      return payload;
+    }
+    function stubRuntime() {
+      return {
+        app: descriptor.app,
+        route: descriptor.route,
+        context: descriptor.context || {},
+        navigate: (args) => {
+          settle(record('navigate', args), null);
+        },
+        // There is no manager chat here, so the handover is recorded and
+        // reported as drafted without any UI.
+        handover: async (payload) => {
+          settle(record('handover', payload), null);
+          return { status: 'drafted' };
+        },
+        registerTopBarSearch: () => {},
+        setTopBarSearchValue: () => {},
+        setTopBarSearchLoading: () => {},
+        // No change feed here, so `useDatabaseSubscription` reports live=false
+        // and the app keeps whatever manual refresh it offers.
+        subscribeDatabase: () => () => {},
+        // There is no cloud computer behind the harness. Answering "not
+        // available" rather than throwing keeps `useCloudComputer` on the same
+        // fallback branch a user without a cloud computer would see.
+        cloudComputerFacts: async () => tracked(
+          record('cloudComputerFacts', {}),
+          async () => ({
+            available: false,
+            reason: 'unsupported_host',
+            sandbox: null,
+            cli_auth: {
+              gh: { authenticated: null, account: null, checked_at: null, reason: 'unsupported_host' },
+            },
+          }),
+        ),
+        listTools: async () => tracked(
+          record('listTools', {}),
+          async () => descriptor.tools || [],
+        ),
+        callTool: async (name, args) => tracked(
+          record('callTool', { name, arguments: args || {} }),
+          async () => {
+            const fixture = lookupToolFixture(name, args || {});
+            if (fixture !== undefined) {
+              return structuredClone(fixture);
+            }
+            return { ok: true, result: null };
+          },
+        ),
+        request: async (path, options) => tracked(
+          record('request', { path, options }),
+          async () => {
+            if (fixtures && fixtures.requests && Object.prototype.hasOwnProperty.call(fixtures.requests, path)) {
+              return structuredClone(fixtures.requests[path]);
+            }
+            return null;
+          },
+        ),
+      };
+    }
+    const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+    async function applyScenarioActions() {
+      const actions = fixtures && fixtures.scenario && Array.isArray(fixtures.scenario.actions)
+        ? fixtures.scenario.actions
+        : [];
+      for (const action of actions) {
+        if (action && action.type === 'wait') {
+          await delay(Math.max(0, Number(action.ms) || 0));
+          continue;
+        }
+        if (action && action.type === 'click' && typeof action.selector === 'string') {
+          const deadline = Date.now() + 5000;
+          let element = null;
+          while (!element && Date.now() < deadline) {
+            element = document.querySelector(action.selector);
+            if (!element) await delay(50);
+          }
+          if (!element || typeof element.click !== 'function') {
+            throw new Error(`Screenshot scenario could not click ${action.selector}`);
+          }
+          element.click();
+          await delay(Number(action.settle_ms) || 350);
+        }
+      }
+    }
+    function liveRuntime() {
+      return {
+        ...stubRuntime(),
+        listTools: async () => tracked(
+          record('listTools', {}),
+          async () => {
+            const result = await runtimeQuery({ method: 'tools/list' });
+            return result.tools || [];
+          },
+        ),
+        callTool: async (name, args) => tracked(
+          record('callTool', { name, arguments: args || {} }),
+          async () => runtimeQuery({ method: 'tools/call', name, arguments: args || {} }),
+        ),
+        // Live mode must not inherit the stub's canned answer: it would settle
+        // ok: true with fake data and soften the all-calls-failed assertion.
+        cloudComputerFacts: async (options) => tracked(
+          record('cloudComputerFacts', options || {}),
+          async () => runtimeQuery({
+            method: 'cloud_computer/facts',
+            ...(options && options.refresh ? { refresh: true } : {}),
+          }),
+        ),
+        request: async (path, options) => tracked(
+          record('request', { path, options }),
+          async () => {
+            const response = await fetch(`${String(apiBase).replace(/\/$/, '')}${path}`, {
+              method: (options && options.method) || 'GET',
+              headers: {
+                Authorization: `Bearer ${jwt}`,
+                ...((options && options.body) ? { 'Content-Type': 'application/json' } : {}),
+                ...((options && options.headers) || {}),
+              },
+              body: options && options.body ? JSON.stringify(options.body) : undefined,
+            });
+            const { payload, snippet } = await readJsonOrSnippet(response);
+            if (!response.ok) {
+              throw new Error((payload && (payload.error || payload.message)) || snippet || `Request failed with status ${response.status}`);
+            }
+            return payload;
+          },
+        ),
+      };
+    }
+    try {
+      setStatus('loading react');
+      const React = await import('react');
+      const { createRoot } = await import('react-dom/client');
+      setStatus('loading bundle');
+      const bundle = await import('./bundle/app.js');
+      setStatus('binding runtime context');
+      const RuntimeContext = globalThis[Symbol.for('notis.sdk.runtime_context')];
+      if (!RuntimeContext) {
+        throw new Error('runtime context Symbol not initialized by bundle');
+      }
+      const Page = bundle[routeExport];
+      if (!Page) {
+        throw new Error(`bundle has no ${routeExport} export`);
+      }
+      const Shell = bundle.__AppShell;
+      const runtime = mode === 'live' ? liveRuntime() : stubRuntime();
+      const Root = () =>
+        React.createElement(
+          RuntimeContext.Provider,
+          { value: runtime },
+          Shell
+            ? React.createElement(Shell, null, React.createElement(Page, null))
+            : React.createElement(Page, null),
+        );
+      setStatus('mounting');
+      window.__harness.renderStarted = true;
+      createRoot(document.getElementById('root')).render(React.createElement(Root));
+      requestAnimationFrame(() => requestAnimationFrame(async () => {
+        try {
+          await delay(500);
+          await applyScenarioActions();
+          window.__harness.mounted = true;
+          const errors = window.__harness.errors.length;
+          const calls = window.__harness.runtimeCalls.length;
+          setStatus(`mounted (errors=${errors}, runtimeCalls=${calls})`, errors ? '#f55' : '#0f0');
+        } catch (error) {
+          window.__harness.errors.push({
+            type: 'scenario',
+            message: error && error.message ? error.message : String(error),
+          });
+          setStatus(`scenario failed: ${error && error.message ? error.message : String(error)}`, '#f55');
+        }
+      }));
+    } catch (error) {
+      window.__harness.errors.push({
+        type: 'boot',
+        message: error && error.message ? error.message : String(error),
+        stack: error && error.stack,
+      });
+      setStatus(`boot failed: ${error && error.message ? error.message : String(error)}`, '#f55');
+    }
+  </script>
+</body>
+</html>

package/template/CHANGELOG.md ADDED Viewed

@@ -0,0 +1,5 @@
+# App Changelog
+## [Initial Release] - {PR_MERGE_DATE}
+- First Store release.

package/template/app/layout.tsx CHANGED Viewed

@@ -1,7 +1,10 @@
-import { NotisProvider } from '@notis/sdk';
 import '@notis/sdk/styles.css';
+import { ShortcutProvider } from '@notis/sdk/interactions';
 import './globals.css';
 export default function AppShell({ children }: { children: React.ReactNode }) {
-  return <NotisProvider>{children}</NotisProvider>;
+  // NotisProvider supplies this in the product host. Keeping the shell-level
+  // provider makes the same scope arbitration available in the local harness;
+  // ShortcutProvider is nesting-safe, so the hosted app still has one registry.
+  return <ShortcutProvider>{children}</ShortcutProvider>;
 }

package/template/app/page.tsx CHANGED Viewed

@@ -1,55 +1,62 @@
 'use client';
-import { useNotis, useDatabase } 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();
-  const { documents, loading } = useDatabase('items');
+  // Documents come back normalized: plain property values, camelCase fields,
+  // and typed content (contentMarkdown / contentBlocknote / plainText).
+  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}</p>
-                    {doc.properties.status ? (
-                      <Badge variant="outline">{String(doc.properties.status)}</Badge>
-                    ) : null}
-                  </div>
+      <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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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';