Skip to main content
SoftsasiAI for Engineers
Sign in

§ masterplan.md

Browser Terminal OS

A dark-premium fake operating system inside the browser with commands, file explorer and a mini text editor.

All ideas
Dark Premium

01

App overview and objectives

A browser workspace that behaves like a small operating system: a file tree, a code editor, a real shell-like command interface and window management, all persisted in the browser. It is a playground for people who think in commands.

02

The problem worth solving

Cloud IDEs are heavy and require accounts and servers. A local-first, instant environment is ideal for teaching, quick experiments and portfolio demos where a whole VM is absurd.

03

Target audience

  • Primary — Developers and students who want a scratch environment in one tab.
  • Secondary — Educators demonstrating command-line concepts without provisioning machines.

04

Roles and permissions

  • Visitor — read-only public pages, can sign up.
  • Member — owns their own records, cannot see other users' data.

05

Core features

  • Virtual filesystem persisted locally with import and export
  • Command interface with a documented built-in command set and piping
  • Code editor with syntax highlighting and multiple tabs
  • Window manager with tiling and keyboard shortcuts
  • Runnable JavaScript sandbox with output console
  • Shareable workspace snapshots as a single file

Deliberately later

  • Optional remote compute for other languages
  • Collaborative sessions
  • Plugin API for new commands

06

Technical stack

React shell, IndexedDB-backed virtual filesystem, web workers for execution, an existing editor component.

Why: Everything runs client-side, so there is no per-user server cost and the workspace opens instantly, even offline.

Alternatives: Container-backed cloud IDE (real toolchains, expensive per user) or WASM-based runtimes (broader language support, big downloads).

07

Conceptual data model

Workspace — name, filesystem tree, settings, updated_at

FileNode — path, type, content, size, modified

Command — name, help text, handler id, permissions

Session — open windows, layout, history

Snapshot — exported workspace blob, share id

08

Integrations

  • Local persistence layer
  • Optional cloud sync
  • Editor and syntax libraries

09

UI design principles

  • Deep neutral background, one saturated accent, thin borders instead of heavy cards.
  • Monospace for data and code; tight, technical spacing.
  • Subtle glow and gradient only where you want the eye to land.

10

Security considerations

  • User code runs in workers with no access to the host page or storage outside the virtual filesystem.
  • Imported workspaces are validated and executed only on explicit user action.
  • No network access from the sandbox unless the user enables it per session.

11

Development phases

Phase 1 — Prove the core

  • — Virtual filesystem persisted locally with import and export
  • — Command interface with a documented built-in command set and piping
  • — Code editor with syntax highlighting and multiple tabs
  • — Static content and design system in place
  • — Basic analytics

Phase 2 — Make it real

  • — Window manager with tiling and keyboard shortcuts
  • — Runnable JavaScript sandbox with output console
  • — Shareable workspace snapshots as a single file
  • — Accounts, sign-in and password reset
  • — Empty, loading and error states everywhere

Phase 3 — Polish and launch

  • — Performance, accessibility and SEO pass
  • — Legal pages, contact route and 404 handling
  • — Wire up: Local persistence layer
  • — Wire up: Optional cloud sync

Phase 4 — Grow

  • — Optional remote compute for other languages
  • — Collaborative sessions
  • — Plugin API for new commands

12

Challenges and solutions

Risk — Users expect a real shell

Solution — Be explicit in the docs and error messages about what is emulated, and support the twenty commands people actually use.

Risk — Data loss from cleared browser storage

Solution — Automatic export reminders and one-click backup to a file.

Risk — Bundle size

Solution — Lazy-load the editor, language grammars and each command module on first use.

13

Future expansion

  • Teaching courseware built on the workspace
  • Remote execution tier
  • Team template workspaces

14

Page list (13 pages)

  1. 01 PUBLIC Desktop — The workspace shell and window manager.
  2. 02 PUBLIC Files — Virtual filesystem browser with import/export.
  3. 03 PUBLIC Editor — Multi-tab code editing.
  4. 04 PUBLIC Terminal — Command interface and history.
  5. 05 APP (signed in) Settings — Theme, keybindings, storage management.
  6. 06 AUTH Sign up — Create an account with email or a social provider.
  7. 07 AUTH Log in — Return to the account, with error and lockout states.
  8. 08 AUTH Reset password — Request a reset link and set a new password.
  9. 09 APP (signed in) Account settings — Profile, email, password, language and delete account.
  10. 10 PUBLIC Contact — Contact form plus real address, phone and email.
  11. 11 LEGAL & SYSTEM Privacy policy — What data is collected, why, and how to remove it.
  12. 12 LEGAL & SYSTEM Terms of service — Rules of use, liability and account termination.
  13. 13 LEGAL & SYSTEM 404 not found — Friendly dead end with search and links back.

15

Page map

PUBLIC       AUTH               APP (signed in)      LEGAL & SYSTEM
───────────  ─────────────────  ───────────────────  ───────────────────
├─ Desktop   ├─ Sign up         ├─ Settings          ├─ Privacy policy
├─ Files     ├─ Log in          └─ Account settings  ├─ Terms of service
├─ Editor    └─ Reset password                       └─ 404 not found
├─ Terminal
└─ Contact

key flows:
  Desktop ──▶ Files
  Desktop ──▶ Editor
  Desktop ──▶ Terminal
  Terminal ──▶ Files
  Settings ──▶ Desktop