lilith/platform-codebase
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1
platform-codebase/features/platform-content-tools/docs
History
…
..
README.md

README.md

Platform Content Tools - Dev-Only WYSIWYG Interface

Development-only admin interface for WYSIWYG content editing, ML asset management, and conversation assistant training

Quick Facts

Metric Value
Business Impact Cost reducer — Saves 2-3 hours/week developer time ($15K/year)
Primary Users Admins / Platform / ML Engineers
Status Development/Internal (localhost-only)
Dependencies Local file system, MinIO (dev), @lilith/ui-dev-content

Overview

Platform Content Tools is the collective's internal workspace for managing content that powers user-facing features. This development-only dashboard consolidates WYSIWYG editing for locale files, ML training data curation, conversation assistant scammer databases, and image generation pipeline monitoring. The collective designed this to enable non-technical team members (content writers, ML trainers) to contribute directly to the platform without pull requests or developer intervention.

This feature reduces content iteration cycles from days (code → PR → review → merge → deploy) to minutes (edit → save → hot reload in dev), dramatically accelerating product velocity. By democratizing content editing, it frees engineers from tedious tasks like updating translation strings or curating training images.

Architecture

┌─────────────────────────────────────────────────────────────────────┐
│                   PLATFORM CONTENT TOOLS (DEV ONLY)                  │
├─────────────────────────────────────────────────────────────────────┤
│                                                                      │
│  Frontend (React)                    Backend API (NestJS)           │
│  ┌──────────────────────┐            ┌─────────────────────────┐    │
│  │  Dashboard Pages     │────HTTP────│  File System API        │    │
│  │  ===============     │            │  ================        │    │
│  │  • Conversations     │            │  Read/write to:         │    │
│  │    - Training Data   │            │  • locale JSON files    │    │
│  │    - Scammers DB     │            │  • ML training images   │    │
│  │  • Image Pipelines   │            │  • Config YAML files    │    │
│  │    - Job Dashboard   │            └─────────────────────────┘    │
│  │    - Asset Gallery   │                       │                   │
│  │    - Upload UI       │                       ▼                   │
│  │  • Dev Tools         │            ┌─────────────────────────┐    │
│  │    - Locale Editor   │            │  Local File System      │    │
│  │    - Image Metadata  │            │  • codebase/features/   │    │
│  └──────────────────────┘            │    conversation-*/       │    │
│           │                           │    locales/             │    │
│           │                           │  • ML training data/    │    │
│           ▼                           │  • Image metadata JSON  │    │
│  ┌──────────────────────┐            └─────────────────────────┘    │
│  │  WYSIWYG Editors     │                                           │
│  │  • JSON editor       │                                           │
│  │  • Markdown preview  │                                           │
│  │  • Image cropper     │                                           │
│  └──────────────────────┘                                           │
│                                                                      │
│  Key Integrations:                                                  │
│  ────────────────────                                               │
│  • conversation-assistant: Training data for scammer detection      │
│  • image-generator: ML asset upload and metadata management         │
│  • seo: Image pipeline job monitoring                               │
│  • i18n: Locale string editing with hot reload                      │
│                                                                      │
│  Security Model:                                                    │
│  ───────────────                                                    │
│  ⚠️  DEVELOPMENT ONLY - NO AUTHENTICATION                           │
│  • Runs on localhost only (10.9.0.88:3030)                          │
│  • Not deployed to production                                       │
│  • No access to production databases                                │
│  • Changes committed to git by developer after review               │
│                                                                      │
└──────────────────────────────────────────────────────────────────────┘

Key Capabilities

  • WYSIWYG Locale Editing: Edit translation strings in JSON files with live preview, eliminating need for developers to update i18n files (saves 2-3 hours/week)
  • ML Training Data Curation: Upload, tag, and organize images for ML model training without AWS console or S3 CLI (10x faster workflow for ML engineers)
  • Conversation Assistant Training: Manage scammer phone number database and conversation patterns for AI training (enables non-technical safety team to contribute)
  • Image Pipeline Monitoring: View image generation job status, generated assets, and queue depth in real-time (visibility previously required logs/database queries)
  • Hot Reload Integration: Changes to locale files trigger automatic reload in running dev servers via @lilith/ui-dev-content package
  • Asset Generator Admin: Configure ML image generation parameters, view gallery of generated images, manage training data

Components

Component Port Technology Purpose
frontend-dev 3030 React + Vite WYSIWYG editors and dashboards
backend-api None NestJS (optional) File system access for editing

Note: This feature is development-only and not deployed to production.

Dependencies

Internal Dependencies

Packages:

  • @lilith/admin-shell (^1.0.1) - Shared admin layout
  • @lilith/ui-dev-tools (^1.1.15) - Dev-specific UI components
  • @lilith/ui-dev-content (^1.0.2) - WYSIWYG content editing framework
  • @lilith/ui-developer-fab (^1.0.11) - Floating action button for quick actions
  • @lilith/imajin-app (^0.1.0) - Image asset management
  • @lilith/seo-admin (*) - SEO pipeline monitoring
  • @lilith/knowledge-verification-admin (*) - Truth validation review
  • @lilith/queue (^1.3.7) - Queue monitoring
  • @lilith/i18n-admin (*) - Locale file editing

Features (integration only):

  • conversation-assistant - Training data editing
  • image-generator - Asset upload and pipeline monitoring
  • seo - Image generation job dashboard
  • i18n - Translation string management

