Compare commits

..

No commits in common. "c0276389eb596ba1206da475303753dfcf8ac48a" and "2937fb237208c93d4b82e9f910bef1fdaa48e041" have entirely different histories.

6 changed files with 25 additions and 197 deletions

1
.gitignore vendored
View File

@ -1,5 +1,4 @@
.sandlot/
.rev/
# dependencies (bun install)
node_modules

View File

@ -48,16 +48,10 @@ Path aliases: `$` = server, `@` = shared, `%` = lib (defined in tsconfig.json).
- `apps.ts` -- **The heart**: app discovery, process spawning, health checks, auto-restart, port allocation, log management, graceful shutdown. Exports `APPS_DIR`, `TOES_DIR`, `TOES_URL`, and the `App` type (extends shared `App` with process/timer fields).
- `api/apps.ts` -- REST API + SSE stream. Routes: `GET /` (list), `GET /stream` (SSE), `POST /:name/start|stop|restart`, `GET /:name/logs`, `POST /` (create via git), `POST /:name/rename`, `POST /:name/icon`, env var CRUD, tunnel management.
- `api/events.ts` -- SSE stream for discrete lifecycle events (`/stream`). Used by app processes (not the dashboard). Includes a 60s heartbeat ping.
- `api/sync.ts` -- File sync API: manifest endpoint, file read/write, app delete, app reload (triggered by git tool after deploy), file watch SSE.
- `api/system.ts` -- System info, metrics (CPU/RAM/disk per-app via `ps`/`du`), unified log aggregation, perf timing toggle, update check/apply, server restart.
- `index.tsx` -- Entry point. Mounts API routers, tool URL redirects (`/tool/:tool`), tool API proxy (`/api/tools/:tool/*`), on-demand CLI binary builds (`/dist/:file`), install script endpoint (`/install`), SPA catch-all routes, subdomain proxy (including WebSocket). Initializes apps.
- `mdns.ts` -- mDNS publishing via `avahi-publish` on Linux production. Publishes `<app>.hostname.local` A records pointing to local IP. Auto-republishes on unexpected exit with exponential backoff.
- `proxy.ts` -- Subdomain routing: extracts subdomain from `*.localhost` or `*.X.local`, proxies HTTP requests and WebSocket connections to the app's port. Sets `x-app-url` header. Optional perf timing.
- `api/sync.ts` -- File sync API: manifest endpoint, file read/write, app reload (triggered by git tool after deploy), file watch SSE.
- `index.tsx` -- Entry point. Mounts API routers, tool URL redirects (`/tool/:tool`), tool API proxy (`/api/tools/:tool/*`), initializes apps.
- `shell.tsx` -- Minimal HTML shell for the SPA.
- `sync.ts` -- Re-exports `computeHash` and `generateManifest` from `%sync` (lib).
- `tui.ts` -- Terminal UI for the server process (renders app status table when TTY, plain logs otherwise). Debounced rendering at 50ms.
- `tunnels.ts` -- Public tunnel management via `@because/sneaker`. Persists tunnel config in `TOES_DIR/tunnels.json`. Auto-reconnects on drop with exponential backoff (max 10 attempts). Manages share/unshare lifecycle.
- `tui.ts` -- Terminal UI for the server process (renders app status table when TTY).
### Client (`src/client/`)
@ -68,11 +62,9 @@ Client-side SPA rendered with `hono/jsx/dom`. No build step -- Bun serves `.tsx`
- `api.ts` -- Fetch wrappers for server API calls.
- `tool-iframes.ts` -- Manages tool iframe lifecycle (caching, visibility, height communication).
- `update.tsx` -- SSE connection to `/api/apps/stream` for real-time state updates.
- `router.ts` -- Client-side router. Intercepts link clicks, handles popstate, maps URL paths to state (`/app/:name/:tab`, `/settings`, dashboard tabs).
- `ansi.ts` -- ANSI escape code handling for log rendering.
- `components/` -- Dashboard, Sidebar, AppDetail, Nav, AppSelector, LogsSection, DashboardLanding, SettingsPage, Vitals, UnifiedLogs, Urls, emoji-picker, modal.
- `components/` -- Dashboard, Sidebar, AppDetail, Nav, AppSelector, LogsSection.
- `modals/` -- NewApp, RenameApp, DeleteApp dialogs.
- `styles/` -- Forge CSS-in-JS (themes, buttons, forms, layout, logs, misc).
- `styles/` -- Forge CSS-in-JS (themes, buttons, forms, layout).
- `themes/` -- Light/dark theme token definitions.
### CLI (`src/cli/`)
@ -86,37 +78,30 @@ Client-side SPA rendered with `hono/jsx/dom`. No build step -- Bun serves `.tsx`
- `pager.ts` -- Pipe output through system pager.
CLI commands:
- **Apps**: `status` (list or info), `new`, `get`, `open`, `rename`, `rm`
- **Lifecycle**: `start`, `stop`, `restart`, `share`, `unshare`, `logs`, `metrics`, `cron` (list/log/status/run)
- **Config**: `env` (list/set/rm, per-app or `--global`), `perf` (toggle request timing)
- **Hidden**: `list`, `info`, `log`, `version`, `shell`
Some commands (`shell`, `get`, `open`) are disabled when running over SSH (`USER=cli`).
- **Apps**: `list`, `info`, `new`, `get`, `open`, `rename`, `rm`
- **Lifecycle**: `start`, `stop`, `restart`, `logs`, `metrics`, `cron`, `share`, `unshare`
- **Config**: `env`
### Shared (`src/shared/`)
Types shared between browser and server. **Cannot use Node/filesystem APIs** (runs in browser).
- `types.ts` -- `App`, `AppState`, `LogLine`, `Manifest`, `FileInfo`, `DEFAULT_EMOJI`, `VALID_NAME`
- `events.ts` -- `ToesEvent`, `ToesEventType`, `ToesEventInput` type definitions
- `urls.ts` -- `toSubdomain()` and `buildAppUrl()` for subdomain URL construction
- `types.ts` -- `App`, `AppState`, `LogLine`, `Manifest`, `FileInfo`
- `gitignore.ts` -- `.gitignore` pattern matching (used by sync API and file watchers)
### Lib (`src/lib/`)
Server-side code shared between CLI and server. Can use Node APIs.
- `config.ts` -- `HOSTNAME` and `LOCAL_HOST` (`hostname.local`) constants
- `templates.ts` -- Template generation for `toes new` (bare, ssr, spa), reads embedded templates from `templates.data.ts`
- `templates.data.ts` -- Generated file containing embedded template contents (built by `scripts/embed-templates.ts`)
- `templates.ts` -- Template generation for `toes new` (bare, ssr, spa)
- `sync.ts` -- Manifest generation, hash computation (used by sync API for file diffing in tools)
### Tools Package (`src/tools/`)
The `@because/toes` package that apps/tools import. Published exports:
- `@because/toes` -- re-exports `computeHash`, `generateManifest`, `FileInfo`, `Manifest`, `VALID_NAME` (`src/index.ts` -> `src/tools/index.ts`)
- `@because/toes/tools` -- `baseStyles`, `ToolScript`, `theme`, `loadAppEnv`, `on` (event subscription), `appUrl`, `VALID_NAME`
- `@because/toes` -- re-exports from server (`src/index.ts` -> `src/server/sync.ts`)
- `@because/toes/tools` -- `baseStyles`, `ToolScript`, `theme`, `loadAppEnv`
### Pages (`src/pages/`)
@ -126,25 +111,17 @@ Hype page routes. `index.tsx` renders the Shell.
### App Lifecycle
States: `invalid` | `error` | `stopped` <-> `starting` -> `running` -> `stopping` -> `stopped`
States: `invalid` -> `stopped` <-> `starting` -> `running` -> `stopping` -> `stopped`
- Discovery: scan `APPS_DIR`, read each `package.json` for `scripts.toes`
- Spawn: `Bun.spawn(['bun', 'run', 'toes'])` with `PORT`, `APP_URL`, `APPS_DIR`, `DATA_DIR`, `DATA_ROOT`, `TOES_URL`, `TOES_DIR`, `NO_AUTOPORT`, plus per-app env vars from `loadAppEnv()`
- Startup: runs `bun install` first if `node_modules/` missing, then polls `/ok` every 500ms (30s timeout)
- Health checks: every 30s to `/ok` (5s timeout), 3 consecutive failures trigger restart
- Auto-restart: exponential backoff (1s, 2s, 4s, 8s, 16s, 32s), max 5 attempts, resets after 60s stable run. State becomes `error` after max attempts.
- Spawn: `Bun.spawn()` with `PORT`, `APPS_DIR`, `TOES_URL`, `TOES_DIR`, plus per-app env vars
- Health checks: every 30s to `/ok`, 3 consecutive failures trigger restart
- Auto-restart: exponential backoff (1s, 2s, 4s, 8s, 16s, 32s), resets after 60s stable run
- Graceful shutdown: SIGTERM with 10s timeout before SIGKILL
- On startup, kills stale processes on ports 3001-3100 and orphaned `bun run toes` processes
### Subdomain Proxy
Every app gets a subdomain: `<app>.localhost` (dev) or `<app>.hostname.local` (prod). The server's fetch handler (`index.tsx`) checks for subdomains first and proxies to the app's port. WebSocket connections are also proxied via Bun's `server.upgrade()` with upstream bridging. The `x-app-url` header is set so apps know their public URL.
### Tools vs Apps
Tools are apps with `"toes": { "tool": true }` in package.json. From the server's perspective they're identical processes. The dashboard renders tools as iframe tabs instead of sidebar entries. Tool URLs redirect through the server via subdomain: `/tool/:tool?app=foo` -> `http://<tool>.host/?app=foo`. Tool API calls can also be proxied: `/api/tools/:tool/*` -> `http://localhost:<toolPort>/*`.
The `apps` field in package.json controls whether a tool shows on app detail pages (`false` to hide). The `dashboard` field controls whether a tool shows on the dashboard landing page.
Tools are apps with `"toes": { "tool": true }` in package.json. From the server's perspective they're identical processes. The dashboard renders tools as iframe tabs instead of sidebar entries. Tool URLs redirect through the server: `/tool/:tool?app=foo` -> `http://host:toolPort/?app=foo`.
### Versioning
@ -156,14 +133,14 @@ Per-app env files in `TOES_DIR/env/`:
- `_global.env` -- shared by all apps
- `<appname>.env` -- per-app overrides
The server sets these on each app process: `PORT`, `APP_URL`, `APPS_DIR`, `DATA_DIR` (per-app at `TOES_DIR/<name>`), `DATA_ROOT`, `TOES_DIR`, `TOES_URL`, `NO_AUTOPORT`.
The server sets these on each app process: `PORT`, `APPS_DIR`, `TOES_URL`, `TOES_DIR`, `DATA_DIR`.
### SSE Streaming
Two SSE endpoints serve different consumers:
- `/api/apps/stream` -- Full app state snapshots on every change. Used by the dashboard UI. Driven by `onChange()` in `apps.ts`.
- `/api/events/stream` -- Discrete lifecycle events (`app:start`, `app:stop`, `app:reload`, `app:create`, `app:delete`). Used by app processes to react to other apps' lifecycle changes. Driven by `emit()`/`onEvent()` in `apps.ts`. Apps subscribe via `on()` from `@because/toes/tools`.
- `/api/events/stream` -- Discrete lifecycle events (`app:start`, `app:stop`, `app:activate`, `app:create`, `app:delete`). Used by app processes to react to other apps' lifecycle changes. Driven by `emit()`/`onEvent()` in `apps.ts`. Apps subscribe via `on()` from `@because/toes/tools`.
## Coding Guidelines

