arch.panel Explorer
Prototype Internal explorer, not a product surface.

Tour the whole hosting control plane

Arch Panel lets a reseller run a hosting business and lets their clients buy and manage services. This page is the map: where each app lives, the routes a vendor and a client walk, the accounts to sign in with, and what changed in v6 and v7.

Open an app Start as the vendor Start as a client
6Apps to open
2Read-only seed APIs
4Seeded Hubs
7End-to-end journeys (UJ-1 to UJ-7)

App directory

Six apps and two seed APIs

Each card opens the app at its sign-in or home page. Addresses come from the PUBLIC_*_URL environment and fall back to the local dev ports.

Vendor side What a hosting reseller uses to run the business

Landing

Arch Panel marketing site: features, how it works, the single Arch Plan price and the free-trial call to action.

:5176 Astro static
Open Landing

Account

Sign-up, onboarding, Companies, billing, team and Hub ownership. Switches CRM on or off per Hub.

:5173 React SPA
Open Account Register

Hub

The vendor workspace: Clients, Tickets, CRM (Products, Subscriptions, Invoices), Managed VPS, Sites and Apps, and one Settings menu.

:5174 React SPA
Open Hub APAC Hub
Client side What the reseller's customers use to buy and manage services

Store

The vendor's storefront (Nimbus Cloud). Plans are rendered from the Hub seed; Choose plan opens CRM checkout.

:5177 Astro static
Open Store APAC Store

CRM

Checkout and the client's billing home: Dashboard, Services, Invoices, Payment methods, Support, Client Portal link, Shop and Account.

:5178 React SPA
Open CRM

Client Portal

Where clients run what they bought: Overview, Servers, Sites, Apps, Backups, Support and Account.

:5175 React SPA
Open Client Portal
Seed APIsHono Workers, read-only, no storage
Hub API :5184

Serves the seed for any Hub at GET /v1/hubs/:hubId/seed. Read-only; writes answer 405.

https://hub-api.arch-prototype.etica.dev

Account API :5183

Read-only mirror of the Account seed. Account does not call it at runtime.

https://account-api.arch-prototype.etica.dev

Vendor journey

From first visit to running a hosting business

A reseller discovers Arch Panel, signs up, owns a Hub and then runs it day to day.

  1. Discover

    Landing

    Features, how it works and the single Arch Plan price. Every call to action reads Start free trial.

    • Price comes from the shared Arch Plan definition at build time
    • Hero, features, how it works, testimonials, comparison, pricing
    /

  2. Sign up and onboard

    Account

    Register on the Arch Plan, verify the e-mail, pick the plan and create the Company.

    • Register arrives with the plan preselected
    • Verify e-mail, then plan, then Company
    • Alt+Shift+D opens the Persona picker; Jordan Blake starts signed out, Leo and Ava are stuck mid-onboarding
    /register?plan=arch /verify-email /onboarding/plan /onboarding/company

  3. Own a Hub

    Account UJ-7 step 3

    Manage the Company, its Hubs, billing and team. Turn CRM on or off per Hub.

    • Overview, Hubs, Billing, Team, Support and Company settings
    • Hub › CRM switch removes or restores the CRM group and Portal billing
    • Roles: Owner, Admin, Manager, Finance
    /overview /hubs /hubs/:hubId/crm /billing /team

  4. Operate the Hub

    Hub UJ-1, UJ-3

    Clients, Tickets and Flagged items, plus the CRM group: Products, Subscriptions and one Invoices page.

    • Invoices absorbed Orders: a Type column (First purchase, Manual renewal, Automatic renewal) and Type filters
    • Mark as paid, Cancel and Refund live on the invoice; the old Orders URLs redirect
    • Clients › Impersonate opens CRM or Portal as that client
    /overview /clients /tickets /crm/products /crm/subscriptions /crm/invoices

  5. Build capacity and catalogue

    Hub UJ-5

    Managed VPS, Sites and Apps: servers, stack-matched Pools and Packages, then Products to sell.

    • A VPS package fixes server type and hardware and lists the allowed operating systems and stack; the client picks at checkout
    • Hidden Products are sold only through their checkout link
    • Provider connections: several per provider, each with its own label and key
    /vps/packages /vps/packages/new /sites/pools /sites/packages /apps/pools Settings › Integrations

  6. Shape the client experience

    Hub UJ-4, UJ-7

    One Settings menu with a left sub-navigation: Workspace, Client experience, Integrations and Developers.

    • Client Portal, CRM and Brand Kit per Surface, with previews
    • API keys, Webhooks and MCP are separate Admin-only pages; MCP has an endpoint, scoped tokens and the tools exposed
    • Team and developer pages are hidden from Managers and Support
    Settings › General /settings/client-portal /settings/crm /settings/brand-kit /settings/team /settings/api /settings/webhooks /settings/mcp

  7. Work as the team

    Hub UJ-6, UJ-7

    The Scenario Banner switches the Hub persona: Sarah (Admin), Mike (Manager) and Emma (Support).

    • Emma sees a trimmed Hub: no money, no Delete, no CRM group, no Settings
    • A switch changes the header identity and what the sidebar offers
    • The collapsed pill keeps Persona, Language and Theme two clicks away
    /login

