@cognite/dune 0.4.0 → 0.4.1

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

@@ -24,6 +24,9 @@ to: '<%= useCurrentDir ? "" : ((directoryName || name) + "/") %>package.json'
     "@cognite/aura": "^0.1.5",
     "@cognite/sdk": "^10.3.0",
     "@cognite/dune": "^0.3.7",
+<% 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.1");
 registerSkillsCommand(program);
 program.parse();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cognite/dune",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Build and deploy React apps to Cognite Data Fusion",
   "keywords": [
     "cognite",