@notis_ai/cli 0.2.0-beta.157.1 → 0.2.0-beta.159.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 (42) hide show
  1. package/dist/agent-hooks/notis-agent-hook.mjs +8296 -7912
  2. package/dist/base-skills/notis-apps/SKILL.md +34 -513
  3. package/dist/base-skills/notis-apps/references/architecture.md +164 -0
  4. package/dist/base-skills/notis-apps/references/design.md +165 -0
  5. package/dist/base-skills/notis-apps/references/release.md +99 -0
  6. package/dist/base-skills/notis-apps/references/sdk.md +61 -0
  7. package/dist/base-skills/notis-apps/references/troubleshooting.md +23 -0
  8. package/dist/base-skills/notis-cli/SKILL.md +19 -200
  9. package/dist/base-skills/notis-cli/references/app-delivery.md +18 -0
  10. package/dist/base-skills/notis-cli/references/native-databases.md +20 -0
  11. package/dist/base-skills/notis-cli/references/tool-examples.md +56 -0
  12. package/dist/base-skills/notis-cli/references/troubleshooting.md +39 -0
  13. package/dist/base-skills/notis-query/SKILL.md +13 -651
  14. package/dist/base-skills/notis-query/references/database-discovery.md +59 -0
  15. package/dist/base-skills/notis-query/references/documents.md +50 -0
  16. package/dist/base-skills/notis-query/references/query.md +543 -0
  17. package/dist/skill-sync/index.js +24 -7
  18. package/dist/skill-sync/index.js.map +4 -4
  19. package/dist/skill-sync-worker.mjs +2989 -0
  20. package/package.json +1 -1
  21. package/src/cli.js +4 -0
  22. package/src/command-specs/diagnostics.js +37 -0
  23. package/src/command-specs/skills.js +23 -5
  24. package/src/runtime/profiles.js +5 -2
  25. package/src/runtime/skill-sync/cloud-client.ts +2 -1
  26. package/src/runtime/skill-sync/index.ts +24 -6
  27. package/src/runtime/skill-sync/types.ts +2 -0
  28. package/src/runtime/skill-sync-service.js +109 -0
  29. package/src/skill-sync-worker-entry.js +2 -0
  30. package/src/skill-sync-worker.js +50 -0
  31. package/template/packages/sdk/src/components/MultiSelectActionBar.tsx +36 -7
  32. package/template/packages/sdk/src/components/MultiSelectCheckbox.tsx +3 -1
  33. package/template/packages/sdk/src/hooks/useCollectionInteractions.ts +138 -28
  34. package/template/packages/sdk/src/hooks/useDocuments.ts +4 -1
  35. package/template/packages/sdk/src/hooks/useLongPressSelection.ts +79 -0
  36. package/template/packages/sdk/src/hooks/useMultiSelect.ts +2 -8
  37. package/template/packages/sdk/src/index.ts +3 -0
  38. package/template/packages/sdk/src/interactions/actions.ts +14 -1
  39. package/template/packages/sdk/src/interactions/shortcuts.tsx +79 -19
  40. package/template/packages/sdk/src/interactions/visibility.ts +13 -0
  41. package/template/packages/sdk/src/interactions.ts +3 -0
  42. package/template/packages/sdk/src/queryCache.ts +10 -2
@@ -4,527 +4,48 @@ description: Design and package Notis apps. Use when users want an app that grou
4
4
  feature_flag: store
5
5
  mcp_resource: true
6
6
  mcp_tool_patterns: ["LOCAL_NOTIS_INSTALL_APP"]
7
+ mcp_references: ["references/release.md", "references/architecture.md", "references/design.md", "references/sdk.md", "references/troubleshooting.md"]
7
8
  ---
8
9
 
9
- # Notis Apps Skill
10
+ # Notis Apps
10
11
 
11
- Use this skill when the user wants a packaged Notis app -- task manager, CRM, dashboard, internal tool, etc. Notis apps are **Vite + React projects** that deploy into the Notis portal as installed apps for the current user or team.
12
+ Build apps that feel native to Notis: compact, readable, responsive, and useful.
13
+ Use Vite + React, `@notis/sdk`, and the existing scaffold components. Use the Notis
14
+ CLI for app operations: `npx --package @notis_ai/cli@latest -- notis ...`.
12
15
 
13
- Run the Notis CLI through NPX, for example `npx --package @notis_ai/cli@latest -- notis apps list`. Sign the CLI in once with `notis login`; each account you authorize is a profile you can switch between with `notis profile use`. The CLI bundles this `notis-apps` base skill and refreshes its canonical copy under `~/.notis/skills/base/` on every launch. It is independent of account-skill sync, feature flags, target selection, and cloud deletion.
16
+ ## Build inspect fix deliver
14
17
 
15
- ## How Apps Are Built
18
+ For every app UI create/edit task, read both [Design](references/design.md) and
19
+ [Delivery](references/release.md). Then:
16
20
 
17
- All Notis apps are built using the Notis CLI, either locally in a repo workspace or inside a Vercel Sandbox. The platform contract is the same in both cases:
18
- - the app is a Vite + React project
19
- - the app uses `@notis/sdk`
20
- - the app is packaged as an ES module bundle
21
- - the portal renders it as a React component inside the portal's React tree
21
+ 1. **Understand the result.** Identify the main user action and the requested
22
+ change. For a reported visual bug, describe what is wrong in the actual
23
+ screen before editing. Preserve what already works.
24
+ 2. **Start from native patterns.** Pull the existing app or choose the closest
25
+ Store scaffold. Use the appropriate page layout instead of inventing a new
26
+ visual system. Make routine choices yourself; ask only for missing decisions
27
+ that materially change the result.
28
+ 3. **Build, look, improve.** Run build and verification, then actually inspect
29
+ the rendered app. Follow the short visual check in the design guide. Fix what
30
+ is wrong and recheck the affected screen; a passing build is not visual approval.
31
+ 4. **Deliver the checked result.** Follow the delivery guide and existing user
32
+ authorization. Confirm the released result inside Notis before calling it
33
+ verified. Say plainly what is local, deployed, or still unverified.
22
34
 
23
- ## Release-only delivery
35
+ ## Keep these boundaries
24
36
 