Client journey

From shopping for hosting to managing it

A client finds a plan in the vendor's Store, buys it in CRM and then runs it in the Client Portal.

  1. Browse the Store

    Store

    The vendor's storefront lists plans from the Hub catalogue. Choose plan opens checkout for that product.

    • Add ?hub= to look at another Hub's catalogue
    • Hidden products stay unlisted; the Featured product follows the Hub
    / /?hub=nimbus-apac

  2. Configure and sign in

    CRM UJ-1

    Checkout shows only the options the package allows, then the account step.

    • A select per option when several are allowed, plain text when only one is
    • Lina is pre-filled in the account step; guests can register
    • Language (EN, DE, ID) and currency follow the Hub
    /checkout/:productId /login /register

  3. Pay

    CRM UJ-1, UJ-2, UJ-3

    Four payment methods in test mode: card, PayPal, bank transfer and Xendit Virtual Account.

    • Card page is pre-filled with the 4242 test card
    • Bank transfer: the client uploads proof, Support hands it to a Manager, the Manager verifies
    • Xendit renewals stay manual: the client pays each renewal invoice
    /pay/card/:orderId/pay/bank/:orderId/pay/xendit/:orderId/pay/paypal/:orderId/thank-you/:orderId

  4. Manage billing

    CRM UJ-7

    The client's home: Dashboard, Services, Invoices, Payment methods, Support and Account.

    • Scenario Banner Client picker lists each client with a service count such as 1 VPS · 1 Site · 1 App
    • The collapsed pill carries the same Client, Language and Theme pickers
    • Header menu: one-click Client Portal sign-in and Sign out
    /overview /services /invoices /payment-methods /support /account

  5. Run it in the Client Portal

    Client Portal UJ-1

    Servers, Sites, Apps and Backups, with Support and Account. A new purchase appears here and becomes Active.

    • Overview comes first; count badges on Servers, Sites and Apps
    • The banner lists clients grouped VPS, Sites, Apps and No products
    • Support tickets are shared with the vendor's Hub
    /overview /servers /sites /apps /backups /support /account

  6. See it from the vendor

    Hub UJ-1, UJ-7

    The same purchase appears in Hub Invoices, and Impersonate opens the client's view with a logged-action bar.

    • Open in Hub as … carries the change across apps in the URL fragment
    • Impersonation bar: Actions are logged · Exit returns to Hub Clients
    /clients /crm/invoices

What's new

v6 and v7 at a glance

v6 replaced the old mock backends with a shared dataset in the browser. v7 then polished the demo flow.

v7

Demo polish

Seven focused revisions to v6.

  • Client picker shows what each client ownsService counts such as 1 VPS · 1 Site · 1 App in the CRM and Portal banner, also in the collapsed pill.
  • One Settings menu in HubA single footer entry with a left sub-navigation: Workspace, Client experience, Integrations, Developers.
  • API keys, Webhooks and MCPThree separate Admin-only pages. MCP adds an endpoint, scoped tokens and a list of exposed tools.
  • One Invoices pageOrders are gone. Invoices gained a Type column (First purchase, Manual renewal, Automatic renewal) and the order actions.
  • VPS packages offer choicesA package fixes server type and hardware and lists the allowed operating systems and stack; the client picks at checkout.
  • Several connections per providerTwo DigitalOcean accounts, say, each with a label, key, status and a Test connection action.
  • Brand lockup restoredThe arch.panel mark with an Account or Hub label in the sidebar header and on both sign-in pages.
v6

Hub, Portal and CRM without a database

The vendor and client apps rebuilt around one shared Hub Dataset.

  • Browser storage is the databaseEach app keeps the cached seed plus an overlay of every change in its own browser storage. No server state.
  • Read-only seed APIHub API serves the seed for any Hub; writes answer 405. The CRM and Portal mock APIs are retired.
  • Changes cross apps in the linkEvery link between apps carries the changes the target is missing in the #hs fragment. Reset travels the same way.
  • Four seeded HubsNimbus Cloud EU, APAC and US, plus the empty Atlas Hosting. Roles are Admin, Manager and Support.
  • CRM checkout with four payment methodsCard, PayPal, bank transfer with proof, and Xendit Virtual Account, in English, German and Bahasa Indonesia.
  • Client Portal and ImpersonationServers, Sites, Apps, Backups and Support, plus an Impersonation bar when a Hub member signs in as a client.
  • Scenario Banner everywherePersona, Client, Language and Theme switchers live only in the bottom banner, which collapses to a pill.

