Kontinuum

Appearance

External S3 attachments — UX design brief ​

Target audience: Claude Design (или эквивалентный UX-агент) Component scope: kontinuum-app PRO-функциональность Spec reference: kontinuum-node/README.md §13.2, §13.6, §7.4 (Virtual S3 Pool) Last updated: 2026-05-18

Контекст ​

kontinuum-app — Tauri 2 desktop+mobile приложение (Vue3 + Tailwind + Pinia). PRO-пользователи могут «прикручивать» свои собственные S3-buckets (Backblaze B2 / Cloudflare R2 / AWS S3 / Wasabi / custom S3-compatible) — bucket'ы становятся частью их Virtual S3 Pool. Они платят провайдеру напрямую, kontinuum.org только координирует доступ.

Style guide ​

  • Stack: Vue3 single-file components, Tailwind utility classes, Pinia stores.
  • Дизайн: dark mode default, accent color #22c55e (green), monospace для technical fields (URLs, keys).
  • Existing screens: see kontinuum-app/frontend/src/pages/SettingsPage.vue для consistency.

User journey ​

  1. Entry: Settings → My Infrastructure → External Storage tab → «Add bucket» button.
  2. Provider selection: card grid с supported providers (Backblaze / Cloudflare R2 / AWS S3 / Wasabi / Custom S3-compatible).
  3. Credentials form (provider-specific fields):
    • Endpoint URL (autocomplete для known providers).
    • Region (dropdown с available regions для provider'а).
    • Access Key ID + Secret Access Key (masked input, paste-friendly).
    • Bucket name.
    • Optional CDN endpoint URL.
  4. Validation: «Test connection» button → backend проверяет:
    • Credentials валидны.
    • Bucket existence + write permission.
    • Region matches.
    • Free space available.
    • Inline error messages с actionable hints («No write permission — check IAM policy for bucket X»).
  5. Configuration:
    • Friendly name (для UI list).
    • Quota cap (опционально, soft limit).
    • Geo-zone (auto-detected, можно override).
    • CDN enabled toggle (если CDN endpoint указан).
  6. Confirmation:
    • Summary с estimated billing impact («Your provider будет биллить ~$X/mo для этого bucket'а»).
    • Privacy disclaimer («Контент E2E-зашифрован, провайдер видит только ciphertext; metadata-leak warning» — см. README §13.6).
    • «Add to Virtual Pool» button.
  7. Success state: bucket появляется в Settings → My Infrastructure → External Storage list.

Edge cases ​

  • Invalid credentials → friendly error с recovery hint.
  • Region mismatch → suggest correct region.
  • Bucket уже attached к другой identity → warning.
  • CDN endpoint timeout → fallback на non-CDN mode.
  • Provider outage → retry with exponential backoff.

Bucket list view (для уже-attached) ​

  • Cards с: friendly name, provider logo, region, used/quota, last sync, health indicator.
  • Per-bucket actions: edit settings, refresh credentials, test, detach.
  • Detach flow: warning «N blob'ов в этом bucket'е, нужно ли migrate to другое хранилище?» → 14-day migration period.

Required deliverables ​

  1. Vue3 components:
    • AddBucketWizard.vue (multi-step flow)
    • BucketCard.vue (list item)
    • BucketListView.vue (container)
  2. Pinia store: bucketsStore.ts.
  3. API client: buckets.api.ts (TypeScript типы из backend через ts-rs).
  4. Visual mockups: 5 screens (provider select, credentials, validation, summary, success).

Out of scope ​

  • Backend implementation (отдельная задача).
  • Billing integration (предполагается user сам billed by provider).
  • Mobile-specific layout (focus на desktop first, mobile — later).

References ​

  • kontinuum-node/README.md §13.2 (Multi-VPS / home server attachment)
  • kontinuum-node/README.md §13.6 (External S3 при lapse — redirect mode + metadata protection)
  • kontinuum-node/README.md §7.4 (Virtual S3 Pool)
  • kontinuum-app/backend/src/clouds/ (existing S3 client code)