Full

.github/workflows/test.yml

@@ -0,0 +1,40 @@
+name: Test
+
+on:
+  push:
+    branches:
+      - main
+      - 'feat/**'
+      - 'fix/**'
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  test:
+    name: Jest
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests
+        run: npm run test:ci
+
+      - name: Upload coverage report
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: coverage
+          path: coverage/
+          if-no-files-found: ignore

.gitignore

@@ -39,3 +39,4 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+.gstack/

CHANGELOG.md

@@ -0,0 +1,19 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+## [0.0.1.0] - 2026-04-02
+
+### Added
+- **My Settings tab** in the Settings page — users can now override the global approval gate for their own jobs, with a toggle that shows whether they're using the global default or a personal override, and a reset button to return to the global setting.
+- **Delete content items** from the Content Library — uploaded files now show a delete button that opens a confirmation dialog before permanently removing the item. Only uploaded files with extractable file IDs are deletable; scraped or synced content is not affected.
+
+### Changed
+- Content item title row now groups the external link and delete action together in a button cluster, keeping the layout clean.
+- Settings page tabs now include "My Settings" as the first tab for quick personal configuration access.
+
+### Fixed
+- UUID regex for file ID extraction now enforces lowercase, preventing potential 404s against case-sensitive storage backends.
+- Delete dialog now shows an error toast when deletion fails, rather than silently staying open.
+- Removed non-functional `indeterminate` prop from MUI Switch (Switch doesn't support it; label text correctly conveys the null/default state).
+- Fixed typo in `extractContentType` path check (`/release_notess/` → `/release_notes/`).

CLAUDE.md

@@ -0,0 +1,14 @@
+# CLAUDE.md — Profound AI Marketing Frontend
+
+## Design System
+Always read DESIGN.md before making any visual or UI decisions.
+All font choices, colors, spacing, border radii, and aesthetic direction are defined there.
+Do not deviate without explicit user approval.
+In QA mode, flag any code that doesn't match DESIGN.md.
+
+Key anchors:
+- Background: #0F0D0A (warm dark — not cold, not blue-black)
+- Accent: #E8A238 (amber — not blue, not indigo, not purple)
+- Fonts: Instrument Serif (display) + Geist (UI) + DM Mono (data) + JetBrains Mono (code)
+- Nav: horizontal 48px top rail, not a sidebar
+- Job states: amber=running, teal=complete, sienna=error, neutral=queued

DESIGN.md

@@ -0,0 +1,141 @@
+# Design System — Profound AI Marketing Pipeline
+
+## Product Context
+- **What this is:** An AI-powered marketing content pipeline dashboard — jobs queue, pipeline monitoring, content management, analytics, AI orchestration controls, and settings
+- **Who it's for:** Profound AI's internal team — power users who live in this tool 8 hours a day
+- **Space/industry:** AI marketing automation / content pipeline tooling
+- **Project type:** Internal web app / dashboard
+
+## Aesthetic Direction
+- **Direction:** Precision Instrument
+- **Decoration level:** Intentional — structure and color do the decorative work; no gratuitous ornamentation
+- **Mood:** A well-funded research station, not a SaaS landing page. The feel of a darkroom or laboratory at work — warm, precise, quietly authoritative. Users should feel like they're operating a serious instrument, not filling out a form.
+- **Anti-patterns explicitly avoided:** Purple/indigo accents, cold dark backgrounds, aurora mesh gradients, gradient headline text, generic icon grids, Inter as the only typeface, spinner-with-percentage progress bars
+
+## Typography
+
+- **Display/Section Headers:** Instrument Serif — an unexpected editorial serif in a data-heavy tool. Signals depth and intentionality. Pairs against monospace data to create instrument-meets-editorial tension that earns the name "Profound."
+- **UI/Labels/Body:** Geist — purpose-built for dashboards, supports `tabular-nums` natively, optical size works from 11px to 24px without losing character
+- **Data/Metrics/Timestamps:** DM Mono — teletype precision. Every number, job ID, latency, and token count feels like it was measured, not guessed
+- **Code/CLI output:** JetBrains Mono — readable at 12px, clear zero/O disambiguation
+- **Loading:** Google Fonts CDN for Instrument Serif, Geist, and DM Mono; JetBrains Mono via self-host or CDN
+
+### Type Scale (4px base, modular 1.25)
+```
+xs:    11px / 1.4  — timestamps, meta labels
+sm:    13px / 1.5  — table data, secondary labels
+base:  15px / 1.6  — body, descriptions
+md:    18px / 1.4  — card titles, sub-headers
+lg:    22px / 1.3  — page section headers (Instrument Serif)
+xl:    28px / 1.2  — page titles (Instrument Serif)
+2xl:   36px / 1.1  — hero/display (Instrument Serif, rare)
+```
+
+## Color
+
+- **Approach:** Semantic — color carries meaning, not decoration. Amber means active. Teal means done. The user reads system state from color, not icons alone.
+
+### Base Palette
+```
+--bg:           #0F0D0A   Warm black. Darkroom, not terminal. Not blue-black.
+--surface:      #1A1713   Cards and panels lifted off the background.
+--surface-hi:   #232019   Elevated: modals, popovers, focused states.
+--border:       #2A251F   Barely-there. Graph paper, not grid lines.
+
+--text:         #F0E8D8   Warm parchment. Never pure white.
+--text-muted:   #6B6154   Faded ink. Not disabled — secondary.
+--text-subtle:  #4A4540   Placeholder, dead metadata.
+```
+
+### Accent Palette
+```
+--accent:       #E8A238   Amber. The color of a Nixie tube digit or oscilloscope trace.
+                          Active states, primary actions, running job indicators.
+--accent-dim:   #E8A23820 Amber at 12% — hover states, selection backgrounds.
+
+--success:      #4A7C6F   Aged copper teal. Complete, healthy, done.
+--success-dim:  #4A7C6F20 Teal at 12% — success backgrounds.
+
+--error:        #C45C3B   Burnt sienna. Unmistakably wrong, not alarmingly red.
+--error-dim:    #C45C3B20 Sienna at 12% — error backgrounds.
+
+--warning:      #D4903A   Darker amber variant. Degraded, not failed.
+--info:         #5B8DB8   Muted steel blue. The only cool hue in the system; reserved for informational/neutral states.
+```
+
+### Semantic Job State Colors
+```
+Running / Processing  →  --accent    (#E8A238 amber)
+Complete / Success    →  --success   (#4A7C6F teal)
+Failed / Error        →  --error     (#C45C3B sienna)
+Queued / Waiting      →  --text-subtle (#4A4540 neutral)
+Paused / Stopped      →  --text-muted  (#6B6154)
+```
+
+### Dark Mode
+This is a dark-mode-first system. A light mode variant is not planned for this internal tool. If a light mode is ever needed, strategy: invert surface hierarchy (white bg, #1A1713 surface), reduce accent saturation 15%, keep all semantic mappings identical.
+
+## Spacing
+
+- **Base unit:** 4px
+- **Density:** Comfortable — respects power users. Information-dense but not claustrophobic. Padding should feel considered, not generous.
+
+```
+2xs:   2px   (tight internal padding)
+xs:    4px   (inline gaps, icon margins)
+sm:    8px   (compact component padding)
+md:   16px   (standard component padding)
+lg:   24px   (card padding, section gaps)
+xl:   32px   (page section separation)
+2xl:  48px   (major layout breaks)
+3xl:  64px   (hero/display zones)
+```
+
+## Layout
+
+- **Approach:** Grid-disciplined with one structural risk — top navigation rail instead of sidebar
+- **Navigation:** A 48px persistent horizontal rail at the top of the viewport. Section labels in Geist, monospaced-weight. Active section indicated by an amber bottom border — no filled pills, no background highlights. The full viewport height below the rail belongs to content.
+- **Grid:** 12-column at 1280px+, 8-column at 960–1279px, 4-column below
+- **Max content width:** 1440px (full-bleed at smaller sizes)
+- **Sidebar:** Not used for primary navigation. Reserved for contextual panels within specific views (e.g., job detail, content inspector) — these are collapsible.
+
+### Border Radius
+```
+sm:    3px   (inputs, chips, small badges)
+md:    6px   (cards, dropdowns, modals)
+lg:    10px  (large panels)
+full:  9999px (pill badges, toggle switches)
+```
+Deliberately tighter than shadcn defaults — instruments have corners, not bubbles.
+
+## Motion
+
+- **Approach:** Minimal-functional. Motion aids comprehension; it is never decorative.
+- **Zero tolerance:** No aurora animations, no glow pulse effects, no gradient sweeps, no floating orb entrances.
+
+```
+Easing:
+  enter:   cubic-bezier(0, 0, 0.2, 1)   ease-out
+  exit:    cubic-bezier(0.4, 0, 1, 1)   ease-in
+  move:    cubic-bezier(0.4, 0, 0.2, 1) ease-in-out
+
+Duration:
+  micro:   75ms    (hover state flips, toggle switches)
+  short:   150ms   (dropdown open/close, tooltip appear)
+  medium:  250ms   (panel slide, modal enter)
+  long:    400ms   (page transitions, skeleton→content)
+```
+
+Pipeline progress indicators: draw as live amber traces on a timeline, not fill-left progress bars. Completed stages flatten to teal. Errors spike. This is the one place motion should feel alive.
+
+## Decisions Log
+
+| Date       | Decision                                    | Rationale |
+|------------|---------------------------------------------|-----------|
+| 2026-03-25 | Warm dark mode (#0F0D0A base)               | Differentiates from cold-dark-purple AI tools AND generic light tools; better for 8h/day power user sessions |
+| 2026-03-25 | Amber (#E8A238) as primary accent           | Breaks the purple/indigo monoculture that dominates the AI marketing category; warm, precise, recognizable |
+| 2026-03-25 | Top navigation rail instead of sidebar      | Reclaims ~220px horizontal space for content in a data-heavy internal tool |
+| 2026-03-25 | Instrument Serif for display/section heads  | The only AI marketing tool with a serif; creates instrument-meets-editorial tension suited to the name "Profound" |
+| 2026-03-25 | Semantic color vocabulary for job states    | Users read system health from color pattern, not icon-scanning; amber=running, teal=done, sienna=error |
+| 2026-03-25 | DM Mono for all data/metrics                | Teletype authority; every number feels measured, not rendered |
+| 2026-03-25 | Initial design system created               | Created by /design-consultation. Research basis: competitive analysis of Jasper, Copy.ai, HubSpot Breeze, Notion AI — all converge on purple/cold-dark/Inter. This system occupies the unclaimed warm-dark territory. |

README.md

@@ -5,10 +5,10 @@ A modern, responsive frontend for the Marketing Tool built with Next.js 13+ and
 ## Features
 
 - 🚀 **Next.js 13+ App Router** - Latest Next.js features with App Router
-- 🎨 **Modern UI** - Built with Tailwind CSS and Radix UI components
+- 🎨 **Modern UI** - Built with Material UI (MUI) components and a custom warm dark design system
 - 📱 **Responsive Design** - Works on desktop, tablet, and mobile
 - 🔄 **Real-time Updates** - Live pipeline monitoring and status updates
-- 📊 **Content Management** - Upload, view, and manage marketing content
+- 📊 **Content Management** - Upload, view, delete, and manage marketing content
 - ⚡ **Pipeline Control** - Run and monitor marketing pipelines
 - 🔍 **Content Analysis** - Analyze content for marketing potential
 - 🎯 **TypeScript** - Full type safety throughout the application
@@ -17,11 +17,11 @@ A modern, responsive frontend for the Marketing Tool built with Next.js 13+ and
 
 - **Framework**: Next.js 13+ with App Router
 - **Language**: TypeScript
-- **Styling**: Tailwind CSS
-- **UI Components**: Radix UI + Custom components
+- **Styling**: Material UI (MUI) with custom design system (see DESIGN.md)
+- **UI Components**: MUI + custom components
 - **State Management**: TanStack Query (React Query)
 - **HTTP Client**: Axios
-- **Icons**: Lucide React
+- **Icons**: MUI Icons
 - **Deployment**: Vercel
 
 ## Getting Started
@@ -50,10 +50,23 @@ npm install
 cp env.example .env.local
 ```
 
-4. Update `.env.local` with your API URL:
+4. Update `.env.local` with your configuration:
 ```bash
+# Backend API Configuration
 NEXT_PUBLIC_BACKEND_API_BASE_URL=http://localhost:8000
 NEXT_PUBLIC_BACKEND_WEBSOCKET_URL=ws://localhost:8000
+
+# Keycloak Frontend Configuration (REQUIRED for authentication)
+NEXTAUTH_URL=http://localhost:3000
+NEXTAUTH_SECRET=your-nextauth-secret-here  # Generate with: openssl rand -base64 32
+KEYCLOAK_CLIENT_ID=marketing-tool-frontend
+KEYCLOAK_CLIENT_SECRET=your-frontend-client-secret
+KEYCLOAK_ISSUER=https://your-keycloak-server.com/realms/your-realm-name
+```
+
+**Important**: Generate a secure `NEXTAUTH_SECRET`:
+```bash
+openssl rand -base64 32
 ```
 
 5. Start the development server:
@@ -65,11 +78,30 @@ npm run dev
 
 ## Environment Variables
 
+### Required for Local Development
+
+| Variable | Description | Example |
+|----------|-------------|---------|
+| `NEXT_PUBLIC_BACKEND_API_BASE_URL` | Backend API URL | `http://localhost:8000` |
+| `NEXT_PUBLIC_BACKEND_WEBSOCKET_URL` | WebSocket URL for real-time updates | `ws://localhost:8000` |
+| `NEXTAUTH_URL` | Base URL of your application | `http://localhost:3000` |
+| `NEXTAUTH_SECRET` | Secret for encrypting JWT tokens | Generate with `openssl rand -base64 32` |
+| `KEYCLOAK_CLIENT_ID` | Keycloak frontend client ID | `marketing-tool-frontend` |
+| `KEYCLOAK_CLIENT_SECRET` | Keycloak frontend client secret | Get from Keycloak admin console |
+| `KEYCLOAK_ISSUER` | Keycloak issuer URL | `https://your-keycloak-server.com/realms/your-realm` |
+
+### Optional
+
 | Variable | Description | Default |
 |----------|-------------|---------|
-| `NEXT_PUBLIC_BACKEND_API_BASE_URL` | Backend API URL | `http://localhost:8000` or `/api` (relative) |
-| `NEXT_PUBLIC_BACKEND_WEBSOCKET_URL` | WebSocket URL for real-time updates | `ws://localhost:8000` or `wss://domain/api` |
-| `NEXT_PUBLIC_API_KEY` | API key for authentication (optional) | - |
+| `NEXT_PUBLIC_API_KEY` | API key for authentication (if not using Keycloak) | - |
+
+### Setting Up Keycloak
+
+1. Follow the [Keycloak Setup Guide](../marketing_tool/docs/KEYCLOAK_SETUP.md) in the backend repository
+2. Create a frontend client in Keycloak (public client)
+3. Copy the client ID and secret to your `.env.local` file
+4. Set `KEYCLOAK_ISSUER` to your Keycloak realm URL
 
 ## Project Structure
 

VERSION

@@ -0,0 +1 @@
+0.0.1.0

deploy/.dockerignore

@@ -76,3 +76,4 @@ __tests__
 
 
 
+

deploy/README.md

@@ -444,3 +444,4 @@ For issues or questions:
 
 
 
+

deploy/cloudformation-parameters.json

@@ -66,17 +66,29 @@
   {
     "ParameterKey": "HostedZoneId",
     "ParameterValue": ""
+  },
+  {
+    "ParameterKey": "BetterAuthUrl",
+    "ParameterValue": "REPLACE_WITH_YOUR_FRONTEND_URL"
+  },
+  {
+    "ParameterKey": "BetterAuthSecretArn",
+    "ParameterValue": "REPLACE_WITH_SECRET_ARN"
+  },
+  {
+    "ParameterKey": "KeycloakClientId",
+    "ParameterValue": "marketing-tool-frontend"
+  },
+  {
+    "ParameterKey": "KeycloakClientSecretArn",
+    "ParameterValue": "REPLACE_WITH_SECRET_ARN"
+  },
+  {
+    "ParameterKey": "KeycloakIssuer",
+    "ParameterValue": "REPLACE_WITH_YOUR_KEYCLOAK_ISSUER_URL"
+  },
+  {
+    "ParameterKey": "DatabaseUrlArn",
+    "ParameterValue": "REPLACE_WITH_SECRET_ARN"
   }
 ]
-
-
-
-
-
-
-
-
-
-
-
-