diff --git a/.github/workflows/azure-deploy.yml b/.github/workflows/azure-deploy.yml index 1507815..702dd25 100644 --- a/.github/workflows/azure-deploy.yml +++ b/.github/workflows/azure-deploy.yml @@ -2,7 +2,7 @@ name: Deploy backend to Azure App Service on: push: - branches: [main] + branches: [PROD] paths: - 'server.js' - 'lib/**' diff --git a/.github/workflows/static.yml b/.github/workflows/static.yml index bc0b8f2..c0d5894 100644 --- a/.github/workflows/static.yml +++ b/.github/workflows/static.yml @@ -1,13 +1,13 @@ # Simple workflow for deploying static content to GitHub Pages name: Deploy static content to Pages on: - # Deploy only when code is pushed to prod + # Deploy when code is pushed to PROD (production branch) push: - branches: ["prod"] + branches: ["PROD"] - # Validate PRs targeting prod (build only, no deploy) + # Validate PRs targeting PROD (build only, no deploy) pull_request: - branches: ["prod"] + branches: ["PROD"] types: [opened, synchronize, reopened] # Allows you to run this workflow manually from the Actions tab diff --git a/README.md b/README.md index be34295..cd9ba5a 100644 --- a/README.md +++ b/README.md @@ -12,14 +12,20 @@ If your Markdown viewer does not render video, open: [`public/media/agrivalue-iq-intro.mp4`](public/media/agrivalue-iq-intro.mp4) -## Live Demo +## Live Demo (for judges — start here) + +**Do not rely on the default Git clone branch.** Use these URLs directly: | Mode | URL | |------|-----| | GitHub Pages UI | [cdm227.github.io/AgriValue-Tracker](https://cdm227.github.io/AgriValue-Tracker) | -| Judge demo with intro video | […/demo.html](https://cdm227.github.io/AgriValue-Tracker/demo.html) | +| **2-min judge demo** (teleprompter + auto-narration) | […/demo.html](https://cdm227.github.io/AgriValue-Tracker/demo.html) | | Full API (Azure) | Set `AZURE_API_URL` secret → see [docs/AZURE_DEPLOY.md](docs/AZURE_DEPLOY.md) | +**Source branch:** production code lives on **`PROD`**. Set GitHub **Settings → General → Default branch → PROD** so clones match Pages. + +**CI:** Pushes to `PROD` auto-deploy GitHub Pages (`.github/workflows/static.yml`) and Azure backend (`.github/workflows/azure-deploy.yml`). + ## Quick Start ```bash @@ -117,11 +123,25 @@ infra/ # Bicep + Fabric SQL schema .github/workflows/ # Azure + GitHub Pages deploy ``` -## Record Your Demo Video +## Record Your 2-Min Submission Video + +Full step-by-step: [docs/DEMO_SCRIPT.md](docs/DEMO_SCRIPT.md) + +### Quick checklist + +1. **Demo page:** [demo.html](https://cdm227.github.io/AgriValue-Tracker/demo.html) → **Start 2-Min Judge Demo** (teleprompter + narration) +2. **Copilot MCP:** Open this repo in VS Code → Copilot Chat → `@agrivalue-iq generate_supply_contract ...` (see script) +3. **Record:** OBS, Win+G (Xbox Game Bar), or Loom — capture demo page + VS Code split or cut +4. **Upload:** YouTube (unlisted) or Loom → paste link at [aka.ms/agentsleague/aisf](https://aka.ms/agentsleague/aisf) + +### Fix default branch & auto-deploy (one-time) -1. Open `/demo.html` → click **Start 2-Min Demo** -2. Open VS Code with Copilot MCP (`.vscode/mcp.json`) -3. Record screen — script in [docs/DEMO_SCRIPT.md](docs/DEMO_SCRIPT.md) +| Step | Where | Action | +|------|--------|--------| +| Default branch | GitHub → **Settings → General → Default branch** | Switch from `testingv1` to **`PROD`** | +| Pages deploy | Push to `PROD` | Workflow `static.yml` builds & deploys `public/` | +| Azure API | Push to `PROD` | Workflow `azure-deploy.yml` (if Azure secrets configured) | +| Manual deploy | **Actions** → *Deploy static content to Pages* → **Run workflow** | Use if you need a deploy before the next push | diff --git a/docs/AZURE_DEPLOY.md b/docs/AZURE_DEPLOY.md index ca2974c..83df4ba 100644 --- a/docs/AZURE_DEPLOY.md +++ b/docs/AZURE_DEPLOY.md @@ -65,8 +65,8 @@ Create environment `azure-production` in repo Settings → Environments (optiona ## Deploy -- **Backend:** Push to `main` → `.github/workflows/azure-deploy.yml` deploys full app -- **Frontend:** Push to `main` → `.github/workflows/static.yml` deploys `public/` with injected `config.js` +- **Backend:** Push to `PROD` → `.github/workflows/azure-deploy.yml` deploys full app +- **Frontend:** Push to `PROD` → `.github/workflows/static.yml` deploys `public/` with injected `config.js` ## Verify diff --git a/docs/DEMO_SCRIPT.md b/docs/DEMO_SCRIPT.md index 40820c5..1a1dafa 100644 --- a/docs/DEMO_SCRIPT.md +++ b/docs/DEMO_SCRIPT.md @@ -1,48 +1,63 @@ # 2-Minute Demo Video Script -Use this script to record your submission video. Open **two windows**: AgriValue terminal + VS Code with Copilot MCP. +Use this script for your **Agents League submission video**. It matches the live teleprompter on `demo.html` (Vision step, agent memory, auto-narration). -## Recording Setup +## Before you record -1. Open `https://cdm227.github.io/AgriValue-Tracker/demo.html` (or `http://localhost:3000/demo.html`) -2. Click **Start 2-Min Demo** — teleprompter guides timing -3. Side-by-side: VS Code with Copilot Chat + MCP enabled -4. Record with OBS, Xbox Game Bar (Win+G), or Loom +1. Open the **live judge demo** (no clone required): [demo.html](https://cdm227.github.io/AgriValue-Tracker/demo.html) +2. Open **VS Code** in this repo with GitHub Copilot + MCP (`.vscode/mcp.json` registers `agrivalue-iq`) +3. In a terminal: `npm install` then `npm run mcp` (optional — MCP also starts when Copilot connects) +4. Turn on **Audio Narration** on the demo page if you want the built-in voice-over (or narrate yourself) +5. Use **OBS**, **Xbox Game Bar (Win+G)**, or **Loom** to capture screen + mic -## Script (120 seconds) +## Layout (recommended) -### 0:00–0:20 — Problem & Intro +| Window | Content | +|--------|---------| +| Primary | `demo.html` → click **Start 2-Min Judge Demo** | +| Secondary (split or cut) | VS Code Copilot Chat with `@agrivalue-iq` | -> "Smallholder farmers in Sicily often sell olives and grapes to bulk silos at commodity prices. AgriValue shows them a better path — local processing that captures DOP and DOC premiums." +## Teleprompter flow (~128 seconds) -**Screen:** Welcome screen with Triple IQ pipeline cards. +The demo page auto-advances. Follow the green **script line** and **workflow map** (Harvest → Don → Matteo → Sofia → Vision → Copilot). -### 0:20–0:50 — Fabric IQ +### 0:00–0:18 — Problem & agents -> "Fabric IQ maps the semantic market graph — processors, prices, and transport costs across Sicily." +> "Sicilian farmers often sell raw olives and grapes to bulk silos at commodity prices. AgriValue is a creative app where friendly AI agents work together — Don Salvatore listens, Matteo runs the numbers, Sofia checks quality." -**Actions:** -1. Select **Olive Oil**, quantity **15 MT** -2. Click **Run IQ Pipeline** -3. Point to Path A vs Path B comparison and added value figure +**Screen:** Story cards + 6-node flow map. Intro video may auto-play muted. -### 0:50–1:20 — Foundry IQ + Vision +### 0:18–0:45 — Fabric IQ (Matteo) -> "Foundry IQ grounds compliance in real standards — EU DOP, USDA Organic. The vision scan grades crop quality and boosts Path B revenue." +> "Fabric IQ maps processors, prices, and transport — Matteo compares Path A raw sale vs Path B local processing." -**Actions:** -1. Check **DOP / DOC Certified** -2. Upload a crop photo (optional) -3. Highlight typewriter Foundry compliance response +**Screen:** Live app segment opens (`index.html?autoplay=1`). Watch portfolio/optimize run. Point to **added value** and Path A vs Path B. -### 1:20–1:50 — Copilot MCP Contract +**Teleprompter cues:** Olive Oil, 15 MT, organic/DOP if shown. -> "With one click, I copy the MCP prompt into VS Code. Copilot uses our AgriValue MCP server to draft a Fair-Trade supply contract from live pricing." +### 0:45–1:05 — Sofia + Foundry compliance -**Actions:** -1. Click **Copilot MCP** button -2. Switch to VS Code Copilot Chat -3. Paste and run: +> "Sofia DOP checks the serious papers — EU DOP, organic evidence — before we claim the premium." + +**Screen:** Foundry typewriter compliance text in the IQ console. + +### 1:05–1:18 — Vision scan + +> "Vision scans the crop photo and applies a quality multiplier to Path B revenue." + +**Screen:** Vision Quality Scan animation / grade badge. Brief pause after Sofia before Vision (teleprompter bridge cue ~52s). + +### 1:18–1:35 — Agent memory + +> "Every optimization is saved to agent memory — Don Salvatore can recall recent trades in the AI Advisor." + +**Screen:** Trade history / advisor memory panel (ask "show trade history" or open memory UI if visible). + +### 1:35–1:55 — Copilot MCP contract + +> "One click copies the MCP prompt. Copilot uses our AgriValue MCP server to draft a Fair-Trade supply contract from live pricing." + +**Actions in VS Code Copilot Chat:** ``` @agrivalue-iq generate_supply_contract crop="Olive Oil" qtyTons=15 isOrganic=true buyer="Cooperativa Valle del Belice" @@ -50,24 +65,38 @@ Use this script to record your submission video. Open **two windows**: AgriValue Customize for EU DOP export to the US market. ``` -4. Show generated contract markdown +Show the generated contract markdown. -### 1:50–2:00 — Work IQ +### 1:55–2:08 — Work IQ + close -> "Work IQ notifies the cooperative on Microsoft Teams — so the whole value chain sees the optimization instantly." +> "Work IQ can alert the cooperative on Teams. Mamma mia — andiamo!" -**Action:** Click **Teams Alert** or show Teams channel notification. +**Action:** Click **Teams Alert** in the app (or show Work IQ pill / `/api/status`). End on teleprompter finale. --- -## Auto-Demo Page +## Manual recording (without auto-demo) + +If you prefer full manual control: -`public/demo.html` runs a timed teleprompter and auto-starts optimization at `index.html?autoplay=1`. +1. Open [index.html](https://cdm227.github.io/AgriValue-Tracker/) +2. Run IQ Pipeline: Olive Oil, 15 MT, DOP enabled +3. Run Vision scan → optimize → export contract → Copilot MCP → Teams +4. Cut to VS Code for the MCP contract step above -## What Judges Should See +## What judges should see -- [ ] Three IQ layers active (header pills) -- [ ] Meaningful added value number +- [ ] Six-step workflow (including **Vision** and **Copilot**) +- [ ] Meaningful **added value** number - [ ] Foundry grounded compliance text -- [ ] Copilot + MCP generating contract in IDE -- [ ] Teams notification (or Work IQ configured in `/api/status`) +- [ ] **Agent memory** / trade history +- [ ] **Copilot + MCP** generating contract in IDE +- [ ] Work IQ / Teams (or configured status in API) + +## Upload + +1. Export MP4 (≤2–3 min is fine; teleprompter targets ~2 min) +2. Upload to YouTube (unlisted) or Loom +3. Paste the link in the [Agents League portal](https://aka.ms/agentsleague/aisf) with your repo URL + +**Repo URL for judges:** use the README live links — default branch should be `PROD`, not `testingv1`. diff --git a/public/css/app.css b/public/css/app.css index 3a015d2..6f58e15 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -490,6 +490,30 @@ body[data-theme="light"] .upload-photo-btn:hover { .query-seal { color: #fcd34d; border-color: rgba(252, 211, 77, 0.24); background: rgba(252, 211, 77, 0.08); } .query-contract { color: #c4b5fd; border-color: rgba(196, 181, 253, 0.22); background: rgba(196, 181, 253, 0.07); } +.intro-overlay { + align-items: flex-start; + justify-content: center; + padding: max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); + overflow-y: auto; + -webkit-overflow-scrolling: touch; +} + +.intro-panel { + margin: auto 0; + padding: 8px 0 24px; +} + +.intro-dots .intro-dot[data-active="true"], +.intro-dot.bg-emerald-500 { + transform: scale(1.25); +} + +@media (min-width: 640px) { + .intro-overlay { + align-items: center; + } +} + .intro-step { animation: fadeUp 0.5s ease forwards; } @@ -598,6 +622,21 @@ body[data-theme="light"] .upload-photo-btn:hover { overflow: auto !important; } + body.h-full.overflow-hidden { + overflow-x: hidden; + overflow-y: auto; + } + + .iq-pills-mobile { + position: sticky; + top: 0; + z-index: 9; + } + + .header-actions { + justify-content: center !important; + } + .app-header { position: sticky; top: 0; @@ -660,7 +699,16 @@ body[data-theme="light"] .upload-photo-btn:hover { #welcome-pane { min-height: 420px; - padding: 24px 0; + padding: 24px 16px; + width: 100%; + text-align: center; + } + + #welcome-pane .grid.grid-cols-3 { + grid-template-columns: 1fr !important; + max-width: 280px; + margin-left: auto; + margin-right: auto; } #welcome-pane .grid, diff --git a/public/demo.html b/public/demo.html index 8d95bcd..9c86b31 100644 --- a/public/demo.html +++ b/public/demo.html @@ -249,29 +249,90 @@ } #intro-video { border-radius: 16px; } #intro-video::-webkit-media-controls-panel { background: rgba(12,10,9,.85); } + .demo-mobile-bar { + display: none; + position: sticky; + top: 0; + z-index: 40; + gap: 8px; + padding: 10px 12px; + background: rgba(12, 10, 9, 0.92); + border-bottom: 1px solid rgba(52, 211, 153, 0.25); + backdrop-filter: blur(12px); + } + .demo-mobile-bar button, + .demo-mobile-bar a { + flex: 1; + text-align: center; + font-size: 11px; + font-weight: 800; + text-transform: uppercase; + letter-spacing: 0.08em; + padding: 12px 10px; + border-radius: 12px; + } + .demo-mobile-bar button { + background: linear-gradient(135deg, #059669, #10b981); + color: #0c0a09; + } + .demo-mobile-bar a { + border: 1px solid rgba(148, 163, 184, 0.35); + color: #d6d3d1; + text-decoration: none; + } + .flow-map-scroll { + width: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + padding: 0 12px 8px; + } + .aside-compact { display: block; } @media (max-width: 1024px) { - body { min-height: 100%; overflow: auto; } - .demo-shell.relative { min-height: 100vh; height: auto; display: flex; flex-direction: column; } - aside { height: auto !important; } - main { height: auto; min-height: 720px; } + body.h-full.overflow-hidden { height: auto; min-height: 100%; overflow: auto; } + .demo-shell { + display: flex; + flex-direction: column; + grid-template-columns: 1fr !important; + min-height: 100vh; + height: auto; + } + .demo-mobile-bar { display: flex; } + main { order: 1; height: auto; min-height: 0; flex: 1; } + aside { order: 2; height: auto !important; } + aside .metric-explainer, + aside .grid.grid-cols-3, + aside .space-y-3 { display: none; } + aside > .mb-6:first-child p.text-sm { display: none; } + aside h1 { font-size: 28px; } #story-scroll { flex: none; overflow: visible; } #story-board { grid-template-columns: 1fr; padding: 16px 14px 28px; } #story-board .step { grid-column: span 1 / span 1; } - .flow-map { width: calc(100% - 24px); grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; } - .flow-node { min-height: 48px; padding: 8px; } + .flow-map { + width: max(640px, 100%); + min-width: 640px; + grid-template-columns: repeat(6, minmax(88px, 1fr)); + gap: 6px; + margin: 0 auto; + } + .flow-node { min-height: 52px; padding: 8px; } .flow-node::after { display: none; } - .flow-node p.text-xs { display: none; } - #app-frame.live-demo-frame { margin: 12px; height: 70vh; min-height: 520px; border-radius: 18px; } + .flow-node p.text-xs { font-size: 9px; line-height: 1.2; } + #flow-status { text-align: center; width: 100%; left: 0; transform: none; padding: 0 12px; } + #app-frame.live-demo-frame { margin: 12px auto; width: calc(100% - 24px); height: 65vh; min-height: 420px; border-radius: 18px; } .copilot-note { grid-template-columns: 1fr; } + #teleprompter { text-align: center; } + #script-line { margin: 0 auto; max-width: 36rem; } + .demo-mission { margin-left: auto; margin-right: auto; } } @media (max-width: 640px) { #teleprompter { padding: 14px 12px; } #script-line { font-size: 12px; line-height: 1.45; } - aside { padding: 18px; } - aside h1 { font-size: 34px; } - .demo-action-banner { width: calc(100% - 24px); font-size: 10px; } - .live-app-status { top: 68px; right: 10px; width: min(260px, calc(100% - 20px)); } - main.live-running #app-frame.live-demo-frame { margin-top: 72px; } + aside { padding: 18px; text-align: center; } + aside h1 { font-size: 26px; } + aside #btn-start { width: 100%; } + .demo-action-banner { width: calc(100% - 24px); font-size: 10px; left: 50%; transform: translateX(-50%); } + .live-app-status { top: 118px; right: 10px; left: 10px; width: auto; } + main.live-running #app-frame.live-demo-frame { margin-top: 88px; } .demo-mission { font-size: 11px; padding: 8px 10px; } } @@ -343,6 +404,10 @@

