Add purple Drew app

apps/sarah-s-app-mon-aug-31-1-17-54-pm/.gitignore

@@ -0,0 +1,28 @@
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Environment variables
+.env
+.env.local
+.env.*.local

apps/sarah-s-app-mon-aug-31-1-17-54-pm/AGENTS.md

@@ -0,0 +1,44 @@
+# Sarah's App Mon, Aug 31, 1:17:54 pm
+
+This is a Datadog App scaffolded with `npm create @datadog/apps`.
+
+Datadog Apps are React + TypeScript applications bundled by Vite and embedded in the Datadog product experience. Frontend code runs in the browser. Backend functions live in `*.backend.*` files and execute through Datadog's managed runtime.
+
+## DRUIDS components
+
+This app uses the published `@datadog/druids` package. In scaffolded apps, import components from `@datadog/druids/[category]/[Component]`; do not import private web-ui paths like `@druids/ui/...`.
+
+- The scaffold already wraps the app in `DruidsEnvironment` and imports `@datadog/druids/styles.css` at the React root. Keep that setup in place if you restructure the root.
+- Discover available components by browsing the installed package. Treat the `exports` map in `node_modules/@datadog/druids/package.json` as the source of truth for public entry points, and explore the corresponding category directories under `node_modules/@datadog/druids/dist` instead of relying on a hard-coded component list.
+- After choosing an exported component, inspect its TypeScript definitions under `node_modules/@datadog/druids/dist/**/*.d.mts` before inventing props or imports. For icons, only use entry points that are present in the installed package.
+- Start with the [DRUIDS docs](https://druids.datadoghq.com/), especially [Foundations](https://druids.datadoghq.com/foundations), [Spacing & Layout](https://druids.datadoghq.com/foundations/spacing-and-layout), [Typography](https://druids.datadoghq.com/foundations/typography), and [Components](https://druids.datadoghq.com/components). The docs cover the full internal DRUIDS library; the public `@datadog/druids` package exposes only a subset for Datadog Apps.
+- Use the docs after confirming the local API to understand design intent, layout guidance, examples, and component selection tradeoffs.
+- Prefer appropriate DRUIDS layout and typography components over ad hoc HTML wrappers or inline CSS. Use component props and design tokens for spacing, size, and variants.
+
+## Read relevant guides
+
+- For embedded Datadog app context, routing, navigation, browser storage, or parent-page constraints, read `docs/agents/runtime-context.md`.
+- For writing backend functions in `*.backend.ts` or `*.backend.js` files, or for calling backend functions from frontend code, read `docs/agents/backend-functions.md`.
+- For local development, auth, deploy, publish, `DD_APPS_PUBLISH`, or deploy troubleshooting, read `docs/agents/build-upload-auth.md`.
+- For GitHub Actions CI/CD setup, read `docs/agents/cicd.md`.
+- For choosing between DDSQL and Action Catalog, configuring Connections, or querying app datastores, read `docs/agents/data.md`.
+- For triggering or polling a Workflow Automation workflow from a backend function, read `docs/agents/workflow-automation.md`.
+- For upgrading `@datadog/vite-plugin` or `@datadog/action-catalog`, read `docs/agents/upgrading.md`.
+
+## General rules
+
+- Route every external network request through a backend function that calls the generic HTTP action from `@datadog/action-catalog/http/http`. Never call `fetch` or use Node.js networking APIs to contact external services directly, including from a backend function.
+- Do not hardcode API keys, app keys, OAuth tokens, passwords, or third-party credentials.
+- Set the `name` and `description` fields in `datadog-app.config.json` to concise, user-facing values that describe the app.
+- Prefer the generated npm scripts in `package.json`; this scaffold uses npm.
+- Never change `id` in `datadog-app.config.json`. It is this app's permanent identity, not the app's UUID from App Builder — changing it makes the next upload create a duplicate app.
+- Before inventing package imports or component props, inspect installed package exports and TypeScript definitions.
+
+## Broader Datadog Apps guidance
+
+- For scaffolding a new app from scratch, use the Datadog Apps agent skill when it is available.
+- Use Playwright when available for browser validation, including screenshots for visual design changes.
+- Use the Datadog `pup` CLI (https://github.com/DataDog/pup) when available for Datadog API inspection and troubleshooting.
+- Use Datadog MCP tools when available for Datadog-specific lookup, diagnostics, or API-backed workflows.
+
+Primary docs: https://docs.datadoghq.com/actions/datadog_apps/

apps/sarah-s-app-mon-aug-31-1-17-54-pm/CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

apps/sarah-s-app-mon-aug-31-1-17-54-pm/datadog-app.config.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://unpkg.com/@datadog/create-apps/dist/datadog-app.config.schema.json",
+  "datadogSite": "datadoghq.com",
+  "id": "49cc0c41-c813-47db-baf6-92c38dc664be",
+  "name": "Sarah's App Mon, Aug 31, 1:17:54 pm",
+  "description": "A simple purple Drew app."
+}

apps/sarah-s-app-mon-aug-31-1-17-54-pm/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sarah's App Mon, Aug 31, 1:17:54 pm</title>
+</head>
+
+<body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>

apps/sarah-s-app-mon-aug-31-1-17-54-pm/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "sarah-s-app-mon-aug-31-1-17-54-pm",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "upload": "DD_APPS_UPLOAD_ASSETS=1 vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint:fix": "eslint . --fix",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@datadog/action-catalog": "^0.0.3",
+    "@datadog/druids": "^0.0.7",
+    "@tanstack/react-query": "^5.101.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "optionalDependencies": {
+    "@napi-rs/keyring": "^1.3.0"
+  }
+}

