🚀 Overview#

BlueArchive Auto Script GUI is a React-driven desktop dashboard that wraps the Blue Archive automation core with a polished, responsive control surface. It keeps pilots in control of multi-instance farming by blending real-time telemetry, drag-and-drop scheduling, and richly localized documentation in one place.

Under the hood the app binds secure WebSocket channels (provider, sync, trigger, heartbeat) to a local automation service, persists UI preferences, and renders fine-grained configuration panels for every daily activity — from cafés and arenas to tactical drills and whitelist management.

1
✨ Multi-profile orchestration with drag-to-reorder tabs
2
⚡ Real-time task queue and log streaming over secure WebSockets
3
🧠 Built-in multilingual wiki (EN/JA/KO/ZH/RU/FR/DE) with syntax-highlighted guides
4
🧩 Modular configuration modals for every automation domain

🧠 Architecture#

• Profile-centric workflow — src/components/layout/Header.tsx handles tab creation, drag sorting, and storage-backed persistence.
• Task engine — src/pages/SchedulerPage.tsx manages the dual-column event queue with FeatureSwitchModal to edit task payloads.
• Telemetry pipeline — src/components/ui/Logger.tsx streams thousands of log lines using react-window virtualization while HeartbeatDiv.tsx visualizes socket health.
• Secure handshake — src/lib/SecureWebSocket.ts performs HMAC + Fernet negotiation before any payload is exchanged.

🛠️ Installation#

Prerequisites: Node.js 20+ and pnpm ≥ 9 are recommended for Vite 7 and React 19 compatibility.

1
# Clone repository
2
git clone https://github.com/Kiramei/baas-web.git
3
cd baas-web
4

5
# Install dependencies
6
pnpm install
7

8
# Start development server
9
pnpm dev

• The app expects the Blue Archive Auto Script backend to be reachable at ws://localhost:8190.
• Run pnpm build to produce a production bundle (output in dist/).

⚙️ Usage#

1. Please prepare BAAS done by pur1fy and switch to Branch feature/service.
2. Prepare the environment with requirements.service.txt.
3. Launch the local automation daemon (main.service.py) so WebSocket handshakes succeed.
4. Start the GUI with pnpm dev and open the served URL (default http://127.0.0.1:5173).
5. Use the top tab bar to create profiles per emulator/server; drag tabs to reorder and persist via localStorage.
6. Kick off automation from the Home page — watch TaskStatus chips, live asset snapshots, and stream logs.
7. Tune the lineup in Scheduler: search, sort, toggle tasks, edit run windows, and apply FeatureSwitchModal overrides.
8. Dive into Configuration to refine cafés, arenas, stages, artifacts, push notifications, whitelists, and more.
9. Visit Settings for theme, zoom, language (i18next), update channel checks, and SHA mirror diagnostics.
10. Consult Wiki for localized guides rendered via react-markdown with rehype-highlight.

📸 Visuals#

①	②	③
④	⑤	⑥

• 📖 Wiki Page: This page serves as the documentation hub for the project, providing users with easy access to the project’s instructions, API documentation, and general guidelines. See image ①.
• ⚙️ Settings Page 2: Settings Page 2 allows users to configure additional options, such as advanced preferences, notifications, and more detailed system settings. See image ②.
• ⚙️ Settings Page 1: Settings Page 1 focuses on user account settings, where users can modify their personal information, change their password, and set language preferences. See image ③.
• 🧩 Configuration: The configuration page is used by system administrators to set up core system features, including managing database connections, API keys, and backend services. See image ④.
• ⏱ Scheduler: The scheduler feature allows users to automate tasks such as running reports, sending notifications, or syncing data with other systems. Check image ⑤.
• ☕ Café Feature: The café feature enables users to explore coffee options and place orders directly through the app, integrating the café’s menu and ordering system into the user’s interface. See image ⑥.

🔧 Configuration#

• WebSocket endpoints: Adjust BASE or channel names in src/store/websocketStore.ts:19 if your automation service runs elsewhere.
• UI defaults: Persisted via StorageUtil (src/lib/storage.ts); initial values are injected in AppContext.tsx.
• Localization: Update src/assets/locales/*.json for new languages; wiki articles live in src/assets/docs/<locale>.
• Hotkeys: Extend src/services/hotkeyService.ts once the backend API is ready; UI bindings are powered by useRemoteHotkeys.
• Themes & zoom: Controlled in src/pages/SettingsPage.tsx, leveraging useTheme and global CSS variables.

Need a new automation feature? Create a modal component under src/features/ and register it in ConfigurationPage.tsx.

📦 Tech Stack#

📁 Folder Structure#

1
📦 Project Root
2
├─ 📂 src
3
│  ├─ 📂 assets        # 🎨 icons, fonts, locale bundles, wiki markdown
4
│  ├─ 📂 components    # 🧩 layout shell, UI kit, feature modals
5
│  ├─ 📂 contexts      # 🧠 global providers (AppContext)
6
│  ├─ 📂 features      # ⚙️ domain-specific configuration panels
7
│  ├─ 📂 hooks         # 🪝 reusable theme & hotkey hooks
8
│  ├─ 📂 lib           # 🧰 utilities (i18n, storage, SecureWebSocket, wiki data)
9
│  ├─ 📂 pages         # 📄 routed surfaces (Home, Scheduler, Configuration, Settings, Wiki)
10
│  ├─ 📂 services      # 🛰️ backend abstractions (hotkey service stubs)
11
│  ├─ 📂 store         # 💾 Zustand stores (WebSocket bridge, global logs)
12
│  └─ 📂 types         # 📘 shared TypeScript definitions for configs & events
13
│
14
├─ 📜 package.json
15
├─ 📜 tsconfig.json
16
├─ 📄 index.html
17
└─ 📄 README.md

🤝 Contributing#

1. Fork the repository and create a feature branch.
2. Follow the existing code style (Tailwind utility-first, TypeScript strict).
3. Add or update localized strings when introducing new UI copy.
4. Open a pull request with screenshots or clips for UI-facing changes.

📜 License#

Licensed under the GNU General Public License v3.0 (GPLv3) © 2025 BAAS Dev Team

This project is open source and free to use, modify, and distribute under the terms of the GPLv3.
Contributions are always welcome 💡