✦ JAL

We didn't build another ticket board. We built a river.

Customer feedback flows in as droplets. AI triages, builds, opens PRs. You merge. Done.

The world's first Feedback River UI — plus hosted Jal Studio, headless @jal_ai/jal npm, and Vendo as live proof on a real product.


Live (production)	vendo-api.renuka-khirwadkarr.workers.dev
Try it (judges)	Homepage `#try` — one-click feature ideas
Attach a repo	`/studio/onboard`
See the river	`#river` → click droplets → Dual Lens
Vendo demo	`/internal/login` · buyer `/dashboard`
Docs	`/docs`
npm engine	`@jal_ai/jal`
Product domain	`jal.app` (DNS migration in progress)
Hackathon demo video	`demo-output/jal-hackathon-demo.mp4` (~2 min) — `npm run demo:record`
UI refresh demo video	`demo-output/jal-ui-demo.mp4` (~3 min, light theme + PR pipeline) — `npm run demo:record:ui`

All links · 90-Second Demo · Try It · What's New · Quick Start · Documentation · Studio · Architecture · API

git clone https://github.com/buildwithrenuka/vendo.git && cd vendo && npm install && npm run dev

🔗 All links

Live base URL: https://vendo-api.renuka-khirwadkarr.workers.dev

Product & demo (judges)

What	Link
Homepage	vendo-api.renuka-khirwadkarr.workers.dev
Try it (`#try`)	One-click feature ideas
Feedback River (`#river`)	Interactive river + Dual Lens
Jal Studio — attach repo	/studio/onboard
Jal Studio — projects	/studio
In-app docs	/docs
Vendo — Google → Feedback	Sign in & submit
Vendo — buyer dashboard	/dashboard
Vendo — internal dev queue	/internal/login
API health	/api/health

Code & packages

What	Link
GitHub repo	github.com/buildwithrenuka/vendo
npm package	@jal_ai/jal on npm
Package README	packages/shipflow/README.md

Domains & contact

What	Link / value
Product domain (target)	jal.app (DNS pending)
Email sender	`hello@jal.app`

Hackathon demo video

What	Details
Final video (cinematic)	`demo-output/jal-hackathon-demo.mp4` (~2 min 21 sec, 1080p)
Final video (new UI)	`demo-output/jal-ui-demo.mp4` (~3 min, light theme + AI Build→PR, 1080p)
Record	`npm run demo:record` · `npm run demo:record:ui`
Change background music	`npm run demo:music` · `npm run demo:music:ui` or `npm run demo:music -- "https://youtube.com/watch?v=..."`

Upload jal-hackathon-demo.mp4 to your hackathon portal (or host on YouTube / Drive and paste that URL in the submission form).

⚡ 90-second demo for judges

Goal: Show something no other team has — feedback as a living river, not a spreadsheet.

Step	Do this	What judges see
1	Open `/` (homepage)	Hero + live pipeline animation (Request → Merge)
2	Scroll to `#river`	Interactive river — click any droplet
3	Watch Dual Lens	Left = customer widget · Right = ship console · Same request
4	Scroll to `#try`	One-click feature ideas — pre-filled forms for Jal Studio & Vendo
5	Go `/studio/onboard`	Sign in → paste `owner/repo` → Repo Pour fills with AI context
6	Open `/studio/projects/:id`	Real Feedback River inbox — enqueue → AI Build → PR → merge
7	Optional: `/internal/login`	Vendo — same pipeline on a production procurement app

One-liner for the panel: "Jal closes the loop from customer widget to merged GitHub PR — with a UI metaphor nobody else ships."

🎯 Try it — Jal & Vendo

Jal is the product. Vendo is the live demo app (procurement) proving the same pipeline on a real product. Both run on one deploy — judges pick a path:

Path	Who it's for	Start here	Pre-filled ideas
Jal Studio	Attach any GitHub repo	`/studio/onboard`	Homepage `#try` → Studio cards
Vendo demo	See Jal on a real SaaS	Google sign-in → Feedback	Homepage `#try` → Vendo cards
Dev queue	Internal ship console	`/internal/login`	Enqueue → AI Build → merge