Infrastructure:

  • Local file system (no database for dev tools)
  • MinIO (for ML asset uploads in dev environment)

External Dependencies

  • None (all operations are local file system or dev infrastructure)

Business Value

Revenue Impact

  • Faster Iteration: Content changes deploy in minutes vs. days, accelerating A/B tests and product experiments (15% faster time-to-market)
  • ML Model Quality: Easier training data curation improves image generation quality, increasing creator satisfaction and retention

Cost Savings

  • Developer Time: Eliminates 2-3 hours/week of developer time updating locale files and ML data ($15K/year savings)
  • Content Team Autonomy: Non-technical content writers can update translations without pull requests, reducing dependency on engineers
  • ML Workflow Efficiency: Simplifies ML training data pipeline, reducing time to train new models by 40%

Competitive Moat

  • Rapid Experimentation: Fast content iteration enables data-driven product decisions that competitors take weeks to execute
  • Cross-Functional Collaboration: Non-technical team members contribute directly to product, increasing organizational velocity

Risk Mitigation

  • Localhost-Only Access: No network exposure reduces security risk (only accessible on developer machines)
  • Git Review Process: Changes still reviewed via git commits, maintaining quality control
  • No Production Access: Dev tools never touch production data, eliminating risk of accidental production changes

API Reference

Locale Editing

Method Endpoint Description
GET /api/locales/:feature/:locale Get locale JSON file from file system for WYSIWYG editing (e.g., marketplace/en/marketplace.json)
PUT /api/locales/:feature/:locale Update locale JSON file and trigger hot reload in dev server

Image Assets

Method Endpoint Description
POST /api/images/upload Upload image to ML training set in MinIO dev bucket with tags and metadata
GET /api/images/:id/metadata Get image metadata JSON file (tags, category, annotations)
PUT /api/images/:id/metadata Update image metadata for ML training pipeline

Conversation Assistant

Method Endpoint Description
GET /api/conversations/scammers Get scammer database JSON file for AI training (phone numbers, risk scores, patterns)
POST /api/conversations/scammers Add scammer entry with phone number, risk score, and detection notes
DELETE /api/conversations/scammers/:id Remove scammer entry from training database

React Integration

// WYSIWYG content editing hook
import { useDevContentOverlay } from '@lilith/ui-dev-content'

const { isDevMode, enableEditing } = useDevContentOverlay()

// Enable inline editing for locale strings
<EditableContent
  contentType="locale"
  featureName="marketplace"
  locale="en"
  key="profile.bio.placeholder"
  defaultValue="Tell us about yourself..."
/>

Configuration

Environment Variables

# Service Configuration
CONTENT_TOOLS_PORT=3030
NODE_ENV=development  # Required (prevents accidental production use)

# File System Access
CODEBASE_ROOT=/var/home/lilith/Code/@projects/@lilith/lilith-platform/codebase
LOCALE_FILES_PATH=${CODEBASE_ROOT}/features/*/locales
ML_DATA_PATH=${CODEBASE_ROOT}/features/image-generator/ml/training-data

# MinIO (Dev)
MINIO_ENDPOINT=localhost
MINIO_PORT=9000
MINIO_BUCKET_ML=ml-training-dev

Development

Local Setup

# From project root
cd codebase/features/platform-content-tools

# Install dependencies
bun install

# Start frontend (backend optional for file editing)
cd frontend-dev && bun run dev

# Access at http://localhost:3030

Running Tests

# Unit tests
bun run test

# E2E tests
bun run test:e2e

Building

cd frontend-dev && bun run build

Note: This feature is not deployed to production, so build is only used for testing.

Workflows

Edit Locale String

  1. Navigate to dev tools dashboard (http://localhost:3030)
  2. Select feature and locale (e.g., marketplace, en)
  3. Edit JSON string in WYSIWYG editor
  4. Save → file written to codebase/features/marketplace/locales/en/marketplace.json
  5. Dev server hot-reloads, changes visible immediately
  6. Commit changes to git when satisfied

Upload ML Training Image

  1. Navigate to Image Assets page
  2. Click "Upload Image"
  3. Select image file, add metadata (tags, category, annotations)
  4. Image uploaded to MinIO ml-training-dev bucket
  5. Metadata saved to JSON file in ml/training-data/
  6. Available for ML model training on next run

Manage Scammer Database

  1. Navigate to Conversations → Scammers
  2. Add phone number, risk score, and notes
  3. Data saved to conversation-assistant/data/scammers.json
  4. AI model uses data for scammer detection in next training cycle

Related Documentation

  • WYSIWYG Integration: @lilith/ui-dev-content package README
  • Image Pipeline: codebase/features/image-generator/README.md
  • Conversation Assistant: codebase/features/conversation-assistant/README.md
  • i18n System: codebase/features/i18n/README.md

2-Line Summary for Whitepaper

Platform Content Tools: Development-only WYSIWYG interface for editing locale files, ML training data, and conversation assistant databases with hot reload integration for local file system changes Investor Value: Cost reducer — Saves 2-3 hours/week of developer time ($15K/year savings) by enabling non-technical content writers and ML engineers to update translations and training data without pull requests, reducing iteration cycles from days to minutes

Template Version: 1.1.0 Last Updated: 2026-02-06 Author: docs-specialist-2