init: 初始化 rclone-webgui 项目结构
外层仓库管理 webgui 源码、Docker 编排与项目文档；rclone 作为
git submodule 锁定在上游 master HEAD（59c86b01b），不携带任何
我们的改动。
- webgui/: webgui 源码（原本位于 rclone/cmd/webgui/）
- web/: 原生 HTML/CSS/JS 静态前端（Anthropic 设计语言）
- webgui.go: Go 子命令源码，仅当自行构建 rclone 二进制时需要
- rclone-cmd-all-add-webgui-import.patch: 把 webgui 注册进
rclone 的 cmd/all/all.go 的补丁，留作 fork 时使用
- rclone/: submodule → github.com/rclone/rclone，纯净不改动
- Dockerfile.webgui: 基于 nginx:1.27-alpine，从 ./webgui/web/
COPY 静态资源
- docker/nginx.conf: SPA 静态托管 + 反向代理 RC API
(/config/、/operations/、/sync/、/job/ 等) 与文件下载
(/<remote>:<path>) 到 rclone rcd 容器，前端同源访问无 CORS
- docker-compose.yml: rclone (官方镜像 + rcd --rc-no-auth
--rc-serve) + gui (nginx) 双服务编排，config 走 bind mount
持久化
- DESIGN.md / CLAUDE.md / README.md: 文档
- .gitignore / .dockerignore: 排除 rclone.conf 等敏感文件，
Docker 构建上下文只剩 webgui/web/ + nginx 配置（几十 KB）
This commit is contained in:
ci
@@ -0,0 +1,38 @@
|
||||
# Keep the frontend image build context small.
|
||||
# We only need:
|
||||
# - webgui/web/ (the static frontend bundle)
|
||||
# - docker/nginx.conf (the reverse-proxy config)
|
||||
# - Dockerfile.webgui
|
||||
|
||||
# VCS metadata
|
||||
.git
|
||||
.gitignore
|
||||
.gitmodules
|
||||
.github
|
||||
|
||||
# The Go-side webgui command is not needed for the frontend image —
|
||||
# the official rclone/rclone container handles the backend.
|
||||
webgui/webgui.go
|
||||
webgui/*.patch
|
||||
|
||||
# Submodule source — the frontend image doesn't need rclone itself.
|
||||
rclone
|
||||
|
||||
# Local rclone config (contains secrets)
|
||||
config/
|
||||
|
||||
# Editor / OS cruft
|
||||
.idea
|
||||
.vscode
|
||||
.history
|
||||
.devcontainer
|
||||
*~
|
||||
_junk
|
||||
Thumbs.db
|
||||
.DS_Store
|
||||
__pycache__
|
||||
|
||||
# Docs that don't belong in the runtime image
|
||||
CLAUDE.md
|
||||
DESIGN.md
|
||||
README.md
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
# Local rclone config (contains secrets — never commit)
|
||||
config/rclone/rclone.conf
|
||||
|
||||
# Docker build artifacts / runtime
|
||||
.docker/
|
||||
|
||||
# Editor / OS cruft
|
||||
.idea/
|
||||
.vscode/
|
||||
.history/
|
||||
*~
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
# Bash / Python
|
||||
__pycache__/
|
||||
*.pyc
|
||||
@@ -0,0 +1,3 @@
|
||||
[submodule "rclone"]
|
||||
path = rclone
|
||||
url = https://github.com/rclone/rclone.git
|
||||
@@ -0,0 +1,100 @@
|
||||
# CLAUDE.md
|
||||
|
||||
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||||
|
||||
## Project
|
||||
|
||||
Rclone ("rsync for cloud storage") is a command-line Go program that syncs files and directories to/from 70+ cloud storage providers. Entry point is `rclone.go` → `cmd.Main()`. Current Go toolchain requirement is in `go.mod` (the `go` directive); check it before assuming a version.
|
||||
|
||||
## Build & install
|
||||
|
||||
```bash
|
||||
go build # plain build
|
||||
make # build with version metadata baked in (preferred on Unix)
|
||||
make rclone # same as above, also installs into $(go env GOPATH)/bin
|
||||
```
|
||||
|
||||
On Windows, `make rclone` also generates a version-stamped `.syso` resource file via `bin/resource_windows.go` before building, then deletes it. If you see a stray `resource_windows_*.syso` it was left behind by an interrupted build.
|
||||
|
||||
`-X github.com/rclone/rclone/fs.Version=$(TAG)` is passed via `-ldflags`; the version string the binary reports is built from `VERSION` + git metadata in the Makefile (`TAG := $(VERSION)$(VERSION_SUFFIX)$(TAG_BRANCH)`). Bump `VERSION` only via the `startdev`/`startstable` Makefile targets, not by hand.
|
||||
|
||||
## Tests
|
||||
|
||||
Rclone's tests run against **real backends** configured as `Test<Name>:` sections in the rclone config file. Tests requiring a missing section are skipped automatically — a clean `go test ./...` from a fresh checkout just runs the local-FS-only subset.
|
||||
|
||||
```bash
|
||||
# Run a single package's tests
|
||||
cd backend/drive && go test -v
|
||||
|
||||
# Run one test in one package
|
||||
cd fs/sync && go test -v -run TestSync
|
||||
|
||||
# Quick test of everything (no remote creds needed; sets bogus config to force skips)
|
||||
make quicktest
|
||||
|
||||
# Run a package's integration tests against a configured remote
|
||||
cd fs/sync && go test -v -remote TestDrive:
|
||||
cd fs/sync && go test -v -remote TestDrive: -fast-list # exercise ListR path
|
||||
cd fs/operations && go test -v -remote TestDrive:
|
||||
|
||||
# Full integration framework from repo root, one backend at a time
|
||||
go run ./fstest/test_all -backends drive
|
||||
|
||||
# Race detector
|
||||
make racequicktest
|
||||
```
|
||||
|
||||
Backend test remotes are registered in `fstest/test_all/config.yaml`. Some tests there have `ignore:` entries that document intentional skips (e.g. B2 versioning makes certain purge tests impossible).
|
||||
|
||||
## Lint / quality
|
||||
|
||||
```bash
|
||||
make check # golangci-lint + markdownlint, same as CI
|
||||
golangci-lint run ./... # Go only
|
||||
bin/markdown-lint # Markdown only
|
||||
```
|
||||
|
||||
`.golangci.yml` enables: errcheck, govet, ineffassign, staticcheck, unused, gocritic, misspell, revive, unconvert, plus the `goimports` formatter. `gocritic` ruleguard rules live in `bin/rules.go`. golangci-lint v2 config format is in use.
|
||||
|
||||
## Architecture
|
||||
|
||||
Layered, with `fs/` as the contract layer:
|
||||
|
||||
- **`fs/`** — core interfaces and primitives. `fs.Fs`, `fs.Object`, `fs.DirInfo` (in `fs/types.go` and `fs/fs.go`) are the contracts every backend implements. Sub-packages:
|
||||
- `fs/operations` — primitives (`Copy`, `Move`, `MoveDir`, `check`, dedupe, listdirsorted, lsjson)
|
||||
- `fs/sync` — `sync.Sync` (one-way) and the pipe-based engine; also drives `bisync`
|
||||
- `fs/march` — walks two Fs trees in lock step, emitting diffs
|
||||
- `fs/filter` — include/exclude rules
|
||||
- `fs/config` — config file, flags, obscured creds, rc config; `configfile`/`configflags`/`configstruct`/`configmap` are sub-packages
|
||||
- `fs/fshttp` — rclone's `http.Client`/`Transport`; backends **must** use this to inherit `--dump`, `--tpslimit`, `--user-agent`, etc.
|
||||
- `fs/accounting`, `fs/cache`, `fs/fspath`, `fs/hash`, `fs/log`, `fs/rc` (+ `rcserver`)
|
||||
- **`backend/`** — one subdirectory per provider (drive, s3, dropbox, sftp, local, …). `backend/all/all.go` imports them all via blank imports; `rclone.go` imports `backend/all`. There are virtual/wrapper backends too: `alias`, `archive`, `cache`, `chunker`, `combine`, `compress`, `crypt`, `hasher`, `union`.
|
||||
- **`cmd/`** — one subdirectory per CLI subcommand (`copy`, `sync`, `mount`, `serve`, `bisync`, …). `cmd/all/all.go` registers them; `cmd/cmd.go` is the cobra entry point.
|
||||
- **`lib/`** — cross-cutting libraries backends and fs both use: `rest` (thin net/http wrapper for REST APIs), `pacer` (retry/backoff), `dircache`, `oauthutil`, `encoder` (filename encoding), `readers`, `atexit`, `errcount`, `exitcode`, `multipart`, `plugin`, etc.
|
||||
- **`vfs/`** — virtual filesystem layer for `mount`/`cmount`/`mountlib`/`nfsmount`.
|
||||
- **`librclone/`** — embeddable in-memory API for users who want rclone as a library.
|
||||
- **`fstest/`** — integration test framework: `fstests` (per-backend suite), `mockdir`/`mockobject`, `test_all` (driver that reads `config.yaml`).
|
||||
- **`cmdtest/`** — end-to-end tests of CLI flags, env vars, exit codes.
|
||||
|
||||
`rclone.go` is intentionally tiny: it blank-imports `backend/all`, `cmd/all`, `lib/plugin`, then calls `cmd.Main()`.
|
||||
|
||||
## Conventions
|
||||
|
||||
**Commit messages** follow `<area>: <summary>` where `<area>` is the directory touched (`drive:`, `fs/sync:`, `mount:`, `completion:`). The changelog is generated from these first lines, so make them user-readable. Long form goes after a blank line, mentioning `Fixes #N` to auto-close.
|
||||
|
||||
**New backend layout** (see CONTRIBUTING.md "Writing a new backend"):
|
||||
- Implement in a single `backend/<name>/<name>.go` — **do not** split into `fs.go` and `object.go`. The maintainers explicitly reject this for the >50 existing backends.
|
||||
- Put API type definitions in `api/types.go`.
|
||||
- Follow the structure of `backend/box` (directory-based) or `backend/b2` (bucket-based) exactly — same function names, same order, same comments.
|
||||
- For HTTP backends, use `lib/rest` and the client from `fs/fshttp`. Don't roll your own transport.
|
||||
- Register in `backend/all/all.go` and add to `fstest/test_all/config.yaml`.
|
||||
|
||||
**Backend options** are declared in Go with `Help:` fields that get rendered into docs and `--flag` help. See CONTRIBUTING.md "Writing Documentation" for the rules: first sentence on one line ≤80 chars, ends with period, more detail after a blank `"\n\n"`. The Markdown in `docs/content/<name>.md` between `<!-- autogenerated options start -->…<!-- autogenerated options stop -->` markers is regenerated by `bin/make_backend_docs.py` — never edit those regions by hand.
|
||||
|
||||
**Documentation autogeneration.** `MANUAL.md`, `MANUAL.html`, `MANUAL.txt`, `rclone.1`, `docs/content/flags.md`, `docs/content/commands/*.md`, and the autogenerated portions of backend docs are all produced from Go source by Makefile targets (`make doc`, `make commanddocs`, `make backenddocs`, `make rcdocs`). `bin/check_autogenerated_edits.py` runs in CI and rejects PRs that hand-edit those regions. You normally don't run these locally — they run during the release process. The `docs/` site is built with Hugo (`make serve` to preview).
|
||||
|
||||
**`go generate` is used** in `lib/transform` and `cmd/bisync` (see the `commanddocs` target). Run those before regenerating command docs.
|
||||
|
||||
**Configuration system.** Top-level flags live in `fs/config/configflags`. Backend options are defined per-backend via `Options` structs with `configstruct` tags and surfaced automatically. The `--config` flag points at the rclone.conf used both at runtime and for `Test<Name>:` test remotes.
|
||||
|
||||
**Version tagging.** Tags are GPG-signed (`make retag`). `make beta` / `make ci_beta` publish to `beta.rclone.org`. Full release flow is in `RELEASE.md`.
|
||||
@@ -0,0 +1,589 @@
|
||||
---
|
||||
version: alpha
|
||||
name: Claude-design-analysis
|
||||
description: A warm-canvas editorial interface for Anthropic's Claude product. The system anchors on a tinted cream canvas with serif display headlines, warm coral CTAs, and dark navy product surfaces (code editor mockups, model showcase cards). Brand voltage comes from the cream/coral pairing — deliberately warm and humanist where most AI brands use cool blue + slate. Type voice runs a slab-serif display ("Copernicus" / Tiempos Headline) for h1/h2 and a humanist sans for body. The signature Anthropic black-radial-spike mark anchors the wordmark.
|
||||
|
||||
colors:
|
||||
primary: "#cc785c"
|
||||
primary-active: "#a9583e"
|
||||
primary-disabled: "#e6dfd8"
|
||||
ink: "#141413"
|
||||
body: "#3d3d3a"
|
||||
body-strong: "#252523"
|
||||
muted: "#6c6a64"
|
||||
muted-soft: "#8e8b82"
|
||||
hairline: "#e6dfd8"
|
||||
hairline-soft: "#ebe6df"
|
||||
canvas: "#faf9f5"
|
||||
surface-soft: "#f5f0e8"
|
||||
surface-card: "#efe9de"
|
||||
surface-cream-strong: "#e8e0d2"
|
||||
surface-dark: "#181715"
|
||||
surface-dark-elevated: "#252320"
|
||||
surface-dark-soft: "#1f1e1b"
|
||||
on-primary: "#ffffff"
|
||||
on-dark: "#faf9f5"
|
||||
on-dark-soft: "#a09d96"
|
||||
accent-teal: "#5db8a6"
|
||||
accent-amber: "#e8a55a"
|
||||
success: "#5db872"
|
||||
warning: "#d4a017"
|
||||
error: "#c64545"
|
||||
|
||||
typography:
|
||||
display-xl:
|
||||
fontFamily: "Copernicus, Tiempos Headline, serif"
|
||||
fontSize: 64px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.05
|
||||
letterSpacing: -1.5px
|
||||
display-lg:
|
||||
fontFamily: "Copernicus, Tiempos Headline, serif"
|
||||
fontSize: 48px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.1
|
||||
letterSpacing: -1px
|
||||
display-md:
|
||||
fontFamily: "Copernicus, Tiempos Headline, serif"
|
||||
fontSize: 36px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.15
|
||||
letterSpacing: -0.5px
|
||||
display-sm:
|
||||
fontFamily: "Copernicus, Tiempos Headline, serif"
|
||||
fontSize: 28px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.2
|
||||
letterSpacing: -0.3px
|
||||
title-lg:
|
||||
fontFamily: "StyreneB, Inter, sans-serif"
|
||||
fontSize: 22px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.3
|
||||
letterSpacing: 0
|
||||
title-md:
|
||||
fontFamily: "StyreneB, Inter, sans-serif"
|
||||
fontSize: 18px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
title-sm:
|
||||
fontFamily: "StyreneB, Inter, sans-serif"
|
||||
fontSize: 16px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
body-md:
|
||||
fontFamily: "StyreneB, Inter, sans-serif"
|
||||
fontSize: 16px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.55
|
||||
letterSpacing: 0
|
||||
body-sm:
|
||||
fontFamily: "StyreneB, Inter, sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.55
|
||||
letterSpacing: 0
|
||||
caption:
|
||||
fontFamily: "StyreneB, Inter, sans-serif"
|
||||
fontSize: 13px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
caption-uppercase:
|
||||
fontFamily: "StyreneB, Inter, sans-serif"
|
||||
fontSize: 12px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 1.5px
|
||||
code:
|
||||
fontFamily: "JetBrains Mono, ui-monospace, monospace"
|
||||
fontSize: 14px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.6
|
||||
letterSpacing: 0
|
||||
button:
|
||||
fontFamily: "StyreneB, Inter, sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 500
|
||||
lineHeight: 1
|
||||
letterSpacing: 0
|
||||
nav-link:
|
||||
fontFamily: "StyreneB, Inter, sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
|
||||
rounded:
|
||||
xs: 4px
|
||||
sm: 6px
|
||||
md: 8px
|
||||
lg: 12px
|
||||
xl: 16px
|
||||
pill: 9999px
|
||||
full: 9999px
|
||||
|
||||
spacing:
|
||||
xxs: 4px
|
||||
xs: 8px
|
||||
sm: 12px
|
||||
md: 16px
|
||||
lg: 24px
|
||||
xl: 32px
|
||||
xxl: 48px
|
||||
section: 96px
|
||||
|
||||
components:
|
||||
button-primary:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 12px 20px
|
||||
height: 40px
|
||||
button-primary-active:
|
||||
backgroundColor: "{colors.primary-active}"
|
||||
textColor: "{colors.on-primary}"
|
||||
rounded: "{rounded.md}"
|
||||
button-primary-disabled:
|
||||
backgroundColor: "{colors.primary-disabled}"
|
||||
textColor: "{colors.muted}"
|
||||
rounded: "{rounded.md}"
|
||||
button-secondary:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 12px 20px
|
||||
height: 40px
|
||||
button-secondary-on-dark:
|
||||
backgroundColor: "{colors.surface-dark-elevated}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 12px 20px
|
||||
button-text-link:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button}"
|
||||
button-icon-circular:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
rounded: "{rounded.full}"
|
||||
size: 36px
|
||||
text-link:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.primary}"
|
||||
typography: "{typography.body-md}"
|
||||
top-nav:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.nav-link}"
|
||||
height: 64px
|
||||
hero-band:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.display-xl}"
|
||||
padding: 96px
|
||||
hero-illustration-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
rounded: "{rounded.xl}"
|
||||
feature-card:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.title-md}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 32px
|
||||
product-mockup-card-dark:
|
||||
backgroundColor: "{colors.surface-dark}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.title-md}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 32px
|
||||
code-window-card:
|
||||
backgroundColor: "{colors.surface-dark}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.code}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 24px
|
||||
model-comparison-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.title-md}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 32px
|
||||
pricing-tier-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.title-lg}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 32px
|
||||
pricing-tier-card-featured:
|
||||
backgroundColor: "{colors.surface-dark}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.title-lg}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 32px
|
||||
callout-card-coral:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.title-md}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 32px
|
||||
connector-tile:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.title-sm}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 20px
|
||||
text-input:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 10px 14px
|
||||
height: 40px
|
||||
text-input-focused:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
rounded: "{rounded.md}"
|
||||
cookie-consent-card:
|
||||
backgroundColor: "{colors.surface-dark}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.body-sm}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 24px
|
||||
category-tab:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.muted}"
|
||||
typography: "{typography.nav-link}"
|
||||
padding: 8px 14px
|
||||
rounded: "{rounded.md}"
|
||||
category-tab-active:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.nav-link}"
|
||||
rounded: "{rounded.md}"
|
||||
badge-pill:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.caption}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 4px 12px
|
||||
badge-coral:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.caption-uppercase}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 4px 12px
|
||||
cta-band-coral:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.display-sm}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 64px
|
||||
cta-band-dark:
|
||||
backgroundColor: "{colors.surface-dark}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.display-sm}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 64px
|
||||
footer:
|
||||
backgroundColor: "{colors.surface-dark}"
|
||||
textColor: "{colors.on-dark-soft}"
|
||||
typography: "{typography.body-sm}"
|
||||
padding: 64px
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Claude.com is the warmest, most editorial interface in the AI-product category. The base atmosphere is a **tinted cream canvas** (`{colors.canvas}` — #faf9f5) — distinctly warm, deliberately not the cool gray-white that every other AI brand uses. Headlines run a **slab-serif display** ("Copernicus" / Tiempos Headline) at weight 400 with negative letter-spacing, paired with **StyreneB / Inter** body sans. The combination feels like a literary publication, not a SaaS marketing page.
|
||||
|
||||
Brand voltage comes from the **cream + coral pairing** — coral (`{colors.primary}` — #cc785c) is the signature Anthropic accent, used on every primary CTA, on the brand wordmark, and on full-bleed callout cards. The coral is warm, slightly muted, never cyan/blue — a deliberate counter-positioning against OpenAI's cool slate, Google's saturated blue, and Microsoft's corporate cyan.
|
||||
|
||||
The system has three surface modes that alternate page-by-page:
|
||||
1. **Cream canvas** (`{colors.canvas}`) — default body floor
|
||||
2. **Light cream cards** (`{colors.surface-card}`) — feature card backgrounds
|
||||
3. **Dark navy product surfaces** (`{colors.surface-dark}`) — code editor mockups, model showcase cards, pre-footer CTAs, footer itself
|
||||
|
||||
The dark surfaces are where Claude shows its product chrome — code blocks, terminal output, model comparison tables, agentic-flow diagrams. The cream-to-dark contrast is the page's pacing rhythm.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Warm cream canvas (`{colors.canvas}` — #faf9f5) with dark warm-ink text (`{colors.ink}` — #141413). The brand's defining color choice.
|
||||
- Coral primary CTA (`{colors.primary}` — #cc785c). Used scarcely on individual buttons, generously on full-bleed coral callout cards.
|
||||
- Slab-serif display headlines via Copernicus / Tiempos Headline at weight 400 with negative letter-spacing. Pairs with humanist sans body for a literary editorial voice.
|
||||
- Dark navy product mockup cards (`{colors.surface-dark}` — #181715) carrying code blocks, terminal panels, model comparison data — the brand shows the product chrome at scale rather than abstract marketing illustrations.
|
||||
- Light cream feature cards (`{colors.surface-card}` — #efe9de) — slightly darker than canvas, used for content-driven feature explanations.
|
||||
- Anthropic radial-spike mark — a small black asterisk-like glyph (4-spoke radial) — appears as the brand wordmark prefix and as a content marker.
|
||||
- Border radius is hierarchical: `{rounded.md}` (8px) for buttons + inputs, `{rounded.lg}` (12px) for content + product cards, `{rounded.xl}` (16px) for the hero illustration container, `{rounded.pill}` for badges.
|
||||
- Section rhythm `{spacing.section}` (96px) — modern-SaaS standard. Internal card padding stays generous at `{spacing.xl}` (32px).
|
||||
|
||||
## Colors
|
||||
|
||||
### Brand & Accent
|
||||
- **Coral / Primary** (`{colors.primary}` — #cc785c): The signature Anthropic warm coral. Used on every primary CTA background, on full-bleed coral callout cards, on the brand wordmark accent. The most-recognized Anthropic color outside of the spike-mark logo.
|
||||
- **Coral Active** (`{colors.primary-active}` — #a9583e): The press / hover-darker variant.
|
||||
- **Coral Disabled** (`{colors.primary-disabled}` — #e6dfd8): A desaturated cream-tinted disabled state.
|
||||
- **Accent Teal** (`{colors.accent-teal}` — #5db8a6): Used sparingly on secondary product surfaces (terminal status indicators, "active connection" dots in connectors page).
|
||||
- **Accent Amber** (`{colors.accent-amber}` — #e8a55a): A small companion warm-tone used on category badges and inline highlights.
|
||||
|
||||
### Surface
|
||||
- **Canvas** (`{colors.canvas}` — #faf9f5): The default page floor. Tinted cream — warm, deliberately not pure white.
|
||||
- **Surface Soft** (`{colors.surface-soft}` — #f5f0e8): Section dividers, very-soft band backgrounds.
|
||||
- **Surface Card** (`{colors.surface-card}` — #efe9de): Feature cards, content cards. One step darker than canvas.
|
||||
- **Surface Cream Strong** (`{colors.surface-cream-strong}` — #e8e0d2): A strongest-cream variant used on selected category tabs and emphasized section bands.
|
||||
- **Surface Dark** (`{colors.surface-dark}` — #181715): Code editor mockups, model showcase cards, footer. The dominant dark surface.
|
||||
- **Surface Dark Elevated** (`{colors.surface-dark-elevated}` — #252320): Elevated cards inside dark bands (settings panels in mockups).
|
||||
- **Surface Dark Soft** (`{colors.surface-dark-soft}` — #1f1e1b): Slightly lighter dark, used for code block backgrounds inside larger dark cards.
|
||||
- **Hairline** (`{colors.hairline}` — #e6dfd8): The 1px border tone on cream surfaces. Same hex as `{colors.primary-disabled}` — borders feel like one elevation step rather than ink lines.
|
||||
- **Hairline Soft** (`{colors.hairline-soft}` — #ebe6df): Barely-visible divider used inside the same band.
|
||||
|
||||
### Text
|
||||
- **Ink** (`{colors.ink}` — #141413): All headlines and primary text. Warm dark, slightly off-pure-black.
|
||||
- **Body Strong** (`{colors.body-strong}` — #252523): Emphasized paragraphs, lead text.
|
||||
- **Body** (`{colors.body}` — #3d3d3a): Default running-text color.
|
||||
- **Muted** (`{colors.muted}` — #6c6a64): Sub-headings, breadcrumbs, footer-adjacent secondary text.
|
||||
- **Muted Soft** (`{colors.muted-soft}` — #8e8b82): Captions, fine-print, copyright lines.
|
||||
- **On Primary** (`{colors.on-primary}` — #ffffff): Text on coral buttons.
|
||||
- **On Dark** (`{colors.on-dark}` — #faf9f5): Cream-tinted white used on dark surfaces (echoes the canvas tone).
|
||||
- **On Dark Soft** (`{colors.on-dark-soft}` — #a09d96): Footer body text, secondary labels in dark mockups.
|
||||
|
||||
### Semantic
|
||||
- **Success** (`{colors.success}` — #5db872): Green status dots, "available" indicators.
|
||||
- **Warning** (`{colors.warning}` — #d4a017): Warning callouts (rare on marketing surfaces).
|
||||
- **Error** (`{colors.error}` — #c64545): Validation errors.
|
||||
|
||||
## Typography
|
||||
|
||||
### Font Family
|
||||
The system runs **Copernicus** (or **Tiempos Headline** as substitute) as the slab-serif display face for headlines, and **StyreneB** (or **Inter** as substitute) as the humanist sans for body, navigation, and UI labels. **JetBrains Mono** handles code blocks. The fallback stack walks `Tiempos Headline, Garamond, "Times New Roman", serif` for display and `Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif` for body.
|
||||
|
||||
The display/body split is editorial:
|
||||
- Copernicus serif (weight 400, negative tracking) → h1, h2, h3, hero display
|
||||
- StyreneB sans (weight 400-500) → body, navigation, buttons, captions, labels
|
||||
- JetBrains Mono → all code blocks and terminal text
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|
||||
|---|---|---|---|---|---|
|
||||
| `{typography.display-xl}` | 64px | 400 | 1.05 | -1.5px | Homepage h1 ("Meet your thinking partner") — Copernicus serif |
|
||||
| `{typography.display-lg}` | 48px | 400 | 1.1 | -1px | Section heads — Copernicus |
|
||||
| `{typography.display-md}` | 36px | 400 | 1.15 | -0.5px | Sub-section heads, model names — Copernicus |
|
||||
| `{typography.display-sm}` | 28px | 400 | 1.2 | -0.3px | Pricing tier names, callout headlines — Copernicus |
|
||||
| `{typography.title-lg}` | 22px | 500 | 1.3 | 0 | Pricing plan size labels — StyreneB |
|
||||
| `{typography.title-md}` | 18px | 500 | 1.4 | 0 | Feature card titles, intro paragraphs |
|
||||
| `{typography.title-sm}` | 16px | 500 | 1.4 | 0 | Connector tile titles, list labels |
|
||||
| `{typography.body-md}` | 16px | 400 | 1.55 | 0 | Default running-text — StyreneB |
|
||||
| `{typography.body-sm}` | 14px | 400 | 1.55 | 0 | Footer body, fine-print |
|
||||
| `{typography.caption}` | 13px | 500 | 1.4 | 0 | Badge labels, captions |
|
||||
| `{typography.caption-uppercase}` | 12px | 500 | 1.4 | 1.5px | Category tags, "NEW" badges |
|
||||
| `{typography.code}` | 14px | 400 | 1.6 | 0 | Code blocks — JetBrains Mono |
|
||||
| `{typography.button}` | 14px | 500 | 1.0 | 0 | Standard button labels |
|
||||
| `{typography.nav-link}` | 14px | 500 | 1.4 | 0 | Top-nav menu items |
|
||||
|
||||
### Principles
|
||||
Display sizes use weight 400 (regular), never bold. Negative letter-spacing (-0.3 to -1.5px) is essential — Copernicus without it reads as off-brand. The serif character is what gives Anthropic its literary, considered voice; switching to a sans-serif display would make Claude feel like every other AI tool.
|
||||
|
||||
Body type stays at weight 400 for paragraphs, weight 500 for labels and emphasized phrases. The sans body is humanist (StyreneB) — never geometric. Inter is an acceptable substitute because of its similar humanist proportions; Helvetica or Arial would be too neutral and break the warm-editorial feel.
|
||||
|
||||
### Note on Font Substitutes
|
||||
If Copernicus / Tiempos Headline is unavailable, **Cormorant Garamond** at weight 500 with -0.02em letter-spacing is the closest open-source approximation. **EB Garamond** is a fallback. For StyreneB, **Inter** is the closest match — both are humanist sans designed for screen reading. **Söhne** is another close alternative if licensed.
|
||||
|
||||
## Layout
|
||||
|
||||
### Spacing System
|
||||
- **Base unit:** 4px.
|
||||
- **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 96px.
|
||||
- **Section padding:** `{spacing.section}` (96px) — modern-SaaS rhythm.
|
||||
- **Card internal padding:** `{spacing.xl}` (32px) for feature cards, pricing tier cards, model comparison cards; `{spacing.lg}` (24px) for code-window cards and connector tiles.
|
||||
- **Callout / CTA bands:** `{spacing.xxl}` (48px) inside coral callout cards; 64px inside the larger dark CTA band.
|
||||
|
||||
### Grid & Container
|
||||
- **Max content width:** ~1200px centered.
|
||||
- **Editorial body:** Single 12-column grid; hero often uses 6/6 split (h1 left, illustration right).
|
||||
- **Feature card grids:** 3-up at desktop, 2-up at tablet, 1-up at mobile.
|
||||
- **Connector tile grids:** 4-up or 6-up at desktop, 2-up at tablet, 1-up at mobile.
|
||||
- **Pricing grid:** 3-up at desktop (Free / Pro / Team / Enterprise often), 1-up at mobile.
|
||||
|
||||
### Whitespace Philosophy
|
||||
The cream canvas + serif display + generous internal padding create an editorial pacing — Claude reads like a long-form magazine column rather than a marketing template. Whitespace between bands stays uniform at 96px; whitespace inside cards is generous (32px), letting type breathe.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|---|---|---|
|
||||
| Flat | No shadow, no border | Body sections, top nav, hero bands |
|
||||
| Soft hairline | 1px `{colors.hairline}` border | Inputs, sub-nav, occasionally on cards |
|
||||
| Cream card | `{colors.surface-card}` background — no shadow | Feature cards, content cards |
|
||||
| Dark surface card | `{colors.surface-dark}` background — no shadow | Code editor mockups, model showcase cards |
|
||||
| Subtle drop shadow | Faint shadow at low alpha | Hover-elevated states (the system uses `0 1px 3px rgba(20,20,19,0.08)` rarely) |
|
||||
|
||||
The elevation philosophy is **color-block first, shadow rare**. Most depth comes from the cream-vs-dark surface contrast. Shadows are minimal. The dark surface mockups have their own internal product chrome (code editor scrollbars, line numbers, syntax highlighting) which adds detail without needing external shadows.
|
||||
|
||||
### Decorative Depth
|
||||
- The Anthropic spike-mark glyph (4-spoke radial asterisk) appears as a small black mark in the brand wordmark and inline as a content marker.
|
||||
- Code editor mockups carry their own internal depth: syntax-highlighted text in muted blues / oranges / grays, line numbers in `{colors.muted-soft}`, status bars at the bottom in `{colors.surface-dark-elevated}`.
|
||||
- Some hero illustrations use simple line-art with coral and dark-navy strokes on cream — minimal, hand-drawn-feeling, never photorealistic.
|
||||
|
||||
## Shapes
|
||||
|
||||
### Border Radius Scale
|
||||
|
||||
| Token | Value | Use |
|
||||
|---|---|---|
|
||||
| `{rounded.xs}` | 4px | Reserved for badge accents and tiny dropdowns |
|
||||
| `{rounded.sm}` | 6px | Small inline buttons, dropdown items |
|
||||
| `{rounded.md}` | 8px | Standard CTA buttons, text inputs, category tabs |
|
||||
| `{rounded.lg}` | 12px | Content cards (feature, pricing, code-window, model-comparison) |
|
||||
| `{rounded.xl}` | 16px | Hero illustration container, the larger marquee components |
|
||||
| `{rounded.pill}` | 9999px | Badge pills, "NEW" tags |
|
||||
| `{rounded.full}` | 9999px / 50% | Avatar substitutes, icon buttons |
|
||||
|
||||
### Photography & Illustrations
|
||||
Claude's hero rarely uses photography. Instead it uses:
|
||||
- Simple line-art illustrations with coral + dark-navy strokes on the cream canvas
|
||||
- Code editor mockups (the dominant "hero" treatment on developer-focused pages)
|
||||
- Terminal output mockups with monospace text on dark
|
||||
- Model comparison cards (Opus / Sonnet / Haiku) with abstract geometric thumbnails
|
||||
|
||||
When photography is used (rare — mostly testimonials), avatars crop to perfect circles at 40px diameter.
|
||||
|
||||
## Components
|
||||
|
||||
### Top Navigation
|
||||
|
||||
**`top-nav`** — Cream nav bar pinned to the top of every page. 64px tall, `{colors.canvas}` background. Carries the Anthropic spike-mark + "Claude" wordmark at left, primary horizontal menu (Product, Solutions, Use Cases, Pricing, Research, Company) center-left, right-side cluster with "Sign in" text-link, "Try Claude" `{component.button-primary}` (coral). Menu items in `{typography.nav-link}` (StyreneB 14px / 500).
|
||||
|
||||
### Buttons
|
||||
|
||||
**`button-primary`** — The signature coral CTA. Background `{colors.primary}` (#cc785c), text `{colors.on-primary}` (white), type `{typography.button}` (StyreneB 14px / 500), padding 12px × 20px, height 40px, rounded `{rounded.md}` (8px). Active state `button-primary-active` darkens to `{colors.primary-active}` (#a9583e).
|
||||
|
||||
**`button-secondary`** — Cream button with hairline outline. Background `{colors.canvas}`, text `{colors.ink}`, 1px hairline border, same padding + height + radius as primary.
|
||||
|
||||
**`button-secondary-on-dark`** — Used over `{colors.surface-dark}` cards. Background `{colors.surface-dark-elevated}` (#252320), text `{colors.on-dark}`. Stays dark — the system never inverts to a light secondary on dark surfaces.
|
||||
|
||||
**`button-text-link`** — Inline text button, no background. Used for "Sign in" in the top nav and inline CTA links.
|
||||
|
||||
**`button-icon-circular`** — 36px circular icon button. Background `{colors.canvas}`, hairline border, ink-color icon. Used for carousel arrows, share, "view more".
|
||||
|
||||
**`text-link`** — Inline body links in `{colors.primary}` (the coral). Underlined on press; the coral inline link is one of the system's most distinctive small details.
|
||||
|
||||
### Cards & Containers
|
||||
|
||||
**`hero-band`** — Cream-canvas hero with a 6-6 grid: h1 + sub-headline + button row on the left, hero illustration card or product mockup card on the right. Vertical padding `{spacing.section}` (96px).
|
||||
|
||||
**`hero-illustration-card`** — A larger card holding the hero's right-side artifact — sometimes a coral-stroke line illustration on cream background, sometimes a dark code editor mockup. Background `{colors.canvas}` or `{colors.surface-dark}` depending on context, rounded `{rounded.xl}` (16px).
|
||||
|
||||
**`feature-card`** — Used in 3-up feature grids. Background `{colors.surface-card}` (#efe9de — slightly darker cream), rounded `{rounded.lg}` (12px), internal padding `{spacing.xl}` (32px). Carries a small icon at top, an `{typography.title-md}` headline, and a body description in `{typography.body-md}`.
|
||||
|
||||
**`product-mockup-card-dark`** — Dark navy card showing actual Claude product chrome (chat interface, code editor, agent controls). Background `{colors.surface-dark}`, rounded `{rounded.lg}`, internal padding `{spacing.xl}` (32px). Carries text labels in `{colors.on-dark}` and product UI fragments below.
|
||||
|
||||
**`code-window-card`** — A specialized dark card showing a code editor with line numbers, syntax-highlighted code in `{typography.code}` (JetBrains Mono), and sometimes a "Run" button or terminal output panel below. Background `{colors.surface-dark}` with `{colors.surface-dark-soft}` for the inner code block, rounded `{rounded.lg}`, padding `{spacing.lg}` (24px). The signature visual element of Claude Code product pages.
|
||||
|
||||
**`model-comparison-card`** — Used on the homepage's "Which problem are you up against?" section comparing Opus / Sonnet / Haiku. Background `{colors.canvas}` with hairline border, rounded `{rounded.lg}`, internal padding `{spacing.xl}` (32px). Carries the model name, a short capability blurb, and a `{component.text-link}` to learn more.
|
||||
|
||||
**`pricing-tier-card`** — Standard tier card. Background `{colors.canvas}` with hairline border, rounded `{rounded.lg}`, padding `{spacing.xl}` (32px). Carries the plan name in `{typography.title-lg}` (StyreneB), price in `{typography.display-sm}` (Copernicus serif!), feature checklist in `{typography.body-md}`, and a `{component.button-primary}` at the bottom.
|
||||
|
||||
**`pricing-tier-card-featured`** — The featured tier (typically "Pro" or "Team"). Background flips to `{colors.surface-dark}`, text inverts to `{colors.on-dark}`. The dark surface IS the featured-tier signal.
|
||||
|
||||
**`callout-card-coral`** — A full-bleed coral card carrying a major call-to-action. Background `{colors.primary}` (#cc785c), text `{colors.on-primary}` (white), rounded `{rounded.lg}`, padding `{spacing.xxl}` (48px). The coral surface IS the voltage; the CTA inside uses an inverted button style (cream/canvas button on coral).
|
||||
|
||||
**`connector-tile`** — Used on the connectors page's integration grid. Background `{colors.canvas}` with hairline border, rounded `{rounded.lg}`, padding 20px. Each tile carries a logo at top, a `{typography.title-sm}` connector name, and a short description.
|
||||
|
||||
### Inputs & Forms
|
||||
|
||||
**`text-input`** — Standard text input. Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-md}`, rounded `{rounded.md}` (8px), padding 10px × 14px, height 40px. 1px hairline border in `{colors.hairline}`.
|
||||
|
||||
**`text-input-focused`** — Focus state. Border thickens or shifts to `{colors.primary}` (coral) for emphasis. Carries a 3px coral-at-15%-alpha outer ring.
|
||||
|
||||
**`cookie-consent-card`** — Bottom-right floating dark cookie banner. Background `{colors.surface-dark}`, text `{colors.on-dark}`, rounded `{rounded.lg}`, padding `{spacing.lg}` (24px). One of the few places dark surface appears at small scale on cream pages.
|
||||
|
||||
### Tags / Badges
|
||||
|
||||
**`badge-pill`** — Small pill label used for category tags. Background `{colors.surface-card}`, text `{colors.ink}`, type `{typography.caption}` (13px / 500), rounded `{rounded.pill}`, padding 4px × 12px.
|
||||
|
||||
**`badge-coral`** — Coral-fill badge for "NEW", "BETA", featured highlights. Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.caption-uppercase}` (12px / 500 / 1.5px tracking), rounded `{rounded.pill}`, padding 4px × 12px.
|
||||
|
||||
### Tab / Filter
|
||||
|
||||
**`category-tab`** + **`category-tab-active`** — Used in sub-nav rows on solutions / connectors pages. Inactive: transparent background, `{colors.muted}` text. Active: `{colors.surface-card}` background, `{colors.ink}` text. Padding 8px × 14px, rounded `{rounded.md}`.
|
||||
|
||||
### CTA / Footer
|
||||
|
||||
**`cta-band-coral`** — A pre-footer "Try Claude" CTA card. Full-width coral fill, white type, rounded `{rounded.lg}`, padding 64px. Carries an h2 in `{typography.display-sm}` (still serif!), a sub-line, and a cream-button CTA.
|
||||
|
||||
**`cta-band-dark`** — Alternative pre-footer band on developer-focused pages. Background `{colors.surface-dark}`, text `{colors.on-dark}`, rounded `{rounded.lg}`, padding 64px. Often pairs with a code-window card.
|
||||
|
||||
**`footer`** — Dark navy footer that closes every page. Background `{colors.surface-dark}` (#181715), text `{colors.on-dark-soft}`. 4-column link list at desktop covering Product / Company / Resources / Legal. Vertical padding 64px. The Anthropic spike-mark + "Anthropic" wordmark sits at the top in `{colors.on-dark}`. The footer never inverts.
|
||||
|
||||
## Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Anchor every page on the cream canvas. Pure white reads as "any other AI tool"; the warm tint is the brand differentiator.
|
||||
- Use Copernicus serif for every display headline. Pair with StyreneB sans body. Negative letter-spacing on display sizes is non-negotiable.
|
||||
- Reserve `{colors.primary}` (coral) for primary CTAs and full-bleed `{component.callout-card-coral}` moments. Don't paint accent moments coral elsewhere.
|
||||
- Use `{component.product-mockup-card-dark}` and `{component.code-window-card}` to show actual Claude product chrome. Don't paint marketing illustrations of code when you can show real code.
|
||||
- Pair `{component.feature-card}` (cream) with `{component.product-mockup-card-dark}` (navy) in alternating bands. The cream-to-dark rhythm is the brand's pacing mechanism.
|
||||
- Use the Anthropic spike-mark glyph as the brand wordmark prefix. Never invert the mark to white-on-dark within the wordmark itself.
|
||||
- Apply `{spacing.section}` (96px) between major bands.
|
||||
|
||||
### Don't
|
||||
- Don't use cool grays or pure white for canvas. Cream is the brand.
|
||||
- Don't bold serif display weight. Copernicus at 700 reads as bombastic; the system stays at 400.
|
||||
- Don't use cool blue or saturated cyan as a brand accent. The coral is the brand voltage.
|
||||
- Don't put coral everywhere. The coral is scarce on individual elements and generous only on full-bleed coral callout cards.
|
||||
- Don't use Inter for display headlines. The serif character is the brand voice.
|
||||
- Don't repeat the same surface mode in two consecutive bands. The pacing alternates: cream → cream-card → dark-mockup → cream → coral-callout → dark-footer.
|
||||
- Don't add hover state styling beyond what the system already encodes — primary darkens on press; nothing else changes.
|
||||
|
||||
## Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
|
||||
| Name | Width | Key Changes |
|
||||
|---|---|---|
|
||||
| Mobile | < 768px | Hamburger nav; hero h1 64→32px; hero-illustration-card stacks below content; feature grids 1-up; connector tiles 2-up; pricing 1-up; footer 4 cols → 1 |
|
||||
| Tablet | 768–1024px | Top nav stays horizontal but tightens; feature cards 2-up; connector tiles 3-up; pricing 2-up |
|
||||
| Desktop | 1024–1440px | Full top-nav with all menu items; 3-up feature cards; 4-up or 6-up connector tiles; 3-up pricing tiers |
|
||||
| Wide | > 1440px | Same as desktop with more outer breathing room; max content width caps at 1200px |
|
||||
|
||||
### Touch Targets
|
||||
- `{component.button-primary}` at minimum 40 × 40px.
|
||||
- `{component.button-icon-circular}` at exactly 36 × 36 — slightly under WCAG 44 but visually centered.
|
||||
- `{component.text-input}` height is 40px.
|
||||
- Connector tile entire card area is tappable; effective tap area >> 44px.
|
||||
|
||||
### Collapsing Strategy
|
||||
- Top nav collapses to hamburger at < 768px; menu opens as a full-screen cream sheet.
|
||||
- Hero band's 6-6 grid collapses to single-column on mobile — h1 + sub-head + buttons first, then the illustration / mockup card below.
|
||||
- Feature grids reduce columns rather than scaling cards down.
|
||||
- Pricing tier cards collapse 4 → 2 → 1; featured-tier dark surface stays visually distinct at every breakpoint.
|
||||
- Code-window cards retain code legibility at every breakpoint by allowing horizontal scroll within the card rather than wrapping code lines.
|
||||
|
||||
### Image Behavior
|
||||
- Code blocks inside dark mockups stay at fixed font-size; horizontal scroll on mobile rather than wrapping.
|
||||
- Hero illustrations scale proportionally; line-art strokes thin slightly on mobile.
|
||||
- Avatar photos in testimonials crop to circles at every breakpoint.
|
||||
|
||||
## Iteration Guide
|
||||
|
||||
1. Focus on ONE component at a time. Reference its YAML key (`{component.feature-card}`, `{component.code-window-card}`).
|
||||
2. Variants of an existing component (`-active`, `-disabled`, `-focused`) live as separate entries in `components:`.
|
||||
3. Use `{token.refs}` everywhere — never inline hex.
|
||||
4. Never document hover. Default and Active/Pressed states only.
|
||||
5. Display headlines stay Copernicus serif 400 with negative tracking. Body stays StyreneB / Inter 400. The split is unbreakable.
|
||||
6. Cream + coral + dark navy is the trinity. Don't introduce a fourth surface tone (no purple cards, no green sections).
|
||||
7. When in doubt about emphasis: bigger Copernicus serif before bolder weight.
|
||||
|
||||
## Known Gaps
|
||||
|
||||
- Copernicus and StyreneB are licensed Anthropic typefaces and not available as public web fonts. Substitutes (Tiempos Headline / Cormorant Garamond / EB Garamond for serif; Inter / Söhne for sans) are documented in the typography section.
|
||||
- The Anthropic radial-spike-mark is a brand glyph rendered as inline SVG; it's not formalized as a system token here. Treat it as a logo asset.
|
||||
- Animation and transition timings (chat message reveal, code block typewriter effect on the homepage, agentic-flow diagram animations) are not in scope.
|
||||
- Form validation states beyond `{component.text-input-focused}` are not extracted — error / success states would need a sign-up or feedback flow to confirm.
|
||||
- The actual Claude product surface (claude.ai chat interface) shares some tokens with the marketing site but adds many product-specific components (chat bubbles, message tools, file upload chips, conversation history sidebar) that are out of scope for this marketing-surface document.
|
||||
- The "agent" / "computer use" demo cards on certain pages display animated Claude controlling a browser — the static screenshot doesn't fully capture the animation chrome.
|
||||
@@ -0,0 +1,13 @@
|
||||
# Frontend image for the rclone webgui.
|
||||
# Serves the static bundle (./webgui/web/) via nginx and reverse-proxies
|
||||
# RC API calls + remote file downloads to the rclone rcd container on
|
||||
# the compose network. Same-origin from the browser's perspective, so
|
||||
# no CORS headaches.
|
||||
|
||||
FROM nginx:1.27-alpine
|
||||
|
||||
LABEL org.opencontainers.image.title="rclone-webgui-frontend"
|
||||
LABEL org.opencontainers.image.description="Static frontend for the rclone webgui, served by nginx with a reverse proxy to rclone rcd."
|
||||
|
||||
COPY webgui/web/ /usr/share/nginx/html/
|
||||
COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
|
||||
@@ -0,0 +1,94 @@
|
||||
# rclone-webgui
|
||||
|
||||
浏览器端的 rclone 图形界面，使用 Anthropic / Claude 设计语言。
|
||||
|
||||
`rclone/` 是 [github.com/rclone/rclone](https://github.com/rclone/rclone)
|
||||
的 git submodule，锁定在上游某个 commit，**不携带我们的任何改动**。
|
||||
所有 webgui 源码、Docker 编排、文档都在本仓库。
|
||||
|
||||
## 项目结构
|
||||
|
||||
```
|
||||
.
|
||||
├── webgui/ # webgui 源码（在父仓库，不在 rclone 子模块里）
|
||||
│ ├── webgui.go # Go 子命令源码（仅当自行构建 rclone 时需要）
|
||||
│ ├── rclone-cmd-all-add-webgui-import.patch # 注解：把 webgui 注册进 rclone 的 cmd/all
|
||||
│ └── web/ # 静态前端（nginx 服务的就是这一份）
|
||||
│ ├── index.html
|
||||
│ └── assets/
|
||||
├── docker/ # nginx 反向代理配置
|
||||
├── config/rclone/ # rclone.conf 挂载点（bind mount，不提交）
|
||||
├── Dockerfile.webgui # 前端镜像构建（nginx + 静态资源）
|
||||
├── docker-compose.yml # rclone rcd + gui 双服务编排
|
||||
├── DESIGN.md # UI 设计系统规范
|
||||
├── CLAUDE.md # Claude Code 协作指引
|
||||
└── rclone/ # submodule → github.com/rclone/rclone，纯净不改动
|
||||
```
|
||||
|
||||
## 功能
|
||||
|
||||
- **Remotes 管理** — 在浏览器里创建 / 编辑 / 删除 rclone remote，表单从
|
||||
`/config/providers` 动态生成，覆盖全部 70+ 后端的全部选项。
|
||||
- **文件浏览** — 面包屑导航 + 文件表格，支持 mkdir / upload / delete /
|
||||
rename / download。
|
||||
- **同步任务** — copy / sync / move 异步任务，1.5 秒轮询进度（速度、
|
||||
ETA、已传输 / 总量、错误计数），任务元信息（src→dst）持久化到
|
||||
localStorage，刷新页面不丢。
|
||||
|
||||
> OAuth 后端（drive、dropbox、onedrive 等）目前仅显示提示横幅，
|
||||
> 引导用户在终端跑 `rclone config` 完成授权。
|
||||
|
||||
## 快速开始
|
||||
|
||||
```bash
|
||||
# 1. 拉取子模块
|
||||
git clone --recurse-submodules <your-fork-url>
|
||||
# 或在已克隆的仓库里：
|
||||
git submodule update --init
|
||||
|
||||
# 2. 启动堆栈
|
||||
docker compose up -d --build
|
||||
|
||||
# 3. 打开 http://localhost:5580
|
||||
```
|
||||
|
||||
## 端口
|
||||
|
||||
| 端口 | 服务 | 说明 |
|
||||
|---|---|---|
|
||||
| 5580 | gui (nginx) | 浏览器入口；同源反代 RC API |
|
||||
| 5572 | rclone rcd | 可直接 curl / `rclone rc` 访问 |
|
||||
|
||||
## 自行构建 rclone（可选）
|
||||
|
||||
Docker 编排默认使用官方 `rclone/rclone:latest` 镜像，配合 rcd 即可。
|
||||
如果你想构建一个内置 webgui 命令的 rclone 二进制（`rclone webgui`
|
||||
能像 `rclone gui` 那样独立运行），可以：
|
||||
|
||||
```bash
|
||||
# 1. 把 webgui 源码软链或拷贝到 rclone 子模块的 cmd/ 下
|
||||
ln -s ../../webgui rclone/cmd/webgui
|
||||
|
||||
# 2. 应用注册补丁
|
||||
cd rclone && git apply ../webgui/rclone-cmd-all-add-webgui-import.patch
|
||||
|
||||
# 3. 构建
|
||||
make
|
||||
```
|
||||
|
||||
## 升级 rclone 子模块
|
||||
|
||||
```bash
|
||||
cd rclone
|
||||
git fetch origin
|
||||
git checkout <new-tag-or-commit>
|
||||
cd ..
|
||||
git add rclone
|
||||
git commit -m "chore: 升级 rclone 至 <new-tag>"
|
||||
```
|
||||
|
||||
## 协议
|
||||
|
||||
- 本外层仓库：MIT
|
||||
- `rclone/` 子模块：遵循上游 [rclone](https://github.com/rclone/rclone)
|
||||
的 MIT 协议
|
||||
@@ -0,0 +1,4 @@
|
||||
# rclone config directory — bind-mounted into the rclone container at
|
||||
# /config/rclone. Place your rclone.conf here, or run:
|
||||
# docker compose exec rclone rclone config
|
||||
# to create remotes interactively.
|
||||
@@ -0,0 +1,65 @@
|
||||
# Docker Compose stack for the rclone webgui.
|
||||
#
|
||||
# Two services:
|
||||
# - rclone : official rclone/rclone image running `rcd` with --rc-serve
|
||||
# and --rc-no-auth. Exposed on host port 5572 so you can
|
||||
# also drive it directly with curl / rclone rc if needed.
|
||||
# - gui : nginx serving the embedded frontend bundle on host port
|
||||
# 5580, reverse-proxying RC API + remote-file downloads
|
||||
# to the rclone container. Open this in your browser.
|
||||
#
|
||||
# rclone config lives in ./config/rclone/rclone.conf (bind-mounted).
|
||||
# If it doesn't exist yet, create your remotes with:
|
||||
# docker compose exec rclone rclone config
|
||||
# or copy an existing rclone.conf into ./config/rclone/ before starting.
|
||||
#
|
||||
# Usage:
|
||||
# docker compose up -d --build # build + start
|
||||
# open http://localhost:5580
|
||||
# docker compose logs -f gui rclone # tail logs
|
||||
# docker compose down # stop
|
||||
|
||||
services:
|
||||
rclone:
|
||||
image: rclone/rclone:latest
|
||||
container_name: rclone-rcd
|
||||
command:
|
||||
- rcd
|
||||
- --rc-no-auth
|
||||
- --rc-addr=:5572
|
||||
- --rc-serve
|
||||
- --rc-job-expire-duration=24h
|
||||
- --rc-job-expire-interval=1m
|
||||
- -vv
|
||||
volumes:
|
||||
# rclone looks for $XDG_CONFIG_HOME/rclone/rclone.conf; the
|
||||
# official image sets XDG_CONFIG_HOME=/config.
|
||||
- ./config/rclone:/config/rclone
|
||||
# Cache dir for tokens, chunk cache, vfs cache, etc.
|
||||
- rclone-cache:/cache
|
||||
# Scratch space for any local-FS remotes that point here.
|
||||
- rclone-data:/data
|
||||
environment:
|
||||
- XDG_CONFIG_HOME=/config
|
||||
- RCLONE_CACHE_DIR=/cache
|
||||
ports:
|
||||
- "5572:5572"
|
||||
expose:
|
||||
- "5572"
|
||||
restart: unless-stopped
|
||||
|
||||
gui:
|
||||
build:
|
||||
context: .
|
||||
dockerfile: Dockerfile.webgui
|
||||
image: rclone-webgui-frontend:local
|
||||
container_name: rclone-webgui
|
||||
depends_on:
|
||||
- rclone
|
||||
ports:
|
||||
- "5580:80"
|
||||
restart: unless-stopped
|
||||
|
||||
volumes:
|
||||
rclone-cache:
|
||||
rclone-data:
|
||||
@@ -0,0 +1,66 @@
|
||||
# nginx config for the webgui frontend container.
|
||||
#
|
||||
# Two jobs:
|
||||
# 1. Serve the SPA static bundle (HTML/CSS/JS) with SPA fallback.
|
||||
# 2. Reverse-proxy RC API calls and remote-file downloads to the
|
||||
# rclone rcd container on the compose network.
|
||||
#
|
||||
# Same-origin from the browser, so the frontend's fetch() calls hit
|
||||
# this nginx and get forwarded to rclone — no CORS, no basic-auth
|
||||
# popups, no embedded credentials in URLs.
|
||||
|
||||
server {
|
||||
listen 80;
|
||||
server_name _;
|
||||
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
# Uploads can be large; let rclone decide on size limits.
|
||||
client_max_body_size 0;
|
||||
|
||||
# Light gzip for text assets.
|
||||
gzip on;
|
||||
gzip_vary on;
|
||||
gzip_min_length 1024;
|
||||
gzip_types
|
||||
text/plain
|
||||
text/css
|
||||
application/javascript
|
||||
application/json
|
||||
image/svg+xml;
|
||||
|
||||
# --- Static assets ---
|
||||
# Anything that resolves to a real file is served from the bundle.
|
||||
# Unknown paths fall through to index.html so client-side hash
|
||||
# routing (#/remotes, #/browse/...) keeps working.
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
|
||||
# --- RC API endpoints (POST JSON) ---
|
||||
# rclone registers endpoints under well-known top-level prefixes.
|
||||
# Match any of them and forward to rclone.
|
||||
location ~ ^/(config|operations|sync|job|fs|rc|cache|vfs|subsystem|options|metrics)/ {
|
||||
proxy_pass http://rclone:5572;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
proxy_request_buffering off;
|
||||
}
|
||||
|
||||
# --- Remote file downloads (GET) ---
|
||||
# rclone rcd with --rc-serve exposes remotes at /<remote>:<path>.
|
||||
# The colon in the first path segment is the tell — static asset
|
||||
# paths never have one.
|
||||
location ~ ^/([^/]+): {
|
||||
proxy_pass http://rclone:5572;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
}
|
||||
}
|
||||
Submodule
+1
Submodule rclone added at 59c86b01bb
@@ -0,0 +1,10 @@
|
||||
diff --git a/cmd/all/all.go b/cmd/all/all.go
|
||||
index 912cde629..cf3c7f4bd 100644
|
||||
--- a/cmd/all/all.go
|
||||
+++ b/cmd/all/all.go
|
||||
@@ -80,4 +80,5 @@ import (
|
||||
_ "github.com/rclone/rclone/cmd/touch"
|
||||
_ "github.com/rclone/rclone/cmd/tree"
|
||||
_ "github.com/rclone/rclone/cmd/version"
|
||||
+ _ "github.com/rclone/rclone/cmd/webgui"
|
||||
)
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#141413">
|
||||
<path d="M8 0 L9.2 6.8 L16 8 L9.2 9.2 L8 16 L6.8 9.2 L0 8 L6.8 6.8 Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 157 B |
@@ -0,0 +1,62 @@
|
||||
// app.js — entry point. Routes hash changes to view renderers and
|
||||
// keeps the top-nav active state in sync.
|
||||
|
||||
import { onRoute } from "./state.js";
|
||||
import { renderRemotes } from "./views/remotes.js";
|
||||
import { renderBrowse } from "./views/browser.js";
|
||||
import { renderJobs, renderNewJob, stopJobPolling } from "./views/jobs.js";
|
||||
import {
|
||||
renderConfigureNew,
|
||||
renderConfigureEdit,
|
||||
} from "./views/configure.js";
|
||||
|
||||
const views = {
|
||||
remotes: renderRemotes,
|
||||
browse: renderBrowse,
|
||||
jobs: renderJobs,
|
||||
"jobs-new": renderNewJob,
|
||||
"configure-new": renderConfigureNew,
|
||||
"configure-edit": renderConfigureEdit,
|
||||
};
|
||||
|
||||
function setActiveNav(routeName) {
|
||||
const links = document.querySelectorAll("#nav-links a");
|
||||
for (const a of links) {
|
||||
const target = a.dataset.route;
|
||||
let isActive = target === routeName;
|
||||
// "Configure" is active on both configure-new and configure-edit
|
||||
if (target === "configure" && routeName.startsWith("configure-")) {
|
||||
isActive = true;
|
||||
}
|
||||
a.classList.toggle("active", isActive);
|
||||
}
|
||||
}
|
||||
|
||||
onRoute(async (route) => {
|
||||
setActiveNav(route.name);
|
||||
|
||||
// Stop jobs polling when leaving the jobs view
|
||||
if (route.name !== "jobs") {
|
||||
stopJobPolling();
|
||||
}
|
||||
|
||||
const renderer = views[route.name] || renderRemotes;
|
||||
try {
|
||||
await renderer(route.params);
|
||||
} catch (e) {
|
||||
console.error("view error", e);
|
||||
const app = document.getElementById("app");
|
||||
if (app) {
|
||||
app.innerHTML = `<div class="empty"><h3>Something went wrong</h3><p>${escapeHtml(e.message)}</p></div>`;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function escapeHtml(s) {
|
||||
return String(s)
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
// rc.js — minimal client for rclone's RC HTTP API.
|
||||
// The RC base URL is discovered from the ?url= query param that the
|
||||
// webgui command appends to the GUI URL on launch. If absent (e.g. when
|
||||
// developing the SPA from another server), fall back to same-origin.
|
||||
|
||||
const params = new URLSearchParams(location.search);
|
||||
const QUERY_URL = params.get("url");
|
||||
const RC_BASE = QUERY_URL
|
||||
? QUERY_URL.replace(/\/$/, "")
|
||||
: location.origin;
|
||||
|
||||
const AUTH_USER = params.get("user");
|
||||
const AUTH_PASS = params.get("pass");
|
||||
|
||||
let authHeader = null;
|
||||
if (AUTH_USER && AUTH_PASS) {
|
||||
authHeader = "Basic " + btoa(`${AUTH_USER}:${AUTH_PASS}`);
|
||||
}
|
||||
|
||||
export function rcURL() {
|
||||
return RC_BASE;
|
||||
}
|
||||
|
||||
// Are we running with basic auth configured from the launch URL?
|
||||
export function hasAuth() {
|
||||
return authHeader !== null;
|
||||
}
|
||||
|
||||
export function isNoAuth() {
|
||||
return !authHeader;
|
||||
}
|
||||
|
||||
// POST JSON to an RC endpoint. Returns the parsed JSON response, or throws.
|
||||
export async function post(path, body = {}) {
|
||||
const headers = { "Content-Type": "application/json" };
|
||||
if (authHeader) headers["Authorization"] = authHeader;
|
||||
const res = await fetch(RC_BASE + "/" + path.replace(/^\//, ""), {
|
||||
method: "POST",
|
||||
headers,
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
return parseResponse(res, path);
|
||||
}
|
||||
|
||||
// POST JSON and request an async job. Returns { jobid, executeId }.
|
||||
export async function postAsync(path, body = {}) {
|
||||
return post(path, { ...body, _async: true });
|
||||
}
|
||||
|
||||
// Upload one or more files via multipart form-data.
|
||||
// Matches operations/uploadfile: form fields `fs`, `remote`, and one
|
||||
// file part per uploaded file. The server uses the part's filename.
|
||||
export async function uploadFile(fs, remote, files) {
|
||||
const form = new FormData();
|
||||
form.set("fs", fs);
|
||||
form.set("remote", remote);
|
||||
for (const file of files) {
|
||||
form.append("file", file, file.name);
|
||||
}
|
||||
const headers = {};
|
||||
if (authHeader) headers["Authorization"] = authHeader;
|
||||
// Do NOT set Content-Type — the browser sets multipart boundary.
|
||||
const res = await fetch(RC_BASE + "/operations/uploadfile", {
|
||||
method: "POST",
|
||||
headers,
|
||||
body: form,
|
||||
});
|
||||
return parseResponse(res, "/operations/uploadfile");
|
||||
}
|
||||
|
||||
// Build a download URL for a file. Requires opt.Serve = true on the rc server.
|
||||
export function downloadURL(remoteFs, remotePath, fileName) {
|
||||
const base = RC_BASE.replace(/\/$/, "");
|
||||
// rc server serves remote files at /<remote>:<path>
|
||||
const trimmed = (remotePath || "").replace(/^\/+|\/+$/g, "");
|
||||
const path = trimmed ? `${remoteFs}/${trimmed}/${fileName}` : `${remoteFs}/${fileName}`;
|
||||
let url = `${base}/${path}`;
|
||||
if (authHeader) {
|
||||
// Embed basic auth into the URL so the browser can fetch it directly.
|
||||
url = url.replace(/^(https?:\/\/)/, `$1${encodeURIComponent(AUTH_USER)}:${encodeURIComponent(AUTH_PASS)}@`);
|
||||
}
|
||||
return url;
|
||||
}
|
||||
|
||||
async function parseResponse(res, path) {
|
||||
let body = null;
|
||||
const ct = res.headers.get("Content-Type") || "";
|
||||
if (ct.includes("application/json")) {
|
||||
body = await res.json();
|
||||
} else {
|
||||
const text = await res.text();
|
||||
body = text ? { raw: text } : {};
|
||||
}
|
||||
if (!res.ok) {
|
||||
const msg = (body && (body.error || body.message)) || `HTTP ${res.status}`;
|
||||
const err = new Error(`${path}: ${msg}`);
|
||||
err.status = res.status;
|
||||
err.body = body;
|
||||
throw err;
|
||||
}
|
||||
if (body && body.error) {
|
||||
throw new Error(`${path}: ${body.error}`);
|
||||
}
|
||||
return body;
|
||||
}
|
||||
@@ -0,0 +1,216 @@
|
||||
// state.js — minimal pub/sub store + hash router + localStorage-backed
|
||||
// job metadata cache. Vanilla, no framework.
|
||||
|
||||
const JOB_META_KEY = "webgui:jobMeta";
|
||||
const JOB_META_TTL_MS = 7 * 24 * 60 * 60 * 1000; // 7 days
|
||||
|
||||
const listeners = new Set();
|
||||
const state = {
|
||||
remotes: [], // [{ name, type }]
|
||||
jobs: new Map(), // jobid -> { jobid, status, progress, action, src, dst }
|
||||
providers: null, // cached /config/providers response
|
||||
// jobMeta is persisted to localStorage so the jobs view can show
|
||||
// src/dst for jobs after a page reload. Keyed by jobid (number).
|
||||
jobMeta: loadJobMeta(),
|
||||
};
|
||||
|
||||
function loadJobMeta() {
|
||||
try {
|
||||
const raw = localStorage.getItem(JOB_META_KEY);
|
||||
if (!raw) return new Map();
|
||||
const arr = JSON.parse(raw);
|
||||
if (!Array.isArray(arr)) return new Map();
|
||||
const now = Date.now();
|
||||
const map = new Map();
|
||||
for (const [id, meta] of arr) {
|
||||
if (meta && typeof meta.submittedAt === "number") {
|
||||
if (now - meta.submittedAt < JOB_META_TTL_MS) {
|
||||
map.set(Number(id), meta);
|
||||
}
|
||||
}
|
||||
}
|
||||
return map;
|
||||
} catch {
|
||||
return new Map();
|
||||
}
|
||||
}
|
||||
|
||||
function saveJobMeta() {
|
||||
try {
|
||||
const arr = Array.from(state.jobMeta.entries());
|
||||
localStorage.setItem(JOB_META_KEY, JSON.stringify(arr));
|
||||
} catch {
|
||||
// localStorage might be unavailable (private mode, quota); ignore.
|
||||
}
|
||||
}
|
||||
|
||||
export function getState() {
|
||||
return state;
|
||||
}
|
||||
|
||||
export function setState(patch) {
|
||||
Object.assign(state, patch);
|
||||
for (const l of listeners) {
|
||||
try {
|
||||
l(state);
|
||||
} catch (e) {
|
||||
console.error("state listener error", e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function subscribe(fn) {
|
||||
listeners.add(fn);
|
||||
return () => listeners.delete(fn);
|
||||
}
|
||||
|
||||
// --- Job metadata API ---
|
||||
|
||||
export function rememberJob(jobid, { action, src, dst }) {
|
||||
state.jobMeta.set(Number(jobid), {
|
||||
action,
|
||||
src,
|
||||
dst,
|
||||
submittedAt: Date.now(),
|
||||
});
|
||||
saveJobMeta();
|
||||
}
|
||||
|
||||
export function getJobMeta(jobid) {
|
||||
return state.jobMeta.get(Number(jobid));
|
||||
}
|
||||
|
||||
export function forgetJob(jobid) {
|
||||
state.jobMeta.delete(Number(jobid));
|
||||
saveJobMeta();
|
||||
}
|
||||
|
||||
// --- Router ---
|
||||
// Hash-based routes:
|
||||
// #/remotes
|
||||
// #/browse/<remote>/<path...>
|
||||
// #/jobs
|
||||
// #/jobs/new
|
||||
// #/configure/new
|
||||
// #/configure/new/<providerName>
|
||||
// #/configure/edit/<remoteName>
|
||||
|
||||
const routeListeners = new Set();
|
||||
|
||||
export function onRoute(fn) {
|
||||
routeListeners.add(fn);
|
||||
return () => routeListeners.delete(fn);
|
||||
}
|
||||
|
||||
function parseHash(hash) {
|
||||
const raw = hash.replace(/^#\/?/, "");
|
||||
const parts = raw.split("/").filter(Boolean);
|
||||
if (parts.length === 0) {
|
||||
return { name: "remotes", params: {} };
|
||||
}
|
||||
switch (parts[0]) {
|
||||
case "remotes":
|
||||
return { name: "remotes", params: {} };
|
||||
case "browse":
|
||||
return {
|
||||
name: "browse",
|
||||
params: {
|
||||
remote: decodeURIComponent(parts[1] || ""),
|
||||
path: parts.slice(2).map(decodeURIComponent).join("/"),
|
||||
},
|
||||
};
|
||||
case "jobs":
|
||||
if (parts[1] === "new") {
|
||||
return { name: "jobs-new", params: {} };
|
||||
}
|
||||
return { name: "jobs", params: {} };
|
||||
case "configure":
|
||||
if (parts[1] === "new") {
|
||||
return {
|
||||
name: "configure-new",
|
||||
params: { provider: parts[2] ? decodeURIComponent(parts[2]) : "" },
|
||||
};
|
||||
}
|
||||
if (parts[1] === "edit") {
|
||||
return {
|
||||
name: "configure-edit",
|
||||
params: { remote: decodeURIComponent(parts[2] || "") },
|
||||
};
|
||||
}
|
||||
return { name: "configure-new", params: { provider: "" } };
|
||||
default:
|
||||
return { name: "remotes", params: {} };
|
||||
}
|
||||
}
|
||||
|
||||
export function navigate(hash) {
|
||||
if (location.hash !== hash) {
|
||||
location.hash = hash;
|
||||
} else {
|
||||
dispatch();
|
||||
}
|
||||
}
|
||||
|
||||
function dispatch() {
|
||||
const route = parseHash(location.hash);
|
||||
for (const l of routeListeners) {
|
||||
try {
|
||||
l(route);
|
||||
} catch (e) {
|
||||
console.error("route listener error", e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("hashchange", dispatch);
|
||||
window.addEventListener("load", dispatch);
|
||||
|
||||
// --- Toast ---
|
||||
export function toast(message, kind = "default", ttl = 4000) {
|
||||
const stack = document.getElementById("toast-stack");
|
||||
if (!stack) return;
|
||||
const el = document.createElement("div");
|
||||
el.className = `toast toast-${kind}`;
|
||||
el.textContent = message;
|
||||
stack.appendChild(el);
|
||||
setTimeout(() => el.remove(), ttl);
|
||||
}
|
||||
|
||||
// --- Format helpers ---
|
||||
export function formatBytes(n) {
|
||||
if (n == null || isNaN(n)) return "—";
|
||||
if (n < 1024) return `${n} B`;
|
||||
const units = ["KB", "MB", "GB", "TB", "PB"];
|
||||
let v = n / 1024;
|
||||
let i = 0;
|
||||
while (v >= 1024 && i < units.length - 1) {
|
||||
v /= 1024;
|
||||
i++;
|
||||
}
|
||||
return `${v.toFixed(1)} ${units[i]}`;
|
||||
}
|
||||
|
||||
export function formatSpeed(bytesPerSec) {
|
||||
return formatBytes(bytesPerSec) + "/s";
|
||||
}
|
||||
|
||||
export function formatDuration(seconds) {
|
||||
if (seconds == null || !isFinite(seconds)) return "—";
|
||||
const s = Math.round(seconds);
|
||||
const h = Math.floor(s / 3600);
|
||||
const m = Math.floor((s % 3600) / 60);
|
||||
const sec = s % 60;
|
||||
if (h > 0) return `${h}h ${m}m`;
|
||||
if (m > 0) return `${m}m ${sec}s`;
|
||||
return `${sec}s`;
|
||||
}
|
||||
|
||||
export function formatTime(iso) {
|
||||
if (!iso) return "—";
|
||||
try {
|
||||
const d = new Date(iso);
|
||||
return d.toLocaleString();
|
||||
} catch {
|
||||
return iso;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,308 @@
|
||||
// views/browser.js — file/folder listing with breadcrumbs, mkdir, upload, delete, rename.
|
||||
|
||||
import { post, uploadFile, downloadURL } from "../rc.js";
|
||||
import { toast, formatBytes, formatTime } from "../state.js";
|
||||
|
||||
export async function renderBrowse({ remote, path }) {
|
||||
const app = document.getElementById("app");
|
||||
if (!remote) {
|
||||
app.innerHTML = `<div class="empty"><h3>No remote selected</h3><p><a href="#/remotes">Pick a remote</a> to browse.</p></div>`;
|
||||
return;
|
||||
}
|
||||
|
||||
const fs = `${remote}:`;
|
||||
|
||||
app.innerHTML = `
|
||||
<div class="section-head">
|
||||
<div>
|
||||
<h2>${escapeHtml(remote)}</h2>
|
||||
<p class="subtitle">${escapeHtml(path || "(root)")}</p>
|
||||
</div>
|
||||
<div class="toolbar">
|
||||
<input type="file" id="upload-input" multiple style="display:none">
|
||||
<button class="btn btn-secondary btn-sm" data-action="mkdir">New folder</button>
|
||||
<button class="btn btn-secondary btn-sm" data-action="upload">Upload</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="breadcrumbs" class="breadcrumbs"></div>
|
||||
<div id="browser-card" class="card-outline">
|
||||
<p class="empty">Loading…</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const breadcrumbsEl = document.getElementById("breadcrumbs");
|
||||
renderBreadcrumbs(breadcrumbsEl, remote, path);
|
||||
|
||||
const card = document.getElementById("browser-card");
|
||||
const fileInput = document.getElementById("upload-input");
|
||||
|
||||
try {
|
||||
const res = await post("operations/list", {
|
||||
fs,
|
||||
remote: path || "",
|
||||
opt: { noModTime: false, noMimeType: true, showHash: false },
|
||||
});
|
||||
const items = (res && res.list) || [];
|
||||
renderTable(card, fs, path, items);
|
||||
} catch (e) {
|
||||
card.innerHTML = `<div class="empty"><h3>Couldn’t list</h3><p>${escapeHtml(e.message)}</p></div>`;
|
||||
toast(`List failed: ${e.message}`, "error");
|
||||
}
|
||||
|
||||
// --- Toolbar handlers ---
|
||||
app.querySelector('[data-action="mkdir"]').addEventListener("click", () => {
|
||||
openModal(
|
||||
"New folder",
|
||||
[
|
||||
{ name: "name", label: "Folder name", type: "text", placeholder: "new-folder" },
|
||||
],
|
||||
async ({ name }) => {
|
||||
if (!name) return;
|
||||
const target = path ? `${path}/${name}` : name;
|
||||
await post("operations/mkdir", { fs, remote: target });
|
||||
toast(`Created ${name}`, "success");
|
||||
},
|
||||
).catch((e) => toast(`mkdir failed: ${e.message}`, "error"));
|
||||
});
|
||||
|
||||
app.querySelector('[data-action="upload"]').addEventListener("click", () => {
|
||||
fileInput.value = "";
|
||||
fileInput.click();
|
||||
});
|
||||
|
||||
fileInput.addEventListener("change", async () => {
|
||||
const files = Array.from(fileInput.files || []);
|
||||
if (files.length === 0) return;
|
||||
try {
|
||||
await uploadFile(fs, path || "", files);
|
||||
toast(`Uploaded ${files.length} file(s)`, "success");
|
||||
// Re-render list
|
||||
location.reload();
|
||||
} catch (e) {
|
||||
toast(`Upload failed: ${e.message}`, "error");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function renderBreadcrumbs(el, remote, path) {
|
||||
const segments = (path || "").split("/").filter(Boolean);
|
||||
let html = `<a href="#/remotes">Remotes</a><span class="sep">/</span>`;
|
||||
html += `<a href="#/browse/${encodeURIComponent(remote)}">${escapeHtml(remote)}</a>`;
|
||||
let acc = "";
|
||||
for (let i = 0; i < segments.length; i++) {
|
||||
const seg = segments[i];
|
||||
acc = acc ? `${acc}/${seg}` : seg;
|
||||
const isLast = i === segments.length - 1;
|
||||
html += `<span class="sep">/</span>`;
|
||||
if (isLast) {
|
||||
html += `<span class="current">${escapeHtml(seg)}</span>`;
|
||||
} else {
|
||||
html += `<a href="#/browse/${encodeURIComponent(remote)}/${acc.split("/").map(encodeURIComponent).join("/")}">${escapeHtml(seg)}</a>`;
|
||||
}
|
||||
}
|
||||
el.innerHTML = html;
|
||||
}
|
||||
|
||||
function renderTable(card, fs, path, items) {
|
||||
if (!items || items.length === 0) {
|
||||
card.innerHTML = `
|
||||
<div class="empty">
|
||||
<h3>Empty folder</h3>
|
||||
<p>No files here. Use <strong>Upload</strong> in the toolbar to add some.</p>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
// Sort: directories first, then files; alphabetical within each group.
|
||||
items.sort((a, b) => {
|
||||
if (a.IsDir !== b.IsDir) return a.IsDir ? -1 : 1;
|
||||
return a.Name.localeCompare(b.Name);
|
||||
});
|
||||
|
||||
const parentHref = parentLink(fs, path);
|
||||
const rows = items.map((item) => row(fs, path, item)).join("");
|
||||
|
||||
card.innerHTML = `
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th class="col-num">Size</th>
|
||||
<th>Modified</th>
|
||||
<th class="col-num">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${parentHref ? `<tr class="row-dir"><td class="col-name"><a href="${parentHref}">../</a></td><td></td><td></td><td></td></tr>` : ""}
|
||||
${rows}
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
|
||||
// Wire row action buttons
|
||||
card.querySelectorAll("[data-delete]").forEach((btn) => {
|
||||
btn.addEventListener("click", () => onDelete(fs, path, btn.dataset.delete));
|
||||
});
|
||||
card.querySelectorAll("[data-rename]").forEach((btn) => {
|
||||
btn.addEventListener("click", () => onRename(fs, path, btn.dataset.rename));
|
||||
});
|
||||
}
|
||||
|
||||
function row(fs, path, item) {
|
||||
const itemPath = path ? `${path}/${item.Name}` : item.Name;
|
||||
if (item.IsDir) {
|
||||
const href = `#/browse/${fs.replace(/:$/, "")}/${itemPath.split("/").map(encodeURIComponent).join("/")}`;
|
||||
return `
|
||||
<tr class="row-dir">
|
||||
<td class="col-name"><a href="${href}">${icon("dir")} ${escapeHtml(item.Name)}/</a></td>
|
||||
<td class="col-num col-mono">—</td>
|
||||
<td class="col-mono">${escapeHtml(formatTime(item.ModTime))}</td>
|
||||
<td class="col-num"></td>
|
||||
</tr>
|
||||
`;
|
||||
}
|
||||
return `
|
||||
<tr>
|
||||
<td class="col-name">
|
||||
<a href="${downloadURL(fs, path, item.Name)}" download="${escapeHtml(item.Name)}">${icon("file")} ${escapeHtml(item.Name)}</a>
|
||||
</td>
|
||||
<td class="col-num col-mono">${escapeHtml(formatBytes(item.Size))}</td>
|
||||
<td class="col-mono">${escapeHtml(formatTime(item.ModTime))}</td>
|
||||
<td class="col-num">
|
||||
<button class="btn btn-secondary btn-sm" data-rename="${escapeHtml(itemPath)}">Rename</button>
|
||||
<button class="btn btn-danger btn-sm" data-delete="${escapeHtml(itemPath)}">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
}
|
||||
|
||||
function icon(kind) {
|
||||
if (kind === "dir") {
|
||||
return `<span style="display:inline-block;width:1em;color:var(--color-primary)">▸</span>`;
|
||||
}
|
||||
return `<span style="display:inline-block;width:1em;color:var(--color-muted-soft)">📄</span>`;
|
||||
}
|
||||
|
||||
function parentLink(fs, path) {
|
||||
if (!path) return "";
|
||||
const segments = path.split("/").filter(Boolean);
|
||||
segments.pop();
|
||||
const parent = segments.join("/");
|
||||
const remote = fs.replace(/:$/, "");
|
||||
if (!parent) {
|
||||
return `#/browse/${encodeURIComponent(remote)}`;
|
||||
}
|
||||
return `#/browse/${encodeURIComponent(remote)}/${parent.split("/").map(encodeURIComponent).join("/")}`;
|
||||
}
|
||||
|
||||
async function onDelete(fs, path, itemPath) {
|
||||
// itemPath is relative to fs root
|
||||
if (!confirm(`Delete ${itemPath}? This cannot be undone.`)) return;
|
||||
try {
|
||||
await post("operations/deletefile", { fs, remote: itemPath });
|
||||
toast(`Deleted ${itemPath}`, "success");
|
||||
location.reload();
|
||||
} catch (e) {
|
||||
toast(`Delete failed: ${e.message}`, "error");
|
||||
}
|
||||
}
|
||||
|
||||
async function onRename(fs, path, itemPath) {
|
||||
const segments = itemPath.split("/");
|
||||
const oldName = segments.pop();
|
||||
try {
|
||||
const result = await openModal(
|
||||
`Rename ${oldName}`,
|
||||
[{ name: "name", label: "New name", type: "text", value: oldName }],
|
||||
async ({ name }) => {
|
||||
if (!name || name === oldName) return;
|
||||
const dir = segments.join("/");
|
||||
const dst = dir ? `${dir}/${name}` : name;
|
||||
await post("operations/movefile", {
|
||||
srcFs: fs,
|
||||
srcRemote: itemPath,
|
||||
dstFs: fs,
|
||||
dstRemote: dst,
|
||||
});
|
||||
toast(`Renamed to ${name}`, "success");
|
||||
},
|
||||
);
|
||||
// Modal succeeded → reload to refresh list
|
||||
location.reload();
|
||||
} catch (e) {
|
||||
toast(`Rename failed: ${e.message}`, "error");
|
||||
}
|
||||
}
|
||||
|
||||
// --- Modal helper ---
|
||||
let modalResolver = null;
|
||||
|
||||
export function openModal(title, fields, onSubmit) {
|
||||
return new Promise((resolve) => {
|
||||
const root = document.getElementById("modal-root");
|
||||
const formHtml = fields
|
||||
.map(
|
||||
(f) => `
|
||||
<div class="field">
|
||||
<label>${escapeHtml(f.label)}</label>
|
||||
<input class="input" name="${escapeHtml(f.name)}" type="${escapeHtml(f.type || "text")}" value="${escapeHtml(f.value || "")}" placeholder="${escapeHtml(f.placeholder || "")}">
|
||||
</div>`,
|
||||
)
|
||||
.join("");
|
||||
|
||||
root.innerHTML = `
|
||||
<div class="modal-overlay">
|
||||
<form class="modal">
|
||||
<h3>${escapeHtml(title)}</h3>
|
||||
${formHtml}
|
||||
<div class="modal-actions">
|
||||
<button type="button" class="btn btn-secondary" data-cancel>Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">OK</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const overlay = root.querySelector(".modal-overlay");
|
||||
const form = root.querySelector("form");
|
||||
|
||||
const close = () => {
|
||||
root.innerHTML = "";
|
||||
};
|
||||
|
||||
overlay.addEventListener("click", (e) => {
|
||||
if (e.target === overlay) close();
|
||||
});
|
||||
form.querySelector("[data-cancel]").addEventListener("click", () => {
|
||||
close();
|
||||
resolve(null);
|
||||
});
|
||||
form.addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
const data = {};
|
||||
for (const f of fields) {
|
||||
data[f.name] = form.elements[f.name].value;
|
||||
}
|
||||
try {
|
||||
await onSubmit(data);
|
||||
close();
|
||||
resolve(data);
|
||||
} catch (err) {
|
||||
toast(err.message, "error");
|
||||
}
|
||||
});
|
||||
// Focus first input
|
||||
const first = form.elements[fields[0].name];
|
||||
if (first) first.focus();
|
||||
});
|
||||
}
|
||||
|
||||
function escapeHtml(s) {
|
||||
return String(s)
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
@@ -0,0 +1,445 @@
|
||||
// views/configure.js — dynamic remote form builder.
|
||||
//
|
||||
// Two modes:
|
||||
// #/configure/new → provider picker (searchable grid)
|
||||
// #/configure/new/<provider> → form for that backend
|
||||
// #/configure/edit/<remote> → form pre-filled from /config/get
|
||||
//
|
||||
// Pulls backend metadata from /config/providers (cached in app state).
|
||||
// OAuth backends (option named "token" with IsPassword) get a banner
|
||||
// and disabled submit — user must run `rclone config` in a terminal.
|
||||
|
||||
import { post } from "../rc.js";
|
||||
import { getState, setState, toast } from "../state.js";
|
||||
|
||||
// --- Route entrypoints ---
|
||||
|
||||
export async function renderConfigureNew({ provider = "" }) {
|
||||
if (!provider) {
|
||||
return renderProviderPicker();
|
||||
}
|
||||
const providers = await ensureProviders();
|
||||
const info = providers.find((p) => p.Name === provider);
|
||||
if (!info) {
|
||||
document.getElementById("app").innerHTML = `
|
||||
<div class="empty">
|
||||
<h3>Unknown backend</h3>
|
||||
<p>No provider named <code>${escapeHtml(provider)}</code>.</p>
|
||||
<p><a href="#/configure/new">← Back to provider picker</a></p>
|
||||
</div>`;
|
||||
return;
|
||||
}
|
||||
return renderForm({ provider: info, mode: "create" });
|
||||
}
|
||||
|
||||
export async function renderConfigureEdit({ remote }) {
|
||||
if (!remote) {
|
||||
location.hash = "#/remotes";
|
||||
return;
|
||||
}
|
||||
const app = document.getElementById("app");
|
||||
app.innerHTML = `<div class="empty"><p>Loading remote <code>${escapeHtml(remote)}</code>…</p></div>`;
|
||||
|
||||
// Find the remote's type from /config/dump
|
||||
let typeName;
|
||||
try {
|
||||
const dump = await post("config/dump");
|
||||
typeName = dump && dump[remote] && dump[remote].type;
|
||||
} catch (e) {
|
||||
toast(`Couldn't read remote: ${e.message}`, "error");
|
||||
return;
|
||||
}
|
||||
if (!typeName) {
|
||||
app.innerHTML = `
|
||||
<div class="empty">
|
||||
<h3>Remote not found</h3>
|
||||
<p>No remote named <code>${escapeHtml(remote)}</code>.</p>
|
||||
<p><a href="#/remotes">← Back to remotes</a></p>
|
||||
</div>`;
|
||||
return;
|
||||
}
|
||||
|
||||
const providers = await ensureProviders();
|
||||
const info = providers.find((p) => p.Name === typeName);
|
||||
if (!info) {
|
||||
toast(`Backend ${typeName} not found in registry`, "error");
|
||||
return;
|
||||
}
|
||||
|
||||
let currentValues = {};
|
||||
try {
|
||||
currentValues = await post("config/get", { name: remote });
|
||||
} catch (e) {
|
||||
toast(`Couldn't read config: ${e.message}`, "error");
|
||||
}
|
||||
|
||||
return renderForm({
|
||||
provider: info,
|
||||
mode: "edit",
|
||||
remoteName: remote,
|
||||
currentValues,
|
||||
});
|
||||
}
|
||||
|
||||
// --- Provider picker ---
|
||||
|
||||
async function renderProviderPicker() {
|
||||
const app = document.getElementById("app");
|
||||
app.innerHTML = `
|
||||
<div class="section-head">
|
||||
<div>
|
||||
<h2>New remote</h2>
|
||||
<p class="subtitle">Pick a storage backend to configure.</p>
|
||||
</div>
|
||||
<a class="btn btn-secondary btn-sm" href="#/remotes">Cancel</a>
|
||||
</div>
|
||||
<div class="provider-search">
|
||||
<input id="provider-filter" class="input" type="search" placeholder="Filter backends (e.g. s3, sftp, local)…" autocomplete="off">
|
||||
</div>
|
||||
<div id="provider-grid" class="connector-grid">
|
||||
<p class="empty" style="grid-column:1/-1">Loading backends…</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const grid = document.getElementById("provider-grid");
|
||||
const filter = document.getElementById("provider-filter");
|
||||
|
||||
let providers;
|
||||
try {
|
||||
providers = await ensureProviders();
|
||||
} catch (e) {
|
||||
grid.innerHTML = `<div class="empty" style="grid-column:1/-1"><h3>Couldn’t load backends</h3><p>${escapeHtml(e.message)}</p></div>`;
|
||||
return;
|
||||
}
|
||||
|
||||
// Skip hidden + alias/all wrapper backends
|
||||
const visible = providers.filter(
|
||||
(p) => !p.Hide && p.Name !== "all" && p.Name !== "alias",
|
||||
);
|
||||
|
||||
function paint(list) {
|
||||
if (list.length === 0) {
|
||||
grid.innerHTML = `<p class="empty" style="grid-column:1/-1">No backends match.</p>`;
|
||||
return;
|
||||
}
|
||||
grid.innerHTML = list
|
||||
.map(
|
||||
(p) => `
|
||||
<a class="connector-tile" href="#/configure/new/${encodeURIComponent(p.Name)}">
|
||||
<span class="tile-name">${escapeHtml(p.Name)}</span>
|
||||
<span class="tile-type">${escapeHtml(p.Description || "")}</span>
|
||||
</a>`,
|
||||
)
|
||||
.join("");
|
||||
}
|
||||
|
||||
paint(visible);
|
||||
|
||||
filter.addEventListener("input", () => {
|
||||
const q = filter.value.trim().toLowerCase();
|
||||
if (!q) return paint(visible);
|
||||
paint(
|
||||
visible.filter((p) =>
|
||||
(p.Name + " " + (p.Description || "")).toLowerCase().includes(q),
|
||||
),
|
||||
);
|
||||
});
|
||||
filter.focus();
|
||||
}
|
||||
|
||||
// --- Dynamic form ---
|
||||
|
||||
async function renderForm({ provider, mode, remoteName = "", currentValues = {} }) {
|
||||
const app = document.getElementById("app");
|
||||
|
||||
const isEdit = mode === "edit";
|
||||
const requiresOAuth = provider.Options.some(
|
||||
(o) => o.Name === "token" && (o.IsPassword || o.Sensitive),
|
||||
);
|
||||
|
||||
// Partition options into required, optional-basic, optional-advanced.
|
||||
const required = provider.Options.filter((o) => o.Required && !o.Hide);
|
||||
const basic = provider.Options.filter((o) => !o.Required && !o.Advanced && !o.Hide);
|
||||
const advanced = provider.Options.filter((o) => o.Advanced && !o.Hide);
|
||||
|
||||
app.innerHTML = `
|
||||
<div class="section-head">
|
||||
<div>
|
||||
<h2>${isEdit ? "Edit" : "New"} ${escapeHtml(provider.Name)} remote</h2>
|
||||
<p class="subtitle">${escapeHtml(provider.Description || "")}</p>
|
||||
</div>
|
||||
<a class="btn btn-secondary btn-sm" href="#/remotes">Cancel</a>
|
||||
</div>
|
||||
|
||||
<form id="remote-form" class="card-outline" style="display:flex;flex-direction:column;gap:16px;max-width:760px">
|
||||
${requiresOAuth ? oauthBanner(provider.Name) : ""}
|
||||
|
||||
<div class="form-grid">
|
||||
<div class="field field-full">
|
||||
<label>Remote name <span class="field-required">*</span></label>
|
||||
<input
|
||||
class="input"
|
||||
name="_remote_name"
|
||||
type="text"
|
||||
required
|
||||
${isEdit ? `value="${escapeHtml(remoteName)}" readonly` : 'placeholder="my-remote"'}
|
||||
autocomplete="off"
|
||||
>
|
||||
</div>
|
||||
|
||||
${required.length > 0 ? `<div class="form-section-title">Required</div>` : ""}
|
||||
${required.map((opt) => fieldHtml(opt, currentValues, isEdit)).join("")}
|
||||
|
||||
${basic.length > 0 ? `<div class="form-section-title">Options</div>` : ""}
|
||||
${basic.map((opt) => fieldHtml(opt, currentValues, isEdit)).join("")}
|
||||
|
||||
${advanced.length > 0 ? `
|
||||
<div class="advanced-toggle-wrap">
|
||||
<button type="button" class="btn btn-secondary btn-sm" id="advanced-toggle">
|
||||
Show advanced options (${advanced.length})
|
||||
</button>
|
||||
</div>
|
||||
<div id="advanced-section" class="advanced-section hidden">
|
||||
<div class="form-section-title">Advanced</div>
|
||||
${advanced.map((opt) => fieldHtml(opt, currentValues, isEdit)).join("")}
|
||||
</div>
|
||||
` : ""}
|
||||
</div>
|
||||
|
||||
<div class="toolbar">
|
||||
<button type="submit" class="btn btn-primary" ${requiresOAuth ? "disabled" : ""}>
|
||||
${isEdit ? "Save changes" : "Create remote"}
|
||||
</button>
|
||||
<a class="btn btn-secondary" href="#/remotes">Cancel</a>
|
||||
</div>
|
||||
|
||||
${isEdit ? `
|
||||
<div class="danger-zone">
|
||||
<h4>Delete this remote</h4>
|
||||
<p>Permanently remove <code>${escapeHtml(remoteName)}</code> from rclone.conf.</p>
|
||||
<button type="button" class="btn btn-danger" id="delete-btn">Delete remote</button>
|
||||
</div>
|
||||
` : ""}
|
||||
</form>
|
||||
`;
|
||||
|
||||
const form = document.getElementById("remote-form");
|
||||
|
||||
// Wire up "Custom…" reveal on <select> fields that have it.
|
||||
wireCustomSelects(form);
|
||||
|
||||
// Advanced toggle
|
||||
const advToggle = document.getElementById("advanced-toggle");
|
||||
const advSection = document.getElementById("advanced-section");
|
||||
if (advToggle && advSection) {
|
||||
advToggle.addEventListener("click", () => {
|
||||
const hidden = advSection.classList.toggle("hidden");
|
||||
advToggle.textContent = hidden
|
||||
? `Show advanced options (${advanced.length})`
|
||||
: `Hide advanced options (${advanced.length})`;
|
||||
});
|
||||
}
|
||||
|
||||
// Delete button
|
||||
const deleteBtn = document.getElementById("delete-btn");
|
||||
if (deleteBtn) {
|
||||
deleteBtn.addEventListener("click", async () => {
|
||||
if (!confirm(`Delete remote ${remoteName}? This cannot be undone.`)) return;
|
||||
try {
|
||||
await post("config/delete", { name: remoteName });
|
||||
toast(`Deleted ${remoteName}`, "success");
|
||||
location.hash = "#/remotes";
|
||||
} catch (e) {
|
||||
toast(`Delete failed: ${e.message}`, "error");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Submit
|
||||
form.addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
if (requiresOAuth) return;
|
||||
|
||||
const name = form.elements._remote_name.value.trim();
|
||||
if (!name) return;
|
||||
|
||||
const parameters = collectParameters(form, provider.Options, isEdit);
|
||||
|
||||
try {
|
||||
const body = {
|
||||
name,
|
||||
parameters,
|
||||
opt: { nonInteractive: true },
|
||||
};
|
||||
if (!isEdit) body.type = provider.Name;
|
||||
|
||||
const endpoint = isEdit ? "config/update" : "config/create";
|
||||
await post(endpoint, body);
|
||||
toast(`${isEdit ? "Updated" : "Created"} ${name}`, "success");
|
||||
location.hash = "#/remotes";
|
||||
} catch (err) {
|
||||
toast(`Save failed: ${err.message}`, "error");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// --- Helpers ---
|
||||
|
||||
function oauthBanner(providerName) {
|
||||
return `
|
||||
<div class="banner banner-warning">
|
||||
<div>
|
||||
<strong>${escapeHtml(providerName)}</strong> requires OAuth authorization,
|
||||
which this web GUI can’t complete inside a container. Please configure it
|
||||
from a terminal first:
|
||||
<code>rclone config</code>
|
||||
Once the remote exists, you can edit its non-secret options here.
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function fieldHtml(opt, currentValues, isEdit) {
|
||||
const isFull = opt.Type === "bool";
|
||||
const classes = ["field"];
|
||||
if (isFull) classes.push("field-bool");
|
||||
if (opt.Examples && opt.Examples.length > 0 && opt.Type !== "bool") {
|
||||
// Examples go full-width to fit the dropdown + custom override
|
||||
classes.push("field-full");
|
||||
} else if (opt.Help && opt.Help.length > 60) {
|
||||
classes.push("field-full");
|
||||
}
|
||||
const labelHtml = `${escapeHtml(opt.Name)}${opt.Required ? '<span class="field-required">*</span>' : ""}`;
|
||||
const helpHtml = opt.Help ? `<span class="field-help">${escapeHtml(opt.Help)}</span>` : "";
|
||||
const inputHtml = inputHtmlFor(opt, currentValues[opt.Name], isEdit);
|
||||
|
||||
return `
|
||||
<div class="${classes.join(" ")}">
|
||||
<label>${labelHtml}</label>
|
||||
${inputHtml}
|
||||
${helpHtml}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function inputHtmlFor(opt, value, isEdit) {
|
||||
// In edit mode, never pre-fill password fields — server returns them
|
||||
// already obscured and resubmitting would double-obscure. Show empty
|
||||
// with a "(unchanged)" placeholder.
|
||||
if (opt.IsPassword && isEdit) {
|
||||
return `<input class="input" name="opt_${escapeHtml(opt.Name)}" type="password" autocomplete="off" placeholder="(unchanged)">`;
|
||||
}
|
||||
|
||||
const name = `opt_${escapeHtml(opt.Name)}`;
|
||||
const currentValue = value != null ? String(value) : "";
|
||||
|
||||
if (opt.Type === "bool") {
|
||||
const checked = value === true || value === "true" ? "checked" : "";
|
||||
return `<input type="checkbox" name="${name}" ${checked}>`;
|
||||
}
|
||||
|
||||
if (opt.Type === "int" || opt.Type === "int64" || opt.Type === "Duration") {
|
||||
return `<input class="input" name="${name}" type="number" value="${escapeAttr(currentValue)}" autocomplete="off">`;
|
||||
}
|
||||
|
||||
if (opt.IsPassword) {
|
||||
return `<input class="input" name="${name}" type="password" autocomplete="off" placeholder="secret">`;
|
||||
}
|
||||
|
||||
// Examples → select with custom override
|
||||
if (opt.Examples && opt.Examples.length > 0) {
|
||||
const opts = ['<option value="">— pick —</option>']
|
||||
.concat(
|
||||
opt.Examples.map(
|
||||
(ex) =>
|
||||
`<option value="${escapeAttr(ex.Value)}"${ex.Value === currentValue ? " selected" : ""}>${escapeHtml(ex.Help || ex.Value)}${ex.Provider ? ` (${escapeHtml(ex.Provider)})` : ""}</option>`,
|
||||
),
|
||||
)
|
||||
.join("");
|
||||
return `
|
||||
<select class="select" name="${name}" data-has-custom="1">
|
||||
${opts}
|
||||
<option value="__custom__"${currentValue && !opt.Examples.some((e) => e.Value === currentValue) ? " selected" : ""}>Custom…</option>
|
||||
</select>
|
||||
<input class="input" name="${name}__custom" type="text" value="${escapeAttr(currentValue)}" style="margin-top:8px;display:none" placeholder="custom value" autocomplete="off">
|
||||
`;
|
||||
}
|
||||
|
||||
return `<input class="input" name="${name}" type="text" value="${escapeAttr(currentValue)}" autocomplete="off">`;
|
||||
}
|
||||
|
||||
function collectParameters(form, options, isEdit) {
|
||||
const params = {};
|
||||
|
||||
for (const opt of options) {
|
||||
if (opt.Hide) continue;
|
||||
const baseName = `opt_${opt.Name}`;
|
||||
const el = form.elements[baseName];
|
||||
if (!el) continue;
|
||||
|
||||
let val;
|
||||
if (opt.Type === "bool") {
|
||||
val = el.checked ? "true" : "false";
|
||||
} else if (el.dataset && el.dataset.hasCustom === "1" || el.getAttribute("data-has-custom") === "1") {
|
||||
// It's a <select> with a sibling text override
|
||||
if (el.value === "__custom__") {
|
||||
const customEl = form.elements[`${baseName}__custom`];
|
||||
val = customEl ? customEl.value.trim() : "";
|
||||
} else {
|
||||
val = el.value;
|
||||
}
|
||||
} else {
|
||||
val = el.value.trim();
|
||||
}
|
||||
|
||||
// In edit mode, skip empty password fields (leave unchanged).
|
||||
if (isEdit && opt.IsPassword && val === "") continue;
|
||||
// Skip empty non-required fields.
|
||||
if (val === "" && !opt.Required) continue;
|
||||
|
||||
params[opt.Name] = val;
|
||||
}
|
||||
|
||||
return params;
|
||||
}
|
||||
|
||||
// Wire up the "Custom…" reveal on selects with data-has-custom.
|
||||
// Called from app.js after every form render via a MutationObserver-
|
||||
// free approach: we attach the listener at form-render time inside
|
||||
// renderForm. Use event delegation for simplicity.
|
||||
export function wireCustomSelects(container) {
|
||||
container.querySelectorAll('select[data-has-custom="1"]').forEach((sel) => {
|
||||
const customName = sel.name + "__custom";
|
||||
const customEl = container.elements
|
||||
? container.elements[customName]
|
||||
: container.querySelector(`[name="${CSS.escape(customName)}"]`);
|
||||
if (!customEl) return;
|
||||
const sync = () => {
|
||||
customEl.style.display = sel.value === "__custom__" ? "block" : "none";
|
||||
};
|
||||
sync();
|
||||
sel.addEventListener("change", sync);
|
||||
});
|
||||
}
|
||||
|
||||
async function ensureProviders() {
|
||||
const cached = getState().providers;
|
||||
if (cached) return cached;
|
||||
const res = await post("config/providers");
|
||||
const providers = (res && res.providers) || [];
|
||||
setState({ providers });
|
||||
return providers;
|
||||
}
|
||||
|
||||
function escapeHtml(s) {
|
||||
return String(s)
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
|
||||
function escapeAttr(s) {
|
||||
return escapeHtml(s);
|
||||
}
|
||||
@@ -0,0 +1,304 @@
|
||||
// views/jobs.js — submit sync/copy/move jobs and poll their progress.
|
||||
// Job src/dst metadata is persisted to localStorage (via state.rememberJob)
|
||||
// so the table can show what each job is doing even after a page reload.
|
||||
|
||||
import { post, postAsync } from "../rc.js";
|
||||
import {
|
||||
toast,
|
||||
rememberJob,
|
||||
getJobMeta,
|
||||
formatBytes,
|
||||
formatSpeed,
|
||||
formatDuration,
|
||||
} from "../state.js";
|
||||
|
||||
let pollTimer = null;
|
||||
|
||||
export async function renderJobs() {
|
||||
const app = document.getElementById("app");
|
||||
app.innerHTML = `
|
||||
<div class="section-head">
|
||||
<div>
|
||||
<h2>Jobs</h2>
|
||||
<p class="subtitle">Running and recently completed transfers.</p>
|
||||
</div>
|
||||
<a class="btn btn-primary btn-sm" href="#/jobs/new">New Job</a>
|
||||
</div>
|
||||
<div id="jobs-card" class="card-outline">
|
||||
<p class="empty">Loading jobs…</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
await refreshJobs();
|
||||
startPolling();
|
||||
}
|
||||
|
||||
export async function renderNewJob() {
|
||||
const app = document.getElementById("app");
|
||||
|
||||
// Pull remotes for the dropdowns
|
||||
let remotes = [];
|
||||
try {
|
||||
const res = await post("config/listremotes");
|
||||
remotes = (res && res.remotes) || [];
|
||||
} catch (e) {
|
||||
toast(`Couldn’t load remotes: ${e.message}`, "error");
|
||||
}
|
||||
|
||||
const remoteOpts = remotes
|
||||
.map((r) => `<option value="${escapeHtml(r)}:">${escapeHtml(r)}</option>`)
|
||||
.join("");
|
||||
|
||||
app.innerHTML = `
|
||||
<div class="section-head">
|
||||
<div>
|
||||
<h2>New Job</h2>
|
||||
<p class="subtitle">Copy, sync, or move between remotes.</p>
|
||||
</div>
|
||||
<a class="btn btn-secondary btn-sm" href="#/jobs">Cancel</a>
|
||||
</div>
|
||||
<form id="new-job-form" class="card-outline" style="display:grid;gap:16px;max-width:640px">
|
||||
<div class="field">
|
||||
<label>Action</label>
|
||||
<select name="action" class="select">
|
||||
<option value="copy">copy (mirror src → dst, keep both)</option>
|
||||
<option value="sync">sync (mirror src → dst, delete extras on dst)</option>
|
||||
<option value="move">move (mirror src → dst, delete src after)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-grid">
|
||||
<div class="field">
|
||||
<label>Source remote</label>
|
||||
<select name="srcRemote" class="select">
|
||||
${remoteOpts || '<option value="">(no remotes)</option>'}
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Source path (optional)</label>
|
||||
<input class="input" name="srcPath" placeholder="folder/subfolder" autocomplete="off">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Destination remote</label>
|
||||
<select name="dstRemote" class="select">
|
||||
${remoteOpts || '<option value="">(no remotes)</option>'}
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Destination path (optional)</label>
|
||||
<input class="input" name="dstPath" placeholder="folder/subfolder" autocomplete="off">
|
||||
</div>
|
||||
</div>
|
||||
<div class="toolbar">
|
||||
<button type="submit" class="btn btn-primary">Start Job</button>
|
||||
</div>
|
||||
</form>
|
||||
`;
|
||||
|
||||
// Prefill first remote in both selectors for convenience
|
||||
if (remotes.length > 0) {
|
||||
app.querySelector('select[name="srcRemote"]').value = `${remotes[0]}:`;
|
||||
app.querySelector('select[name="dstRemote"]').value = `${remotes[0]}:`;
|
||||
}
|
||||
|
||||
const form = document.getElementById("new-job-form");
|
||||
form.addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
const action = form.elements.action.value;
|
||||
const srcRemote = form.elements.srcRemote.value;
|
||||
const dstRemote = form.elements.dstRemote.value;
|
||||
const srcPath = form.elements.srcPath.value.trim().replace(/^\/+|\/+$/g, "");
|
||||
const dstPath = form.elements.dstPath.value.trim().replace(/^\/+|\/+$/g, "");
|
||||
if (!srcRemote || !dstRemote) {
|
||||
toast("Pick source and destination remotes", "error");
|
||||
return;
|
||||
}
|
||||
const src = srcPath ? `${srcRemote}${srcPath}` : srcRemote;
|
||||
const dst = dstPath ? `${dstRemote}${dstPath}` : dstRemote;
|
||||
try {
|
||||
const body = { srcFs: src, dstFs: dst };
|
||||
if (action === "move") body.deleteEmptySrcDirs = true;
|
||||
const res = await postAsync(`sync/${action}`, body);
|
||||
const jobid = res && res.jobid;
|
||||
if (jobid != null) {
|
||||
rememberJob(jobid, { action, src, dst });
|
||||
}
|
||||
toast(`Started ${action} job #${jobid}`, "success");
|
||||
location.hash = "#/jobs";
|
||||
} catch (e) {
|
||||
toast(`Job start failed: ${e.message}`, "error");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function refreshJobs() {
|
||||
const card = document.getElementById("jobs-card");
|
||||
if (!card) return; // user navigated away
|
||||
|
||||
let jobIds = [];
|
||||
try {
|
||||
const list = await post("job/list");
|
||||
const running = (list && list.jobids) || [];
|
||||
const finished = (list && list.finishedIds) || [];
|
||||
// Show both running and recently-finished. Sort happens in render.
|
||||
jobIds = [...new Set([...running, ...finished])];
|
||||
} catch (e) {
|
||||
card.innerHTML = `<div class="empty"><h3>Couldn’t load jobs</h3><p>${escapeHtml(e.message)}</p></div>`;
|
||||
return;
|
||||
}
|
||||
|
||||
if (jobIds.length === 0) {
|
||||
card.innerHTML = `
|
||||
<div class="empty">
|
||||
<h3>No jobs yet</h3>
|
||||
<p>Use <a href="#/jobs/new">New Job</a> to start a copy, sync, or move.</p>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
// Fetch each job's status in parallel
|
||||
const statuses = await Promise.all(
|
||||
jobIds.map((id) =>
|
||||
post("job/status", { jobid: id }).catch((e) => ({
|
||||
jobid: id,
|
||||
error: e.message,
|
||||
finished: true,
|
||||
})),
|
||||
),
|
||||
);
|
||||
|
||||
card.innerHTML = renderJobTable(statuses);
|
||||
card.querySelectorAll("[data-stop]").forEach((btn) => {
|
||||
btn.addEventListener("click", () => onStop(parseInt(btn.dataset.stop, 10)));
|
||||
});
|
||||
}
|
||||
|
||||
function renderJobTable(statuses) {
|
||||
// Newest jobid first
|
||||
statuses.sort((a, b) => (b.jobid ?? 0) - (a.jobid ?? 0));
|
||||
|
||||
const rows = statuses.map(renderJobRow).join("");
|
||||
|
||||
return `
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Job</th>
|
||||
<th>Status</th>
|
||||
<th class="col-num">Progress</th>
|
||||
<th class="col-num">Speed</th>
|
||||
<th class="col-num">ETA</th>
|
||||
<th class="col-num">Files</th>
|
||||
<th class="col-num">Errors</th>
|
||||
<th class="col-num">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${rows}
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderJobRow(s) {
|
||||
const p = s.progress || {};
|
||||
const id = s.jobid;
|
||||
const finished = s.finished;
|
||||
const success = s.success;
|
||||
const errored = !!s.error;
|
||||
|
||||
let badge;
|
||||
if (!finished) {
|
||||
badge = `<span class="badge">running</span>`;
|
||||
} else if (errored || (!success && errored)) {
|
||||
badge = `<span class="badge badge-error">failed</span>`;
|
||||
} else if (success) {
|
||||
badge = `<span class="badge badge-success">done</span>`;
|
||||
} else {
|
||||
badge = `<span class="badge badge-warning">finished</span>`;
|
||||
}
|
||||
|
||||
const meta = getJobMeta(id);
|
||||
const jobCell = meta
|
||||
? `
|
||||
<div class="job-cell">
|
||||
<span class="job-action">${escapeHtml(meta.action)}</span>
|
||||
<span class="job-paths">
|
||||
<code>${escapeHtml(meta.src)}</code>
|
||||
<span class="arrow">→</span>
|
||||
<code>${escapeHtml(meta.dst)}</code>
|
||||
</span>
|
||||
</div>`
|
||||
: `<span class="col-mono" style="color:var(--color-muted-soft)">— submitted via CLI —</span>`;
|
||||
|
||||
const pct = p && p.totalBytes > 0 ? Math.min(100, (p.bytes / p.totalBytes) * 100) : 0;
|
||||
const progress = `
|
||||
<div style="display:flex;flex-direction:column;gap:4px;min-width:120px">
|
||||
<div class="progress"><span style="width:${pct.toFixed(1)}%"></span></div>
|
||||
<span class="col-mono" style="font-size:11px;color:var(--color-muted)">
|
||||
${formatBytes(p.bytes)} / ${formatBytes(p.totalBytes)}
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const stopBtn = !finished
|
||||
? `<button class="btn btn-danger btn-sm" data-stop="${id}">Stop</button>`
|
||||
: "";
|
||||
|
||||
return `
|
||||
<tr>
|
||||
<td class="col-mono">${id}</td>
|
||||
<td>${jobCell}</td>
|
||||
<td>${badge}</td>
|
||||
<td class="col-num">${progress}</td>
|
||||
<td class="col-num col-mono">${finished ? "—" : escapeHtml(formatSpeed(p.speed || 0))}</td>
|
||||
<td class="col-num col-mono">${finished ? "—" : escapeHtml(formatDuration(p.eta || 0))}</td>
|
||||
<td class="col-num col-mono">${p.transfers ?? 0} / ${p.totalTransfers ?? 0}</td>
|
||||
<td class="col-num col-mono">${(p.errors && p.errors.length) || 0}</td>
|
||||
<td class="col-num">${stopBtn}</td>
|
||||
</tr>
|
||||
`;
|
||||
}
|
||||
|
||||
async function onStop(jobid) {
|
||||
if (!confirm(`Stop job #${jobid}?`)) return;
|
||||
try {
|
||||
await post("job/stop", { jobid });
|
||||
toast(`Stopped job #${jobid}`, "success");
|
||||
await refreshJobs();
|
||||
} catch (e) {
|
||||
toast(`Stop failed: ${e.message}`, "error");
|
||||
}
|
||||
}
|
||||
|
||||
function startPolling() {
|
||||
stopPolling();
|
||||
pollTimer = setInterval(async () => {
|
||||
if (!document.getElementById("jobs-card")) {
|
||||
stopPolling();
|
||||
return;
|
||||
}
|
||||
await refreshJobs();
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
function stopPolling() {
|
||||
if (pollTimer) {
|
||||
clearInterval(pollTimer);
|
||||
pollTimer = null;
|
||||
}
|
||||
}
|
||||
|
||||
export function stopJobPolling() {
|
||||
stopPolling();
|
||||
}
|
||||
|
||||
function escapeHtml(s) {
|
||||
return String(s)
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
// views/remotes.js — connector-tile grid of configured remotes with CRUD.
|
||||
|
||||
import { post } from "../rc.js";
|
||||
import { getState, setState, toast } from "../state.js";
|
||||
|
||||
export async function renderRemotes() {
|
||||
const app = document.getElementById("app");
|
||||
if (!app) return;
|
||||
|
||||
app.innerHTML = `
|
||||
<div class="section-head">
|
||||
<div>
|
||||
<h2>Remotes</h2>
|
||||
<p class="subtitle">Configured cloud storage providers. Click a tile to browse, hover for edit/delete.</p>
|
||||
</div>
|
||||
<a class="btn btn-primary btn-sm" href="#/configure/new">New remote</a>
|
||||
</div>
|
||||
<div id="remote-grid" class="connector-grid">
|
||||
<p class="empty" style="grid-column:1/-1">Loading remotes…</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const grid = document.getElementById("remote-grid");
|
||||
|
||||
try {
|
||||
const [listRes, dumpRes] = await Promise.all([
|
||||
post("config/listremotes"),
|
||||
post("config/dump"),
|
||||
]);
|
||||
const names = (listRes && listRes.remotes) || [];
|
||||
const dump = dumpRes || {};
|
||||
const remotes = names.map((name) => ({
|
||||
name,
|
||||
type: (dump[name] && dump[name].type) || "unknown",
|
||||
}));
|
||||
|
||||
setState({ remotes });
|
||||
|
||||
if (remotes.length === 0) {
|
||||
grid.innerHTML = `
|
||||
<div class="empty" style="grid-column:1/-1">
|
||||
<h3>No remotes configured</h3>
|
||||
<p>Click <strong>New remote</strong> above to add one from this GUI.</p>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
grid.innerHTML = remotes
|
||||
.map(
|
||||
(r) => `
|
||||
<a class="connector-tile tile-with-actions" href="#/browse/${encodeURIComponent(r.name)}">
|
||||
<span class="tile-name">${escapeHtml(r.name)}</span>
|
||||
<span class="badge">${escapeHtml(r.type)}</span>
|
||||
<div class="tile-actions">
|
||||
<button type="button" title="Edit" data-edit="${escapeHtml(r.name)}">✎</button>
|
||||
<button type="button" title="Delete" class="danger" data-delete="${escapeHtml(r.name)}">🗑</button>
|
||||
</div>
|
||||
</a>
|
||||
`,
|
||||
)
|
||||
.join("");
|
||||
|
||||
// Wire action buttons
|
||||
grid.querySelectorAll("[data-edit]").forEach((btn) => {
|
||||
btn.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
location.hash = `#/configure/edit/${encodeURIComponent(btn.dataset.edit)}`;
|
||||
});
|
||||
});
|
||||
grid.querySelectorAll("[data-delete]").forEach((btn) => {
|
||||
btn.addEventListener("click", async (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const name = btn.dataset.delete;
|
||||
if (!confirm(`Delete remote ${name}? This cannot be undone.`)) return;
|
||||
try {
|
||||
await post("config/delete", { name });
|
||||
toast(`Deleted ${name}`, "success");
|
||||
await renderRemotes();
|
||||
} catch (err) {
|
||||
toast(`Delete failed: ${err.message}`, "error");
|
||||
}
|
||||
});
|
||||
});
|
||||
} catch (e) {
|
||||
grid.innerHTML = `
|
||||
<div class="empty" style="grid-column:1/-1">
|
||||
<h3>Couldn’t reach rclone</h3>
|
||||
<p>${escapeHtml(e.message)}</p>
|
||||
</div>
|
||||
`;
|
||||
toast(`Failed to load remotes: ${e.message}`, "error");
|
||||
}
|
||||
}
|
||||
|
||||
function escapeHtml(s) {
|
||||
return String(s)
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
/* Base reset, font loading, and document defaults. */
|
||||
|
||||
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap");
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--color-canvas);
|
||||
color: var(--color-body);
|
||||
font: var(--typo-body-md);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1 0 auto;
|
||||
width: 100%;
|
||||
max-width: var(--content-max);
|
||||
margin: 0 auto;
|
||||
padding: var(--space-lg) var(--space-xl);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
margin: 0;
|
||||
color: var(--color-ink);
|
||||
font-family: var(--font-display);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font: var(--typo-display-lg);
|
||||
letter-spacing: var(--typo-display-lg-tracking);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font: var(--typo-display-md);
|
||||
letter-spacing: var(--typo-display-md-tracking);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font: var(--typo-display-sm);
|
||||
letter-spacing: var(--typo-display-sm-tracking);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
code,
|
||||
pre {
|
||||
font: var(--typo-code);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
@@ -0,0 +1,758 @@
|
||||
/* Component library — all UI primitives map to DESIGN.md tokens. */
|
||||
|
||||
/* ---------- Top Navigation ---------- */
|
||||
.top-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-lg);
|
||||
height: var(--nav-height);
|
||||
padding: 0 var(--space-xl);
|
||||
background-color: var(--color-canvas);
|
||||
border-bottom: 1px solid var(--color-hairline);
|
||||
}
|
||||
|
||||
.top-nav .wordmark {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
font: var(--typo-title-md);
|
||||
font-weight: 500;
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
.top-nav .wordmark .spike {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
.top-nav nav {
|
||||
display: flex;
|
||||
gap: var(--space-md);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.top-nav nav a {
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
color: var(--color-muted);
|
||||
font: var(--typo-nav-link);
|
||||
border-radius: var(--radius-md);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.top-nav nav a:hover {
|
||||
color: var(--color-ink);
|
||||
background-color: var(--color-surface-soft);
|
||||
}
|
||||
|
||||
.top-nav nav a.active {
|
||||
color: var(--color-ink);
|
||||
background-color: var(--color-surface-card);
|
||||
}
|
||||
|
||||
/* ---------- Buttons ---------- */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-xs);
|
||||
height: 40px;
|
||||
padding: 12px 20px;
|
||||
font: var(--typo-button);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: background-color 120ms ease;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-on-primary);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: var(--color-primary-active);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
background-color: var(--color-primary-disabled);
|
||||
color: var(--color-muted);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: var(--color-canvas);
|
||||
color: var(--color-ink);
|
||||
border-color: var(--color-hairline);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: var(--color-surface-soft);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background-color: transparent;
|
||||
color: var(--color-error);
|
||||
border-color: var(--color-hairline);
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background-color: var(--color-error);
|
||||
color: var(--color-on-primary);
|
||||
border-color: var(--color-error);
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
padding: 0;
|
||||
border-radius: var(--radius-full);
|
||||
background-color: var(--color-canvas);
|
||||
color: var(--color-ink);
|
||||
border: 1px solid var(--color-hairline);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.btn-icon:hover {
|
||||
background-color: var(--color-surface-soft);
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
height: 32px;
|
||||
padding: 8px 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* ---------- Cards ---------- */
|
||||
.card {
|
||||
background-color: var(--color-surface-card);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-xl);
|
||||
}
|
||||
|
||||
.card-outline {
|
||||
background-color: var(--color-canvas);
|
||||
border: 1px solid var(--color-hairline);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-xl);
|
||||
}
|
||||
|
||||
.card-dark {
|
||||
background-color: var(--color-surface-dark);
|
||||
color: var(--color-on-dark);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-xl);
|
||||
}
|
||||
|
||||
/* ---------- Connector tiles (remote cards) ---------- */
|
||||
.connector-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.connector-tile {
|
||||
background-color: var(--color-canvas);
|
||||
border: 1px solid var(--color-hairline);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-lg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.connector-tile:hover {
|
||||
background-color: var(--color-surface-soft);
|
||||
border-color: var(--color-surface-cream-strong);
|
||||
}
|
||||
|
||||
.connector-tile .tile-name {
|
||||
font: var(--typo-title-sm);
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
.connector-tile .tile-type {
|
||||
font: var(--typo-caption);
|
||||
color: var(--color-muted);
|
||||
}
|
||||
|
||||
/* Tile with action overlay (edit/delete buttons in top-right corner) */
|
||||
.connector-tile.tile-with-actions {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.connector-tile.tile-with-actions .tile-actions {
|
||||
position: absolute;
|
||||
top: var(--space-xs);
|
||||
right: var(--space-xs);
|
||||
display: flex;
|
||||
gap: var(--space-xxs);
|
||||
opacity: 0;
|
||||
transition: opacity 120ms ease;
|
||||
}
|
||||
|
||||
.connector-tile.tile-with-actions:hover .tile-actions {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.connector-tile.tile-with-actions .tile-actions button {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 0;
|
||||
border: 1px solid var(--color-hairline);
|
||||
border-radius: var(--radius-sm);
|
||||
background-color: var(--color-canvas);
|
||||
color: var(--color-muted);
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.connector-tile.tile-with-actions .tile-actions button:hover {
|
||||
background-color: var(--color-surface-card);
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
.connector-tile.tile-with-actions .tile-actions button.danger:hover {
|
||||
background-color: var(--color-error);
|
||||
color: var(--color-on-primary);
|
||||
border-color: var(--color-error);
|
||||
}
|
||||
|
||||
/* ---------- Inputs ---------- */
|
||||
.input,
|
||||
.select {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 10px 14px;
|
||||
font: var(--typo-body-md);
|
||||
background-color: var(--color-canvas);
|
||||
color: var(--color-ink);
|
||||
border: 1px solid var(--color-hairline);
|
||||
border-radius: var(--radius-md);
|
||||
outline: none;
|
||||
transition: border-color 120ms ease, box-shadow 120ms ease;
|
||||
}
|
||||
|
||||
.input:focus,
|
||||
.select:focus {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px var(--color-primary-15);
|
||||
}
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.field label {
|
||||
font: var(--typo-caption);
|
||||
color: var(--color-muted);
|
||||
}
|
||||
|
||||
/* ---------- Badges ---------- */
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4px 12px;
|
||||
font: var(--typo-caption);
|
||||
border-radius: var(--radius-pill);
|
||||
background-color: var(--color-surface-card);
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
.badge-coral {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-on-primary);
|
||||
font: var(--typo-caption-uppercase);
|
||||
letter-spacing: var(--typo-caption-uppercase-tracking);
|
||||
}
|
||||
|
||||
.badge-success {
|
||||
background-color: var(--color-success);
|
||||
color: var(--color-on-primary);
|
||||
}
|
||||
|
||||
.badge-warning {
|
||||
background-color: var(--color-warning);
|
||||
color: var(--color-on-primary);
|
||||
}
|
||||
|
||||
.badge-error {
|
||||
background-color: var(--color-error);
|
||||
color: var(--color-on-primary);
|
||||
}
|
||||
|
||||
/* ---------- Breadcrumbs ---------- */
|
||||
.breadcrumbs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xxs);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.breadcrumbs a,
|
||||
.breadcrumbs span {
|
||||
padding: var(--space-xs) calc(var(--space-sm) + 2px);
|
||||
font: var(--typo-nav-link);
|
||||
color: var(--color-muted);
|
||||
border-radius: var(--radius-md);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.breadcrumbs a:hover {
|
||||
color: var(--color-ink);
|
||||
background-color: var(--color-surface-soft);
|
||||
}
|
||||
|
||||
.breadcrumbs .current {
|
||||
color: var(--color-ink);
|
||||
background-color: var(--color-surface-card);
|
||||
}
|
||||
|
||||
.breadcrumbs .sep {
|
||||
padding: 0 var(--space-xxs);
|
||||
color: var(--color-muted-soft);
|
||||
}
|
||||
|
||||
/* ---------- Tables ---------- */
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
text-align: left;
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
font: var(--typo-body-sm);
|
||||
color: var(--color-body);
|
||||
}
|
||||
|
||||
.table thead th {
|
||||
font: var(--typo-caption);
|
||||
color: var(--color-muted);
|
||||
border-bottom: 1px solid var(--color-hairline);
|
||||
}
|
||||
|
||||
.table tbody tr {
|
||||
border-bottom: 1px solid var(--color-hairline-soft);
|
||||
}
|
||||
|
||||
.table tbody tr:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.table tbody tr:hover {
|
||||
background-color: var(--color-surface-soft);
|
||||
}
|
||||
|
||||
.table .col-name {
|
||||
font: var(--typo-body-md);
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
.table .col-name a {
|
||||
color: var(--color-ink);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.table .col-name a:hover {
|
||||
color: var(--color-primary);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.table .col-mono {
|
||||
font: var(--typo-code);
|
||||
color: var(--color-muted);
|
||||
}
|
||||
|
||||
.table .col-num {
|
||||
text-align: right;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.table .row-dir .col-name a {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* ---------- Progress bar ---------- */
|
||||
.progress {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background-color: var(--color-surface-card);
|
||||
border-radius: var(--radius-pill);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress > span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
background-color: var(--color-primary);
|
||||
transition: width 200ms ease;
|
||||
}
|
||||
|
||||
/* ---------- Toolbar ---------- */
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.toolbar .spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* ---------- Section header ---------- */
|
||||
.section-head {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-md);
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.section-head h2 {
|
||||
font: var(--typo-display-md);
|
||||
letter-spacing: var(--typo-display-md-tracking);
|
||||
}
|
||||
|
||||
.section-head .subtitle {
|
||||
color: var(--color-muted);
|
||||
font: var(--typo-body-sm);
|
||||
}
|
||||
|
||||
/* ---------- Empty state ---------- */
|
||||
.empty {
|
||||
padding: var(--space-section) var(--space-xl);
|
||||
text-align: center;
|
||||
color: var(--color-muted);
|
||||
}
|
||||
|
||||
.empty h3 {
|
||||
margin-bottom: var(--space-sm);
|
||||
font: var(--typo-display-sm);
|
||||
letter-spacing: var(--typo-display-sm-tracking);
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
/* ---------- Toast ---------- */
|
||||
.toast-stack {
|
||||
position: fixed;
|
||||
bottom: var(--space-lg);
|
||||
right: var(--space-lg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.toast {
|
||||
padding: var(--space-sm) var(--space-lg);
|
||||
background-color: var(--color-surface-dark);
|
||||
color: var(--color-on-dark);
|
||||
border-radius: var(--radius-lg);
|
||||
font: var(--typo-body-sm);
|
||||
max-width: 360px;
|
||||
box-shadow: var(--shadow-hover);
|
||||
}
|
||||
|
||||
.toast-error {
|
||||
background-color: var(--color-error);
|
||||
color: var(--color-on-primary);
|
||||
}
|
||||
|
||||
.toast-success {
|
||||
background-color: var(--color-success);
|
||||
color: var(--color-on-primary);
|
||||
}
|
||||
|
||||
/* ---------- Modal ---------- */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-color: rgba(20, 20, 19, 0.4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 200;
|
||||
padding: var(--space-lg);
|
||||
}
|
||||
|
||||
.modal {
|
||||
background-color: var(--color-surface-dark);
|
||||
color: var(--color-on-dark);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-lg);
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.modal h3 {
|
||||
font: var(--typo-title-lg);
|
||||
color: var(--color-on-dark);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal label {
|
||||
color: var(--color-on-dark-soft);
|
||||
font: var(--typo-caption);
|
||||
}
|
||||
|
||||
.modal .input,
|
||||
.modal .select {
|
||||
background-color: var(--color-surface-dark-elevated);
|
||||
color: var(--color-on-dark);
|
||||
border-color: var(--color-surface-dark-elevated);
|
||||
}
|
||||
|
||||
.modal .input:focus,
|
||||
.modal .select:focus {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.modal .btn-secondary {
|
||||
background-color: var(--color-surface-dark-elevated);
|
||||
color: var(--color-on-dark);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
/* ---------- Footer ---------- */
|
||||
.footer {
|
||||
background-color: var(--color-surface-dark);
|
||||
color: var(--color-on-dark-soft);
|
||||
padding: var(--space-xxl) var(--space-xl);
|
||||
margin-top: var(--space-section);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.footer-inner {
|
||||
max-width: var(--content-max);
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
gap: var(--space-xl);
|
||||
}
|
||||
|
||||
.footer h4 {
|
||||
color: var(--color-on-dark);
|
||||
font: var(--typo-title-sm);
|
||||
font-family: var(--font-body);
|
||||
font-weight: 500;
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
|
||||
.footer a {
|
||||
color: var(--color-on-dark-soft);
|
||||
font: var(--typo-body-sm);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footer a:hover {
|
||||
color: var(--color-on-dark);
|
||||
}
|
||||
|
||||
.footer .colophon {
|
||||
grid-column: 1 / -1;
|
||||
margin-top: var(--space-lg);
|
||||
padding-top: var(--space-lg);
|
||||
border-top: 1px solid var(--color-surface-dark-elevated);
|
||||
color: var(--color-on-dark-soft);
|
||||
font: var(--typo-caption);
|
||||
}
|
||||
|
||||
/* ---------- Configure: provider picker + dynamic form ---------- */
|
||||
.provider-search {
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.provider-search input {
|
||||
max-width: 360px;
|
||||
}
|
||||
|
||||
.banner {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-sm);
|
||||
padding: var(--space-md) var(--space-lg);
|
||||
border-radius: var(--radius-md);
|
||||
background-color: var(--color-surface-card);
|
||||
color: var(--color-body-strong);
|
||||
font: var(--typo-body-sm);
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.banner-warning {
|
||||
background-color: color-mix(in srgb, var(--color-warning) 18%, var(--color-canvas));
|
||||
border: 1px solid color-mix(in srgb, var(--color-warning) 35%, transparent);
|
||||
}
|
||||
|
||||
.banner code {
|
||||
display: block;
|
||||
margin-top: var(--space-xs);
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
background-color: var(--color-surface-dark);
|
||||
color: var(--color-on-dark);
|
||||
border-radius: var(--radius-sm);
|
||||
font: var(--typo-code);
|
||||
white-space: pre-wrap;
|
||||
user-select: all;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-md) var(--space-lg);
|
||||
}
|
||||
|
||||
.form-grid .field-full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.form-grid .field-bool {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.form-grid .field-bool input[type="checkbox"] {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
accent-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.field .field-help {
|
||||
font: var(--typo-body-sm);
|
||||
color: var(--color-muted);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.field .field-required {
|
||||
color: var(--color-error);
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.form-section-title {
|
||||
grid-column: 1 / -1;
|
||||
font: var(--typo-caption-uppercase);
|
||||
letter-spacing: var(--typo-caption-uppercase-tracking);
|
||||
color: var(--color-muted-soft);
|
||||
margin-top: var(--space-sm);
|
||||
padding-top: var(--space-sm);
|
||||
border-top: 1px solid var(--color-hairline-soft);
|
||||
}
|
||||
|
||||
.form-section-title:first-child {
|
||||
margin-top: 0;
|
||||
border-top: none;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.advanced-toggle-wrap {
|
||||
grid-column: 1 / -1;
|
||||
margin-top: var(--space-sm);
|
||||
}
|
||||
|
||||
.advanced-section {
|
||||
grid-column: 1 / -1;
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.advanced-section.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.danger-zone {
|
||||
border: 1px solid var(--color-error);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-lg);
|
||||
margin-top: var(--space-xl);
|
||||
background-color: color-mix(in srgb, var(--color-error) 5%, var(--color-canvas));
|
||||
}
|
||||
|
||||
.danger-zone h4 {
|
||||
font: var(--typo-title-sm);
|
||||
font-family: var(--font-body);
|
||||
color: var(--color-error);
|
||||
margin: 0 0 var(--space-xs);
|
||||
}
|
||||
|
||||
.danger-zone p {
|
||||
font: var(--typo-body-sm);
|
||||
color: var(--color-muted);
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
/* ---------- Job cell with action + src→dst ---------- */
|
||||
.job-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.job-cell .job-action {
|
||||
font: var(--typo-caption-uppercase);
|
||||
letter-spacing: var(--typo-caption-uppercase-tracking);
|
||||
color: var(--color-muted);
|
||||
}
|
||||
|
||||
.job-cell .job-paths {
|
||||
font: var(--typo-body-sm);
|
||||
color: var(--color-body);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.job-cell .job-paths .arrow {
|
||||
color: var(--color-muted-soft);
|
||||
margin: 0 var(--space-xxs);
|
||||
}
|
||||
|
||||
/* ---------- Responsive ---------- */
|
||||
@media (max-width: 1024px) {
|
||||
.connector-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
.footer-inner {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.form-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
main {
|
||||
padding: var(--space-md);
|
||||
}
|
||||
.connector-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.footer-inner {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.top-nav {
|
||||
padding: 0 var(--space-md);
|
||||
}
|
||||
.top-nav nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
/* DESIGN.md tokens — Anthropic/Claude design system
|
||||
Source of truth: every color/size/radius used in the app is defined here. */
|
||||
|
||||
:root {
|
||||
/* --- Brand & Accent --- */
|
||||
--color-primary: #cc785c;
|
||||
--color-primary-active: #a9583e;
|
||||
--color-primary-disabled: #e6dfd8;
|
||||
--color-primary-15: rgba(204, 120, 92, 0.15);
|
||||
|
||||
--color-accent-teal: #5db8a6;
|
||||
--color-accent-amber: #e8a55a;
|
||||
|
||||
/* --- Surfaces --- */
|
||||
--color-canvas: #faf9f5;
|
||||
--color-surface-soft: #f5f0e8;
|
||||
--color-surface-card: #efe9de;
|
||||
--color-surface-cream-strong: #e8e0d2;
|
||||
--color-surface-dark: #181715;
|
||||
--color-surface-dark-elevated: #252320;
|
||||
--color-surface-dark-soft: #1f1e1b;
|
||||
|
||||
--color-hairline: #e6dfd8;
|
||||
--color-hairline-soft: #ebe6df;
|
||||
|
||||
/* --- Text --- */
|
||||
--color-ink: #141413;
|
||||
--color-body-strong: #252523;
|
||||
--color-body: #3d3d3a;
|
||||
--color-muted: #6c6a64;
|
||||
--color-muted-soft: #8e8b82;
|
||||
|
||||
--color-on-primary: #ffffff;
|
||||
--color-on-dark: #faf9f5;
|
||||
--color-on-dark-soft: #a09d96;
|
||||
|
||||
/* --- Semantic --- */
|
||||
--color-success: #5db872;
|
||||
--color-warning: #d4a017;
|
||||
--color-error: #c64545;
|
||||
|
||||
/* --- Typography families --- */
|
||||
--font-display: "Cormorant Garamond", "Tiempos Headline", "EB Garamond", Garamond, "Times New Roman", serif;
|
||||
--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
--font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
|
||||
|
||||
/* --- Typography scale (matches DESIGN.md 1:1) --- */
|
||||
--typo-display-xl: 400 64px/1.05 var(--font-display);
|
||||
--typo-display-xl-tracking: -1.5px;
|
||||
--typo-display-lg: 400 48px/1.1 var(--font-display);
|
||||
--typo-display-lg-tracking: -1px;
|
||||
--typo-display-md: 400 36px/1.15 var(--font-display);
|
||||
--typo-display-md-tracking: -0.5px;
|
||||
--typo-display-sm: 400 28px/1.2 var(--font-display);
|
||||
--typo-display-sm-tracking: -0.3px;
|
||||
--typo-title-lg: 500 22px/1.3 var(--font-body);
|
||||
--typo-title-md: 500 18px/1.4 var(--font-body);
|
||||
--typo-title-sm: 500 16px/1.4 var(--font-body);
|
||||
--typo-body-md: 400 16px/1.55 var(--font-body);
|
||||
--typo-body-sm: 400 14px/1.55 var(--font-body);
|
||||
--typo-caption: 500 13px/1.4 var(--font-body);
|
||||
--typo-caption-uppercase: 500 12px/1.4 var(--font-body);
|
||||
--typo-caption-uppercase-tracking: 1.5px;
|
||||
--typo-code: 400 14px/1.6 var(--font-mono);
|
||||
--typo-button: 500 14px/1 var(--font-body);
|
||||
--typo-nav-link: 500 14px/1.4 var(--font-body);
|
||||
|
||||
/* --- Spacing scale --- */
|
||||
--space-xxs: 4px;
|
||||
--space-xs: 8px;
|
||||
--space-sm: 12px;
|
||||
--space-md: 16px;
|
||||
--space-lg: 24px;
|
||||
--space-xl: 32px;
|
||||
--space-xxl: 48px;
|
||||
--space-section: 96px;
|
||||
|
||||
/* --- Radii --- */
|
||||
--radius-xs: 4px;
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 12px;
|
||||
--radius-xl: 16px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* --- Layout --- */
|
||||
--content-max: 1200px;
|
||||
--nav-height: 64px;
|
||||
|
||||
/* --- Shadows (used sparingly per DESIGN.md elevation philosophy) --- */
|
||||
--shadow-hover: 0 1px 3px rgba(20, 20, 19, 0.08);
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>rclone</title>
|
||||
<link rel="icon" type="image/svg+xml" href="/assets/favicon.svg">
|
||||
<link rel="stylesheet" href="/assets/styles/tokens.css">
|
||||
<link rel="stylesheet" href="/assets/styles/base.css">
|
||||
<link rel="stylesheet" href="/assets/styles/components.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="top-nav">
|
||||
<a class="wordmark" href="#/remotes">
|
||||
<svg class="spike" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
|
||||
<path d="M8 0 L9.2 6.8 L16 8 L9.2 9.2 L8 16 L6.8 9.2 L0 8 L6.8 6.8 Z"/>
|
||||
</svg>
|
||||
<span>rclone</span>
|
||||
</a>
|
||||
<nav id="nav-links">
|
||||
<a href="#/remotes" data-route="remotes">Remotes</a>
|
||||
<a href="#/configure/new" data-route="configure">Configure</a>
|
||||
<a href="#/jobs" data-route="jobs">Jobs</a>
|
||||
</nav>
|
||||
<a class="btn btn-primary btn-sm" href="#/jobs/new">New Job</a>
|
||||
</header>
|
||||
|
||||
<main id="app">
|
||||
<div class="empty">
|
||||
<h3>Loading</h3>
|
||||
<p>Connecting to rclone RC…</p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="footer-inner">
|
||||
<div>
|
||||
<h4>Product</h4>
|
||||
<ul>
|
||||
<li><a href="#/remotes">Remotes</a></li>
|
||||
<li><a href="#/jobs">Jobs</a></li>
|
||||
<li><a href="#/jobs/new">New Job</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Documentation</h4>
|
||||
<ul>
|
||||
<li><a href="https://rclone.org/docs/" target="_blank" rel="noopener">rclone Docs</a></li>
|
||||
<li><a href="https://rclone.org/commands/rclone_rcd/" target="_blank" rel="noopener">rcd Command</a></li>
|
||||
<li><a href="https://rclone.org/rc/" target="_blank" rel="noopener">RC API</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Community</h4>
|
||||
<ul>
|
||||
<li><a href="https://forum.rclone.org/" target="_blank" rel="noopener">Forum</a></li>
|
||||
<li><a href="https://github.com/rclone/rclone" target="_blank" rel="noopener">GitHub</a></li>
|
||||
<li><a href="https://github.com/rclone/rclone/issues" target="_blank" rel="noopener">Issues</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>About</h4>
|
||||
<ul>
|
||||
<li><a href="https://rclone.org/" target="_blank" rel="noopener">rclone.org</a></li>
|
||||
<li><a href="https://rclone.org/changelog/" target="_blank" rel="noopener">Changelog</a></li>
|
||||
<li><a href="https://rclone.org/faq/" target="_blank" rel="noopener">FAQ</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<p class="colophon">rclone — rsync for cloud storage.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<div id="toast-stack" class="toast-stack"></div>
|
||||
<div id="modal-root"></div>
|
||||
|
||||
<script type="module" src="/assets/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,310 @@
|
||||
// Package webgui implements the "rclone webgui" command — an in-process
|
||||
// web GUI for rclone with the Anthropic design system. It mirrors the
|
||||
// architecture of cmd/gui/gui.go (two in-process HTTP servers: a static
|
||||
// GUI server and an RC API server, with the browser opened automatically),
|
||||
// but serves our own embedded vanilla HTML/CSS/JS frontend instead of
|
||||
// the upstream React bundle.
|
||||
package webgui
|
||||
|
||||
import (
|
||||
"context"
|
||||
_ "embed"
|
||||
"fmt"
|
||||
iofs "io/fs"
|
||||
"net/http"
|
||||
"net/url"
|
||||
"os"
|
||||
"strings"
|
||||
"sync"
|
||||
|
||||
"github.com/go-chi/chi/v5/middleware"
|
||||
"github.com/rclone/rclone/cmd"
|
||||
"github.com/rclone/rclone/fs"
|
||||
"github.com/rclone/rclone/fs/rc"
|
||||
"github.com/rclone/rclone/fs/rc/rcserver"
|
||||
libhttp "github.com/rclone/rclone/lib/http"
|
||||
"github.com/rclone/rclone/lib/random"
|
||||
"github.com/rclone/rclone/lib/systemd"
|
||||
"github.com/skratchdot/open-golang/open"
|
||||
"github.com/spf13/cobra"
|
||||
)
|
||||
|
||||
//go:embed web
|
||||
var embedFS iofs.FS
|
||||
|
||||
var (
|
||||
guiAddr []string
|
||||
apiAddr []string
|
||||
user string
|
||||
pass string
|
||||
noAuth bool
|
||||
noOpenBrowser bool
|
||||
enableMetrics bool
|
||||
)
|
||||
|
||||
func init() {
|
||||
cmd.Root.AddCommand(commandDefinition)
|
||||
f := commandDefinition.Flags()
|
||||
f.StringArrayVar(&guiAddr, "addr", nil, "IPaddress:Port for the GUI server (default auto-chosen localhost port)")
|
||||
f.StringArrayVar(&apiAddr, "api-addr", nil, "IPaddress:Port for the RC API server (default auto-chosen localhost port)")
|
||||
f.StringVar(&user, "user", "", "User name for RC authentication")
|
||||
f.StringVar(&pass, "pass", "", "Password for RC authentication")
|
||||
f.BoolVar(&noAuth, "no-auth", false, "Don't require auth for the RC API")
|
||||
f.BoolVar(&noOpenBrowser, "no-open-browser", false, "Skip opening the browser automatically")
|
||||
f.BoolVar(&enableMetrics, "enable-metrics", false, "Enable OpenMetrics/Prometheus compatible endpoint at /metrics")
|
||||
}
|
||||
|
||||
var commandDefinition = &cobra.Command{
|
||||
Use: "webgui [path]",
|
||||
Short: `Open the web based GUI.`,
|
||||
Long: `This command starts an embedded web GUI for rclone and opens it in
|
||||
your default browser.
|
||||
|
||||
Two localhost ports are bound: one serves the static GUI, the other is
|
||||
the rclone RC API server that the GUI talks to. Credentials are
|
||||
generated automatically unless --no-auth is specified.
|
||||
|
||||
rclone webgui
|
||||
|
||||
By default ` + "`rclone webgui`" + ` serves the GUI embedded into the rclone
|
||||
binary at build time. You can override this by passing a path to an
|
||||
unpacked GUI directory, which is useful for iterating on the frontend
|
||||
without rebuilding rclone:
|
||||
|
||||
rclone webgui ./cmd/webgui/web
|
||||
|
||||
Use --no-open-browser to skip opening the browser automatically:
|
||||
|
||||
rclone webgui --no-open-browser
|
||||
|
||||
Use --addr to bind the GUI to a specific address:
|
||||
|
||||
rclone webgui --addr localhost:5580
|
||||
|
||||
Use --user and --pass to set specific credentials:
|
||||
|
||||
rclone webgui --user admin --pass secret
|
||||
|
||||
Use --no-auth to disable authentication entirely (localhost only):
|
||||
|
||||
rclone webgui --no-auth
|
||||
|
||||
Note: --no-auth enables the RC API's --rc-serve mode, which exposes an
|
||||
HTTP fileserver on every configured remote. Only run this on a trusted
|
||||
network.
|
||||
`,
|
||||
Annotations: map[string]string{
|
||||
"versionIntroduced": "v1.75",
|
||||
"groups": "RC",
|
||||
},
|
||||
RunE: func(command *cobra.Command, args []string) error {
|
||||
cmd.CheckArgs(0, 1, command, args)
|
||||
ctx := context.Background()
|
||||
|
||||
// Resolve the GUI source (embedded subtree or local directory)
|
||||
// before binding any sockets so errors surface immediately.
|
||||
var srcPath string
|
||||
if len(args) == 1 {
|
||||
srcPath = args[0]
|
||||
}
|
||||
srcFS, err := guiSourceFS(srcPath)
|
||||
if err != nil {
|
||||
return err
|
||||
}
|
||||
|
||||
// Create the GUI server (binds port eagerly, before Serve)
|
||||
guiCfg := libhttp.DefaultCfg()
|
||||
if command.Flags().Changed("addr") {
|
||||
guiCfg.ListenAddr = guiAddr
|
||||
} else {
|
||||
guiCfg.ListenAddr = []string{"localhost:0"}
|
||||
}
|
||||
guiServer, err := libhttp.NewServer(ctx, libhttp.WithConfig(guiCfg))
|
||||
if err != nil {
|
||||
return fmt.Errorf("failed to create GUI server: %w", err)
|
||||
}
|
||||
|
||||
// Read the GUI origin from the bound address (available before Serve).
|
||||
guiOrigin := originFromURL(guiServer.URLs()[0])
|
||||
|
||||
// Configure the RC API server
|
||||
opt := rc.Opt // copy global defaults
|
||||
opt.Enabled = true
|
||||
opt.WebUI = false
|
||||
// opt.Serve = true exposes an HTTP fileserver on every configured
|
||||
// remote so the GUI can download files via GET /<remote>:<path>.
|
||||
opt.Serve = true
|
||||
|
||||
if command.Flags().Changed("api-addr") {
|
||||
opt.HTTP.ListenAddr = apiAddr
|
||||
} else {
|
||||
opt.HTTP.ListenAddr = []string{"localhost:0"}
|
||||
}
|
||||
|
||||
// CORS: allow the GUI origin to make cross-port API requests.
|
||||
opt.HTTP.AllowOrigin = guiOrigin
|
||||
|
||||
// Forward metrics flag to the RC server.
|
||||
if command.Flags().Changed("enable-metrics") {
|
||||
opt.EnableMetrics = enableMetrics
|
||||
}
|
||||
|
||||
// Auth
|
||||
if command.Flags().Changed("user") {
|
||||
opt.Auth.BasicUser = user
|
||||
}
|
||||
if command.Flags().Changed("pass") {
|
||||
opt.Auth.BasicPass = pass
|
||||
}
|
||||
if command.Flags().Changed("no-auth") {
|
||||
opt.NoAuth = noAuth
|
||||
}
|
||||
|
||||
if !opt.NoAuth {
|
||||
if opt.Auth.BasicUser == "" {
|
||||
opt.Auth.BasicUser = "gui"
|
||||
fs.Infof(nil, "No username specified. Using default username: %s", opt.Auth.BasicUser)
|
||||
}
|
||||
if opt.Auth.BasicPass == "" {
|
||||
randomPass, err := random.Password(128)
|
||||
if err != nil {
|
||||
return fmt.Errorf("failed to make password: %w", err)
|
||||
}
|
||||
opt.Auth.BasicPass = randomPass
|
||||
fs.Infof(nil, "No password specified. Using random password: %s", randomPass)
|
||||
}
|
||||
}
|
||||
|
||||
// Start the RC server
|
||||
rcServer, err := rcserver.Start(ctx, &opt)
|
||||
if err != nil || rcServer == nil {
|
||||
return fmt.Errorf("failed to start RC server: %w", err)
|
||||
}
|
||||
|
||||
// Read the bound RC URL back from rcserver, in case we asked
|
||||
// libhttp to pick a free port (localhost:0).
|
||||
rcURL := rcServer.URLs()[0]
|
||||
|
||||
// Mount the GUI handler and start serving
|
||||
spaHandler := guiHandler(srcFS)
|
||||
guiServer.Router().Use(middleware.Compress(5))
|
||||
guiServer.Router().Get("/*", spaHandler.ServeHTTP)
|
||||
guiServer.Router().Head("/*", spaHandler.ServeHTTP)
|
||||
guiServer.Serve()
|
||||
|
||||
guiURL := guiServer.URLs()[0]
|
||||
guiSource := "embedded bundle"
|
||||
if srcPath != "" {
|
||||
guiSource = fmt.Sprintf("from %s", srcPath)
|
||||
}
|
||||
fs.Logf(nil, "Serving GUI %s on %s", guiSource, guiURL)
|
||||
|
||||
// Build the launch URL: always pass ?url=<rcURL> so the SPA can
|
||||
// discover the RC base; embed user/pass only when auth is on.
|
||||
loginURL := buildLoginURL(guiURL, rcURL, opt.Auth.BasicUser, opt.Auth.BasicPass, opt.NoAuth)
|
||||
|
||||
fs.Logf(nil, "GUI available at %s", loginURL)
|
||||
if !noOpenBrowser {
|
||||
if err := open.Start(loginURL); err != nil {
|
||||
fs.Errorf(nil, "failed to open GUI in browser: %v", err)
|
||||
}
|
||||
}
|
||||
|
||||
// Wait for either server to exit, then shut both down and
|
||||
// join the second goroutine before returning.
|
||||
defer systemd.Notify()()
|
||||
var wg sync.WaitGroup
|
||||
done := make(chan struct{}, 2)
|
||||
wg.Add(2)
|
||||
go func() { defer wg.Done(); rcServer.Wait(); done <- struct{}{} }()
|
||||
go func() { defer wg.Done(); guiServer.Wait(); done <- struct{}{} }()
|
||||
<-done
|
||||
_ = rcServer.Shutdown()
|
||||
_ = guiServer.Shutdown()
|
||||
wg.Wait()
|
||||
return nil
|
||||
},
|
||||
}
|
||||
|
||||
// originFromURL extracts the origin (scheme://host) from a URL string,
|
||||
// stripping any path or trailing slash.
|
||||
func originFromURL(rawURL string) string {
|
||||
u, err := url.Parse(rawURL)
|
||||
if err != nil {
|
||||
return strings.TrimRight(rawURL, "/")
|
||||
}
|
||||
return u.Scheme + "://" + u.Host
|
||||
}
|
||||
|
||||
// guiSourceFS opens the GUI bundle at the given path. An empty path
|
||||
// returns the embedded bundle (the `web/` directory compiled into the
|
||||
// binary). A non-empty path must be an existing directory whose contents
|
||||
// are served directly — useful for hot-reload during development.
|
||||
func guiSourceFS(path string) (iofs.FS, error) {
|
||||
if path == "" {
|
||||
sub, err := iofs.Sub(embedFS, "web")
|
||||
if err != nil {
|
||||
return nil, fmt.Errorf("failed to read embedded GUI: %w", err)
|
||||
}
|
||||
if _, err := iofs.Stat(sub, "index.html"); err != nil {
|
||||
return nil, fmt.Errorf("embedded GUI has no index.html: %w", err)
|
||||
}
|
||||
return sub, nil
|
||||
}
|
||||
info, err := os.Stat(path)
|
||||
if err != nil {
|
||||
return nil, fmt.Errorf("failed to stat GUI source %q: %w", path, err)
|
||||
}
|
||||
if !info.IsDir() {
|
||||
return nil, fmt.Errorf("GUI source must be a directory: %q", path)
|
||||
}
|
||||
if _, err := os.Stat(path + "/index.html"); err != nil {
|
||||
return nil, fmt.Errorf("GUI source directory has no index.html: %w", err)
|
||||
}
|
||||
return os.DirFS(path), nil
|
||||
}
|
||||
|
||||
// guiHandler returns an http.Handler that serves the GUI bundle from
|
||||
// srcFS with SPA fallback: paths that don't match a real file return
|
||||
// index.html so client-side hash routing keeps working.
|
||||
func guiHandler(srcFS iofs.FS) http.Handler {
|
||||
fileServer := http.FileServer(http.FS(srcFS))
|
||||
return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
|
||||
path := strings.TrimPrefix(r.URL.Path, "/")
|
||||
if path == "" {
|
||||
path = "index.html"
|
||||
}
|
||||
if _, err := iofs.Stat(srcFS, path); err == nil {
|
||||
fileServer.ServeHTTP(w, r)
|
||||
return
|
||||
}
|
||||
// SPA fallback: serve index.html for unknown paths so that
|
||||
// client-side routing (e.g. /login) works.
|
||||
r.URL.Path = "/"
|
||||
fileServer.ServeHTTP(w, r)
|
||||
})
|
||||
}
|
||||
|
||||
// buildLoginURL constructs the URL the browser should open. The query
|
||||
// string always carries the RC API base URL so the SPA can find it.
|
||||
// When auth is enabled, user/pass and a /login hash are added so the
|
||||
// SPA can present credentials to the cross-port RC server.
|
||||
func buildLoginURL(guiBaseURL, rcURL, user, pass string, noAuth bool) string {
|
||||
u, err := url.Parse(guiBaseURL)
|
||||
if err != nil {
|
||||
return guiBaseURL
|
||||
}
|
||||
q := u.Query()
|
||||
q.Set("url", rcURL)
|
||||
if !noAuth {
|
||||
u.Path = "/login"
|
||||
q.Set("user", user)
|
||||
q.Set("pass", pass)
|
||||
}
|
||||
// Always land on the remotes view.
|
||||
if u.Fragment == "" {
|
||||
u.Fragment = "/remotes"
|
||||
}
|
||||
u.RawQuery = q.Encode()
|
||||
return u.String()
|
||||
}
|
||||
Reference in New Issue
Block a user