Sample ideas judges can try in ~2 minutes

Jal Studio: public changelog from shipped feedback · Slack ping when PR ready · merge duplicate river droplets · widget theme from host brand

Vendo demo: bulk supplier CSV invite · GST invoice PO match · WhatsApp onboarding nudge · supplier scorecard PDF export

Click any card on #try — the form opens pre-filled. Submit and watch AI triage immediately.

💡 What Jal invented

Every product tool looks the same: lists, kanban, gray boxes.
Jal asks: what if feedback behaved like water?

flowchart TB
    subgraph OLD["Every other tool"]
        L1["Ticket #1847"]
        L2["Backlog column"]
        L3["Sprint board"]
    end

    subgraph JAL["Jal — Feedback River"]
        D["Droplet on animated river"]
        DL["Dual Lens split view"]
        P["Position = pipeline stage"]
    end

    OLD -.->|"same data, dead UI"| JAL

    style JAL fill:#021418,stroke:#00f5d4,color:#d4fff8
    style OLD fill:#1a1a1a,stroke:#666,color:#999

Five UI primitives (not features — inventions)

Primitive	What it replaces	Experience
Feedback River	Ticket list / inbox grid	Each request is a droplet on an SVG stream — `left %` = pipeline progress
Dual Lens	Single admin view	Customer lens (widget mock) ↔ Ship lens (PR, tasks) — one stream, two truths
Repo Pour	"Connect GitHub" form	Liquid vessel fills as AI absorbs README + stack — onboarding as ritual
Nexus	Project list table	Projects orbit a central core — tributaries feeding one engine
Phosphor Abyss	Generic cyan SaaS	Color is narrative: cold phosphor intake → violet depth → coral ship

Interactive proof: homepage #river · production UI: /studio/projects/:id

🔁 End-to-end: widget → merge

One continuous loop. Fully traceable. No black holes.

sequenceDiagram
    autonumber
    participant C as Customer
    participant W as JalWidget
    participant R as Feedback River
    participant AI as OpenAI
    participant GH as GitHub

    C->>W: Submit feature / bug
    W->>R: Droplet appears upstream
    R->>AI: Triage + assess
    AI->>R: Planned + tasks
    R->>AI: AI Build (repo context)
    AI->>GH: Open PR
    R->>AI: AI Review vs PRD
    Note over R,GH: Human approves once
    R->>GH: Merge PR
    GH-->>C: Shipped (widget status)

Stage	AI does	Human does
Triage	Classify, dedupe, scope, clarify	—
Plan	PRD outline + engineering tasks	Approve direction
Build	Read attached repo, implement, open PR	—
Review	Validate diff vs requirements	Fix or escalate
Ship	—	One-click merge

🚪 Three doors. One engine.

🎨 Jal Studio

Zero setup · browser-only

Attach GitHub → AI scans context → drop widget → ship from UI.

/studio          Nexus
/studio/onboard  Repo Pour
/studio/projects Live River + Dual Lens
/.../embed       Widget + API key

Open Studio →

📦 `@jal_ai/jal`

Full control · your infra

Same pipeline as npm — triage, tasks, build, PR, merge.

npm install @jal_ai/jal

Profiles: vendo · travel · generic

Package docs →

🏢 Vendo

Live proof · real product

Procurement app with buyer widget + internal dev queue.

/dashboard       Buyer + feature requests
/internal        Dev queue + AI build

Not a mock — production patterns.

Dev demo →

🌊 The Feedback River

flowchart LR
    F["💧 Feedback"] --> T["🧠 Triage"]
    T --> P["📋 Planned"]
    P --> B["⚙️ Build + PR"]
    B --> R["🔍 Review"]
    R --> S["🚀 Shipped"]

    style F fill:#021418,stroke:#00f5d4,color:#d4fff8
    style T fill:#021418,stroke:#7c5cff,color:#e8e0ff
    style S fill:#021418,stroke:#ff6b4a,color:#ffe8e0

Studio routes

