@cognite/cli 1.3.4-alpha.selfsigned → 1.4.0-alpha.sdk-gen

package/LICENSE.md

@@ -0,0 +1,6 @@
+Commercial Software Licence Agreement
+
+Copyright (c) Cognite AS 2026
+
+See Master Subscription and Professional Services Agreement for details:
+https://www.cognite.com/en/company/legal/master-subscription-services-agreement-2025

package/README.md

@@ -47,6 +47,18 @@ Browse available skills at [cognitedata/builder-skills](https://github.com/cogni
 - Node.js ≥ 20
 - React ≥ 18 (optional peer dependency — only needed for auth components)
 
+## Telemetry
+
+`@cognite/cli` collects anonymous usage data (commands run, success/failure, CLI and Node.js versions) to help improve the tool.
+
+To opt out:
+
+```bash
+export COGNITE_TELEMETRY_DISABLED=1
+```
+
+`DO_NOT_TRACK=1` is also honoured.
+
 ## Development
 
 ### Running tests

package/_templates/app/new/claude/mcp.json.ejs.t

@@ -0,0 +1,11 @@
+---
+to: '<%= useCurrentDir ? "" : ((directoryName || name) + "/") %>.mcp.json'
+---
+{
+  "mcpServers": {
+    "cognite-docs": {
+      "type": "http",
+      "url": "https://docs.cognite.com/mcp"
+    }
+  }
+}

package/_templates/app/new/config/vite.config.ts.ejs.t

@@ -3,17 +3,20 @@ to: '<%= useCurrentDir ? "" : ((directoryName || name) + "/") %>vite.config.ts'
 ---
 import path from 'node:path';
 
-import { fusionOpenPlugin, manifestCspPlugin } from '@cognite/app-sdk/vite';
+import {
+  fusionOpenPlugin,
+  manifestCspPlugin,
+  mkcertPlugin,
+} from '@cognite/app-sdk/vite';
 import tailwindcss from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
-import mkcert from 'vite-plugin-mkcert';
 
 export default defineConfig({
   base: './',
   // manifestCspPlugin() must stay first — its middleware sets the
   // Content-Security-Policy header before any HTML response is sent.
-  plugins: [manifestCspPlugin(), react(), mkcert(), fusionOpenPlugin(), tailwindcss()],
+  plugins: [manifestCspPlugin(), react(), mkcertPlugin(), fusionOpenPlugin(), tailwindcss()],
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src'),

package/_templates/app/new/config/vitest.config.ts.ejs.t

@@ -10,5 +10,10 @@ export default defineConfig({
     globals: true,
     environment: 'happy-dom',
     setupFiles: ['vitest.setup.ts'],
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html', 'lcov'],
+      exclude: ['node_modules/', 'dist/', 'vitest.setup.ts', '**/*.config.ts', '**/*.d.ts'],
+    },
   },
 });

package/_templates/app/new/cursor/mcp.json.ejs.t

@@ -0,0 +1,10 @@
+---
+to: '<%= useCurrentDir ? "" : ((directoryName || name) + "/") %>.cursor/mcp.json'
+---
+{
+  "mcpServers": {
+    "cognite-docs": {
+      "url": "https://docs.cognite.com/mcp"
+    }
+  }
+}

package/_templates/app/new/root/.npmrc.ejs.t

@@ -2,4 +2,4 @@
 to: '<%= useCurrentDir ? "" : ((directoryName || name) + "/") %>.npmrc'
 ---
 engine-strict=true
-min-release-age=2
+min-release-age=1

package/_templates/app/new/root/AGENTS.md.ejs.t

@@ -10,7 +10,6 @@ This app uses [github/spec-kit](https://github.com/github/spec-kit) for spec-dri
 
 - To start a new feature, run `/speckit.specify <description>` in Claude Code or Cursor. It generates a properly numbered feature directory and a spec to fill in. Then run `/speckit.clarify` → `/speckit.plan` → `/speckit.tasks` → `/speckit.implement`.
 - When user-visible behavior changes in an existing feature, update its `specs/<NNN>-<feature>/spec.md` before or alongside the code change.
-- When a feature touches Cognite Data Fusion data, the spec must document existing CDF views read from, new views needed, and spaces used.
 <% } else { -%>
 ## 0. Product Spec (SPEC.md)
 
@@ -22,11 +21,118 @@ This app uses [github/spec-kit](https://github.com/github/spec-kit) for spec-dri
 
 ---
 
-## 1. Dependency Injection
+## 1. CDF Data & Generated SDK
 
-Inject dependencies via React context (hooks/components) or factory-override pattern (plain functions). Never hard-code dependencies.
+Before writing any feature code that reads CDF data model instances, check whether a generated SDK exists:
 
-### React context
+```bash
+ls src/generated_sdks/
+```
+
+### If the SDK does not exist
+
+Stop. Do not write placeholder code or stub SDK calls. Tell the user:
+
+> To read data from your CDF data model, you'll need to generate a typed SDK first. Run this from the app root (where `app.json` lives):
+>
+> ```bash
+> npx @cognite/cli@<%= cliVersion %> apps sdk --interactive
+> ```
+>
+> The wizard will log you in via the browser, let you pick a data model, and write the generated files into `src/generated_sdks/`. Come back when it's done.
+
+Wait for the user to confirm generation is complete before continuing.
+
+### If the SDK exists
+
+Use `createSdk(client)` from `src/generated_sdks/<name>/index.ts` for all reads. Rules:
+
+- **Read the generated TypeScript types first** (`src/generated_sdks/<name>/*.generated.ts`) to understand what views, fields, and relations are available — the return types show exactly which fields exist on list vs detail queries, including relation fields
+- **Do not call `client.instances.list`, `client.instances.query`, or `client.instances.search` directly** — always go through the generated SDK for reads
+- The SDK is **read-only**: `queryX`, `getByIdX`, `searchX`, `countX`, `aggregateX` — no write operations
+- Relation fields appear only where the type exposes them: list/search results include direct relations as references; `getByIdX` additionally includes reverse relations and edges as connection objects (`{ items: [...], pageInfo: {...} }`)
+- For writes, use `client.instances.upsert` / `client.instances.delete` directly
+
+```ts
+import { createSdk } from '../generated_sdks/<name>';
+
+const sdk = createSdk(client); // no network call — instantiation is synchronous
+
+const result = await sdk.queryMyView({
+  filter: { status: { eq: 'active' } },
+  limit: 25,
+});
+// result.items[0].relatedView  ← direct relation fields resolve in the same call
+
+const detail = await sdk.getByIdMyView({ space: '...', externalId: '...' });
+// detail.reverseRelationField.items  ← reverse/edge relations only available here
+```
+
+---
+
+## 2. UI Components
+
+Always check `@cognite/aura/components` before reaching for a raw HTML element or custom CSS/Tailwind solution. If Aura has a component that covers the need, use it. Only fall back to custom solutions when Aura genuinely doesn't cover the use case.
+
+---
+
+## 3. Host integration (`@cognite/app-sdk`)
+
+The Fusion host exposes a `HostAppAPI` (imported as `HostAppAPI` from `@cognite/app-sdk`) via `connectToHostApp(...)`. Reach for it whenever the situation calls for it — don't hand-roll an equivalent or read browser globals directly.
+
+### Decision rule for any new piece of state
+
+Before adding `useState`, `useReducer`, or a store entry, ask: **"would a user expect this to survive a page reload, or to be restored when someone opens a shared link?"** If yes, it belongs in `syncInternalState` + `initialState`, **not** in plain React state.
+
+- **Yes, host-synced:** current page / active view / route, selected tab, active filters, selected resource id, search query, sort order, expanded rows, focused row, side-panel open/closed — anything that drives what the user sees.
+- **No, local-only:** in-flight form input before submit, hover/focus, transient toasts, animation state, optimistic UI mid-flight.
+
+When in doubt, host-synced is the safer default — over-syncing is cheap, under-syncing breaks reload and share.
+
+### API surface
+
+- **Host-synced UI state** → on startup, seed your state from the `initialState` string returned by `connectToHostApp`. On every change, call `api.syncInternalState(JSON.stringify(state))`. The host serializes this into the URL so reloads and shared links restore the same state. **Do not** hold state from the "host-synced" category above in plain `useState` / `useRef` / a local store.
+- **Navigating elsewhere in Fusion** (another app, a Fusion route) → `api.navigateInternal({ path, queryParams, hash })`. Never set `window.location` directly.
+- **Navigating to an external URL** → `api.navigateExternal({ url, openInNewTab })`. Only `https:` is allowed.
+- **Needing a CDF base URL or access token** for API requests → `api.getBaseUrl()` / `api.getAccessToken()`. Never hardcode the cluster URL.
+- **Needing the current CDF project name** → `api.getProject()`. Don't read it from config or URL params.
+- **Exposing the app's capabilities to a Fusion agent** → register a custom agent server with `api.registerAgentServer(handle)` and clean up on unmount with `api.unregisterAgentServer(uri)`.
+
+Get `api` once at app startup and surface it to the rest of the app via React context so view models can depend on it through the patterns below.
+
+### Round-trip example: host-synced state
+
+```typescript
+import { connectToHostApp, type HostAppAPI } from '@cognite/app-sdk';
+
+type AppState = { page: 'a' | 'b'; filters: string[] };
+const DEFAULT_STATE: AppState = { page: 'a', filters: [] };
+
+// On startup — seed from initialState, not from a hardcoded default.
+const { api, initialState } = await connectToHostApp({ applicationName: '<%= name %>' });
+const seeded: AppState = initialState ? (JSON.parse(initialState) as AppState) : DEFAULT_STATE;
+
+// On every change — push the new state to the host so the URL stays in sync.
+async function updateState(next: AppState, api: HostAppAPI) {
+  setState(next); // your local React/store setter
+  await api.syncInternalState(JSON.stringify(next));
+}
+```
+
+`initialState` is the JSON string the host extracted from the URL on this load — the host owns the URL plumbing, the app just reads/writes the string.
+
+---
+
+## 4. Dependency Injection
+
+**All non-stateless dependencies must be injected.** Never import and call a service, SDK client, or stateful module directly inside a component or hook — it makes the code untestable and tightly coupled.
+
+What to inject: SDK clients, API services, analytics, timers (`Date.now`, `setTimeout`), random generators, external stores.
+What not to inject: pure functions, constants, type utilities.
+
+Use **narrow interfaces** — depend only on the subset of a service you actually need.
+
+### React context (hooks and components)
 
 ```typescript
 const defaultDeps = { useDataSource, useAnalytics };
@@ -38,7 +144,7 @@ export function useMyHook() {
 }
 ```
 
-### Factory overrides
+### Factory overrides (plain functions)
 
 ```typescript
 type Deps = { serviceFactory: () => SomeService };
@@ -51,7 +157,7 @@ export const doWork = async (props: Props, overrides?: Partial<Deps>) => {
 
 ---
 
-## 2. Interface-Based Services
+## 5. Interface-Based Services
 
 Define an interface; implement with a class. Never reference the concrete class outside its own file.
 
@@ -68,7 +174,7 @@ export class ApiDataService implements DataService {
 
 ---
 
-## 3. ViewModel Pattern
+## 6. ViewModel Pattern
 
 Business logic lives in `use<Name>ViewModel`. Components only render.
 
@@ -89,9 +195,26 @@ export const TodoView = () => {
 };
 ```
 
+### Where state lives
+
+A ViewModel hook must **not** hold state with `useState` / `useReducer` directly. State lives in a shared storage layer — a context-backed hook (like `useTodoStorage` above), a store, or a `*StateProvider` rendered once near the root of the view tree. The ViewModel composes that storage with commands and derivations; it is itself stateless.
+
+This matters because each call to a `useState`-backed hook creates an **independent** piece of React state. Two components calling the same ViewModel hook would each get their own copy and never sync.
+
+> ⚠️ Anti-pattern: `useState` inside `useFooViewModel`, then two sibling components each call `useFooViewModel()`. Clicks update one copy; the other renders stale data.
+
+### How many times to call a ViewModel hook
+
+- **Backed by shared context / store** → multiple components may call the hook; they all observe the same value. This is the default for non-trivial views.
+- **Not backed by shared state** → call the hook **once** at the top of the view tree and pass values down as props. Never call it twice and expect them to stay in sync.
+
+### Host-synced state inside a ViewModel
+
+When a ViewModel exposes state that falls under §3's "host-synced" category, the **ViewModel** — not the view component — is responsible for seeding from `initialState` and pushing changes via `syncInternalState`. The state itself still lives in the shared storage layer described above; the ViewModel just owns the read/write contract with the host.
+
 ---
 
-## 4. Test-First Development
+## 7. Test-First Development
 
 Write tests before implementation for all non-trivial behavior changes.
 
@@ -187,21 +310,41 @@ Place reusable factories in `src/__mocks__/`. Use `.test` TLD for fake URLs (RFC
 
 ---
 
-## 5. TypeScript Rules
+## 8. TypeScript Rules
 
 - Never use `any`; prefer `unknown` or explicit strong types
-- Never use `as unknown as T`; for partial test doubles use `{ ...defaults, ...overrides } as T`
+- Never use `as` casts — they silence the compiler without providing safety. Use type guards instead.
+- Exception: `Partial<T> as T` is acceptable for test mocks only.
+- All function parameters must have type annotations.
 - Use direct React type imports: `import type { ComponentType, ReactNode } from 'react'`
 
 ```typescript
-function createMockWindow(overrides: Partial<Window> = {}): Window {
-  return { postMessage: vi.fn(), ...overrides } as Window;
+// ❌ Never
+const x: any = data;
+const y = data as SomeType;
+const z = {} as unknown as Window;
+function process(data) { ... }         // missing parameter type
+
+// ✅ Type guard
+function isSomeType(value: unknown): value is SomeType {
+  return typeof value === 'object' && value !== null && 'id' in value;
 }
+if (isSomeType(data)) { /* TypeScript now knows */ }
+
+// ✅ Test mock only
+const mock = { postMessage: vi.fn() } as Partial<Window> as Window;
 ```
 
 ---
 
-## 6. Commits and pull requests
+## 9. CogniteClient / authentication
+
+Auth is handled by `CogniteSdkProvider` from `@cognite/app-sdk/react` (see `App.tsx`). Nested components get the client via `useCogniteSdk()`. To wire up or migrate auth, run the `/setup-flows-auth` skill.
+
+---
+
+
+## 10. Commits and pull requests
 
 Use [Conventional Commits v1.0.0](https://www.conventionalcommits.org/en/v1.0.0/).
 
@@ -212,4 +355,4 @@ Use [Conventional Commits v1.0.0](https://www.conventionalcommits.org/en/v1.0.0/
 - **Pull requests:** title and **Summary** should match the same vocabulary; do not replace conventional commits with only a PR headline.
 - Before committing: review **`git status`** and **`git diff`** (including staged); unstage and commit separately if the index mixes unrelated concerns.
 
----
+---

package/_templates/app/new/root/SPEC.md.ejs.t

@@ -51,27 +51,29 @@ to: '<%= useSpecKit ? null : (useCurrentDir ? "" : ((directoryName || name) + "/
 
 ---
 
-## Data Models & CDF Integration *(mandatory)*
+## CDF Data *(mandatory)*
 
 <!--
-  Capture how this app integrates with Cognite Data Fusion data models.
-  Every Flows app should fill this in.
--->
+  Which data model does this app connect to? If you haven't already, generate a
+  typed SDK by running from the app root:
 
-### Existing views
+    npx @cognite/cli@<%= cliVersion %> apps sdk --interactive
 
-<!--
-  CDF views this app reads from. Format: `<space>.<view>:<version>`.
+  Once generated, src/generated_sdks/<name>/schema.graphql is the source of truth
+  for what views, fields, and relations are available.
+
+  Describe below what data this feature reads and why — in plain terms, not view IDs.
+  Example: "Reads active work orders and their assigned assets."
 -->
 
-### New views
+### Data model
 
-<!--
-  Views this app needs that don't yet exist. Describe properties and relationships.
--->
+<!-- Which data model: name, space, version. -->
 
-### Spaces
+### What this app reads
 
-<!--
-  CDF spaces this app uses, and what each contains.
--->
+<!-- Plain-language description of the data this feature needs and any key filters. -->
+
+### Writes
+
+<!-- Does this feature write back to CDF? If so, what and under what conditions? If read-only, note that here. -->

package/_templates/app/new/root/gitignore.ejs.t

@@ -6,6 +6,13 @@ node_modules
 
 # Build output
 dist
+coverage
+
+# Retained app bundles from `cognite apps deploy` (signed before publish)
+.cognite-bundles
+
+# Local HTTPS certificates from `cognite apps setup-https`
+certificates
 
 # Environment variables
 .env

package/_templates/app/new/root/package.json.ejs.t

@@ -18,18 +18,23 @@ to: '<%= useCurrentDir ? "" : ((directoryName || name) + "/") %>package.json'
     "test": "vitest run",
     "test:watch": "vitest",
     "test:ui": "vitest --ui",
+    "test:coverage": "vitest run --coverage",
     "lint": "eslint . --ext .js,.mjs,.cjs,.ts,.tsx",
     "lint:fix": "eslint . --fix --ext .js,.mjs,.cjs,.ts,.tsx",
     "deploy": "npx @cognite/cli@latest apps deploy --interactive",
-    "activate": "npx @cognite/cli@latest apps activate --interactive"
+    "activate": "npx @cognite/cli@latest apps activate --interactive",
+    "setup-https": "npx @cognite/cli@latest apps setup-https"
   },
   "dependencies": {
     "@cognite/aura": "^0.1.7",
     "@cognite/sdk": "^10.3.0",
-    "@cognite/app-sdk": "^0.4.0",
+    "@cognite/cli": "<%= cliVersion %>",
+    "@cognite/app-sdk": "^0.5.1",
     "@tabler/icons-react": "^3.35.0",
     "@tanstack/react-query": "^5.90.10",
     "clsx": "^2.1.1",
+    "graphql": "^16.14.0",
+    "graphql-tag": "^2.12.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tailwind-merge": "^3.4.0"
@@ -44,6 +49,7 @@ to: '<%= useCurrentDir ? "" : ((directoryName || name) + "/") %>package.json'
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^5.1.1",
+    "@vitest/coverage-v8": "^2.1.8",
     "@vitest/ui": "^2.1.8",
     "autoprefixer": "^10.4.22",
     "eslint": "9.39.4",
@@ -58,7 +64,6 @@ to: '<%= useCurrentDir ? "" : ((directoryName || name) + "/") %>package.json'
     "typescript": "^5.0.0",
     "typescript-eslint": "^8.46.4",
     "vite": "7.3.2",
-    "vite-plugin-mkcert": "^1.17.9",
     "vitest": "^2.1.8"
   }
 }

package/_templates/app/new/src/App.test.tsx.ejs.t

@@ -1,13 +1,45 @@
 ---
 to: '<%= useCurrentDir ? "" : ((directoryName || name) + "/") %>src/App.test.tsx'
 ---
-import * as appSdk from '@cognite/app-sdk';
 import { render, screen, waitFor } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
+import type { HostAppAPI, ConnectToHostAppResult } from '@cognite/app-sdk';
+import { CogniteClient } from '@cognite/sdk';
+import type { ComponentProps } from 'react';
 
 import App from './App';
 
-vi.mock(import('@cognite/app-sdk'));
+type AppDeps = NonNullable<ComponentProps<typeof App>['deps']>;
+
+function makeApi(): HostAppAPI {
+  return {
+    getProject: vi.fn<HostAppAPI['getProject']>(() => Promise.resolve('<%= project %>')),
+    getBaseUrl: vi.fn<HostAppAPI['getBaseUrl']>(() => Promise.resolve('https://cognite.test')),
+    getAccessToken: vi.fn<HostAppAPI['getAccessToken']>(() => Promise.resolve('test-token')),
+    getAppId: vi.fn<HostAppAPI['getAppId']>(() => Promise.resolve('test-app-id')),
+    syncInternalState: vi.fn<HostAppAPI['syncInternalState']>(() => Promise.resolve(true)),
+    navigateInternal: vi.fn<HostAppAPI['navigateInternal']>(() => Promise.resolve(true)),
+    navigateExternal: vi.fn<HostAppAPI['navigateExternal']>(() => Promise.resolve(true)),
+    registerAgentServer: vi.fn<HostAppAPI['registerAgentServer']>(() => Promise.resolve()),
+    unregisterAgentServer: vi.fn<HostAppAPI['unregisterAgentServer']>(() => Promise.resolve()),
+    sendAgentLayoutMode: vi.fn<HostAppAPI['sendAgentLayoutMode']>(() => Promise.resolve()),
+    sendAgentMessage: vi.fn<HostAppAPI['sendAgentMessage']>(() => Promise.resolve()),
+  };
+}
+
+function makeLoadingDeps(): AppDeps {
+  return {
+    connectToHostApp: vi.fn<AppDeps['connectToHostApp']>(() => new Promise<ConnectToHostAppResult>(() => undefined)),
+    createClient: vi.fn<AppDeps['createClient']>((config) => new CogniteClient(config)),
+  };
+}
+
+function makeConnectedDeps(): AppDeps {
+  return {
+    connectToHostApp: vi.fn<AppDeps['connectToHostApp']>(() => Promise.resolve({ api: makeApi() })),
+    createClient: vi.fn<AppDeps['createClient']>((config) => new CogniteClient(config)),
+  };
+}
 
 describe('App', () => {
   beforeEach(() => {
@@ -15,19 +47,13 @@ describe('App', () => {
   });
 
   it('renders loading state', () => {
-    vi.mocked(appSdk.connectToHostApp).mockReturnValue(new Promise(() => {}));
-
-    render(<App />);
+    render(<App deps={makeLoadingDeps()} />);
     expect(screen.getByText('Loading project...')).toBeInTheDocument();
   });
 
   it('renders splash with deployment targets and checklist copy', async () => {
-    vi.mocked(appSdk.connectToHostApp).mockResolvedValue({
-      api: { getProject: vi.fn().mockResolvedValue('my-test-project') } as Partial<appSdk.HostAppAPI> as appSdk.HostAppAPI,
-    });
-
-    render(<App />);
-    await waitFor(() => expect(screen.getByText('Welcome to Flows')).toBeInTheDocument());
+    render(<App deps={makeConnectedDeps()} />);
+    await waitFor(() => expect(screen.getByText('Welcome to Flows custom apps')).toBeInTheDocument());
     expect(screen.getByText('App deployment checklist')).toBeInTheDocument();
     expect(screen.getByText('Plan')).toBeInTheDocument();
     expect(screen.getByText('Explore')).toBeInTheDocument();

package/_templates/app/new/src/App.tsx.ejs.t

@@ -1,7 +1,8 @@
 ---
 to: '<%= useCurrentDir ? "" : ((directoryName || name) + "/") %>src/App.tsx'
 ---
-import { connectToHostApp } from '@cognite/app-sdk';
+import type { ComponentProps } from 'react';
+import { CogniteSdkProvider, useCogniteSdk } from '@cognite/app-sdk/react';
 import {
   Alert,
   AlertDescription,
@@ -18,7 +19,6 @@ import {
   Separator,
 } from '@cognite/aura/components';
 import { IconCaretUpDown, IconRocket } from '@tabler/icons-react';
-import { useEffect, useState } from 'react';
 
 import appConfig from '../app.json';
 
@@ -62,71 +62,41 @@ const CHECKLIST_STEPS = [
   },
 ] as const;
 
-function App() {
-  // Connect to the Fusion host via @cognite/app-sdk. The handshake is
-  // asynchronous — `project` is only populated after Comlink finishes
-  // exposing the host API, so we render a loader until then.
-  const [project, setProject] = useState<string | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | undefined>();
-
-  useEffect(() => {
-    let cancelled = false;
-    connectToHostApp({ applicationName: '<%= name %>' })
-      .then(async ({ api }) => {
-        if (cancelled) return;
-        const proj = await api.getProject();
-        if (cancelled) return;
-        setProject(proj);
-      })
-      .catch((err: unknown) => {
-        if (cancelled) return;
-        setError(err instanceof Error ? err.message : String(err));
-      })
-      .finally(() => {
-        if (!cancelled) setIsLoading(false);
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-
-  if (isLoading) {
-    return (
-      <main className="min-h-screen bg-muted/50 text-foreground">
-        <section className="mx-auto flex min-h-screen w-full max-w-lg flex-col justify-center p-4 sm:p-8">
-          <div className="mx-auto w-full max-w-sm">
-            <Card aria-label="Loading project" aria-live="polite">
-              <CardContent>
-                <div className="inline-flex items-center gap-3 text-muted-foreground">
-                  <Loader size={20} />
-                  <span>Loading project...</span>
-                </div>
-              </CardContent>
-            </Card>
-          </div>
-        </section>
-      </main>
-    );
-  }
-
-  if (error) {
-    return (
-      <main className="min-h-screen bg-muted/50 text-foreground">
-        <section className="mx-auto flex min-h-screen w-full max-w-lg flex-col justify-center p-4 sm:p-8">
-          <div className="mx-auto w-full max-w-sm">
-            <Alert>
-              <AlertDescription>Failed to connect to Fusion host: {error}</AlertDescription>
-            </Alert>
-          </div>
-        </section>
-      </main>
-    );
-  }
+const loadingFallback = (
+  <main className="min-h-screen bg-muted/50 text-foreground">
+    <section className="mx-auto flex min-h-screen w-full max-w-lg flex-col justify-center p-4 sm:p-8">
+      <div className="mx-auto w-full max-w-sm">
+        <Card aria-label="Loading project" aria-live="polite">
+          <CardContent>
+            <div className="inline-flex items-center gap-3 text-muted-foreground">
+              <Loader size={20} />
+              <span>Loading project...</span>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </section>
+  </main>
+);
+
+const errorFallback = (
+  <main className="min-h-screen bg-muted/50 text-foreground">
+    <section className="mx-auto flex min-h-screen w-full max-w-lg flex-col justify-center p-4 sm:p-8">
+      <div className="mx-auto w-full max-w-sm">
+        <Alert>
+          <AlertDescription>Failed to connect to Fusion host</AlertDescription>
+        </Alert>
+      </div>
+    </section>
+  </main>
+);
+
+function AppContent() {
+  const client = useCogniteSdk();
 
   const deployment = appConfig.deployments?.[0];
   const orgLabel = deployment?.org ?? '';
-  const projectLabel = deployment?.project ?? project ?? '';
+  const projectLabel = deployment?.project ?? client.project ?? '';
 
   return (
     <main className="min-h-screen bg-muted/50 text-foreground">
@@ -230,4 +200,16 @@ function App() {
   );
 }
 
+type AppProps = {
+  deps?: ComponentProps<typeof CogniteSdkProvider>['deps'];
+};
+
+function App({ deps }: AppProps) {
+  return (
+    <CogniteSdkProvider loadingFallback={loadingFallback} errorFallback={errorFallback} deps={deps}>
+      <AppContent />
+    </CogniteSdkProvider>
+  );
+}
+
 export default App;

package/_templates/app/new/vscode/mcp.json.ejs.t

@@ -0,0 +1,11 @@
+---
+to: '<%= useCurrentDir ? "" : ((directoryName || name) + "/") %>.vscode/mcp.json'
+---
+{
+  "servers": {
+    "cognite-docs": {
+      "type": "http",
+      "url": "https://docs.cognite.com/mcp"
+    }
+  }
+}

package/dist/chunk-EI7MMDWY.js

@@ -0,0 +1 @@
+var c=Object.defineProperty;var d=(a,b)=>c(a,"name",{value:b,configurable:!0});export{d as a};