setnilson · setnilson · Aug 25, 2026 · Aug 25, 2026
diff --git a/apps/sarah-s-app-tue-aug-25-10-32-30-am/.gitignore b/apps/sarah-s-app-tue-aug-25-10-32-30-am/.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
diff --git a/apps/sarah-s-app-tue-aug-25-10-32-30-am/AGENTS.md b/apps/sarah-s-app-tue-aug-25-10-32-30-am/AGENTS.md
@@ -0,0 +1,28 @@
+# sarah-s-app-tue-aug-25-10-32-30-am
+
+This app is part of a Datadog Apps workspace. Shared guidance — including layout, dependencies, testing policy, and how changes ship — lives at the workspace root; read it before assuming anything not covered below.
+
+## Read relevant guides
+- Embedded app context / routing / storage: ../../docs/agents/runtime-context.md
+- Backend functions (*.backend.ts): ../../docs/agents/backend-functions.md
+- Local dev / auth / build / upload: ../../docs/agents/build-upload-auth.md
+- CI/CD (GitHub Actions deploy workflow): ../../docs/agents/cicd.md
+- Data access (DDSQL vs. Action Catalog, Connections, datastores): ../../docs/agents/data.md
+- Triggering or polling Workflow Automation from a backend function: ../../docs/agents/workflow-automation.md
+- Upgrading `@datadog/vite-plugin` or `@datadog/action-catalog`: ../../docs/agents/upgrading.md
+- Workspace overview (layout, dependencies, testing, shipping/CI): ../../AGENTS.md
+
+## This app
+- This app owns its unique `apps.identifier` in `./vite.config.ts` — never share or copy it.
+- Run locally: `npm run dev -w apps/sarah-s-app-tue-aug-25-10-32-30-am` (from the workspace root) or `npm run dev` (from this directory).
+- Upload: `npm run upload -w apps/sarah-s-app-tue-aug-25-10-32-30-am`.
+
+## Testing
+
+Storybook stories are not required for this app right now — skip them unless explicitly asked. Playwright is still encouraged for browser validation when available, especially for visual/design changes. Validate with `npm run dev`, `npm run build`, and `npm run typecheck`/`npm run lint`.
+
+## Rules
+- Keep secret-dependent work and privileged API calls in backend functions.
+- Never hardcode API keys, app keys, or OAuth tokens.
+- Prefer the generated npm scripts; this workspace uses npm.
+- For any workspace, dependency, lockfile, or pull-request change, follow `Required lockfile gate before opening or updating a PR` in ../../AGENTS.md. That root section is the source of truth; do not create an app-local lockfile.
diff --git a/apps/sarah-s-app-tue-aug-25-10-32-30-am/CLAUDE.md b/apps/sarah-s-app-tue-aug-25-10-32-30-am/CLAUDE.md
@@ -0,0 +1 @@
+@AGENTS.md
diff --git a/apps/sarah-s-app-tue-aug-25-10-32-30-am/datadog-app.config.json b/apps/sarah-s-app-tue-aug-25-10-32-30-am/datadog-app.config.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://unpkg.com/@datadog/create-apps/dist/datadog-app.config.schema.json",
+  "datadogSite": "datadoghq.com",
+  "id": "930c642c-eb62-4cbf-acf0-fd7496aef0f8",
+  "name": "Barak Rainbow"
+}
diff --git a/apps/sarah-s-app-tue-aug-25-10-32-30-am/index.html b/apps/sarah-s-app-tue-aug-25-10-32-30-am/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>Barak Rainbow</title>
+</head>
+
+<body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>
diff --git a/apps/sarah-s-app-tue-aug-25-10-32-30-am/package.json b/apps/sarah-s-app-tue-aug-25-10-32-30-am/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "sarah-s-app-tue-aug-25-10-32-30-am",
+  "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 . --ext ts,tsx --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"
+  }
+}
diff --git a/apps/sarah-s-app-tue-aug-25-10-32-30-am/public/favicon.ico b/apps/sarah-s-app-tue-aug-25-10-32-30-am/public/favicon.ico
diff --git a/apps/sarah-s-app-tue-aug-25-10-32-30-am/src/App.css b/apps/sarah-s-app-tue-aug-25-10-32-30-am/src/App.css
@@ -0,0 +1,143 @@
+.barak-app {
+    min-height: 100vh;
+    background:
+        radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.95), transparent 30%),
+        linear-gradient(135deg, #f7fbff 0%, #fff8f1 45%, #f5fff9 100%);
+}
+
+.barak-stage {
+    position: relative;
+    display: grid;
+    min-height: min(720px, calc(100vh - 48px));
+    overflow: hidden;
+    place-items: center;
+    border: 1px solid rgba(30, 41, 59, 0.12);
+    border-radius: 8px;
+    background:
+        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78)),
+        linear-gradient(120deg, rgba(240, 77, 94, 0.22), rgba(46, 196, 182, 0.18));
+    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.12);
+}
+
+.rainbow-sky {
+    position: absolute;
+    inset: clamp(24px, 6vw, 72px) 50% auto auto;
+    width: min(680px, 86vw);
+    aspect-ratio: 2 / 1;
+    transform: translateX(50%);
+}
+
+.rainbow-arc {
+    position: absolute;
+    inset: 0;
+    border: clamp(14px, 3vw, 30px) solid currentColor;
+    border-bottom: 0;
+    border-radius: 999px 999px 0 0;
+}
+
+.rainbow-arc-red {
+    color: #f04d5e;
+}
+
+.rainbow-arc-orange {
+    inset: 9% 9% 0;
+    color: #ff9f1c;
+}
+
+.rainbow-arc-yellow {
+    inset: 18% 18% 0;
+    color: #ffd166;
+}
+
+.rainbow-arc-green {
+    inset: 27% 27% 0;
+    color: #2ec4b6;
+}
+
+.rainbow-arc-blue {
+    inset: 36% 36% 0;
+    color: #2f80ed;
+}
+
+.rainbow-arc-violet {
+    inset: 45% 45% 0;
+    color: #8a5cf6;
+}
+
+.barak-copy {
+    position: relative;
+    z-index: 1;
+    width: min(760px, 100%);
+    margin-top: clamp(120px, 22vw, 220px);
+    text-align: center;
+}
+
+.eyebrow {
+    margin: 0 0 12px;
+    color: #4f46e5;
+    letter-spacing: 0;
+    text-transform: uppercase;
+}
+
+.barak-title {
+    margin: 0;
+    color: transparent;
+    font-size: 11rem;
+    font-weight: 900;
+    letter-spacing: 0;
+    line-height: 0.9;
+    background: linear-gradient(90deg, #f04d5e, #ff9f1c, #ffd166, #2ec4b6, #2f80ed, #8a5cf6);
+    background-clip: text;
+    -webkit-background-clip: text;
+    text-shadow: 0 18px 46px rgba(15, 23, 42, 0.12);
+}
+
+.barak-subtitle {
+    max-width: 560px;
+    margin: 20px auto 0;
+    color: #334155;
+}
+
+.rainbow-palette {
+    position: relative;
+    z-index: 1;
+    display: grid;
+    width: min(820px, 100%);
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+    gap: 10px;
+    margin-top: clamp(36px, 6vw, 72px);
+}
+
+.palette-band {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 10px 8px;
+    border: 1px solid rgba(15, 23, 42, 0.1);
+    border-radius: 8px;
+    background: rgba(255, 255, 255, 0.74);
+}
+
+.palette-swatch {
+    width: 14px;
+    height: 14px;
+    flex: 0 0 auto;
+    border-radius: 50%;
+    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
+}
+
+@media (max-width: 720px) {
+    .barak-stage {
+        min-height: calc(100vh - 32px);
+    }
+
+    .barak-title {
+        font-size: 5rem;
+    }
+
+    .rainbow-palette {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
diff --git a/apps/sarah-s-app-tue-aug-25-10-32-30-am/src/App.tsx b/apps/sarah-s-app-tue-aug-25-10-32-30-am/src/App.tsx
@@ -0,0 +1,64 @@
+import { Grid } from '@datadog/druids/layout/Grid';
+import { GridItem } from '@datadog/druids/layout/GridItem';
+import { Spacing } from '@datadog/druids/layout/Spacing';
+import { Text } from '@datadog/druids/typography/Text';
+
+import './App.css';
+
+const rainbowBands = [
+    { name: 'Red', value: '#f04d5e' },
+    { name: 'Orange', value: '#ff9f1c' },
+    { name: 'Yellow', value: '#ffd166' },
+    { name: 'Green', value: '#2ec4b6' },
+    { name: 'Blue', value: '#2f80ed' },
+    { name: 'Violet', value: '#8a5cf6' },
+];
+
+function App() {
+    return (
+        <Spacing as="main" padding="lg" className="barak-app">
+            <Grid columns={1} gap="lg" isFullWidth>
+                <GridItem>
+                    <Spacing as="section" className="barak-stage" padding="lg">
+                        <div className="rainbow-sky" aria-hidden="true">
+                            <span className="rainbow-arc rainbow-arc-red" />
+                            <span className="rainbow-arc rainbow-arc-orange" />
+                            <span className="rainbow-arc rainbow-arc-yellow" />
+                            <span className="rainbow-arc rainbow-arc-green" />
+                            <span className="rainbow-arc rainbow-arc-blue" />
+                            <span className="rainbow-arc rainbow-arc-violet" />
+                        </div>
+
+                        <Spacing as="div" className="barak-copy" padding="none">
+                            <Text as="p" size="sm" weight="bold" className="eyebrow">
+                                Rainbow mode
+                            </Text>
+                            <Text as="h1" className="barak-title">
+                                Barak
+                            </Text>
+                            <Text as="p" size="lg" className="barak-subtitle">
+                                A bright, color-forward space built around one name.
+                            </Text>
+                        </Spacing>
+
+                        <div className="rainbow-palette" aria-label="Rainbow palette">
+                            {rainbowBands.map((band) => (
+                                <div className="palette-band" key={band.name}>
+                                    <span
+                                        className="palette-swatch"
+                                        style={{ backgroundColor: band.value }}
+                                    />
+                                    <Text as="span" size="sm" weight="bold">
+                                        {band.name}
+                                    </Text>
+                                </div>
+                            ))}
+                        </div>
+                    </Spacing>
+                </GridItem>
+            </Grid>
+        </Spacing>
+    );
+}
+
+export default App;
diff --git a/apps/sarah-s-app-tue-aug-25-10-32-30-am/src/main.tsx b/apps/sarah-s-app-tue-aug-25-10-32-30-am/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.');
+}
diff --git a/apps/sarah-s-app-tue-aug-25-10-32-30-am/tsconfig.json b/apps/sarah-s-app-tue-aug-25-10-32-30-am/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": [
+    "src"
+  ]
+}