Route	Purpose
`/studio`	Nexus — all projects as tributaries
`/studio/onboard`	Pour repo → AI absorb → API key
`/studio/projects/:id`	Live river + Dual Lens + Ship console
`/studio/projects/:id/embed`	`<JalWidget />` snippet + iframe
`/embed/:projectId`	Public embed page

Studio API (/studio)

Method	Path	Auth
`GET`	`/studio/setup`	Public readiness check
`POST`	`/studio/projects`	Session → project + `jal_live_*` key
`POST`	`/studio/projects/:id/scan`	AI repo context scan
`GET`	`/studio/projects/:id/inbox`	River droplets
`POST`	`/studio/projects/:id/features/:id/build`	AI code → GitHub PR
`POST`	`/studio/projects/:id/features/:id/approve-ship`	Merge PR
`POST`	`/studio/feedback`	`Bearer jal_live_*` widget submit

🚀 Quick start

git clone https://github.com/buildwithrenuka/vendo.git
cd vendo && npm install

npm run build --workspace @vendo/shared
npm run build --workspace @vendo/forms

cp apps/api/.dev.vars.example apps/api/.dev.vars
cp apps/web/.env.example apps/web/.env
# SESSION_SECRET (32+ chars) · OPENAI_API_KEY · GITHUB_TOKEN for Studio

npm run db:migrate:local
npm run dev

Service	URL
Web	`http://localhost:5173`
API	`http://localhost:8787`
Health	`GET /health`
Studio	`/studio/onboard`
Docs	`/docs` — step-by-step guides (Expo-style)
Live	workers.dev deploy

Widget in your app

<JalWidget
  projectId="your-project-id"
  apiKey="jal_live_..."
  productName="My App"
  placement="bottom-right"
/>

npm (headless)

import { loadJalContext, triageFeatureRequest, runAiCodeBuilder } from "@jal_ai/jal";

const jal = loadJalContext({ JAL_PROFILE: "generic", JAL_PRODUCT_NAME: "My SaaS" });

Vendo admin seed

npm run seed:admin --workspace @vendo/api
# → /internal/login  (admin / VendoAdmin123!)

🏗 Architecture

flowchart TB
    subgraph Surface["Experience layer"]
        LAND["Landing + #river demo"]
        STU["Jal Studio"]
        VEN["Vendo app"]
        WID["JalWidget embed"]
    end

    subgraph Edge["Cloudflare edge"]
        API["Hono Worker"]
        D1[("D1 SQLite")]
    end

    subgraph Brain["@jal_ai/jal"]
        TRI["Triage"]
        BLDR["Code builder"]
        REV["PR review"]
    end

    subgraph World["External"]
        OAI["OpenAI"]
        GH["GitHub"]
    end

    LAND & STU & VEN & WID --> API
    API --> D1
    API --> Brain
    Brain --> OAI
    Brain --> GH

    style STU fill:#021418,stroke:#00f5d4,color:#d4fff8
    style Brain fill:#021418,stroke:#7c5cff,color:#e8e0ff

vendo/
├── apps/
│   ├── api/              Cloudflare Worker — /studio, /dev, /buyer, …
│   └── web/              React 19 · Vite · Tailwind 4 · Feedback River UI
├── packages/
│   ├── shared/           Types · Jal project models · status labels
│   ├── forms/            Zod schemas · field catalog
│   └── shipflow/         @jal_ai/jal — portable AI pipeline
└── package.json

Layer	Technology
Frontend	React 19 · Vite 6 · Tailwind CSS 4 · Sora + Figtree
API	Cloudflare Workers · Hono · D1
AI	OpenAI — triage · codegen · PR review
GitHub	Repo scan · branch · PR · merge
Auth	Google OAuth · OIDC · employee login

🎨 Phosphor Abyss

Jal's color system maps lifecycle to hue — not decoration, narrative.

Token	Hex	Meaning
Phosphor	`#00f5d4`	New feedback · river flow
Current	`#7c5cff`	Pipeline depth · dev lens
Coral	`#ff6b4a`	Customer warmth · bugs · shipped
Abyss	`#010a0f`	Deep trench background

CSS: apps/web/src/index.css · Tokens: apps/web/src/lib/jal-brand.ts