25
- Workspace runs released app versions only. Local and cloud agents use the same workflow.
26
- A request to create or edit app source authorizes updating that app in Workspace after checks pass.
27
- Explicit read-only, preview-only or no-deploy requests stop at local artifacts and checks: no remote
28
- app/resource creation or mutation, Workspace preview, deployment or live verification. Store
29
- publication always needs separate explicit approval.
37
+ - User and repository instructions take precedence, including preview-only,
38
+ no-deploy, and explicit-consent requirements. Store publication is separate.
39
+ - Preserve the exact app identity, account/team scope, permissions, and user data.
40
+ Reconcile an uncertain release instead of blindly retrying it.
41
+ - Use SDK hooks and declared tools. Let Notis own its sidebar, search, runtime,
42
+ and rendering boundary; do not query host DOM or recreate that chrome in the app.
30
43
 
31
- 1. Inspect the effective CLI profile and the exact app's current version with `apps list --json`.
32
- For an existing released app, preserve local edits and pull its exact app ID into the intended
33
- directory. Retain the profile/app link, deployment version and revision. An unreleased container
34
- has no source to pull: recover its original local source and edits, or scaffold locally only if
35
- that source cannot be recovered. Confirm its exact ID, edit permission and personal/team scope,
36
- then run `apps link <app-id> <source-directory> --expected-version 0` to resume that same container.
37
- If a release has appeared, preserve local source separately, pull the current release into a fresh
38
- directory and reapply the intended edits. The link guard compares against the same remote read
39
- whose version/revision it saves; deploy still rejects a release racing after that read. Do not pull
40
- missing source or create another remote app to recover a failed first release.
41
- 2. Scaffold a new app locally, or edit the pulled source. Run `apps build` and automated
42
- `apps verify` before new remote creation. Missing browser tooling or failed checks blocks delivery;
43
- printed URLs and `--no-browser` are not passing verification. Install browser tooling with
44
- `npm exec --yes --package agent-browser@latest -- agent-browser install`; if needed run
45
- `npx --yes --package @notis_ai/cli@latest --package agent-browser@latest -- notis apps verify`.
46
- 3. Reconcile `apps list --json` and the exact intended name/slug, edit permission and personal/team
47
- scope. Default to personal only when no team was requested. Reuse a matching editable identity;
48
- stop on ambiguous matches or conflicting identity/scope. Create only when none exists, using
49
- `apps create "<exact app name>" .` (or `--team-id <verified team ID>`). Read back the same ID.
50
- A failed first release leaves a container: reuse it, never duplicate or automatically delete it.
51
- 4. Compare existing app-owned schemas. Create only necessary missing databases against that exact
52
- app ID. Change existing schemas by verified database ID and ownership, and only with backward-
53
- compatible changes before release. Read back each change. Breaking changes need separate coordination.
54
- Ordinary note/record edits and existing resource editors remain immediate.
55
- 5. Run `apps deploy` against the same linked app. It builds, verifies a frozen source/artifact
56
- snapshot with stubs, then sends that snapshot to the backend. `--skip-build` accepts only unchanged,
57
- valid output and still verifies. Do not bypass the backend or create implicitly on deploy.
58
- 6. Read back the exact installed app ID, integer version and Portal URL with `apps list --json`.
59
- Run `apps verify --mode live` and open the installed app in the actual Portal for surface proof.
60
- A live harness check alone does not prove the deployed bundle rendered in Portal.
61
- 7. Report **failed before activation**, **deployed but unverified**, or **outcome unknown** accurately.
62
- Never blindly replay an uncertain create/deploy response; reconcile its exact identity/version first.
63
- `apps publish --confirm-ready` is **Publish to Store**, separately approved and listing-gated.
64
- Workspace delivery is **Update app**, with no Store screenshot/readiness requirement.
44
+ ## References only as needed
65
45
 
66
- ### Restore historical source as a new release
46
+ - [SDK hooks](references/sdk.md): reads, edits, selection, and navigation.
47
+ - [App contracts](references/architecture.md): configuration, packaging, and data ownership.
48
+ - [Troubleshooting](references/troubleshooting.md): a specific failure or mismatch.
67
49
 
