@cognite/dune 0.1.2 → 0.2.0

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

@@ -0,0 +1,15 @@
+---
+to: <%= name %>/.cursor/mcp.json
+---
+{
+  "mcpServers": {
+    "shadcn": {
+      "command": "npx",
+      "args": ["shadcn@latest", "mcp"]
+    },
+    "cdf-datamodeling-mcp": {
+      "command": "npx cdf-datamodelling-mcp-server"
+    }
+  }
+}
+

package/_templates/app/new/cursor/rules.mdc.ejs.t

@@ -0,0 +1,12 @@
+---
+to: <%= name %>/.cursor/rules.mdc
+---
+---
+description: Describes global rules
+alwaysApply: true
+---
+
+- Use @aura shadcn components as much as possible. Stick with the style guide provided.
+- Look at the PRD.md file at the root for requirements. If the file is empty, write some yourself as the first thing, and confirm with the user the requirements.
+- The PRD.md file should contain the following: 1.1 Purpose, 1.2 Scope, 1.3 Target Audience, 2. Functional Requirements, 3. Non-Functional Requirements, 4. Data Models & Integration, 4.1 CDF Data Model, 4.1.1 Existing views, 4.1.2 New views, 4.1.3 Spaces, 5. User Stories
+

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

@@ -0,0 +1,5 @@
+---
+to: <%= name %>/PRD.md
+---
+
+Add your product requirements here, or ask AI to collaborate on this file with you.

package/_templates/app/new/{package.json.ejs.t → root/package.json.ejs.t}

@@ -15,17 +15,22 @@ to: <%= name %>/package.json
     "test:watch": "vitest",
     "test:ui": "vitest --ui",
     "lint": "biome check .",
