till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-16 13:59:40 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4
managarten/apps/mana
History
Till JS 8a882a3760 feat(wardrobe,picture): Google Nano Banana as a Try-On option 
Add Google's Gemini image edit family (Nano Banana) as a user-
selectable model for Wardrobe Try-On next to the existing OpenAI
path. Three concrete choices now expose themselves in the Solo and
Outfit Try-On buttons:

  - openai/gpt-image-2          (default, falls back to gpt-image-1
                                 server-side when the org isn't
                                 verified)
  - google/gemini-3-pro-image-preview   (Nano Banana Pro — premium
                                 identity / character consistency)
  - google/gemini-3.1-flash-image-preview (Nano Banana 2 — newest,
                                 fast, cheapest)

All three accept multi-image refs (face + body + garment) through
the same /api/v1/picture/generate-with-reference endpoint; the only
differences are the provider-specific request/response shape and
the model-id routing.

Server (apps/api/src/modules/picture/routes.ts):
- Guard now accepts `openai/*` and `google/*` prefixes and rejects
  everything else as "not supported for edits". Each provider's key
  is validated separately so missing GEMINI_API_KEY doesn't break
  OpenAI calls and vice versa.
- New `callGeminiEdits(modelName)` helper mirrors the shape of
  callOpenAiEdits: encodes the normalized PNG refs as base64
  inline_data parts, POSTs to
  generativelanguage.googleapis.com/v1beta/models/{model}:generateContent
  with responseModalities=["TEXT","IMAGE"] and imageConfig
  (aspectRatio + imageSize), pulls the generated image out of
  candidates[].content.parts[].inlineData.
- Our internal size strings map cleanly: 1024x1024 → 1:1 / 1K,
  1024x1536 → 2:3 / 1K, 1536x1024 → 3:2 / 1K. Gemini 1K is enough
  for the thumbnail sizes Wardrobe renders; going higher bloats
  payload without visible gain.
- creditsFor() gains a google/ branch proportional to upstream
  pricing (pro ≈ 18, 3.1-flash ≈ 6, 2.5-flash ≈ 5).
- Response `model` reports `${provider}/${modelUsed}` so the picture
  row's model metadata is accurate across providers.

Client (apps/mana/apps/web/src/lib/modules/wardrobe):
- api/try-on.ts: export `TryOnModel` union + `DEFAULT_TRY_ON_MODEL`.
  RunGarmentTryOnParams / RunOutfitTryOnParams gain an optional
  `model` field, threaded through `callGenerateWithReference`.
- components/TryOnModelPicker.svelte: new segmented control, three
  options with label + one-line hint. Grid-auto-fits so it reflows
  on the narrow workbench card.
- components/GarmentTryOnButton.svelte + TryOnButton.svelte: both
  mount the picker above the Sparkle CTA. `estimatedCredits` on the
  button label updates live when the user switches model so the
  cost signal matches what the server will actually charge.

Env (scripts/generate-env.mjs): GEMINI_API_KEY and GOOGLE_API_KEY
now propagate from the root `.env.development` into `apps/api/.env`
so mana-api can pick them up at boot. The route reads GEMINI_API_KEY
with GOOGLE_API_KEY as fallback, matching how mana-llm ships today.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-24 16:04:21 +02:00
..
apps feat(wardrobe,picture): Google Nano Banana as a Try-On option 2026-04-24 16:04:21 +02:00
.gitignore feat: rename ManaCore to Mana across entire codebase 2026-04-05 20:00:13 +02:00
CLAUDE.md feat(ai): add Library AI tools (create / rate / status / list) 2026-04-20 21:23:19 +02:00
README.md chore: complete ManaCore → Mana rename (docs, go modules, plists, images) 2026-04-07 12:26:10 +02:00

README.md

Mana Apps

A unified application ecosystem built on a shared authentication system, supporting multiple branded applications across web and mobile platforms.

Overview

Mana Apps is a monorepo containing web and mobile applications that provide organization management, team collaboration, and credit transfer capabilities. The system supports multiple branded applications (Memoro, Cards, Storyteller, Mana) through a flexible multi-tenant architecture.

Applications

  • Web App (apps/web) - SvelteKit-based web application
  • Mobile App (apps/mobile) - React Native (Expo) app for iOS, Android, and web
  • Landing (apps/landing) - Landing page (planned)

Features

  • 🔐 Unified authentication with Supabase
  • 🏢 Organization management with role-based access
  • 👥 Team collaboration and member management
  • 💰 Mana credit system with transfers and balance tracking
  • 🎨 Multi-brand support with configurable themes
  • 📱 Cross-platform (Web, iOS, Android)
  • 🔄 Real-time updates across all platforms
  • 🧪 Comprehensive testing with Vitest and Playwright

Quick Start

Prerequisites

  • Node.js 20+
  • pnpm (for web app)
  • npm (for mobile app)
  • Supabase account with project configured
  • Expo CLI (for mobile development)

Setup

  1. Clone the repository

    git clone <repository-url>
cd mana-core-apps

  2. Web App Setup

    cd apps/web
pnpm install
cp .env.example .env
# Edit .env with your Supabase credentials
pnpm dev

  3. Mobile App Setup

    cd apps/mobile
npm install
cp .env.example .env
# Edit .env with your Supabase credentials
npm start

Project Structure