apps/sarah-s-app-mon-aug-31-1-17-54-pm/src/App.css

@@ -0,0 +1,22 @@
+.drew-app {
+    align-items: center;
+    background: #fbf7ff;
+    display: flex;
+    justify-content: center;
+    min-height: 100vh;
+}
+
+.drew-name {
+    color: #7c3aed;
+    font-size: 96px;
+    font-weight: 800;
+    letter-spacing: 0;
+    line-height: 1;
+    margin: 0;
+}
+
+@media (max-width: 600px) {
+    .drew-name {
+        font-size: 64px;
+    }
+}

apps/sarah-s-app-mon-aug-31-1-17-54-pm/src/App.tsx

@@ -0,0 +1,16 @@
+import { Spacing } from '@datadog/druids/layout/Spacing';
+import { Text } from '@datadog/druids/typography/Text';
+
+import './App.css';
+
+function App() {
+    return (
+        <Spacing as="main" className="drew-app" padding="lg">
+            <Text as="h1" className="drew-name">
+                drew
+            </Text>
+        </Spacing>
+    );
+}
+
+export default App;

apps/sarah-s-app-mon-aug-31-1-17-54-pm/src/main.tsx

@@ -0,0 +1,24 @@
+import '@datadog/druids/styles.css';
+
+import { DruidsEnvironment } from '@datadog/druids/layout/DruidsEnvironment';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import App from './App';
+
+const queryClient = new QueryClient();
+const appRoot = document.getElementById('app');
+if (appRoot) {
+    createRoot(appRoot).render(
+        <StrictMode>
+            <QueryClientProvider client={queryClient}>
+                <DruidsEnvironment backgroundColor="standard">
+                    <App />
+                </DruidsEnvironment>
+            </QueryClientProvider>
+        </StrictMode>,
+    );
+} else {
+    console.error('Missing #app div for createRoot.');
+}

apps/sarah-s-app-mon-aug-31-1-17-54-pm/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": [
+    "src"
+  ]
+}

apps/sarah-s-app-mon-aug-31-1-17-54-pm/vite.config.ts

@@ -0,0 +1,52 @@
+import { datadogVitePlugin } from '@datadog/vite-plugin';
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+import rootManifest from '../../package.json';
+import { version } from './package.json';
+import datadogAppConfig from './datadog-app.config.json';
+
+const hasDatadogApiKeys = Boolean(
+    (process.env.DD_API_KEY || process.env.DATADOG_API_KEY) &&
+        (process.env.DD_APP_KEY || process.env.DATADOG_APP_KEY),
+);
+
+export default defineConfig({
+    base: './',
+    build: {
+        sourcemap: true,
+    },
+    plugins: [
+        react(),
+        datadogVitePlugin({
+            logLevel: 'debug',
+            auth: {
+                site: process.env.DD_SITE || datadogAppConfig.datadogSite || rootManifest.datadogApps?.site,
+                apiKey: process.env.DD_API_KEY,
+                appKey: process.env.DD_APP_KEY,
+            },
+            apps: {
+                enable: true,
+                identifier: '49cc0c41-c813-47db-baf6-92c38dc664be',
+                name: datadogAppConfig.name,
+                authOverrides: {
+                    method: hasDatadogApiKeys ? 'apiKey' : 'oauth',
+                },
+            },
+            errorTracking: {
+                enable: hasDatadogApiKeys,
+                sourcemaps: {
+                    minifiedPathPrefix: '/',
+                    service: datadogAppConfig.name,
+                    releaseVersion: version,
+                },
+            },
+            metadata: {
+                name: datadogAppConfig.name,
+            },
+            metrics: {
+                enable: hasDatadogApiKeys,
+            },
+        }),
+    ],
+});