AgriValue IQ

+
+ + Open App +

Ready: click Start and follow the problem → agent solution story.

The problem: Sicilian smallholders sell olives and grapes to bulk silos at commodity prices, so value leaves the village. Our creative app: friendly AI agents work together — Don listens, Matteo runs Fabric IQ math, Sofia runs Vision scan + Foundry compliance, agents remember every trade, and Copilot drafts the contract.

@@ -353,6 +418,7 @@

AgriValue IQ

Workflow 1/6 — Harvest enters the chain

+

Harvest

Farmer request

Don

Routes the work

@@ -361,6 +427,7 @@

AgriValue IQ

Vision

Scans crop photo

Copilot

Drafts contract

+
@@ -462,6 +529,7 @@

Mamma mia — andiamo!

let chosenVoiceURI = "auto"; document.getElementById("btn-start").onclick = startDemo; + document.getElementById("btn-start-mobile").onclick = () => document.getElementById("btn-start").click(); document.getElementById("btn-audio").onclick = toggleAudioNarration; document.getElementById("btn-replay").onclick = () => { hideFinale(); startDemo(); }; document.getElementById("btn-close-finale").onclick = hideFinale; diff --git a/public/index.html b/public/index.html index 21119e5..2044884 100644 --- a/public/index.html +++ b/public/index.html @@ -13,8 +13,8 @@ -