🏢 Vendo (reference demo — not the product)

Jal ships on jal.app. Vendo is the bundled demo app so judges can try the pipeline on a real procurement product without attaching their own repo.

Module	Route	Jal integration
Buyer dashboard	`/dashboard`	Feature request widget → AI triage
Internal queue	`/internal`	Full dev pipeline → GitHub PRs
Supplier onboarding	`/invite/:token`	Separate product surface

Vendo-specific: WhatsApp invites · compliance forms · auto-approve rules · GST reconciliation (Enterprise)

Set GITHUB_REPO=buildwithrenuka/vendo for internal AI Build PRs.

🔐 Environment · Deploy · DB

Environment variables

Variable	Required	Purpose
`SESSION_SECRET`	✅	Cookie signing
`OPENAI_API_KEY`	🤖	AI pipeline
`GITHUB_TOKEN`	🐙	Repo scan + PR automation
`GITHUB_REPO`	🐙	Vendo internal PR target
`GOOGLE_CLIENT_*`	🔑	Studio + buyer auth

Full list: apps/api/.dev.vars.example

Deploy

Live: https://vendo-api.renuka-khirwadkarr.workers.dev
Product domain: jal.app — add zone on Cloudflare, point NS, then enable custom domain in wrangler.jsonc

# One command — builds web + deploys Worker + static assets
npm run deploy:all --workspace @vendo/api

# First-time setup
npm run db:migrate:remote --workspace @vendo/api
cd apps/api && npx wrangler secret bulk .deploy-secrets.env   # see .dev.vars.example

# After jal.app is on Cloudflare — Resend DNS records
npm run setup:dns --workspace @vendo/api

Email sender: hello@jal.app (Resend domain verify required).

Database — 9 migrations on D1

Migration	Adds
`0001`–`0008`	Users, invites, forms, feature requests, dev queue, employees
`0009_jal_studio`	`jal_projects`, project-scoped feedback, API keys

Scripts

npm run dev              # API + web
npm run typecheck        # All workspaces
npm run db:migrate:local # Local D1

🌐 API map

Prefix	Purpose
`/studio`	Jal Studio — projects, river, widget, dev queue
`/dev`	Vendo internal queue
`/buyer`	Profiles · forms · feature requests
`/supplier`	Onboarding submissions
`/auth` · `/me`	Sessions

💎 Pricing

Free trial	Pro $49/mo	Team
3 pipeline runs	Unlimited runs	SSO + SLA
1 repo	Multi-repo	Custom context
Widget + triage	PR automation	Dedicated support

Vendo: Standard (3 suppliers free) · Enterprise (GST, unlimited)

Like water — one pipeline, any product shape.

Feedback River · Dual Lens · Repo Pour · OpenAI → GitHub

▶ Run the demo · Attach a repo · Try it #try · npm · GitHub

Built by buildwithrenuka · Private

Name		Name	Last commit message	Last commit date
Latest commit History 11 Commits
apps		apps
docs		docs
packages		packages
scripts		scripts
.env.example		.env.example
.gitignore		.gitignore
1782829921325-player-script.js		1782829921325-player-script.js
1782829921346-player-script.js		1782829921346-player-script.js
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json

Folders and files

Latest commit

History

Repository files navigation

✦ JAL

We didn't build another ticket board. We built a river.

🔗 All links

Product & demo (judges)

Code & packages

Domains & contact

Hackathon demo video

⚡ 90-second demo for judges

🎯 Try it — Jal & Vendo

Sample ideas judges can try in ~2 minutes

💡 What Jal invented

Five UI primitives (not features — inventions)

🔁 End-to-end: widget → merge

🚪 Three doors. One engine.

🎨 Jal Studio

📦 @jal_ai/jal

🏢 Vendo

🌊 The Feedback River

🚀 Quick start

Widget in your app

npm (headless)

Vendo admin seed

🏗 Architecture

🎨 Phosphor Abyss

🏢 Vendo (reference demo — not the product)

🔐 Environment · Deploy · DB

🌐 API map

💎 Pricing

Like water — one pipeline, any product shape.

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

📦 `@jal_ai/jal`

Packages