@cognite/dune 0.4.0 → 0.4.2

package/README.md

@@ -0,0 +1,68 @@
+# @cognite/dune
+
+Build and deploy React apps to [Cognite Data Fusion](https://docs.cognite.com/).
+
+## Quick start
+
+Scaffold a new app — AI skills are pulled automatically:
+
+```bash
+npx @cognite/dune create
+```
+
+This prompts for your app name, org, project, and cluster, then generates a fully configured React + TypeScript project.
+
+## Authentication
+
+Wrap your app in `DuneAuthProvider` to get an authenticated `CogniteClient` from Fusion's iframe handshake:
+
+```tsx
+import { DuneAuthProvider, useDune } from '@cognite/dune/auth';
+
+function App() {
+  const { sdk, isLoading } = useDune();
+  if (isLoading) return <div>Loading...</div>;
+  return <MyApp sdk={sdk} />;
+}
+
+export default function Root() {
+  return (
+    <DuneAuthProvider>
+      <App />
+    </DuneAuthProvider>
+  );
+}
+```
+
+For apps running inside the new Fusion app host, use `AppSdkAuthProvider` instead — it authenticates via the `@cognite/app-sdk` Comlink handshake.
+
+## Deployment
+
+Deploy interactively via browser OAuth:
+
+```bash
+npx @cognite/dune deploy:interactive
+```
+
+For CI, set your client secret as an environment variable and run:
+
+```bash
+pnpm deploy
+```
+
+Deployment targets are configured in `app.json` at the project root.
+
+## AI skills
+
+Skills guide your AI agent (Claude Code, Cursor, etc.) through Dune-specific tasks like adding auth, building chat UIs, or reviewing code. They are pulled automatically on `npx @cognite/dune create` and can be synced later:
+
+```bash
+npx @cognite/dune skills pull
+```
+
+Browse available skills at [cognitedata/dune-skills](https://github.com/cognitedata/dune-skills).
+
+## Requirements
+
+- Node.js ≥ 18
+- React ≥ 18 (optional peer dependency — only needed for auth components)

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

@@ -23,7 +23,10 @@ to: '<%= useCurrentDir ? "" : ((directoryName || name) + "/") %>package.json'
   "dependencies": {
     "@cognite/aura": "^0.1.5",
     "@cognite/sdk": "^10.3.0",
-    "@cognite/dune": "^0.3.7",
+    "@cognite/dune": "^0.4.2",
+<% if (infra === 'appsApi') { -%>
+    "@cognite/app-sdk": "^0.3.0",
+<% } -%>
     "@tabler/icons-react": "^3.35.0",
     "@tanstack/react-query": "^5.90.10",
     "clsx": "^2.1.1",

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

@@ -16,7 +16,12 @@ import {
   Loader,
   Separator,
 } from '@cognite/aura/components';
+<% if (infra === 'appsApi') { -%>
+import { connectToHostApp } from '@cognite/app-sdk';
+import { useEffect, useState } from 'react';
+<% } else { -%>
 import { useDune } from '@cognite/dune';
+<% } -%>
 import { IconCaretUpDown, IconRocket } from '@tabler/icons-react';
 
 import appConfig from '../app.json';
@@ -61,44 +66,94 @@ const CHECKLIST_STEPS = [
 ] as const;
 
 function App() {
+<% if (infra === 'appsApi') { -%>
+  // 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;
+    };
+  }, []);
+<% } else { -%>
   const { sdk, isLoading, error } = useDune();
+<% } -%>
+
+  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 (infra === 'appsApi') { -%>
   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 variant="destructive" aria-label="Authentication error" aria-live="assertive">
-              <AlertDescription>{error}</AlertDescription>
+            <Alert>
+              <AlertDescription>Failed to connect to Fusion host: {error}</AlertDescription>
             </Alert>
           </div>
         </section>
       </main>
     );
   }
-
-  if (isLoading) {
+<% } else { -%>
+  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">
-            <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>
+            <Alert>
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
           </div>
         </section>
       </main>
     );
   }
+<% } -%>
 
   const deployment = appConfig.deployments?.[0];
   const orgLabel = deployment?.org ?? '';
+<% if (infra === 'appsApi') { -%>
+  const projectLabel = deployment?.project ?? project ?? '';
+<% } else { -%>
   const projectLabel = deployment?.project ?? sdk.project;
+<% } -%>
 
   return (
     <main className="min-h-screen bg-muted/50 text-foreground">

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

@@ -1,9 +1,7 @@
 ---
 to: '<%= useCurrentDir ? "" : ((directoryName || name) + "/") %>src/main.tsx'
 ---
-<% if (infra === 'appsApi') { -%>
-import { AppSdkAuthProvider } from '@cognite/dune';
-<% } else { -%>
+<% if (infra !== 'appsApi') { -%>
 import { DuneAuthProvider } from '@cognite/dune';
 <% } -%>
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
@@ -27,9 +25,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
 <% if (infra === 'appsApi') { -%>
-      <AppSdkAuthProvider>
-        <App />
-      </AppSdkAuthProvider>
+      <App />
 <% } else { -%>
       <DuneAuthProvider>
         <App />

package/dist/cli/cli.js

@@ -58,6 +58,6 @@ function registerSkillsCommand(parent) {
 
 // cli/cli.ts
 var program = new Command();
-program.name("dune").description("Build and deploy React apps to Cognite Data Fusion").version("0.4.0");
+program.name("dune").description("Build and deploy React apps to Cognite Data Fusion").version("0.4.2");
 registerSkillsCommand(program);
 program.parse();

package/package.json

@@ -1,16 +1,7 @@
 {
   "name": "@cognite/dune",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "Build and deploy React apps to Cognite Data Fusion",
-  "keywords": [
-    "cognite",
-    "dune",
-    "cdf",
-    "fusion",
-    "react",
-    "scaffold",
-    "deploy"
-  ],
   "license": "Apache-2.0",
   "author": "Cognite",
   "repository": {