mana-core-apps/
├── apps/
│   ├── web/                    # SvelteKit web application
│   │   ├── src/
│   │   │   ├── routes/        # File-based routing
│   │   │   │   ├── (auth)/    # Public auth pages
│   │   │   │   └── (app)/     # Protected pages
│   │   │   ├── lib/
│   │   │   │   ├── components/
│   │   │   │   ├── config/    # Multi-app configuration
│   │   │   │   ├── server/    # Server-only utilities
│   │   │   │   └── types/
│   │   │   └── hooks.server.ts # Auth middleware
│   │   └── package.json
│   │
│   ├── mobile/                 # React Native (Expo) app
│   │   ├── app/               # File-based routing (Expo Router)
│   │   │   ├── (drawer)/      # Drawer navigation
│   │   │   ├── auth/          # Auth screens
│   │   │   └── _layout.tsx    # Root layout with auth
│   │   ├── components/        # React components
│   │   ├── utils/            # Utilities (Supabase, storage)
│   │   └── package.json
│   │
│   └── landing/               # Landing page (planned)
│
├── CLAUDE.md                  # Developer documentation
└── README.md                  # This file

Technology Stack

Web App (apps/web)

Category Technology
Framework SvelteKit 2 with Svelte 5 (Runes)
Language TypeScript
Styling TailwindCSS 3 with PostCSS
Database Supabase (PostgreSQL)
Auth Supabase Auth with SSR
Testing Vitest (unit) + Playwright (E2E)
Build Tool Vite

Mobile App (apps/mobile)

Category Technology
Framework Expo 52 with React Native 0.76
Language TypeScript
Routing Expo Router 4 (file-based)
Styling NativeWind (TailwindCSS for RN)
Navigation React Navigation (drawer, tabs)
Database Supabase
Build EAS Build
Platforms iOS, Android, Web

Development

Web App Commands

cd apps/web

# Development
pnpm dev                # Start dev server (http://localhost:5173)
pnpm build              # Build for production
pnpm preview            # Preview production build

# Code Quality
pnpm check              # Type-check with svelte-check
pnpm check:watch        # Type-check in watch mode
pnpm lint               # Check formatting and lint
pnpm format             # Format code with Prettier

# Testing
pnpm test               # Run unit tests (Vitest)
pnpm test:ui            # Run tests with UI
pnpm test:e2e           # Run E2E tests (Playwright)

Mobile App Commands

cd apps/mobile

# Development
npm start               # Start Expo dev server
npm run ios             # Run on iOS simulator
npm run android         # Run on Android emulator
npm run web             # Run web version (http://localhost:19006)

# Building
npm run build:dev       # Build dev client
npm run build:preview   # Build for internal testing
npm run build:prod      # Build for production

# Code Quality
npm run lint            # Lint and check formatting
npm run format          # Fix linting and format code

# Setup
npm run prebuild        # Generate native projects

Environment Configuration

Both apps require Supabase configuration. Create .env files based on .env.example:

Web App (apps/web/.env)

PUBLIC_SUPABASE_URL=your_supabase_project_url
PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
MIDDLEWARE_URL=https://mana-middleware-111768794939.europe-west3.run.app
PUBLIC_APP_NAME=Mana Web
NODE_ENV=development

Mobile App (apps/mobile/.env)

EXPO_PUBLIC_SUPABASE_URL=your_supabase_project_url
EXPO_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

Architecture

Multi-Tenant System

The system supports multiple branded applications sharing the same authentication backend:

  • Memoro - Voice recordings and memory management
  • Cards - AI-powered flashcard learning
  • Storyteller - Creative writing with AI assistance
  • Mana - Central account and organization management

App configurations are centralized in apps/web/src/lib/config/apps.ts, defining branding, features, and routing for each application.

Authentication Flow

Web (SvelteKit):

  1. Server-side authentication using @supabase/ssr
  2. Middleware in hooks.server.ts handles session validation
  3. Protected routes in (app) group require authentication
  4. JWT validation via safeGetSession() before allowing access

Mobile (Expo):

  1. Client-side authentication using @supabase/supabase-js
  2. Custom memory storage for session persistence
  3. AuthProvider in app/_layout.tsx manages auth state
  4. Automatic navigation based on authentication status

Database Schema

Key tables:

  • users - User profiles (linked via auth_id to Supabase Auth)
  • organizations - Organization entities
  • user_roles - User-organization relationships with roles
  • teams - Team entities within organizations
  • team_members - User-team memberships
  • credit_transactions - Mana credit transfer history

See CLAUDE.md for detailed architecture documentation.

Testing

Web App

cd apps/web

# Unit tests
pnpm test              # Run all tests
pnpm test:ui           # Open Vitest UI

# E2E tests
pnpm test:e2e          # Run Playwright tests
pnpm test:e2e --ui     # Run with Playwright UI

Mobile App

Mobile testing is primarily done through Expo Go or development builds:

cd apps/mobile
npm start              # Start dev server
# Then press 'i' for iOS or 'a' for Android

Deployment

Web App

Vercel (Recommended):

cd apps/web
vercel

Netlify:

cd apps/web
netlify deploy

Mobile App

iOS and Android (via EAS):

cd apps/mobile

# Preview build (internal testing)
npm run build:preview

# Production build
npm run build:prod

Configure EAS in eas.json with your build profiles.

Contributing

  1. Create a feature branch from main
  2. Make your changes
  3. Run linting and tests
  4. Submit a pull request

Code Style

  • Use TypeScript for type safety
  • Follow ESLint and Prettier configurations
  • Write tests for new features
  • Use conventional commit messages

Documentation

  • CLAUDE.md - Comprehensive developer guide for Claude Code
  • apps/web/README.md - Web-specific documentation
  • Individual component documentation in source files

Support

For questions or issues, please contact the development team or open an issue in the repository.

License

Private - All rights reserved