# KROW Demo

AI-powered hiring for event and hospitality staffing — a standalone demo build of KROW Forge.

Runs with no backend, no API keys, and no login. `npm install && npm run dev` and the app is fully
populated.

```bash
npm install
npm run dev
```

## Architecture

Vite + React 18, React Router 6, React Query 5, Tailwind + shadcn/ui, Framer Motion, Recharts.

```
src/
  api/          data client — entity store, demo dataset, local AI engine
  assets/       brand asset references
  components/
    ui/         50 shadcn primitives (design system)
    krow/       domain components
      talent/   talent-portal components
      proving/  Proving Ground challenge components
  hooks/        shared hooks
  layouts/      Layout — header, nav pill, control bar, mobile sheet
  lib/          data hooks, score engine, AI workflows, auth context, utils
  pages/        18 route components
  utils/        helpers
```

### The backend seam

The production app talks to a Base44 backend through `src/api/base44Client.js`. This demo keeps
that module path, export name, and full method contract, and swaps only the transport:

| Contract | Demo implementation |
| --- | --- |
| `base44.entities.<Name>.list/filter/get/create/update/delete` | `api/store.js` — in-memory records, mirrored to `localStorage` |
| `base44.integrations.Core.InvokeLLM` | `api/aiEngine.js` — local, deterministic |
| `base44.integrations.Core.UploadFile` | blob URLs, session-scoped |
| `base44.auth.*` | seeded employer/admin user, always signed in |

Because the seam did not move, everything above it — `lib/krowHooks.js`, `lib/krowAi.js`,
`lib/provingGround.js`, `lib/krowScore.js`, every page and component — is unchanged from the
reference implementation.

### The AI engine

Every AI workflow in the app funnels through one call, `InvokeLLM({ prompt, response_json_schema })`.
`api/aiEngine.js` reimplements that function locally. It recognizes each workflow by the phrase its
prompt opens with, reads the structured fields the prompt already carries (`Years Experience: 6`,
`Required Certifications: …`, the talent-pool JSON block), and scores them deterministically.

Nine workflows are implemented: candidate screening, job-description generation, résumé building,
interview questions, interview evaluation, talent matching, Owliver's conversation, Career DNA
building, and Proving Ground evaluation.

Results respond to the data rather than being canned — screening a 7-year native-English candidate
and a 1-year candidate against the same posting returns genuinely different scores, breakdowns,
strengths and gaps. The same input always returns the same output.

### Owliver

Two assistants share one visual language:

- **`OwliverAssistant`** — the hiring assistant, mounted on **Overview**, **Candidates** and
  **Analytics** only. Answers from the same React Query caches the pages render from, so what it
  says and what the dashboard shows can never disagree.
- **`OwliverChatBubble`** — the talent-facing profile builder, mounted in the Talent role.

## Demo data

Seeded in `src/api/seed.js`: 7 positions (5 open), 22 applicants, 9 AI-scored candidates averaging
76, 4 AI interviews, 3 hires, 6 talent-pool profiles, 4 Proving Ground courses, and an activity log.

Edits persist to `localStorage` — screen candidates, hire someone, create a position, and the
numbers move everywhere. To restore the shipped dataset:

```js
// in the browser console
localStorage.removeItem('krow_demo_db'); location.reload();
```

Bumping `STORAGE_VERSION` in `src/api/store.js` invalidates saved snapshots automatically, so
changing the seed does not require a manual clear.

## Roles

The header role switcher moves between three surfaces, persisted in `localStorage`:

- **Employer** — Overview, Positions, Candidates, Hired History, Talent Pool, Analytics
- **Admin** — adds Control Center, KROW Forge, Activity
- **Talent** — My Portal, KROW Forge, Opportunities

## Design system

Tokens live in `src/index.css` as HSL CSS variables consumed by `tailwind.config.js`.

| Token | Value |
| --- | --- |
| Primary — KROW Blue | `#0A39DF` |
| Accent — KROW Yellow | `#F9E547` |
| Pale Yellow | `#F8E08E` |
| Dark Navy | `#333F48` |
| Mint | `#D1E0D7` |
| Radius | `0.75rem` |
| Headings | Sora |
| Body | Inter |

The page background is `bg-[#F8FAFC]` under the `gradient-mesh` utility — four radial gradients in
blue, yellow and mint. Surfaces use `glass` and `glass-card` (backdrop blur with saturation).

## Scripts

| Command | Purpose |
| --- | --- |
| `npm run dev` | Dev server (honors `PORT`) |
| `npm run build` | Production build |
| `npm run preview` | Serve the build |
| `npm run lint` | ESLint |
| `npm run lint:fix` | ESLint with `--fix` |