Skip to content

Console development & QA ​

The web console is a React + TypeScript + Vite app in console/, built by Gradle, and served by the server at /console/. See web-console source under console/ for the screens.

Layout ​

console/
  src/
    pages/        # views: Dashboard, Browser, Transfer, Cluster, Metrics, Access, Settings
    components/   # Shell, Modal, PolicyEditor, BucketSettings, ObjectTags, ObjectLock,
                  # TransferWizard, Login, Gate
    lib/          # s3, iam, rest, credentials, edition (browser API clients)

The console talks to the server directly from the browser: S3 and IAM via signed requests (@aws-sdk/client-s3, @aws-sdk/client-iam), the admin API via X-API-Key/X-API-Secret.

Develop ​

bash
cd console
npm ci
npm run dev          # http://localhost:8001/console/

Point it at a running server by signing in with that server's endpoint/keys on the login screen.

Build & serve (what Gradle does) ​

bash
cd console && npm run build           # Vite build -> console/dist
# Gradle wires this automatically:
./gradlew :tiny-s3-lib:build -PbuildConsole  # runs installConsole -> buildConsole -> copyConsoleToResources

copyConsoleToResources stages console/dist into lib/src/main/resources/console/, which ConsoleHandler serves at /console/. The staged assets are generated — not committed.

Run a server with the console embedded:

bash
./gradlew runServer -Pconfig=app/examples/simple-server.yaml
# then open http://localhost:8000/console/

Visual QA with Playwright (MCP) ​

A Playwright MCP server is declared in .mcp.json. After Claude Code is restarted and the project MCP server is approved, Claude can drive a real browser to review each screen.

Typical flow:

  1. Start a server with the console built in (see above) on a known port.
  2. Have Claude navigate to http://localhost:<port>/console/, sign in, and screenshot each view: Dashboard, Object Browser (incl. bucket settings, object permissions, versions), Identity & Access (users/groups/roles/policies), Data Transfer (transfers + sync), Settings.
  3. Fix any spacing/alignment/contrast issues found, rebuild, and re-check.

Notes:

  • First Playwright run downloads a browser; the initial launch is slower.
  • The console is client-rendered, so wait for network/render to settle before screenshotting.

TinyS3 is AGPLv3 licensed. Cloudflare and Cloudflare Workers are trademarks of Cloudflare, Inc. Amazon S3 and AWS are trademarks of Amazon.com, Inc. or its affiliates. MinIO is a trademark of MinIO, Inc. They are named only to describe compatibility; totis.ai is not affiliated with, endorsed by, or sponsored by any of them.