View File

@ -159,14 +159,11 @@ export function registerApp(dir: string) {
if (_apps.has(dir)) return // Already registered
const { pkg, error } = loadApp(dir)
const isStatic = !!pkg.toes?.static
const state: AppState = error ? 'invalid' : (isStatic ? 'running' : 'stopped')
const app = buildApp(dir, pkg, state, error)
if (isStatic) app.started = Date.now()
_apps.set(dir, app)
const state: AppState = error ? 'invalid' : 'stopped'
_apps.set(dir, buildApp(dir, pkg, state, error))
update()
emit({ type: 'app:create', app: dir })
if (!error && !isStatic) {
if (!error) {
runApp(dir, getPort(dir))
}
}
@ -230,17 +227,6 @@ export async function renameApp(oldName: string, newName: string): Promise<{ ok:
export function startApp(dir: string) {
const app = _apps.get(dir)
if (!app || (app.state !== 'stopped' && app.state !== 'invalid' && app.state !== 'error')) return
// Static apps don't need a process
if (app.static) {
app.state = 'running'
app.started = Date.now()
app.manuallyStopped = false
update()
emit({ type: 'app:start', app: dir })
return
}
if (!isApp(dir)) return
// Clear flags when explicitly starting
@ -254,14 +240,6 @@ export async function restartApp(dir: string): Promise<void> {
const app = _apps.get(dir)
if (!app) return
// Static apps just ensure running state
if (app.static) {
app.state = 'running'
app.started = Date.now()
update()
return
}
// Stop if running
if (app.state === 'running' || app.state === 'starting') {
stopApp(dir)
@ -289,16 +267,6 @@ export function stopApp(dir: string) {
const app = _apps.get(dir)
if (!app || app.state !== 'running') return
// Static apps just toggle state
if (app.static) {
app.state = 'stopped'
app.started = undefined
app.manuallyStopped = true
update()
emit({ type: 'app:stop', app: dir })
return
}
info(app, 'Stopping...')
app.state = 'stopping'
app.manuallyStopped = true
@ -338,7 +306,6 @@ const buildApp = (dir: string, pkg: any, state: AppState, error?: string): App =
apps: pkg.toes?.apps,
dashboard: pkg.toes?.dashboard,
share: pkg.toes?.share,
static: pkg.toes?.static,
})
const clearTimers = (app: App) => {
@ -388,11 +355,8 @@ function allAppDirs() {
function discoverApps() {
for (const dir of allAppDirs()) {
const { pkg, error } = loadApp(dir)
const isStatic = !!pkg.toes?.static
const state: AppState = error ? 'invalid' : (isStatic ? 'running' : 'stopped')
const app = buildApp(dir, pkg, state, error)
if (isStatic) app.started = Date.now()
_apps.set(dir, app)
const state: AppState = error ? 'invalid' : 'stopped'
_apps.set(dir, buildApp(dir, pkg, state, error))
}
update()
}
@ -578,8 +542,6 @@ function loadApp(dir: string): LoadResult {
if (json.scripts?.toes) {
return { pkg: json }
} else if (hasPublicDir(dir)) {
return { pkg: { ...json, toes: { ...json.toes, static: true } } }
} else {
return { pkg: json, error: 'Missing scripts.toes in package.json' }
}
@ -588,17 +550,10 @@ function loadApp(dir: string): LoadResult {
return { pkg: {}, error }
}
} catch (e) {
// No package.json — check for pub/ directory (static site)
if (hasPublicDir(dir)) {
return { pkg: { toes: { static: true, icon: '📄' } } }
}
return { pkg: {}, error: 'Missing package.json' }
}
}
const hasPublicDir = (dir: string): boolean =>
existsSync(join(APPS_DIR, dir, 'pub'))
function maybeResetBackoff(app: App) {
if (app.started && Date.now() - app.started >= STABLE_RUN_TIME) {

View File

@ -1,6 +1,5 @@
import type { Server, ServerWebSocket } from 'bun'
import { getAppBySubdomain } from '$apps'
import { serveStatic } from '$static'
export const perf = { timing: false }
@ -39,16 +38,7 @@ export function extractSubdomain(host: string): string | null {
export async function proxySubdomain(subdomain: string, req: Request): Promise<Response> {
const app = getAppBySubdomain(subdomain)
if (!app || app.state !== 'running') {
return new Response(`App "${subdomain}" not found or not running`, { status: 502 })
}
// Static apps: serve from pub/ directory
if (app.static) {
return serveStatic(app.name, req)
}
if (!app.port) {
if (!app || app.state !== 'running' || !app.port) {
return new Response(`App "${subdomain}" not found or not running`, { status: 502 })
}

View File

@ -1,92 +0,0 @@
import { APPS_DIR } from '$apps'
import { existsSync, readdirSync, statSync } from 'fs'
import { join } from 'path'
export async function serveStatic(appName: string, req: Request): Promise<Response> {
const url = new URL(req.url)
const pathname = decodeURIComponent(url.pathname)
const pubDir = join(APPS_DIR, appName, 'pub')
// Resolve the file path, preventing directory traversal
const filePath = join(pubDir, pathname)
if (!filePath.startsWith(pubDir)) {
return new Response('Forbidden', { status: 403 })
}
// Directory: try index.html, then file listing
if (existsSync(filePath) && statSync(filePath).isDirectory()) {
const indexPath = join(filePath, 'index.html')
if (existsSync(indexPath)) {
return new Response(Bun.file(indexPath))
}
return fileListing(appName, pathname, filePath)
}
// Exact file match
if (existsSync(filePath)) {
return new Response(Bun.file(filePath))
}
// Clean URLs: try .html extension
const htmlPath = filePath + '.html'
if (existsSync(htmlPath)) {
return new Response(Bun.file(htmlPath))
}
return new Response('Not Found', { status: 404 })
}
function fileListing(appName: string, pathname: string, dirPath: string): Response {
const trail = pathname.endsWith('/') ? pathname : pathname + '/'
const entries = readdirSync(dirPath, { withFileTypes: true })
.filter(e => !e.name.startsWith('.'))
.sort((a, b) => {
if (a.isDirectory() && !b.isDirectory()) return -1
if (!a.isDirectory() && b.isDirectory()) return 1
return a.name.localeCompare(b.name)
})
const rows = entries.map(e => {
const display = e.isDirectory() ? `${e.name}/` : e.name
const href = `${trail}${e.name}`
const stat = statSync(join(dirPath, e.name))
const size = e.isDirectory() ? '—' : formatSize(stat.size)
return ` <tr><td><a href="${href}">${display}</a></td><td>${size}</td></tr>`
}).join('\n')
const parent = pathname !== '/'
? ` <tr><td><a href="${trail.replace(/[^/]+\/$/, '')}">..</a></td><td></td></tr>\n`
: ''
const html = `<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>${appName} ${pathname}</title>
<style>
body { font-family: system-ui, sans-serif; max-width: 800px; margin: 2rem auto; padding: 0 1rem; }
h1 { font-size: 1.25rem; }
table { width: 100%; border-collapse: collapse; }
td { padding: 0.4rem 0.8rem; border-bottom: 1px solid #eee; }
td:last-child { text-align: right; color: #666; }
a { color: #0366d6; text-decoration: none; }
a:hover { text-decoration: underline; }
</style>
</head>
<body>
<h1>${appName}${pathname}</h1>
<table>
${parent}${rows}
</table>
</body>
</html>`
return new Response(html, { headers: { 'content-type': 'text/html' } })
}
const formatSize = (bytes: number): string =>
bytes < 1024 ? `${bytes} B`
: bytes < 1024 * 1024 ? `${(bytes / 1024).toFixed(1)} KB`
: `${(bytes / (1024 * 1024)).toFixed(1)} MB`

View File

@ -32,7 +32,6 @@ export type App = {
apps?: boolean
dashboard?: boolean
share?: boolean
static?: boolean
tunnelEnabled?: boolean
tunnelUrl?: string
}