-    "lint:fix": "biome check --write ."
+    "lint:fix": "biome check --write .",
+    "deploy": "pnpm run build && echo 'Deploying...' && echo 'Deployed!'",
+    "deploy-preview": "pnpm run build && echo 'Deploying preview...' && echo 'Deployed preview!'"
   },
   "dependencies": {
     "@cognite/sdk": "^10.3.0",
     "@cognite/dune": "^0.1.2",
     "@tanstack/react-query": "^5.90.10",
+    "clsx": "^2.1.1",
     "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "react-dom": "^19.2.0",
+    "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
+    "@tailwindcss/vite": "^4.1.17",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
@@ -34,7 +39,11 @@ to: <%= name %>/package.json
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.1",
     "@vitest/ui": "^2.1.8",
+    "autoprefixer": "^10.4.22",
     "happy-dom": "^20.0.2",
+    "postcss": "^8.5.6",
+    "shadcn": "^3.5.2",
+    "tailwindcss": "^4.1.17",
     "typescript": "^5.0.0",
     "vite": "^7.2.4",
     "vite-plugin-mkcert": "^1.17.9",

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

@@ -1,7 +1,7 @@
 ---
 to: <%= name %>/src/App.test.tsx
 ---
-import * as dune from "@cognite/dune";
+import * as duneAuth from "@cognite/dune";
 import { render, screen } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import App from "./App";
@@ -15,7 +15,7 @@ describe("App", () => {
   });
 
   it("renders loading state", () => {
-    vi.mocked(dune.useDune).mockReturnValue({
+    vi.mocked(duneAuth.useDune).mockReturnValue({
       sdk: { project: "test-project" } as any,
       isLoading: true,
     });
@@ -25,14 +25,14 @@ describe("App", () => {
   });
 
   it("renders app with project name", () => {
-    vi.mocked(dune.useDune).mockReturnValue({
+    vi.mocked(duneAuth.useDune).mockReturnValue({
       sdk: { project: "my-test-project" } as any,
       isLoading: false,
     });
 
     render(<App />);
-    expect(screen.getByText("<%= displayName %>")).toBeInTheDocument();
-    expect(screen.getByText("Project: my-test-project")).toBeInTheDocument();
+    expect(screen.getByText("Welcome to my-test-project")).toBeInTheDocument();
+    expect(screen.getByText("Your Dune app is ready.")).toBeInTheDocument();
   });
 });
 

package/_templates/app/new/{App.tsx.ejs.t → src/App.tsx.ejs.t}

@@ -5,7 +5,6 @@ import { useDune } from "@cognite/dune";
 
 function App() {
   const { sdk, isLoading } = useDune();
-  const project = sdk.project;
 
   if (isLoading) {
     return <div>Loading...</div>;
@@ -13,8 +12,8 @@ function App() {
 
   return (
     <div>
-      <h1><%= displayName %></h1>
-      <p>Project: {project}</p>
+      <h1>Welcome to {sdk.project}</h1>
+      <p>Your Dune app is ready.</p>
     </div>
   );
 }

package/_templates/app/new/src/lib/utils.ts.ejs.t

@@ -0,0 +1,10 @@
+---
+to: <%= name %>/src/lib/utils.ts
+---
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+

package/_templates/app/new/{main.tsx.ejs.t → src/main.tsx.ejs.t}

@@ -7,6 +7,8 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
 
+import "./styles.css";
+
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {

package/_templates/app/new/src/styles.css.ejs.t

@@ -0,0 +1,25 @@
+---
+to: <%= name %>/src/styles.css
+---
+@import "tailwindcss";
+
+body {
+  font-family: system-ui, -apple-system, sans-serif;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
+}
+
+h1 {
+  font-size: 2rem;
+  font-weight: 600;
+  color: #1a1a2e;
+  margin-bottom: 0.5rem;
+}
+
+p {
+  color: #6b7280;
+}
+

package/bin/auth/authentication-flow.js

@@ -0,0 +1,89 @@
+/**
+ * Authentication Flow
+ *
+ * Orchestrates the complete OAuth 2.0 authentication flow with PKCE.
+ */
+
+import open from "open";
+import { CryptoUtils } from "../utils/crypto.js";
+import { CallbackServer } from "./callback-server.js";
+import { CertificateManager } from "./certificate-manager.js";
+import { OAuthClient } from "./oauth-client.js";
+
+export class AuthenticationFlow {
+  /**
+   * @param {Object} config - Authentication configuration
+   */
+  constructor(config) {
+    this.config = config;
+    this.oauthClient = new OAuthClient(config);
+    this.certManager = new CertificateManager(config.certDir);
+  }
+
+  /**
+   * Validate client configuration
+   * @throws {Error} If configuration is invalid
+   */
+  validateConfig() {
+    if (this.config.clientId === "your-client-id" || !this.config.clientId) {
+      throw new Error(
+        "Please set the CDF_CLIENT_ID environment variable\n" +
+          "  Example: export CDF_CLIENT_ID=<your-client-id>"
+      );
+    }
+  }
+
+  /**
+   * Execute complete OAuth login flow
+   * @param {string} [organization] - Optional organization hint
+   * @returns {Promise<Object>} Access tokens
+   */
+  async login(organization) {
+    console.log("🔐 Starting CDF login flow...\n");
+
+    this.validateConfig();
+
+    // Generate PKCE parameters (code verifier must be 43-128 chars per RFC 7636)
+    const codeVerifier = CryptoUtils.generateRandomString(64);
+    const codeChallenge = CryptoUtils.generateCodeChallenge(codeVerifier);
+    const state = CryptoUtils.generateRandomString(16);
+
+    // Get OpenID configuration
+    console.log(`📡 Fetching OpenID configuration from ${this.config.authority}...`);
+    const openIdConfig = await this.oauthClient.fetchOpenIdConfiguration();
+
+    // Build authorization URL
+    const authUrl = this.oauthClient.buildAuthorizationUrl(
+      openIdConfig.authorization_endpoint,
+      codeChallenge,
+      state,
+      organization
+    );
+
+    // Get SSL certificates
+    const sslOptions = this.certManager.getOrCreateCertificates();
+
+    // Start callback server
+    const callbackServer = new CallbackServer(this.config, sslOptions);
+
+    // Open browser
+    if (organization) {
+      console.log(`🏢 Organization: ${organization}`);
+    }
+    console.log("🚀 Opening browser for authentication...\n");
+
+    try {
+      await open(authUrl);
+    } catch (error) {
+      console.error("❌ Failed to open browser automatically.");
+      console.error("Please open this URL manually:\n");
+      console.error(authUrl);
+      console.error("");
+    }
+
+    // Wait for callback
+    const tokens = await callbackServer.start(state, codeVerifier, this.oauthClient);
+
+    return tokens;
+  }
+}

package/bin/auth/callback-server.js

@@ -0,0 +1,181 @@
+/**
+ * OAuth Callback Server
+ *
+ * HTTPS server that handles OAuth 2.0 authorization callbacks.
+ */
+
+import https from "node:https";
+import { parse } from "node:url";
+
+export class CallbackServer {
+  /**
+   * @param {Object} config - Server configuration
+   * @param {number} config.port - Port to listen on
+   * @param {number} config.loginTimeout - Timeout in milliseconds
+   * @param {Object} sslOptions - SSL certificate options
+   * @param {Buffer} sslOptions.key - SSL private key
+   * @param {Buffer} sslOptions.cert - SSL certificate
+   */
+  constructor(config, sslOptions) {
+    this.config = config;
+    this.sslOptions = sslOptions;
+    this.server = null;
+  }
+
+  /**
+   * Generate HTML response page
+   * @param {string} type - Response type (success, error, security)
+   * @param {string} title - Page title
+   * @param {string} message - Message to display
+   * @returns {string} HTML string
+   */
+  static generateHtml(type, title, message) {
+    const animation =
+      type === "success"
+        ? `
+      <style>
+        @keyframes checkmark {
+          0% { transform: scale(0); }
+          50% { transform: scale(1.2); }
+          100% { transform: scale(1); }
+        }
+        h1 { animation: checkmark 0.5s ease-out; }
+      </style>
+    `
+        : "";
+
+    return `
+      <html>
+        <body style="font-family: system-ui; padding: 40px; text-align: center;">
+          <h1>${title}</h1>
+          <p>${message}</p>
+          <p>You can close this window.</p>
+          ${animation}
+        </body>
+      </html>
+    `;
+  }
+
+  /**
+   * Handle OAuth callback request
+   * @param {Object} req - HTTP request
+   * @param {Object} res - HTTP response
+   * @param {string} expectedState - Expected CSRF state
+   * @param {string} codeVerifier - PKCE code verifier
+   * @param {Object} oauthClient - OAuth client instance
+   * @returns {Promise<{ shouldClose: boolean, tokens?: Object, error?: Error }>}
+   */
+  async handleCallback(req, res, expectedState, codeVerifier, oauthClient) {
+    const parsedUrl = parse(req.url, true);
+
+    if (parsedUrl.pathname !== "/") {
+      res.writeHead(404);
+      res.end("Not found");
+      return { shouldClose: false };
+    }
+
+    const { code, state: returnedState, error } = parsedUrl.query;
+
+    // Handle authentication error
+    if (error) {
+      res.writeHead(400, { "Content-Type": "text/html" });
+      res.end(CallbackServer.generateHtml("error", "Authentication Error", String(error)));
+      return {
+        shouldClose: true,
+        error: new Error(`Authentication error: ${error}`),
+      };
+    }
+
+    // Validate state to prevent CSRF
+    if (returnedState !== expectedState) {
+      res.writeHead(400, { "Content-Type": "text/html" });
+      res.end(
+        CallbackServer.generateHtml(
+          "security",
+          "Security Error",
+          "State mismatch. Possible CSRF attack."
+        )
+      );
+      return { shouldClose: true, error: new Error("State mismatch") };
+    }
+
+    // Exchange code for tokens
+    try {
+      console.log("🔄 Exchanging authorization code for tokens...");
+      const openIdConfig = await oauthClient.fetchOpenIdConfiguration();
+      const tokens = await oauthClient.exchangeCodeForTokens(
+        openIdConfig.token_endpoint,
+        code,
+        codeVerifier
+      );
+
+      res.writeHead(200, { "Content-Type": "text/html" });
+      res.end(
+        CallbackServer.generateHtml(
+          "success",
+          "Login Successful!",
+          "You can close this window and return to the terminal."
+        )
+      );
+
+      return { shouldClose: true, tokens };
+    } catch (err) {
+      res.writeHead(500, { "Content-Type": "text/html" });
+      res.end(CallbackServer.generateHtml("error", "Token Exchange Failed", err.message));
+      return { shouldClose: true, error: err };
+    }
+  }
+
+  /**
+   * Start HTTPS server and wait for OAuth callback
+   * @param {string} expectedState - Expected CSRF state
+   * @param {string} codeVerifier - PKCE code verifier
+   * @param {Object} oauthClient - OAuth client instance
+   * @returns {Promise<Object>} Access tokens
+   */
+  async start(expectedState, codeVerifier, oauthClient) {
+    return new Promise((resolve, reject) => {
+      this.server = https.createServer(this.sslOptions, async (req, res) => {
+        const result = await this.handleCallback(
+          req,
+          res,
+          expectedState,
+          codeVerifier,
+          oauthClient
+        );
+
+        if (result.shouldClose) {
+          this.server.close();
+          if (result.error) {
+            reject(result.error);
+          } else {
+            resolve(result.tokens);
+          }
+        }
+      });
+
+      // Handle server errors
+      this.server.on("error", (error) => {
+        if (error.code === "EADDRINUSE") {
+          console.error(
+            `❌ Port ${this.config.port} is already in use. Please close the other application.`
+          );
+        } else {
+          console.error(`❌ Server error: ${error.message}`);
+        }
+        reject(error);
+      });
+
+      // Start listening
+      this.server.listen(this.config.port, () => {
+        console.log(`🌐 Local HTTPS server started on https://localhost:${this.config.port}`);
+      });
+
+      // Setup timeout
+      setTimeout(() => {
+        this.server.close();
+        reject(new Error("Login timeout - no response received within 5 minutes"));
+      }, this.config.loginTimeout);
+    });
+  }
+}

package/bin/auth/certificate-manager.js

@@ -0,0 +1,81 @@
+/**
+ * SSL Certificate Management
+ *
+ * Handles generation and loading of self-signed SSL certificates
+ * for the local HTTPS OAuth callback server.
+ */
+
+import { execSync } from "node:child_process";
+import fs from "node:fs";
+import path from "node:path";
+
+export class CertificateManager {
+  /**
+   * @param {string} certDir - Directory to store certificates
+   */
+  constructor(certDir) {
+    this.certDir = certDir;
+    this.keyPath = path.join(certDir, "localhost-key.pem");
+    this.certPath = path.join(certDir, "localhost-cert.pem");
+  }
+
+  /**
+   * Check if valid certificates exist
+   * @returns {boolean} True if both key and certificate files exist
+   */
+  certificatesExist() {
+    return fs.existsSync(this.keyPath) && fs.existsSync(this.certPath);
+  }
+
+  /**
+   * Load existing certificates from disk
+   * @returns {{ key: Buffer, cert: Buffer }} SSL certificate pair
+   */
+  loadCertificates() {
+    return {
+      key: fs.readFileSync(this.keyPath),
+      cert: fs.readFileSync(this.certPath),
+    };
+  }
+
+  /**
+   * Generate new self-signed certificate using OpenSSL
+   * @returns {{ key: Buffer, cert: Buffer }} Newly generated certificate pair
+   * @throws {Error} If OpenSSL is not available or certificate generation fails
+   */
+  generateCertificate() {
+    console.log("🔐 Generating self-signed certificate for HTTPS...");
+
+    // Ensure directory exists
+    if (!fs.existsSync(this.certDir)) {
+      fs.mkdirSync(this.certDir, { recursive: true });
+    }
+
+    try {
+      const cmd = `openssl req -x509 -newkey rsa:2048 -nodes -sha256 -subj '/CN=localhost' -keyout "${this.keyPath}" -out "${this.certPath}" -days 365 2>/dev/null`;
+
+      execSync(cmd, { stdio: "pipe" });
+      console.log("✅ Certificate generated and saved to ~/.cdf-login/\n");
+
+      return this.loadCertificates();
+    } catch (error) {
+      throw new Error(
+        "Failed to generate self-signed certificate. Make sure openssl is installed.\n" +
+          "  On macOS: openssl is pre-installed\n" +
+          "  On Linux: sudo apt-get install openssl\n" +
+          "  On Windows: Install OpenSSL or use WSL"
+      );
+    }
+  }
+
+  /**
+   * Get existing certificates or generate new ones
+   * @returns {{ key: Buffer, cert: Buffer }} SSL certificate pair
+   */
+  getOrCreateCertificates() {
+    if (this.certificatesExist()) {
+      return this.loadCertificates();
+    }
+    return this.generateCertificate();
+  }
+}