68
- Pull the current release into a fresh checkout first. Retrieve historical source into a different
69
- folder (`apps pull <id> <historical-dir> --source-version <n>`). Replace source in the current checkout
70
- without replacing its `.notis` profile/app link or deployment base. Update `package.json`'s
71
- `notisAppVersion`, check compatibility with current resources, build, verify and deploy as a new
72
- release. Preserve app/database/skill IDs. Never decrement the deployment counter, rewrite snapshots,
73
- or claim to undo user data or external actions.
74
-
75
- ## Architecture
76
-
77
- ```
78
- Notis CLI (local workspace or Vercel Sandbox)
79
- -> Vite + React project with @notis/sdk
80
- -> notis apps init / build / verify / create / link / pull / deploy
81
- -> ES module bundle (app.js + app.css) + manifest
82
- -> Portal renders as React component with real tools/databases
83
- ```
84
-
85
- `deploy` updates the linked installed app for the current account or team. After the user explicitly confirms the App Details page is ready, `apps publish --confirm-ready` submits that deployed version to the Team or Public Store review flow.
86
-
87
- ### Key Components
88
-
89
- 1. **@notis/sdk** (`packages/sdk/`) -- SDK for app developers
90
- - `@notis/sdk` -- NotisProvider, runtime hooks, editors, selection helpers, and shortcut primitives
91
- - `@notis/sdk/interactions` -- headless collection actions and interaction types
92
- - `@notis/sdk/config` -- `defineNotisApp()` for notis.config.ts
93
- - `@notis/sdk/vite` -- `notisViteConfig()` for vite.config.ts
94
- - `@notis/sdk/styles.css` -- shadow-safe app shell styles and base app-surface classes
95
-
96
- 2. **CLI** (`packages/cli/src/command-specs/apps.js`) -- release delivery uses init, build, verify, create, deploy, link, pull, doctor, and list
97
-
98
- 3. **Server** (`server/routers/portal_views/`) -- Returns signed bundle URLs, proxies tool calls
99
-
100
- 4. **Portal** (`portal/src/components/apps/`) -- Renders app bundles as React components via AppViewRenderer
101
-
102
- ### Runtime Bridge
103
-
104
- Apps communicate with the platform through the `NotisRuntime` interface, provided by the portal via React context:
105
-
106
- - **Portal**: the portal creates a real `NotisRuntime` and passes it as a prop to `NotisProvider`. All calls go to `/portal_views/runtime_query` via fetch with the user's JWT.
107
- - The portal mounts the app inside a shadow-scoped content surface and injects the runtime before app mount. There is no supported window-global runtime fallback.
108
-
109
- App code never accesses the runtime directly -- it uses SDK hooks (`useTool`, `useTools`, `useNotis`, etc.) which read from the `NotisProvider` context.
110
-
111
- ## Hard Rules
112
-
113
- 1. **React + Vite only** -- No Next.js, no custom server
114
- 2. **ES module bundle** -- Vite builds a library-mode bundle with React externalized
115
- 3. **Component rendering** -- Apps render as React components directly in the portal. Do not create your own iframe; the host chooses the trusted shadow-root or isolated Store rendering path.
116
- The portal owns the `ShadowRoot`, theme tokens, and runtime provider.
117
- 4. **HTTP bridge** -- Runtime calls use fetch to `/portal_views/runtime_query`
118
- 5. **Declarative tools** -- Tool access is declared in `notis.config.ts` by the final names returned by tool discovery and enforced server-side. Views can call native Notis, connected integrations, PostForMe, and MCP tools directly; metered calls use the same credit-cap and usage-billing path as the CLI.
119
- 6. **shadcn + Notis theme** -- Apps must use shadcn components with the live Notis theme provided by the portal
120
- 7. **Phosphor icons only** -- Always `phosphor:` prefix. Never emojis.
121
- 8. **Database refs only** -- `notis.config.ts` references existing databases by slug. The schema source of truth lives in the `databases` table, not in the manifest. Every native database is owned by exactly one app (`databases.owner_app_id`): creating one through `LOCAL_NOTIS_DATABASE_UPSERT_DATABASE` requires the owning app's slug or id in the `app` argument, installation stamps ownership automatically, and deleting an app deletes its databases and their documents.
122
- An app-owned database slug is a stable deployed contract because bundles and
123
- collection routes may call it directly. Do not try to rename that slug with
124
- a schema tool; rename the display title instead.
125
- 9. **Use NPX for CLI commands** -- Always run `npx --package @notis_ai/cli@latest -- notis ...`.
126
- 10. **`apps deploy` is not store publishing** -- `apps deploy` updates an installed app only and persists its source snapshot. Store review starts separately with `apps publish --confirm-ready` after explicit user approval.
127
- 11. **Routes are canonical** -- Define navigation only in `manifest.routes`. Every configured route must declare an explicit `slug`. Do not rely on legacy `manifest.views`.
128
- 12. **Portal-owned sidebars stay portal-owned** -- If a route uses `collection.sidebar`, treat that sidebar as platform chrome. Do not remove it, recreate it inside app JSX, or replace it with a custom in-app folder rail.
129
- 13. **Portal globals are off-limits** -- Never use `window.__NOTIS_RUNTIME__`, query portal-owned DOM hooks, or create global DOM portals.
130
- 14. **Prefer inline optimistic edits** -- Rename-like edits for collections, app-owned rows, and sidebar-backed entities should use inline editing with an optimistic UI update, then roll back on backend failure. Use modals only when the edit requires multiple fields or destructive confirmation.
131
- 15. **One delivery gate** -- Follow Release-only delivery on local and cloud computers. No DEV runtime exists.
132
- 16. **Exact identity** -- Preserve the intended profile, editable app ID, personal/team scope and current deployment base. Never silently advance a stale checkout.
133
- 17. **Automatic source updates** -- Build and check requested app source changes, then update Workspace unless the user opted out. Store publication stays separate.
134
- 18. **Runtime permissions stay least-authority** -- Release activation preserves existing grants and keeps restricted capabilities denied until approved.
135
- 19. **Store submission is user-gated** -- Run `apps publish --confirm-ready` only after the user explicitly confirms the current App Details page and Store listing are ready. Deploy the exact approved local state first. The command must reject missing confirmation, incomplete listing media, a local/deployed version mismatch, private visibility, or an existing pending review.
136
- 20. **Source restoration** -- Restore historical source as a new release using the current deployment base; never revert data or decrement versions.
137
- 21. **`CHANGELOG.md` owns release history** -- Keep the complete release history in one root `CHANGELOG.md`, newest entry first. Do not add new `versionNotes` values to `notis.config.ts`. Use `## [Release title] - YYYY-MM-DD`, or `{PR_MERGE_DATE}` for an unpublished entry. App Details reads **What’s New** and **Version History** from the deployed package manifest, while the Store reads them from the latest published snapshot; unpublished workspace edits must never change the Store page. The manifest also exposes `package.json` `notisAppVersion` as the package version shown in App Details.
138
- 22. **Database rows are private unless explicitly seeded** -- A string declaration such as `databases: ['notes']` publishes schema only and never includes the developer's rows. Use `{ slug: 'templates', seedDocuments: true }` only for small, intentional starter content that every installer should receive. Never enable it for user-created notes, history, leads, or other personal data.
139
- 23. **Public submissions are complete, reviewable packages** -- The registry PR must contain the full editable source tree, Store assets, exact source-declared database schemas, and only explicitly seeded starter rows. Registry CI validates those boundaries before merge; do not hand-edit `notis-listing.json` or strip source files to make a check pass. Fix the app locally, redeploy, and resubmit.
140
- 24. **New projects default to `~/.notis/apps/<slug>`, and `[dir]` overrides it** -- `apps init` and `apps pull` use this stable, predictable home unless the app belongs in a specific repository, monorepo, or user-chosen location. In those cases, pass `[dir]` and report the resulting path. Do not nest an app inside a directory whose local workspace metadata selects an unrelated Notis runtime or profile: later CLI calls inherit that routing and may target the wrong environment.
141
- 25. **Machine names and display titles use different casing** -- In `notis.config.ts`, `name` is the stable machine identity and must be lowercase kebab-case (`name: 'link-building'`). `title` is the human-facing app name and must use deliberate display casing (`title: 'Link Building'`), preserving product spelling and acronyms such as `Notis` and `SEO`. Never put a title-cased phrase in `name`, never show a raw slug as the title, and never change an existing canonical `name` or remote slug merely to repair display casing. The persisted `apps.name`, Workspace sidebar, App Details, and Store listing must use `title`.
142
-
143
- ## Anti-patterns -- NEVER do these
144
-
145
- These are the most common mistakes agents make. Each one wastes time and produces broken results.
146
-
147
- - **NEVER assume app deploys create databases for you** -- Create or update databases through native Notis database tools or the assistant first, then reference them by slug in `notis.config.ts`. Database creation requires the owning app to exist: pass its slug or id in the `app` argument of `LOCAL_NOTIS_DATABASE_UPSERT_DATABASE` (create the app first with `LOCAL_NOTIS_CREATE_APP` if needed). A database can only be referenced by the app that owns it.
148
- - **NEVER bypass the supported workflow by manually stitching together low-level save or lint calls from a local workspace** -- Local agents should go through the NPX Notis CLI for `apps pull`, `apps build`, `apps verify`, `apps create`, `apps link`, and `apps deploy`.
149
- - **NEVER use `apps pull` to clone a Store listing** -- `npx --package @notis_ai/cli@latest -- notis apps pull` only pulls source for an app the user can already access as an installed app. To fork a published Store app, run `npx --package @notis_ai/cli@latest -- notis apps init "My App" --from <slug>` instead: it downloads that app's source from the public registry, and installing the app first is not required.
150
- - **One local/cloud delivery contract** -- App source create/edit requests authorize Workspace delivery after checks. Explicit read-only, preview-only and no-deploy requests prohibit remote mutations. Neither authorizes Store publication.
151
- - **NEVER submit without explicit approval** -- A deploy request alone does not authorize Store submission. Run `npx --package @notis_ai/cli@latest -- notis apps publish --confirm-ready` only when the user confirms App Details is ready for Store review.
152
- - **NEVER write raw `views/<slug>/index.js` files** -- Write standard React pages in `app/`.
153
- - **NEVER invent `npx --package @notis_ai/cli@latest -- notis apps push` or bypass the review flow** -- Source moves through `apps pull` and `apps deploy`; `apps publish --confirm-ready` submits the deployed snapshot through the same authenticated review endpoint as App Details.
154
- - **NEVER treat `apps deploy` as store submission** -- It updates the linked installed app for the current account or team scope only. Store submission is a separate, explicitly confirmed step.
155
- - **NEVER explore server code or tool schemas to invent an alternative app workflow** -- Use the Notis CLI.
156
- - **NEVER work around a missing `collection.sidebar` portal tree by rendering a duplicate sidebar inside the app** -- keep the route manifest as the source of truth and escalate the missing portal sidebar as a platform bug instead.
157
- - **NEVER invent a custom visual language** -- Do not ship full-screen gradients, glassmorphism, bright neon palettes, or raw HTML controls as the primary UI. Apps should look like a natural extension of the portal.
158
- - **NEVER hand-roll buttons/cards/badges when the scaffold already provides flat primitives** -- Prefer `@/components/ui/*` and portal token classes such as `bg-background`, `bg-muted`, and `text-muted-foreground`. Never add `border` or `shadow` classes to `Card`; a `Card` nested in a `Card` is flat automatically. See Design bar.
159
-
160
- ## Workflow
161
-
162
- Follow **Release-only delivery** above. Use `apps scaffolds list` to discover public Store starting
163
- points, `apps init` to scaffold locally, and `apps pull` for existing source. App file operations go
164
- through the CLI, never raw storage/database writes. Run all Notis commands through NPX.
165
-
166
- ## Building an App
167
-
168
- ### Step 1: Define the config
169
-
170
- Create `notis.config.ts` with:
171
- - **name** -- Stable machine identity in lowercase kebab-case, such as `link-building`; do not use display casing here
172
- - **title** -- Human-facing app name with deliberate casing, such as `Link Building`; preserve brands and acronyms exactly
173
- - **databases** -- Slug references to existing Notis databases
174
- - **routes** -- Route-first sidebar entries with explicit `slug`, optional `parentSlug`, and optional `collection.sidebar` tree config
175
- - **tools** -- Final tool names the app can call at runtime. Use the shared discovery flow (`COMPOSIO_SEARCH_TOOLS`, then `COMPOSIO_GET_TOOL_SCHEMAS`) while building the app, and copy the returned final names into this list. Examples include `LOCAL_NOTIS_DATABASE_QUERY`, `LOCAL_NOTIS_MONID_RUN`, `GMAIL_SEND_EMAIL`, `LOCAL_POSTFORME_CREATE_POST`, and `LOCAL_MCP_<SERVER>_<TOOL>`. App code calls each declared name directly through `useTool`; it does not wrap provider or MCP calls in `COMPOSIO_MULTI_EXECUTE_TOOL`. Access stays scoped to the signed-in user's own connections, native database tools stay scoped to the app's databases unless `capabilities.workspaceDatabases: 'read'` is granted, and metered tools use the CLI-equivalent credit-cap and fail-closed usage-billing path.
176
-
177
- For collection-backed sidebars, use the route schema directly:
178
-
179
- ```ts
180
- routes: [
181
- {
182
- path: '/',
183
- slug: 'notes',
184
- name: 'Notes',
185
- icon: 'phosphor:note-pencil',
186
- default: true,
187
- collection: {
188
- database: 'notes',
189
- titleProperty: 'Title',
190
- parentProperty: 'Parent note',
191
- sidebar: {
192
- mode: 'tree',
193
- allowCreate: true,
194
- },
195
- },
196
- },
197
- ]
198
- ```
199
-
200
- Use the same page template for the root Notes route and collection/sub-collection detail states. The portal sidebar injects live collection items under the static route row when `collection.sidebar.mode === 'tree'`.
201
-
202
- For arbitrary app-owned resources that are not Notis collection rows, set `resourceDeepLinks: true` on the route. Read the decoded `?resource=` identifier from `useNotis().resourceId`, and link between routes with `toRoute('/inbox', { resourceId })`. Keep collection links on `?item=`. Publish external preview/source links as the resource `url`; the host separately supplies the exact Notis review link as `active_resource.view_url` for opted-in routes. Handle missing or deleted identifiers with a safe view-level fallback.
203
-
204
- ### Step 2: Build pages
205
-
206
- Standard React pages in `app/`. Use generic SDK tool hooks for data and build on top of the scaffolded flat components and portal shell classes (`notis-app-shell` for ordinary pages, `notis-app-split` for list-plus-detail pages, `notis-app-surface` for a flat panel):
207
-
208
- ```tsx
209
- import { useDocuments, ViewSkeleton } from '@notis/sdk';
210
- import { Card } from '@/components/ui/card';
211
-
212
- export default function TasksPage() {
213
- const tasks = useDocuments('tasks', { pageSize: 25 });
214
- return <section className="space-y-4 p-6">
215
- <h1 className="text-xl font-semibold">Tasks</h1>
216
- {tasks.error && <p role="alert">{tasks.error.message} <button onClick={tasks.refetch}>Retry</button></p>}
217
- {tasks.loading ? <ViewSkeleton variant="table" rows={5} /> : tasks.hasData ? (
218
- tasks.documents.length ? tasks.documents.map((task) => (
219
- <Card key={task.id} className="p-4"><h2>{task.title || 'Untitled'}</h2></Card>
220
- )) : <p>No tasks yet.</p>
221
- ) : null}
222
- </section>;
223
- }
224
- ```
225
-
226
- ### Instant-view loading contract (required)
227
-
228
- Build a client-side, multi-route app with one persistent `app/layout.tsx` shell. Navigate with `useNotisNavigation`; never use a document reload for an internal route. “SPA” means preserving that shell and reusing reads, **not** mounting every page or fetching every database at startup.
229
-
230
- | State | Required UI |
231
- | --- | --- |
232
- | First read, no successful data | Keep headings/navigation/layout visible; use content-shaped skeletons only in missing regions. No page spinner or whole-page `Loading...`. |
233
- | Cached view / successful empty result | Render synchronously from the shared SDK cache. Empty results are real cached results. |
234
- | Background refresh | Keep current content and selection. Never replace populated content with a skeleton; do not drive the top-bar spinner from mount/refetch state. |
235
- | Explicit Save / Upload / submitted search | Progress belongs in that button or affected section. Disable only the conflicting action. |
236
- | Failed read | Show a scoped error and Retry; keep usable cached content. Never show an empty-state message before `hasData` is true. |
237
-
238
- Use `useDocuments`, `useDocument`, `useDatabaseSchema`, and `useDatabaseSubscription` for native reads. `loading` means no first successful response; `isFetching` includes silent refresh. Do not copy their data into mount-only state, clear rows on error, or gate the entire app on `isFetching`.
239
-
240
- For another **explicitly identified idempotent read**, use `useToolQuery<Result>(toolName, exactArguments, { readOnly: true })`, or `useQuery(keyArray, readCallback, { readOnly: true })`. Include every filter, selected resource, pagination option, and other input in the key. Call tools within a custom read with `{ readOnly: true, dedupe: true }`; the same SQL/shell tool can also perform writes, so never mark a whole toolkit read-only. Leave mutations as ordinary `useTool` actions.
241
-
242
- `useQueryClient().prefetch(keyArray, readCallback, { readOnly: true })` prepares small known reads after the current view has rendered or on hover/focus. It shares the host's two-request speculative budget. Match the exact foreground query key. Never prefetch a mutation, login/polling action, provider sweep, `fetchAll` query, or an aggregate that fans out into more requests. Do not invent tool names to prepare a view. Older hosts safely fall back to uncached hook-local reads and skip prefetch.
243
-
244
- Caches belong to the host's in-memory account/environment/app/version/effective-permission scope. Do not add module-global or `localStorage` caches of user data. Writes and realtime events invalidate reads; logout, access loss, and updates retire scopes. Preserve the last successful snapshot on an ordinary network failure.
245
-
246
- ### Discovering database schema
247
-
248
- Before writing app code, inspect the database schema to know what properties exist:
249
-
250
- ```bash
251
- npx --package @notis_ai/cli@latest -- notis tools search "list Notis databases"
252
- npx --package @notis_ai/cli@latest -- notis tools exec LOCAL_NOTIS_DATABASE_LIST_DATABASES --arguments '{}'
253
- npx --package @notis_ai/cli@latest -- notis tools exec LOCAL_NOTIS_DATABASE_GET_DATABASE --arguments '{"database_slug":"social_media_calendar"}'
254
- npx --package @notis_ai/cli@latest -- notis tools exec LOCAL_NOTIS_DATABASE_QUERY --arguments '{"database_id":"social-media-calendar-db-id","query":{"page_size":1}}'
255
- ```
256
-
257
- Prefer the database `id` returned by `LOCAL_NOTIS_DATABASE_LIST_DATABASES` or `LOCAL_NOTIS_DATABASE_GET_DATABASE` when calling `LOCAL_NOTIS_DATABASE_QUERY`; use `database_slug` only as a fallback.
258
-
259
- Use `LOCAL_NOTIS_DATABASE_GET_DATABASE` through `useTool` when an app needs schema detail at runtime. Keep database-specific result and property helper types inside the app code.
260
- For document writes, declare the generated canonical tool for the target database, such as `LOCAL_NOTIS_DATABASE_UPSERT_TASKS`, and call it through `useTool`. Pass flat property values; the server wraps them:
261
-
262
- ```tsx
263
- const upsertTask = useTool<Record<string, unknown>, { document?: { id: string } }>('LOCAL_NOTIS_DATABASE_UPSERT_TASKS');
264
-
265
- await upsertTask.call({
266
- title: 'My Task',
267
- Status: 'Todo',
268
- Priority: 'P1',
269
- Due: '2025-04-01',
270
- Done: false,
271
- Count: 5,
272
- });
273
- ```
274
-
275
- Do NOT pass Notion-style wrappers (`{select: {name: "Todo"}}`) when upserting.
276
-
277
- ### Design bar (enforced)
278
-
279
- Every page must read as a native, flat Notis page. `npx --package @notis_ai/cli@latest -- notis apps build` and the deploy endpoint fail on the banned patterns below with the exact file and line; the only override is an inline `// notis-design-allow: <rule-id> <reason>` comment on the line before (reason required, at least 12 characters). Do not work around a failure by moving the markup elsewhere; fix it.
280
-
281
- Banned in `app/` and `components/` (form controls in `components/ui/{input,textarea,checkbox,switch,button}.tsx` are exempt):
282
-
283
- - Four-side `border` boxes, `border-dashed`, `divide-*`, `<hr>`, thick `border-l-2` bars, `ring-*` as a box or selection indicator (`focus-visible:ring-2` on controls is fine).
284
- - `shadow-*` on panels, tiles, rows, or bubbles. Only a floating popover or menu may use `shadow-lg` together with `bg-popover`.
285
- - Tailwind palette hues (`emerald-500`, `slate-200`, ...), hex colors, gradients, `backdrop-blur`, `font-serif`.
286
- - Uppercase `tracking-wide` eyebrows and marketing headlines. Page titles are plain nouns matching the route ("Dashboard", "Meetings").
287
- - Text below 12px (`text-[11px]`); use `text-xs` at minimum and `text-sm` for body.
288
- - `Badge variant="outline"`, raw `<select>`, in-app search inputs, duplicate sidebars, untouched scaffold placeholder copy.
289
- - Loading text ("Loading...") or whole-page spinners. Keep headings visible and render `Skeleton` / `ViewSkeleton` from `@notis/sdk` only in the missing region (see the Instant-view contract).
290
-
291
- Use instead:
292
-
293
- - `Card` from the scaffold: a flat `bg-muted` panel that becomes `bg-background` when nested. Page sections can also be plain `h2` + content with `space-y-8`.
294
- - `.list-row` / `.list-row-selected` from `@notis/sdk/styles.css` for rows and table bodies (tinted on mobile, transparent with hover tint on desktop, selection by tint). Tables are flat on the page: `text-xs` muted header, `text-sm` rows, no wrapping panel.
295
- - Stats as bare figures: `text-xs` label over `text-2xl font-semibold tabular-nums`. Tiles (`rounded-2xl bg-muted p-5`) only when they are the page's single grouping device.
296
- - `PageHeading` for the header, `NativeSelect` for filters, `Badge` variants `default | secondary | destructive`, tokens only (`text-foreground`, `text-muted-foreground`, `text-primary`, `bg-primary/10`, `text-destructive`, `bg-destructive/10`), `tabular-nums` on numbers, `min-w-0` on every grid item that can hold long text.
297
- - One hairline (`border-t` / `border-b border-border`) between major sections or large list entries is the only allowed line.
298
- - List-plus-detail pages are full-bleed: `notis-app-split` with `notis-app-pane-list` (tinted, one `border-r` hairline, fixed width on desktop, stacked on mobile) and `notis-app-pane-detail` (`bg-background`), never the centered `notis-app-shell`.
299
- - Respect the portal theme in both modes. Never hardcode dark mode or an app palette.
300
- - For Notes-style apps, the folder tree belongs to the portal sidebar when configured via `collection.sidebar`. The page content should complement that chrome, not duplicate or replace it.
301
- - Do not render any search input inside the app (in-page search rails, "Ask Notis…" pills, command-palette-style bars, etc.). The portal already owns the top-bar search field. Wire your view to it with `useTopBarSearch({ value, onChange, placeholder, onSubmit })` from `@notis/sdk` and let the page filter or refetch on the values it receives. Use its `setLoading` only for an explicit submitted search, never initial view loading or background refresh.
302
-
303
- ### Sidebar invariants
304
-
305
- - When a user asks for folders, sections, or hierarchy in the app sidebar, express that through `routes` and `collection.sidebar` in `notis.config.ts`.
306
- - Treat an existing collection-tree sidebar as a locked structural requirement unless the user explicitly asks to change navigation architecture.
307
- - If the sidebar appears missing for the installed app, do not silently redesign around it. Preserve the manifest contract, call out the discrepancy, and treat it as a portal/runtime bug.
308
-
309
- ### Step 3: Root layout
310
-
311
- ```tsx
312
- import { NotisProvider } from '@notis/sdk';
313
- import '@notis/sdk/styles.css';
314
- import './globals.css';
315
-
316
- export default function AppShell({ children }: { children: React.ReactNode }) {
317
- return <NotisProvider>{children}</NotisProvider>;
318
- }
319
- ```
320
-
321
- ## Manifest Format
322
-
323
- Generated by `npx --package @notis_ai/cli@latest -- notis apps build` at `.notis/output/manifest.json`:
324
-
325
- ```json
326
- {
327
- "version": 1,
328
- "spec_version": 4,
329
- "app": { "name": "My App", "slug": "my-app", "title": "My App", "description": "...", "icon": "phosphor:..." },
330
- "routes": [
331
- {
332
- "path": "/",
333
- "slug": "index",
334
- "name": "Dashboard",
335
- "icon": "phosphor:squares-four",
336
- "default": true,
337
- "export_name": "index",
338
- "collection": null
339
- }
340
- ],
341
- "bundle": {
342
- "js": "bundle/app.js",
343
- "css": "bundle/app.css"
344
- },
345
- "databases": ["tasks", { "slug": "templates", "seed_documents": true }],
346
- "tools": ["LOCAL_NOTIS_DATABASE_QUERY"]
347
- }
348
- ```
349
-
350
- Use canonical `notis-*` tool names for explicit app tool declarations. App-specific TypeScript shapes for tool arguments and results live in the app code; the SDK exposes the generic `useTool<TArgs, TResult>()` hook instead of database-specific tool hooks.
351
-
352
- Database strings package schema only. The object form shown above opts that database into copying its current rows as Store starter content. Use it sparingly and only for non-personal fixtures/templates every installer is meant to receive.
353
-
354
- For a read-only database catalog app, declare `["LOCAL_NOTIS_DATABASE_LIST_DATABASES", "LOCAL_NOTIS_DATABASE_GET_DATABASE"]`. Use the list tool for the left/catalog pane and the get tool for the selected database detail pane.
355
-
356
- ## Database Schema
357
-
358
- ### apps table
359
-
360
- | Column | Type | Description |
361
- |---|---|---|
362
- | id | uuid PK | App ID |
363
- | user_id | uuid FK | Owner |
364
- | team_id | uuid FK | Team (nullable) |
365
- | name | text | Display name |
366
- | slug | text UNIQUE | URL slug |
367
- | description | text | App description |
368
- | icon | text | Phosphor icon (e.g. "phosphor:list") |
369
- | status | text | draft, active, archived |
370
- | visibility | text | private, team |
371
- | manifest | jsonb | Latest deployed manifest |
372
- | current_version | integer | Version counter |
373
- | source_listing_id | uuid FK | Source App Store listing for installed store apps; cleared when submitted as a derivative |
374
- | installed_snapshot | jsonb | Store-installed baseline used for update/reset comparison |
375
- | customization_overlay | jsonb | User changes over the installed store baseline |
376
- | update_status | text | up_to_date, update_available, needs_resolution, update_failed |
377
- | bundled_automation_ids | uuid[] | Linked automations |
378
- | bundled_skill_ids | uuid[] | Linked skills |
379
-
380
- ### databases ownership
381
-
382
- Every row in the `databases` table carries `owner_app_id` (uuid FK to
383
- `apps.id`, `ON DELETE CASCADE`): a database belongs to exactly one app, and
384
- deleting the app deletes its databases and their documents (`documents` cascade
385
- from `databases`). Install, resource preparation, and Store updates stamp
386
- `owner_app_id` automatically; standalone creation requires the `app` argument.
387
-
388
- ### Storage (Supabase)
389
-
390
- Files stored in `app-code` bucket at `{app_id}/v{version}/`:
391
- - `manifest.json`
392
- - `bundle/app.js`
393
- - `bundle/app.css`
394
-
395
- Editable source snapshots are stored in the private `app-source` bucket at
396
- `{app_id}/v{version}/`. Portal App Store listing screenshots are uploaded to
397
- the public `app-listing-assets` bucket before submission.
398
-
399
- ### Related tables
400
-
401
- - **databases** -- Apps reference these rows by slug. Schema lives on the database row (`schema_metadata` / `original_fields`), not in the app manifest.
402
- - **documents** -- `database_id` links to databases. Properties in `properties` jsonb.
403
- - **app_store_listings** -- Snapshots for publishing to the app store.
404
- - **app_submissions** -- Portal review submissions keyed to an app source version and registry slug.
405
-
406
- ## Server Endpoints
407
-
408
- | Endpoint | Method | Purpose |
409
- |---|---|---|
410
- | `/portal_views/get` | GET | Route detail + runtime descriptor with signed bundle URLs |
411
- | `/portal_views/runtime_query` | POST | Proxy tool calls and DB operations |
412
- | `/portal_views/collection_items` | GET | List collection items |
413
- | `/portal_views/collection_tree` | GET | List normalized collection tree nodes for a tree sidebar route |
414
- | `/portal_views/collection_tree/create` | POST | Create a root or child collection row from the sidebar |
415
- | `/portal_views/collection_tree/rename` | POST | Rename a collection tree item inline |
416
- | `/portal_views/collection_tree/delete` | POST | Delete a collection tree item from the sidebar |
417
- | `/portal_apps/list` | GET | List apps |
418
- | `/portal_apps/get` | GET | Get app detail |
419
- | `/portal_apps/publish` | POST | Submit a deployed app source snapshot for public store review |
420
- | `/portal_apps/listing_assets/upload` | POST | Legacy pre-manifest screenshot upload; do not use for current manifest-media workflows |
421
- | `/portal_apps/submissions` | GET/PATCH | List or edit App Store submissions |
422
- | `/portal_apps/submissions/withdraw` | POST | Close a pending App Store submission |
423
- | `/cli_tools` | POST | CLI tool execution (save_app_files, create_app, etc.) |
424
-
425
- ## SDK Hook Reference
426
-
427
- All hooks and components below are imported from `@notis/sdk`. `NotisProvider`
428
- already installs `ShortcutProvider`; app code should not add a second provider.
429
-
430
- | API | Signature | Description |
431
- |-----|-----------|-------------|
432
- | `useNotis()` | `() => { app, route, databases, collectionItem, resourceId, ready }` | App metadata, current route, selected collection item, decoded exact-resource id, ready state |
433
- | `useTool<TArgs, TResult>(name)` | `(name: string) => { call, loading, error }` | Call a declared tool with app-defined argument/result types. Identical idempotent reads may use `call(args, { dedupe: true })`; never dedupe writes |
434
- | `useTools()` | `() => { tools, loading }` | List available tools |
435
- | `useNotisNavigation()` | `() => { toRoute, toDocument, toApp }` | Navigate between routes (including `toRoute(path, { resourceId })`), documents, or the app root |
436
- | `useTopBarSearch(opts)` | `({ value, onChange, placeholder?, onSubmit? }) => { setLoading }` | Bind the current view to the Portal-owned top-bar search input |
437
- | `useBackend()` | `() => { request }` | Raw backend request proxy with JWT auth |
438
- | `useDatabaseSubscription(slug, opts?)` | `(slug: string, opts?) => { rows, documents, loading, error, refetch, live }` | Query a database and refetch it when its rows change. `live` is false on hosts without a change feed (temporary test harness, vite preview) -- keep a manual refresh for those |
439
- | `useHandover()` | `() => { handover, pending, error, available }` | Open manager chat with app/resource context plus an optional starter prompt or declared skill. Omit `prompt` for a context-only composer. `available` is false on hosts with no chat -- fall back to a copyable prompt |
440
- | `useCloudComputer()` | `() => { facts, loading, error, refresh }` | Read-only cloud computer facts: sandbox existence/status and whether the GitHub CLI is signed in. Requires `capabilities.cloudComputer: 'read'` plus the user's approval; `facts.available === false` means answer from the app's own fallback |
441
- | `useActiveResource(resource)` | `(ContextResource \| null) => void` | Publish the record currently open in the app so manager handover and context menus stay grounded |
442
- | `useCollectionInteractions(opts)` | `(opts) => CollectionInteractionController` | Keyboard navigation, active-row state, range/toggle selection, marquee selection, and action dispatch for collection UIs |
443
- | `useShortcuts(definitions, opts?)` | `(definitions, opts?) => void` | Register scoped keyboard shortcuts. Editable targets are ignored unless explicitly allowed; use `ShortcutHints` to display them |
444
- | `MarkdownEditor` | `(NotisMarkdownEditorProps) => ReactElement` | Use the host editor with app-owned persistence, stable `resourceKey`, revision-aware `onSave`, and optional `onUploadFile` returning a durable URL |
445
- | `NotisSelectionBoundary` | `(NotisSelectionBoundaryProps) => ReactElement` | Attach structured, explicitly untrusted app/resource/selection context to selected content and copy operations |
446
- | `SelectionCheckbox` / `SelectionMarquee` | components | Standard selection controls backed by `useCollectionInteractions` |
447
- | `MultiSelectActionBar` | component | Standard bulk actions with pending/disabled state and shortcut support |
448
-
449
- Import headless collection action types and helpers from
450
- `@notis/sdk/interactions`. Keep an open detail view synchronized with
451
- `useActiveResource`, and wrap its selectable content in
452
- `NotisSelectionBoundary` so the manager receives both the active record and the
453
- user's exact selection. For `MarkdownEditor`, keep `resourceKey` stable per
454
- record, pass the latest revision back from `onSave`, reject revision conflicts
455
- instead of overwriting newer data, and implement `onUploadFile` whenever the
456
- editor should accept media or file blocks.
457
-
458
- ### App configuration additions
459
-
460
- - `toolBindings` is only for provider-generated public tool names whose upstream
461
- action cannot be reconstructed. Keep the exact final public `name` in
462
- `tools`, then bind it to `providerToolName`; the public name remains the
463
- permission boundary.
464
-
465
- ### Typed tool calls
466
-
467
- `useTool` accepts generic argument and result types. Query the database at dev time to discover actual property shapes, then keep those types in the app:
468
-
469
- ```tsx
470
- type QueryTasksArgs = { database_id?: string; database_slug?: string; query: { page_size?: number } };
471
- interface TaskDoc {
472
- title: string;
473
- properties: {
474
- Status: string;
475
- Priority: string;
476
- Due: string;
477
- };
478
- };
479
- type QueryTasksResult = { documents: TaskDoc[] };
480
-
481
- const queryTasks = useTool<QueryTasksArgs, QueryTasksResult>('LOCAL_NOTIS_DATABASE_QUERY');
482
- const result = await queryTasks.call({ database_id: 'tasks-db-id', query: { page_size: 25 } });
483
- // result.documents[0].properties.Status is typed as string
484
- ```
485
-
486
- ## Testing
487
-
488
- Build and automated stub verification precede release. `verify` and `screenshot` start temporary,
489
- explicit test servers only: no folder discovery, watchers, Desktop registration, persistent roots,
490
- consumer leases or Workspace mounting. They close server/browser resources at completion or interruption.
491
- Build also enforces the design bar and refreshes the app's embedded SDK copy. Automated verification
492
- checks every route at desktop (1280px) and phone (390px) widths, including nested boxes, text below
493
- 12px, lingering loading placeholders and horizontal overflow. Standalone verification writes a
494
- local diagnostic report; deploy always verifies its own frozen snapshot, with no stamp or environment bypass.
495
- After release, verify live runtime integration and open the installed bundle in Portal. Source edits
496
- and Desktop restarts cannot change the running version.
497
-
498
- ### Screenshots
499
-
500
- `apps screenshot` supports declared screenshot scenarios and stub fixtures. A scenario can set
501
- `theme: 'dark'`; use `--raw` for uncomposited captures. Store screenshots and listing readiness
502
- are required only for Publish to Store, never for Update app.
503
-
504
- ### Headless harness verification
505
-
506
- Run `npx --package @notis_ai/cli@latest -- notis apps verify` after `npx --package @notis_ai/cli@latest -- notis apps build`. Use `--mode live` after deploy to exercise the real `/portal_views/runtime_query` with the CLI JWT instead of stub data; live mode also fails a route whose runtime calls all errored, which a well-behaved error state would otherwise hide. In a hosted sandbox, put `agent-browser` on the verification process's `PATH` with the combined-package command above. `--no-browser` only prints URLs for manual triage and does not satisfy the automated deployment gate.
507
-
508
- #### What the harness catches that `npx --package @notis_ai/cli@latest -- notis apps build` does not
509
-
510
- - Hooks that mount but throw on first read (`useTool` called with the wrong tool name or argument shape, accessing nested props that are undefined).
511
- - Runtime database queries whose slug is not declared by the app, and collection routes that never query their configured collection database. Declared databases may also support automations or agent workflows, so ordinary routes do not need to query every app database.
512
- - Tool names referenced by hooks but missing from `notis.config.ts -> tools`.
513
- - Suspense / async boundaries that never resolve because a runtime stub returned the wrong shape.
514
- - Render-time exceptions that the portal would surface as the `View crashed` error boundary.
515
-
516
- #### What the harness does not catch
517
-
518
- - Bugs that only manifest with real backend data (auth-scoped filters, RLS, malformed prod records). For those, swap the stub runtime for a real one that posts to `/portal_views/runtime_query` with a JWT.
519
- - Pixel-level visual regressions beyond the automated design checks (the harness does flag nested boxes, sub-12px text, lingering loading placeholders, and horizontal overflow at 390px). For anything else, use `agent-browser screenshot` + a baseline compare.
520
- - Bugs that depend on the portal's shadow-DOM stylesheet wrapping. The harness mounts in light DOM, so global Tailwind/shadcn classes work normally; portal-specific theme tokens injected as inline styles are not present.
521
-
522
- ## Troubleshooting
523
-
524
- ### Common issues
525
-
526
- - **Deploy transport failure**: Run `notis doctor` and read back the exact app/version. Never blindly retry an unknown outcome or write directly to storage.
527
- - **App shows old code after deploy**: Bundle cache is stale. Hard refresh (Cmd+Shift+R) or clear site data in DevTools.
528
- - **App is missing from Workspace**: Inspect its exact installed version. Unreleased containers have no runnable routes. A successful release appears through ordinary refresh/navigation.
529
- - **`LOCAL_NOTIS_DATABASE_QUERY` returns empty documents**: Check that the database ID passed to the tool matches the intended database. Use `npx --package @notis_ai/cli@latest -- notis tools exec LOCAL_NOTIS_DATABASE_LIST_DATABASES --arguments '{}'` to verify the ID; use the database slug only as a fallback.
530
- - **Properties are `undefined`**: Keep app-local result types for `useTool<TArgs, TResult>` and guard optional nested properties when reading live data.
50
+ The CLI distributes this skill and its references from the canonical product
51
+ source. Do not maintain competing copies.