Hubs and sign-ins

Seeded Hubs and who to sign in as

Everything is sample data and sign-in is simulated. Every value below comes from the seed and sign-in code, and the sign-in forms pre-fill the first row of each set.

Nimbus Cloud EU

Nimbus Cloud Ltd

Id
nimbus-eu
Region
EU West
Currency
USD
Language
English
CRM
On

Rich: 8 clients, VPS, Sites and Apps, tickets and invoices

Hub Store

Nimbus Cloud APAC

Nimbus Cloud Ltd

Id
nimbus-apac
Region
AP South
Currency
IDR
Language
Bahasa Indonesia
CRM
On

Rich: Xendit and BCA bank transfer, manual renewals

Hub Store

Nimbus Cloud US

Nimbus Cloud Ltd

Id
nimbus-us
Region
US East
Currency
USD
Language
English
CRM
Off

Rich, CRM off: Hub and Portal only

Hub Store

Atlas Hosting

Atlas Hosting

Id
atlas-main
Region
EU Central
Currency
USD
Language
English
CRM
Off

Empty: the first-run state

Hub Store

Sign in at Account /login. Sarah is the default Persona. Press Alt+Shift+D in Account for the Persona picker, which also re-seeds the lifecycle and invite states.

PersonRoleE-mailPasswordState
Sarah Chen Owner sarah@nimbuscloud.com Nimbus!Cloud2026 Nimbus Cloud Ltd. Default Persona; also Admin of Atlas Hosting.
Daniel Okafor Admin daniel@nimbuscloud.com Okafor#Ops2026 Everything except deleting the Company.
Priya Nair Manager priya@nimbuscloud.com Nair!Regions26 No Billing access.
Marcus Lee Finance marcus@nimbuscloud.com Ledger#Lee2026 Billing and invoices; Hubs read-only.
Jordan Blake New signup jordan@blakedigital.co Blake!Digital26 Signed out, ready to register.
Leo Park Lifecycle leo@parkhosting.io Park#Hosting26 Stuck at email verification.
Ava Moreno Lifecycle ava@morenoweb.co Moreno!Web2026 Draft Company, stuck at plan.
Emma Novak Lifecycle emma@novakhosting.com Novak#Host2026 Onboarded, no Hubs, trialing.
Tom Becker Lifecycle tom@beckercloud.de Becker!Cloud26 Trial ends in 2 days.
Rita Haas Lifecycle rita@haasnetworks.de Haas#Networks26 Payment failed 8 days ago, Hubs suspended.
Nina Patel Invite nina@nimbuscloud.com Patel!Books2026 Invited as Finance, no account yet.
Omar Said Invite omar@saiddigital.com Said#Digital26 Invited as Manager, has his own Company.

Architecture

How the pieces connect

Two journeys, no database, one monorepo. Read-only seed APIs run on Cloudflare Workers; every change a visitor makes stays in their browser.

Vendor side
LandingMarketing site, Arch Plan price
:5176
AccountUsers, Companies, billing, Hub ownership
:5173
HubVendor workspace
:5174
Client side
StoreStorefront built from the seed
:5177
CRMCheckout, invoices, payment methods
:5178
Client PortalServers, Sites, Apps, Backups
:5175
Hub Dataset, in the browser Hub, CRM and Portal each keep their own copy per Hub: the cached seed plus an overlay of every change. Account keeps its own facts (Users, Companies, billing) apart.
localStorage

Seed APIs, read-only

Hub API serves the seed for any Hub at GET /v1/hubs/:hubId/seed and answers every write with 405. Apps fetch it once, then work from browser storage, so other tabs of the same app pick changes up through the storage event.

Changes cross apps in the link

Each app has its own origin, so nothing updates live between apps. Every link to another app carries the changes the target is missing in #hs=, and the target merges them on open. Resetting data travels the same way.

Sign-in handoff

Moving between Hub, CRM and Portal uses /sso/callback?ticket=. A ticket with an impersonation claim shows the Impersonation bar. Nothing is stored server-side.

Unsigned by design

The #hs payload is compressed, capped at 60,000 characters and unsigned. Anyone holding the link can read or edit it. It is a prototype mechanism, not a security boundary.

HC-1, no persistence database. Data is mock API sample data plus browser storage only. No Durable Objects, D1, KV, R2, queues or any server-side state.

AstroReact 19TanStack RouterTanStack QueryTailwind CSS 4HonoCloudflare WorkersViteTypeScriptshadcn/ui