Rework song player view to match design system

- New split layout: waveform/transport/queue left, comment panel right
- Avatar pins above waveform positioned by timestamp with hover tooltips
- Transport bar: speed selector, ±30s skip, 46px amber play/pause, volume
- Comment compose: live timestamp pill, suggestion/issue/keeper tag buttons
- Comment list: per-author colour avatars, amber timestamp seek chips,
  playhead-proximity highlight, delete only shown on own comments
- Queue panel showing other songs in the same session
- Waveform colours updated to amber/dim palette (104px height)
- Add GET /songs/{song_id} endpoint for song metadata
- Add tag field to SongComment (model, schema, router, migration 0005)
- Fix migration 0005 down_revision to use short ID "0004"
- Fix ESLint no-unused-expressions in keyboard shortcut handler

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

README.md

@@ -0,0 +1,280 @@
+# RehearsalHub
+
+A web platform for bands to relisten to recorded rehearsals, drop timestamped comments, annotate moments, and collaborate asynchronously — all on top of your own storage (Nextcloud, Google Drive, S3, local).
+
+---
+
+## Architecture
+
+```
+┌─────────┐   HTTP/WS   ┌──────────────┐   asyncpg   ┌──────────┐
+│  React  │ ──────────► │  FastAPI     │ ──────────► │ Postgres │
+│  (Vite) │             │  (Python)    │             └──────────┘
+└─────────┘             └──────┬───────┘
+                               │ Redis pub/sub
+                    ┌──────────┴──────────┐
+                    │                     │
+             ┌──────▼──────┐   ┌──────────▼──────┐
+             │ Audio Worker │   │  NC Watcher     │
+             │ (waveforms)  │   │  (file polling) │
+             └─────────────┘   └─────────────────┘
+```
+
+| Service | Language | Purpose |
+|---|---|---|
+| `web` | TypeScript / React | UI — player, library, settings |
+| `api` | Python / FastAPI | REST + WebSocket backend |
+| `worker` | Python | Audio analysis, waveform generation |
+| `watcher` | Python | Polls Nextcloud for new files |
+| `db` | PostgreSQL 16 | Primary datastore |
+| `redis` | Redis 7 | Task queue, pub/sub |
+
+Files are **never copied** to RehearsalHub servers. The platform reads recordings directly from your own storage.
+
+---
+
+## Prerequisites
+
+| Tool | Purpose | Install |
+|---|---|---|
+| **Podman** + `podman-compose` | Container runtime | [podman.io](https://podman.io) |
+| **uv** | Python package manager (backend) | `curl -Lsf https://astral.sh/uv/install.sh \| sh` |
+| **Task** | Task runner (`Taskfile.yml`) | [taskfile.dev](https://taskfile.dev) |
+| **Node 20** | Frontend (runs inside podman — not needed locally) | via `podman run node:20-alpine` |
+
+> Node is only required inside a container. All frontend commands pull `node:20-alpine` via podman automatically.
+
+---
+
+## Quick start
+
+### 1. Configure environment
+
+```bash
+cp .env.example .env
+# Edit .env — set SECRET_KEY, INTERNAL_SECRET, Nextcloud credentials, domain
+```
+
+Generate secrets:
+```bash
+openssl rand -hex 32   # paste as SECRET_KEY
+openssl rand -hex 32   # paste as INTERNAL_SECRET
+```
+
+### 2. Start all services
+
+```bash
+task up          # starts db, redis, api, audio-worker, nc-watcher, web (nginx)
+task migrate     # run database migrations
+```
+
+Or for first-time setup with Nextcloud scaffolding:
+```bash
+task setup       # up + wait for NC + configure NC + seed data
+```
+
+### 3. Open the app
+
+Visit `http://localhost:8080` (or your configured `DOMAIN`).
+
+---
+
+## Development
+
+Start the backend with hot reload and mount source directories:
+
+```bash
+task dev:detach    # start db, redis, api, worker, watcher in dev mode (background)
+task dev:web       # start Vite dev server at http://localhost:3000 (proxies /api)
+```
+
+Or run both together:
+```bash
+task dev           # foreground, streams all logs
+```
+
+Follow logs:
+```bash
+task logs                     # all services
+task dev:logs SERVICE=api     # single service
+```
+
+Restart a single service after a code change:
+```bash
+task dev:restart SERVICE=api
+```
+
+### Database migrations
+
+```bash
+# Apply pending migrations
+task migrate
+
+# Create a new migration from model changes
+task migrate:auto M="add instrument field to band_member"
+```
+
+### Useful shells
+
+```bash
+task shell:api    # bash in the API container
+task shell:db     # psql
+task shell:redis  # redis-cli
+```
+
+---
+
+## Testing
+
+### After every feature — run this
+
+```bash
+task test:feature
+```
+
+This runs the full **post-feature pipeline** (no external services required):
+
+| Step | What it checks |
+|---|---|
+| `typecheck:web` | TypeScript compilation errors |
+| `test:web` | React component tests (via podman + vitest) |
+| `test:api:unit` | Python unit tests (no DB needed) |
+| `test:worker` | Worker unit tests |
+| `test:watcher` | Watcher unit tests |
+
+Typical runtime: **~60–90 seconds**.
+
+---
+
+### Full CI pipeline
+
+Runs everything including integration tests against a live database.
+**Requires services to be up** (`task dev:detach && task migrate`).
+
+```bash
+task ci
+```
+
+Stages:
+
+```
+lint  ──►  typecheck  ──►  test:web  ──►  test:api (unit + integration)
+                                     ──►  test:worker
+                                     ──►  test:watcher
+```
+
+---
+
+### Individual test commands
+
+```bash
+# Frontend
+task test:web              # React/vitest tests (podman, no local Node needed)
+task typecheck:web         # TypeScript type check only
+
+# Backend — unit (no services required)
+task test:api:unit         # API unit tests
+task test:worker           # Worker tests
+task test:watcher          # Watcher tests
+
+# Backend — all (requires DB + services)
+task test:api              # unit + integration tests with coverage
+task test                  # all backend suites
+
+# Integration only
+task test:integration      # API integration tests (DB required)
+
+# Lint
+task lint                  # ruff + mypy (Python), eslint (TS)
+task format                # auto-format Python with ruff
+```
+
+---
+
+### Frontend test details
+
+Frontend tests run inside a `node:20-alpine` container via podman and do not require Node installed on the host:
+
+```bash
+task test:web
+# equivalent to:
+podman run --rm -v ./web:/app:Z -w /app node:20-alpine \
+  sh -c "npm install --legacy-peer-deps --silent && npm run test"
+```
+
+Tests use **vitest** + **@testing-library/react** and are located alongside the source files they test:
+
+```
+web/src/pages/
+  BandPage.tsx
+  BandPage.test.tsx          ← 7 tests: library view cleanliness
+  BandSettingsPage.tsx
+  BandSettingsPage.test.tsx  ← 24 tests: routing, access control, mutations
+web/src/test/
+  setup.ts                   ← jest-dom matchers
+  helpers.tsx                ← QueryClient + MemoryRouter wrapper
+```
+
+---
+
+## Project structure
+
+```
+rehearshalhub/
+├── api/                   Python / FastAPI backend
+│   ├── src/rehearsalhub/
+│   │   ├── routers/       HTTP endpoints
+│   │   ├── models/        SQLAlchemy ORM models
+│   │   ├── repositories/  DB access layer
+│   │   ├── services/      Business logic
+│   │   └── schemas/       Pydantic request/response schemas
+│   └── tests/
+│       ├── unit/          Pure unit tests (no DB)
+│       └── integration/   Full HTTP tests against a real DB
+│
+├── web/                   TypeScript / React frontend
+│   └── src/
+│       ├── api/           API client functions
+│       ├── components/    Shared components (AppShell, etc.)
+│       ├── pages/         Route-level page components
+│       └── test/          Test helpers and setup
+│
+├── worker/                Audio analysis service (Python)
+├── watcher/               Nextcloud file polling service (Python)
+├── scripts/               nc-setup.sh, seed.sh
+├── traefik/               Reverse proxy config
+├── docker-compose.yml     Production compose
+├── docker-compose.dev.yml Dev overrides (hot reload, source mounts)
+├── Taskfile.yml           Task runner (preferred)
+└── Makefile               Makefile aliases (same targets)
+```
+
+---
+
+## Key design decisions
+
+- **Storage is always yours.** RehearsalHub never copies audio files. It reads them directly from Nextcloud (or other providers) on demand.
+- **Date is the primary axis.** The library groups recordings by session date. Filters narrow within that structure — they never flatten it.
+- **Band switching is tenant-level.** Switching bands re-scopes the library, settings, and all band-specific views.
+- **Settings are band-scoped.** Member management, storage configuration, and band identity live at `/bands/:id/settings`, not in the library view.
+
+---
+
+## Environment variables
+
+| Variable | Required | Description |
+|---|---|---|
+| `SECRET_KEY` | ✅ | 32-byte hex, JWT signing key |
+| `INTERNAL_SECRET` | ✅ | 32-byte hex, service-to-service auth |
+| `DATABASE_URL` | ✅ | PostgreSQL connection string |
+| `REDIS_URL` | ✅ | Redis connection string |
+| `NEXTCLOUD_URL` | ✅ | Full URL to your Nextcloud instance |
+| `NEXTCLOUD_USER` | ✅ | Nextcloud service account username |
+| `NEXTCLOUD_PASS` | ✅ | Nextcloud service account password |
+| `DOMAIN` | ✅ | Public domain (used by Traefik TLS) |
+| `ACME_EMAIL` | ✅ | Let's Encrypt email |
+| `POSTGRES_DB` | ✅ | Database name |
+| `POSTGRES_USER` | ✅ | Database user |
+| `POSTGRES_PASSWORD` | ✅ | Database password |
+
+See `.env.example` for the full template.

Taskfile.yml

@@ -87,16 +87,51 @@ tasks:
 
 # ── Testing ───────────────────────────────────────────────────────────────────
 
+  # Run this after every feature branch — fast, no external services required.
+  test:feature:
+    desc: "Post-feature pipeline: typecheck + frontend tests + backend unit tests (no services needed)"
+    cmds:
+      - task: typecheck:web
+      - task: test:web
+      - task: test:api:unit
+      - task: test:worker
+      - task: test:watcher
+
+  # Full CI pipeline — runs everything including integration tests.
+  # Requires: services up (task dev:detach), DB migrated.
+  ci:
+    desc: "Full CI pipeline: lint + typecheck + all tests (requires services running)"
+    cmds:
+      - task: lint
+      - task: typecheck:web
+      - task: test:web
+      - task: test:api
+      - task: test:worker
+      - task: test:watcher
+
   test:
-    desc: Run all tests
+    desc: Run all backend tests (unit + integration)
     deps: [test:api, test:worker, test:watcher]
 
+  test:web:
+    desc: Run frontend unit tests (via podman — no local Node required)
+    dir: web
+    cmds:
+      - podman run --rm -v "$(pwd)":/app:Z -w /app node:20-alpine
+          sh -c "npm install --legacy-peer-deps --silent && npm run test"
+
   test:api:
-    desc: Run API tests with coverage
+    desc: Run all API tests with coverage (unit + integration)
     dir: api
     cmds:
       - uv run pytest tests/ -v --cov=src/rehearsalhub --cov-report=term-missing
 
+  test:api:unit:
+    desc: Run API unit tests only (no database or external services required)
+    dir: api
+    cmds:
+      - uv run pytest tests/unit/ -v -m "not integration"
+
   test:worker:
     desc: Run worker tests with coverage
     dir: worker
@@ -110,7 +145,7 @@ tasks:
       - uv run pytest tests/ -v --cov=src/watcher --cov-report=term-missing
 
   test:integration:
-    desc: Run integration tests
+    desc: Run integration tests (requires services running)
     dir: api
     cmds:
       - uv run pytest tests/integration/ -v -m integration

api/Dockerfile

@@ -2,11 +2,15 @@ FROM python:3.12-slim AS base
 WORKDIR /app
 RUN pip install uv
 
-FROM base AS development
+FROM python:3.12-slim AS development
+WORKDIR /app
 COPY pyproject.toml .
-RUN uv sync
-COPY . .
-CMD ["uv", "run", "uvicorn", "rehearsalhub.main:app", "--host", "0.0.0.0", "--port", "8000", "--reload"]
+COPY src/ src/
+# Install directly into system Python — no venv, so uvicorn's multiprocessing.spawn
+# subprocess inherits the same interpreter and can always find rehearsalhub
+RUN pip install --no-cache-dir -e "."
+# ./api/src is mounted as a volume at runtime; the editable .pth file points here
+CMD ["python3", "-m", "uvicorn", "rehearsalhub.main:app", "--host", "0.0.0.0", "--port", "8000", "--reload"]
 
 FROM base AS lint
 COPY pyproject.toml .

api/alembic/versions/0005_comment_tag.py

@@ -0,0 +1,25 @@
+"""Add tag column to song_comments
+
+Revision ID: 0005_comment_tag
+Revises: 0004_rehearsal_sessions
+Create Date: 2026-04-06
+"""
+
+from alembic import op
+import sqlalchemy as sa
+
+revision = "0005_comment_tag"
+down_revision = "0004"
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    op.add_column(
+        "song_comments",
+        sa.Column("tag", sa.String(length=32), nullable=True),
+    )
+
+
+def downgrade() -> None:
+    op.drop_column("song_comments", "tag")

api/src/rehearsalhub/db/models.py

@@ -207,6 +207,7 @@ class SongComment(Base):
     )
     body: Mapped[str] = mapped_column(Text, nullable=False)
     timestamp: Mapped[Optional[float]] = mapped_column(Numeric(10, 2), nullable=True)
+    tag: Mapped[Optional[str]] = mapped_column(String(32), nullable=True)
     created_at: Mapped[datetime] = mapped_column(
         DateTime(timezone=True), server_default=func.now(), nullable=False
     )

api/src/rehearsalhub/routers/songs.py

@@ -89,6 +89,24 @@ async def search_songs(
     ]
 
 
+@router.get("/songs/{song_id}", response_model=SongRead)
+async def get_song(
+    song_id: uuid.UUID,
+    session: AsyncSession = Depends(get_session),
+    current_member: Member = Depends(get_current_member),
+):
+    song_repo = SongRepository(session)
+    song = await song_repo.get_with_versions(song_id)
+    if song is None:
+        raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="Song not found")
+    band_svc = BandService(session)
+    try:
+        await band_svc.assert_membership(song.band_id, current_member.id)
+    except PermissionError:
+        raise HTTPException(status_code=status.HTTP_403_FORBIDDEN, detail="Not a member")
+    return SongRead.model_validate(song).model_copy(update={"version_count": len(song.versions)})
+
+
 @router.patch("/songs/{song_id}", response_model=SongRead)
 async def update_song(
     song_id: uuid.UUID,
@@ -264,7 +282,7 @@ async def create_comment(
 ):
     await _assert_song_membership(song_id, current_member.id, session)
     repo = CommentRepository(session)
-    comment = await repo.create(song_id=song_id, author_id=current_member.id, body=data.body, timestamp=data.timestamp)
+    comment = await repo.create(song_id=song_id, author_id=current_member.id, body=data.body, timestamp=data.timestamp, tag=data.tag)
     comment = await repo.get_with_author(comment.id)
     return SongCommentRead.from_model(comment)
 

api/src/rehearsalhub/schemas/comment.py

@@ -9,6 +9,7 @@ from pydantic import BaseModel, ConfigDict
 class SongCommentCreate(BaseModel):
     body: str
     timestamp: float | None = None
+    tag: str | None = None
 
 
 class SongCommentRead(BaseModel):
@@ -21,6 +22,7 @@ class SongCommentRead(BaseModel):
     author_name: str
     author_avatar_url: str | None
     timestamp: float | None
+    tag: str | None
     created_at: datetime
 
     @classmethod
@@ -33,5 +35,6 @@ class SongCommentRead(BaseModel):
             author_name=getattr(getattr(c, "author"), "display_name"),
             author_avatar_url=getattr(getattr(c, "author"), "avatar_url"),
             timestamp=getattr(c, "timestamp"),
+            tag=getattr(c, "tag", None),
             created_at=getattr(c, "created_at"),
         )

docker-compose.dev.yml

@@ -1,17 +1,67 @@
 services:
+  db:
+    image: postgres:16-alpine
+    environment:
+      POSTGRES_DB: ${POSTGRES_DB:-rehearsalhub}
+      POSTGRES_USER: ${POSTGRES_USER:-rh_user}
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD:-default_secure_password}
+    volumes:
+      - pg_data_dev:/var/lib/postgresql/data
+    networks:
+      - rh_net
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U ${POSTGRES_USER:-rh_user} -d ${POSTGRES_DB:-rehearsalhub} || exit 1"]
+      interval: 10s
+      timeout: 5s
+      retries: 20
+      start_period: 20s
+
+  redis:
+    image: redis:7-alpine
+    networks:
+      - rh_net
+
   api:
     build:
       context: ./api
       target: development
     volumes:
       - ./api/src:/app/src
+    environment:
+      DATABASE_URL: postgresql+asyncpg://${POSTGRES_USER:-rh_user}:${POSTGRES_PASSWORD:-default_secure_password}@db:5432/${POSTGRES_DB:-rehearsalhub}
+      NEXTCLOUD_URL: ${NEXTCLOUD_URL:-https://cloud.example.com}
+      NEXTCLOUD_USER: ${NEXTCLOUD_USER:-rh_service}
+      NEXTCLOUD_PASS: ${NEXTCLOUD_PASS:-default_password}
+      REDIS_URL: redis://redis:6379/0
+      SECRET_KEY: ${SECRET_KEY:-replace_me_with_32_byte_hex_default}
+      INTERNAL_SECRET: ${INTERNAL_SECRET:-replace_me_with_32_byte_hex_default}
+      DOMAIN: ${DOMAIN:-localhost}
     ports:
       - "8000:8000"
+    networks:
+      - rh_net
+    depends_on:
+      db:
+        condition: service_healthy
 
-  audio-worker:
+  web:
+    build:
+      context: ./web
+      target: development
     volumes:
-      - ./worker/src:/app/src
+      - ./web/src:/app/src
+    environment:
+      API_URL: http://api:8000
+    ports:
+      - "3000:3000"
+    networks:
+      - rh_net
+    depends_on:
+      - api
 
-  nc-watcher:
-    volumes:
-      - ./watcher/src:/app/src
+networks:
+  rh_net:
+    driver: bridge
+
+volumes:
+  pg_data_dev:

web/Dockerfile

@@ -1,3 +1,11 @@
+FROM node:20-alpine AS development
+WORKDIR /app
+COPY package*.json ./
+RUN npm install --legacy-peer-deps
+COPY . .
+# ./web/src is mounted as a volume at runtime for HMR; everything else comes from the image
+CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]
+
 FROM node:20-alpine AS builder
 WORKDIR /app
 COPY package*.json ./

web/package-lock.json

@@ -17,6 +17,8 @@
       },
       "devDependencies": {
         "@eslint/js": "^9.39.4",
+        "@testing-library/dom": "^10.4.1",
+        "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.0.1",
         "@testing-library/user-event": "^14.5.2",
         "@types/react": "^18.3.5",
@@ -32,6 +34,13 @@
         "vitest": "^2.1.1"
       }
     },
+    "node_modules/@adobe/css-tools": {
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.4.tgz",
+      "integrity": "sha512-Elp+iwUx5rN5+Y8xLt5/GRoG20WGoDCQ/1Fb+1LiGtvwbDavuSk0jhD/eZdckHAuzcDzccnkv+rEjyWfRx18gg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@asamuzakjp/css-color": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-3.2.0.tgz",
@@ -1495,7 +1504,6 @@
       "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
         "@babel/runtime": "^7.12.5",
@@ -1510,6 +1518,43 @@
         "node": ">=18"
       }
     },
+    "node_modules/@testing-library/dom/node_modules/aria-query": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/dom-accessibility-api": {
+      "version": "0.5.16",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
+      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@testing-library/jest-dom": {
+      "version": "6.9.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.9.1.tgz",
+      "integrity": "sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@adobe/css-tools": "^4.4.0",
+        "aria-query": "^5.0.0",
+        "css.escape": "^1.5.1",
+        "dom-accessibility-api": "^0.6.3",
+        "picocolors": "^1.1.1",
+        "redent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
     "node_modules/@testing-library/react": {
       "version": "16.3.2",
       "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.3.2.tgz",
@@ -1557,8 +1602,7 @@
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
       "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
@@ -1623,14 +1667,14 @@
       "version": "15.7.15",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
       "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/react": {
       "version": "18.3.28",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.28.tgz",
       "integrity": "sha512-z9VXpC7MWrhfWipitjNdgCauoMLRdIILQsAEV+ZesIzBq/oUlxk0m3ApZuMFCXdnS4U7KrI+l3WRUEGQ8K1QKw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
@@ -2132,7 +2176,6 @@
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -2161,14 +2204,13 @@
       "license": "Python-2.0"
     },
     "node_modules/aria-query": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
-      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
+      "integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
-      "dependencies": {
-        "dequal": "^2.0.3"
+      "engines": {
+        "node": ">= 0.4"
       }
     },
     "node_modules/assertion-error": {
@@ -2414,6 +2456,13 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css.escape": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
+      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/cssstyle": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.6.0.tgz",
@@ -2439,7 +2488,7 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/data-urls": {
@@ -2514,18 +2563,16 @@
       "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=6"
       }
     },
     "node_modules/dom-accessibility-api": {
-      "version": "0.5.16",
-      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
-      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz",
+      "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
@@ -3264,6 +3311,16 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/indent-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -3490,7 +3547,6 @@
       "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "lz-string": "bin/bin.js"
       }
@@ -3538,6 +3594,16 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/min-indent": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
+      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
@@ -3776,7 +3842,6 @@
       "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "ansi-regex": "^5.0.1",
         "ansi-styles": "^5.0.0",
@@ -3792,7 +3857,6 @@
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -3840,8 +3904,7 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/react-refresh": {
       "version": "0.17.0",
@@ -3885,6 +3948,20 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/redent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
+      "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "indent-string": "^4.0.0",
+        "strip-indent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -4040,6 +4117,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/strip-indent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+      "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "min-indent": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",

web/package.json

@@ -23,6 +23,8 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.4",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/react": "^18.3.5",

web/src/App.tsx

@@ -6,6 +6,7 @@ import { AppShell } from "./components/AppShell";
 import { LoginPage } from "./pages/LoginPage";
 import { HomePage } from "./pages/HomePage";
 import { BandPage } from "./pages/BandPage";
+import { BandSettingsPage } from "./pages/BandSettingsPage";
 import { SessionPage } from "./pages/SessionPage";
 import { SongPage } from "./pages/SongPage";
 import { SettingsPage } from "./pages/SettingsPage";
@@ -50,6 +51,18 @@ export default function App() {
               </ShellRoute>
             }
           />
+          <Route
+            path="/bands/:bandId/settings"
+            element={<Navigate to="members" replace />}
+          />
+          <Route
+            path="/bands/:bandId/settings/:panel"
+            element={
+              <ShellRoute>
+                <BandSettingsPage />
+              </ShellRoute>
+            }
+          />
           <Route
             path="/bands/:bandId/sessions/:sessionId"
             element={

web/src/components/AppShell.tsx

@@ -54,6 +54,28 @@ function IconSettings() {
   );
 }
 
+function IconMembers() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
+      <circle cx="5" cy="4.5" r="2" />
+      <path d="M1 12c0-2.2 1.8-3.5 4-3.5s4 1.3 4 3.5H1z" />
+      <circle cx="10.5" cy="4.5" r="1.5" opacity=".6" />
+      <path d="M10.5 8.5c1.4 0 2.5 1 2.5 2.5H9.5" opacity=".6" />
+    </svg>
+  );
+}
+
+function IconStorage() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
+      <rect x="1" y="3" width="12" height="3" rx="1.5" />
+      <rect x="1" y="8" width="12" height="3" rx="1.5" />
+      <circle cx="11" cy="4.5" r=".75" fill="#0b0b0e" />
+      <circle cx="11" cy="9.5" r=".75" fill="#0b0b0e" />
+    </svg>
+  );
+}
+
 function IconChevron() {
   return (
     <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5">
@@ -157,6 +179,8 @@ export function AppShell({ children }: { children: React.ReactNode }) {
   );
   const isPlayer = !!matchPath("/bands/:bandId/songs/:songId", location.pathname);
   const isSettings = location.pathname.startsWith("/settings");
+  const isBandSettings = !!matchPath("/bands/:bandId/settings/*", location.pathname);
+  const bandSettingsPanel = matchPath("/bands/:bandId/settings/:panel", location.pathname)?.params?.panel ?? null;
 
   // Close dropdown on outside click
   useEffect(() => {
@@ -425,7 +449,31 @@ export function AppShell({ children }: { children: React.ReactNode }) {
             </>
           )}
 
-          <SectionLabel style={{ paddingTop: activeBand ? 14 : 0 }}>Account</SectionLabel>
+          {activeBand && (
+            <>
+              <SectionLabel style={{ paddingTop: 14 }}>Band Settings</SectionLabel>
+              <NavItem
+                icon={<IconMembers />}
+                label="Members"
+                active={isBandSettings && bandSettingsPanel === "members"}
+                onClick={() => navigate(`/bands/${activeBand.id}/settings/members`)}
+              />
+              <NavItem
+                icon={<IconStorage />}
+                label="Storage"
+                active={isBandSettings && bandSettingsPanel === "storage"}
+                onClick={() => navigate(`/bands/${activeBand.id}/settings/storage`)}
+              />
+              <NavItem
+                icon={<IconSettings />}
+                label="Band Settings"
+                active={isBandSettings && bandSettingsPanel === "band"}
+                onClick={() => navigate(`/bands/${activeBand.id}/settings/band`)}
+              />
+            </>
+          )}
+
+          <SectionLabel style={{ paddingTop: 14 }}>Account</SectionLabel>
           <NavItem
             icon={<IconSettings />}
             label="Settings"

web/src/hooks/useWaveform.ts

@@ -23,6 +23,7 @@ export function useWaveform(
   const [isPlaying, setIsPlaying] = useState(false);
   const [isReady, setIsReady] = useState(false);
   const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0);
   const wasPlayingRef = useRef(false);
   const markersRef = useRef<CommentMarker[]>([]);
 
@@ -31,12 +32,12 @@ export function useWaveform(
 
     const ws = WaveSurfer.create({
       container: containerRef.current,
-      waveColor: "#2A3050",
-      progressColor: "#F0A840",
-      cursorColor: "#FFD080",
+      waveColor: "rgba(255,255,255,0.09)",
+      progressColor: "#c8861a",
+      cursorColor: "#e8a22a",
       barWidth: 2,
       barRadius: 2,
-      height: 80,
+      height: 104,
       normalize: true,
     });
 
@@ -45,6 +46,7 @@ export function useWaveform(
 
     ws.on("ready", () => {
       setIsReady(true);
+      setDuration(ws.getDuration());
       options.onReady?.(ws.getDuration());
       // Reset playing state when switching versions
       setIsPlaying(false);
@@ -141,7 +143,7 @@ export function useWaveform(
     markersRef.current = [];
   };
 
-  return { isPlaying, isReady, currentTime, play, pause, seekTo, addMarker, clearMarkers };
+  return { isPlaying, isReady, currentTime, duration, play, pause, seekTo, addMarker, clearMarkers };
 }
 
 function formatTime(seconds: number): string {

web/src/pages/BandPage.test.tsx

@@ -0,0 +1,108 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { screen } from "@testing-library/react";
+import { renderWithProviders } from "../test/helpers";
+import { BandPage } from "./BandPage";
+
+// ── Mocks ─────────────────────────────────────────────────────────────────────
+
+vi.mock("../api/bands", () => ({
+  getBand: vi.fn().mockResolvedValue({
+    id: "band-1",
+    name: "Loud Hands",
+    slug: "loud-hands",
+    genre_tags: ["post-rock"],
+    nc_folder_path: null,
+  }),
+}));
+
+vi.mock("../api/client", () => ({
+  api: {
+    get: vi.fn().mockImplementation((url: string) => {
+      if (url.includes("/sessions")) {
+        return Promise.resolve([
+          { id: "s1", date: "2026-03-31", label: "Late Night Jam", recording_count: 3 },
+        ]);
+      }
+      if (url.includes("/songs/search")) {
+        return Promise.resolve([]);
+      }
+      return Promise.resolve([]);
+    }),
+    post: vi.fn(),
+    patch: vi.fn(),
+    delete: vi.fn(),
+  },
+  isLoggedIn: vi.fn().mockReturnValue(true),
+}));
+
+const renderBandPage = () =>
+  renderWithProviders(<BandPage />, {
+    path: "/bands/:bandId",
+    route: "/bands/band-1",
+  });
+
+// ── Tests ─────────────────────────────────────────────────────────────────────
+
+describe("BandPage — Library view (TC-01 to TC-09)", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("TC-01: does not render a member list", async () => {
+    renderBandPage();
+    await new Promise((r) => setTimeout(r, 50));
+    expect(screen.queryByText(/members/i)).toBeNull();
+  });
+
+  it("TC-02: does not render an invite button", async () => {
+    renderBandPage();
+    await new Promise((r) => setTimeout(r, 50));
+    expect(screen.queryByText(/\+ invite/i)).toBeNull();
+  });
+
+  it("TC-03: does not render the Nextcloud folder config widget", async () => {
+    renderBandPage();
+    await new Promise((r) => setTimeout(r, 50));
+    expect(screen.queryByText(/scan path/i)).toBeNull();
+    expect(screen.queryByText(/nextcloud scan folder/i)).toBeNull();
+  });
+
+  it("TC-04: renders sessions grouped by date", async () => {
+    renderBandPage();
+    const sessionEl = await screen.findByText("Late Night Jam");
+    expect(sessionEl).toBeTruthy();
+  });
+
+  it("TC-05: renders the Scan Nextcloud action button", async () => {
+    renderBandPage();
+    const btn = await screen.findByText(/scan nextcloud/i);
+    expect(btn).toBeTruthy();
+  });
+
+  it("TC-06: renders the + Upload button", async () => {
+    renderBandPage();
+    const btn = await screen.findByText(/\+ upload/i);
+    expect(btn).toBeTruthy();
+  });
+
+  it("TC-07: does not render By Date / Search tabs", async () => {
+    renderBandPage();
+    await new Promise((r) => setTimeout(r, 50));
+    expect(screen.queryByText(/by date/i)).toBeNull();
+    expect(screen.queryByText(/^search$/i)).toBeNull();
+  });
+
+  it("TC-08: renders the Library heading", async () => {
+    renderBandPage();
+    const heading = await screen.findByText("Library");
+    expect(heading).toBeTruthy();
+  });
+
+  it("TC-09: renders filter pills including All and Guitar", async () => {
+    renderBandPage();
+    const allPill = await screen.findByText("all");
+    const guitarPill = await screen.findByText("guitar");
+    expect(allPill).toBeTruthy();
+    expect(guitarPill).toBeTruthy();
+  });
+});

web/src/pages/BandPage.tsx

@@ -1,9 +1,8 @@
-import { useState } from "react";
+import { useState, useMemo } from "react";
 import { useParams, Link } from "react-router-dom";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { getBand } from "../api/bands";
 import { api } from "../api/client";
-import { InviteManagement } from "../components/InviteManagement";
 
 interface SongSummary {
   id: string;
@@ -15,21 +14,6 @@ interface SongSummary {
   version_count: number;
 }
 
-interface BandMember {
-  id: string;
-  display_name: string;
-  email: string;
-  role: string;
-  joined_at: string;
-}
-
-interface BandInvite {
-  id: string;
-  token: string;
-  role: string;
-  expires_at: string;
-}
-
 interface SessionSummary {
   id: string;
   date: string;
@@ -37,37 +21,37 @@ interface SessionSummary {
   recording_count: number;
 }
 
+type FilterPill = "all" | "full band" | "guitar" | "vocals" | "drums" | "keys" | "commented";
+
+const PILLS: FilterPill[] = ["all", "full band", "guitar", "vocals", "drums", "keys", "commented"];
+
 function formatDate(iso: string): string {
-  const d = new Date(iso);
+  const d = new Date(iso.slice(0, 10) + "T12:00:00");
   return d.toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" });
 }
 
-function weekday(iso: string): string {
-  return new Date(iso).toLocaleDateString(undefined, { weekday: "short" });
+function formatDateLabel(iso: string): string {
+  const d = new Date(iso.slice(0, 10) + "T12:00:00");
+  const today = new Date();
+  today.setHours(12, 0, 0, 0);
+  const diffDays = Math.round((today.getTime() - d.getTime()) / (1000 * 60 * 60 * 24));
+  if (diffDays === 0) {
+    return "Today — " + d.toLocaleDateString(undefined, { month: "short", day: "numeric" });
+  }
+  return d.toLocaleDateString(undefined, { month: "short", day: "numeric" });
 }
 
 export function BandPage() {
   const { bandId } = useParams<{ bandId: string }>();
   const qc = useQueryClient();
-  const [tab, setTab] = useState<"dates" | "search">("dates");
   const [showCreate, setShowCreate] = useState(false);
-  const [title, setTitle] = useState("");
+  const [newTitle, setNewTitle] = useState("");
   const [error, setError] = useState<string | null>(null);
   const [scanning, setScanning] = useState(false);
   const [scanProgress, setScanProgress] = useState<string | null>(null);
   const [scanMsg, setScanMsg] = useState<string | null>(null);
-  const [inviteLink, setInviteLink] = useState<string | null>(null);
-  const [editingFolder, setEditingFolder] = useState(false);
-  const [folderInput, setFolderInput] = useState("");
-
-  // Search state
-  const [searchQ, setSearchQ] = useState("");
-  const [searchKey, setSearchKey] = useState("");
-  const [searchBpmMin, setSearchBpmMin] = useState("");
-  const [searchBpmMax, setSearchBpmMax] = useState("");
-  const [searchTagInput, setSearchTagInput] = useState("");
-  const [searchTags, setSearchTags] = useState<string[]>([]);
-  const [searchDirty, setSearchDirty] = useState(false);
+  const [librarySearch, setLibrarySearch] = useState("");
+  const [activePill, setActivePill] = useState<FilterPill>("all");
 
   const { data: band, isLoading } = useQuery({
     queryKey: ["band", bandId],
@@ -78,41 +62,41 @@ export function BandPage() {
   const { data: sessions } = useQuery({
     queryKey: ["sessions", bandId],
     queryFn: () => api.get<SessionSummary[]>(`/bands/${bandId}/sessions`),
-    enabled: !!bandId && tab === "dates",
+    enabled: !!bandId,
   });
 
   const { data: unattributedSongs } = useQuery({
     queryKey: ["songs-unattributed", bandId],
     queryFn: () => api.get<SongSummary[]>(`/bands/${bandId}/songs/search?unattributed=true`),
-    enabled: !!bandId && tab === "dates",
-  });
-
-  const { data: members } = useQuery({
-    queryKey: ["members", bandId],
-    queryFn: () => api.get<BandMember[]>(`/bands/${bandId}/members`),
     enabled: !!bandId,
   });
 
-  // Search results — only fetch when user has triggered a search
-  const searchParams = new URLSearchParams();
-  if (searchQ) searchParams.set("q", searchQ);
-  if (searchKey) searchParams.set("key", searchKey);
-  if (searchBpmMin) searchParams.set("bpm_min", searchBpmMin);
-  if (searchBpmMax) searchParams.set("bpm_max", searchBpmMax);
-  searchTags.forEach((t) => searchParams.append("tags", t));
+  const filteredSessions = useMemo(() => {
+    return (sessions ?? []).filter((s) => {
+      if (!librarySearch) return true;
+      const haystack = [s.label ?? "", s.date, formatDate(s.date)].join(" ").toLowerCase();
+      return haystack.includes(librarySearch.toLowerCase());
+    });
+  }, [sessions, librarySearch]);
 
-  const { data: searchResults, isFetching: searchFetching } = useQuery({
-    queryKey: ["songs-search", bandId, searchParams.toString()],
-    queryFn: () => api.get<SongSummary[]>(`/bands/${bandId}/songs/search?${searchParams}`),
-    enabled: !!bandId && tab === "search" && searchDirty,
-  });
+  const filteredUnattributed = useMemo(() => {
+    return (unattributedSongs ?? []).filter((song) => {
+      const matchesSearch =
+        !librarySearch || song.title.toLowerCase().includes(librarySearch.toLowerCase());
+      const matchesPill =
+        activePill === "all" ||
+        activePill === "commented" ||
+        song.tags.some((t) => t.toLowerCase() === activePill);
+      return matchesSearch && matchesPill;
+    });
+  }, [unattributedSongs, librarySearch, activePill]);
 
   const createMutation = useMutation({
-    mutationFn: () => api.post(`/bands/${bandId}/songs`, { title }),
+    mutationFn: () => api.post(`/bands/${bandId}/songs`, { title: newTitle }),
     onSuccess: () => {
       qc.invalidateQueries({ queryKey: ["sessions", bandId] });
       setShowCreate(false);
-      setTitle("");
+      setNewTitle("");
       setError(null);
     },
     onError: (err) => setError(err instanceof Error ? err.message : "Failed to create song"),
@@ -127,7 +111,6 @@ export function BandPage() {
     const url = `/api/v1/bands/${bandId}/nc-scan/stream`;
 
     try {
-      // credentials: "include" sends the rh_token httpOnly cookie automatically
       const resp = await fetch(url, { credentials: "include" });
       if (!resp.ok || !resp.body) {
         const text = await resp.text().catch(() => resp.statusText);
@@ -178,481 +161,291 @@ export function BandPage() {
     }
   }
 
-  const inviteMutation = useMutation({
-    mutationFn: () => api.post<BandInvite>(`/bands/${bandId}/invites`, {}),
-    onSuccess: (invite) => {
-      const url = `${window.location.origin}/invite/${invite.token}`;
-      setInviteLink(url);
-      navigator.clipboard.writeText(url).catch(() => {});
-    },
-  });
-
-  const removeMemberMutation = useMutation({
-    mutationFn: (memberId: string) => api.delete(`/bands/${bandId}/members/${memberId}`),
-    onSuccess: () => qc.invalidateQueries({ queryKey: ["members", bandId] }),
-  });
-
-  const updateFolderMutation = useMutation({
-    mutationFn: (nc_folder_path: string) =>
-      api.patch(`/bands/${bandId}`, { nc_folder_path }),
-    onSuccess: () => {
-      qc.invalidateQueries({ queryKey: ["band", bandId] });
-      setEditingFolder(false);
-    },
-  });
-
-  const amAdmin = members?.some((m) => m.role === "admin") ?? false;
-
-  function addTag() {
-    const t = searchTagInput.trim();
-    if (t && !searchTags.includes(t)) setSearchTags((prev) => [...prev, t]);
-    setSearchTagInput("");
-  }
-
-  function removeTag(t: string) {
-    setSearchTags((prev) => prev.filter((x) => x !== t));
-  }
-
   if (isLoading) return <div style={{ color: "var(--text-muted)", padding: 32 }}>Loading...</div>;
   if (!band) return <div style={{ color: "var(--danger)", padding: 32 }}>Band not found</div>;
 
+  const hasResults = filteredSessions.length > 0 || filteredUnattributed.length > 0;
+
   return (
-    <div style={{ padding: 32 }}>
-      <div style={{ maxWidth: 720, margin: "0 auto" }}>
-        {/* Band header */}
-        <div style={{ marginBottom: 24 }}>
-          <h1 style={{ color: "var(--accent)", fontFamily: "monospace", margin: "0 0 4px" }}>{band.name}</h1>
-          {band.genre_tags.length > 0 && (
-            <div style={{ display: "flex", gap: 4, marginTop: 8 }}>
-              {band.genre_tags.map((t: string) => (
-                <span key={t} style={{ background: "var(--teal-bg)", color: "var(--teal)", fontSize: 10, padding: "2px 6px", borderRadius: 3, fontFamily: "monospace" }}>{t}</span>
-              ))}
-            </div>
-          )}
-        </div>
+    <div style={{ display: "flex", flexDirection: "column", height: "100%", maxWidth: 760, margin: "0 auto" }}>
 
-        {/* Nextcloud folder */}
-        <div style={{ marginBottom: 24, background: "var(--bg-subtle)", border: "1px solid var(--border)", borderRadius: 8, padding: "12px 16px" }}>
-          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }}>
-            <div>
-              <span style={{ color: "var(--text-muted)", fontSize: 11 }}>NEXTCLOUD SCAN FOLDER</span>
-              <div style={{ fontFamily: "monospace", color: "var(--teal)", fontSize: 13, marginTop: 4 }}>
-                {band.nc_folder_path ?? `bands/${band.slug}/`}
-              </div>
-            </div>
-            {amAdmin && !editingFolder && (
-              <button
-                onClick={() => { setFolderInput(band.nc_folder_path ?? ""); setEditingFolder(true); }}
-                style={{ background: "none", border: "1px solid var(--border)", borderRadius: 6, color: "var(--text-muted)", cursor: "pointer", padding: "4px 10px", fontSize: 11 }}
-              >
-                Edit
-              </button>
-            )}
-          </div>
-          {editingFolder && (
-            <div style={{ marginTop: 10 }}>
-              <input
-                value={folderInput}
-                onChange={(e) => setFolderInput(e.target.value)}
-                placeholder={`bands/${band.slug}/`}
-                style={{ width: "100%", padding: "8px 12px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 7, color: "var(--text)", fontSize: 13, fontFamily: "monospace", boxSizing: "border-box" }}
-              />
-              <div style={{ display: "flex", gap: 8, marginTop: 8 }}>
-                <button
-                  onClick={() => updateFolderMutation.mutate(folderInput)}
-                  disabled={updateFolderMutation.isPending}
-                  style={{ background: "var(--teal)", border: "none", borderRadius: 6, color: "var(--bg)", cursor: "pointer", padding: "6px 14px", fontSize: 12, fontWeight: 600 }}
-                >
-                  Save
-                </button>
-                <button
-                  onClick={() => setEditingFolder(false)}
-                  style={{ background: "none", border: "1px solid var(--border)", borderRadius: 6, color: "var(--text-muted)", cursor: "pointer", padding: "6px 14px", fontSize: 12 }}
-                >
-                  Cancel
-                </button>
-              </div>
-            </div>
-          )}
-        </div>
+      {/* ── Header ─────────────────────────────────────────────── */}
+      <div style={{ padding: "18px 26px 0", flexShrink: 0, borderBottom: "1px solid rgba(255,255,255,0.06)" }}>
+        {/* Title row + search + actions */}
+        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 11 }}>
+          <h1 style={{ fontSize: 17, fontWeight: 500, color: "#eeeef2", margin: 0, flexShrink: 0 }}>
+            Library
+          </h1>
 
-        {/* Members */}
-        <div style={{ marginBottom: 32 }}>
-          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
-            <h2 style={{ color: "var(--text)", margin: 0, fontSize: 16 }}>Members</h2>
-            {amAdmin && (
-              <>
-                <button
-                  onClick={() => inviteMutation.mutate()}
-                  disabled={inviteMutation.isPending}
-                  style={{ background: "none", border: "1px solid var(--border)", borderRadius: 6, color: "var(--accent)", cursor: "pointer", padding: "6px 14px", fontSize: 12 }}
-                >
-                  + Invite
-                </button>
-                
-                {/* Search for users to invite (new feature) */}
-                {/* Temporarily hide user search until backend supports it */}
-              </>
-            )}
+          {/* Search input */}
+          <div style={{ position: "relative", flex: 1, maxWidth: 280 }}>
+            <svg
+              style={{ position: "absolute", left: 10, top: "50%", transform: "translateY(-50%)", opacity: 0.3, pointerEvents: "none", color: "#eeeef2" }}
+              width="13" height="13" viewBox="0 0 13 13" fill="none" stroke="currentColor" strokeWidth="1.5"
+            >
+              <circle cx="5.5" cy="5.5" r="3.5" />
+              <path d="M8.5 8.5l3 3" strokeLinecap="round" />
+            </svg>
+            <input
+              value={librarySearch}
+              onChange={(e) => setLibrarySearch(e.target.value)}
+              placeholder="Search recordings, comments…"
+              style={{
+                width: "100%",
+                padding: "7px 12px 7px 30px",
+                background: "rgba(255,255,255,0.05)",
+                border: "1px solid rgba(255,255,255,0.08)",
+                borderRadius: 7,
+                color: "#e2e2e8",
+                fontSize: 13,
+                fontFamily: "inherit",
+                outline: "none",
+                boxSizing: "border-box",
+              }}
+              onFocus={(e) => (e.currentTarget.style.borderColor = "rgba(232,162,42,0.35)")}
+              onBlur={(e) => (e.currentTarget.style.borderColor = "rgba(255,255,255,0.08)")}
+            />
           </div>
 
-          {inviteLink && (
-            <div style={{ background: "var(--accent-bg)", border: "1px solid var(--accent-border)", borderRadius: 8, padding: "10px 14px", marginBottom: 12 }}>
-              <p style={{ color: "var(--text-muted)", fontSize: 11, margin: "0 0 6px" }}>Invite link (copied to clipboard, valid 72h):</p>
-              <code style={{ color: "var(--accent)", fontSize: 12, wordBreak: "break-all" }}>{inviteLink}</code>
-              <button
-                onClick={() => setInviteLink(null)}
-                style={{ display: "block", marginTop: 8, background: "none", border: "none", color: "var(--text-muted)", cursor: "pointer", fontSize: 11, padding: 0 }}
-              >
-                Dismiss
-              </button>
-            </div>
-          )}
-
-          <div style={{ display: "grid", gap: 6 }}>
-            {members?.map((m) => (
-              <div
-                key={m.id}
-                style={{ background: "var(--bg-subtle)", border: "1px solid var(--border-subtle)", borderRadius: 8, padding: "10px 14px", display: "flex", justifyContent: "space-between", alignItems: "center" }}
-              >
-                <div>
-                  <span style={{ fontWeight: 500 }}>{m.display_name}</span>
-                  <span style={{ color: "var(--text-muted)", fontSize: 11, marginLeft: 10 }}>{m.email}</span>
-                </div>
-                <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
-                  <span style={{
-                    fontSize: 10, fontFamily: "monospace", padding: "2px 6px", borderRadius: 3,
-                    background: m.role === "admin" ? "var(--accent-bg)" : "var(--bg-inset)",
-                    color: m.role === "admin" ? "var(--accent)" : "var(--text-muted)",
-                    border: `1px solid ${m.role === "admin" ? "var(--accent-border)" : "var(--border)"}`,
-                  }}>
-                    {m.role}
-                  </span>
-                  {amAdmin && m.role !== "admin" && (
-                    <button
-                      onClick={() => removeMemberMutation.mutate(m.id)}
-                      style={{ background: "none", border: "none", color: "var(--danger)", cursor: "pointer", fontSize: 11, padding: 0 }}
-                    >
-                      Remove
-                    </button>
-                  )}
-                </div>
-              </div>
-            ))}
-          </div>
-          
-          {/* Admin: Invite Management Section (new feature) */}
-          {amAdmin && <InviteManagement bandId={bandId!} />}
-        </div>
-
-        {/* Recordings header */}
-        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
-          <h2 style={{ color: "var(--text)", margin: 0, fontSize: 16 }}>Recordings</h2>
-          <div style={{ display: "flex", gap: 8 }}>
+          <div style={{ marginLeft: "auto", display: "flex", gap: 8, flexShrink: 0 }}>
             <button
               onClick={startScan}
               disabled={scanning}
-              style={{ background: "none", border: "1px solid var(--border)", borderRadius: 6, color: "var(--teal)", cursor: "pointer", padding: "6px 14px", fontSize: 12 }}
+              style={{
+                background: "none",
+                border: "1px solid rgba(255,255,255,0.09)",
+                borderRadius: 6,
+                color: scanning ? "rgba(255,255,255,0.28)" : "#4dba85",
+                cursor: scanning ? "default" : "pointer",
+                padding: "5px 12px",
+                fontSize: 12,
+                fontFamily: "inherit",
+              }}
             >
               {scanning ? "Scanning…" : "⟳ Scan Nextcloud"}
             </button>
             <button
               onClick={() => { setShowCreate(!showCreate); setError(null); }}
-              style={{ background: "var(--accent)", border: "none", borderRadius: 6, color: "var(--accent-fg)", cursor: "pointer", padding: "6px 14px", fontSize: 12, fontWeight: 600 }}
+              style={{
+                background: "rgba(232,162,42,0.14)",
+                border: "1px solid rgba(232,162,42,0.28)",
+                borderRadius: 6,
+                color: "#e8a22a",
+                cursor: "pointer",
+                padding: "5px 12px",
+                fontSize: 12,
+                fontWeight: 600,
+                fontFamily: "inherit",
+              }}
             >
-              + New Song
+              + Upload
             </button>
           </div>
         </div>
 
-        {scanning && scanProgress && (
-          <div style={{ background: "var(--bg-subtle)", border: "1px solid var(--border)", borderRadius: 8, color: "var(--text-muted)", fontSize: 12, padding: "8px 14px", marginBottom: 8, fontFamily: "monospace" }}>
+        {/* Filter pills */}
+        <div style={{ display: "flex", gap: 5, flexWrap: "wrap", paddingBottom: 14 }}>
+          {PILLS.map((pill) => {
+            const active = activePill === pill;
+            return (
+              <button
+                key={pill}
+                onClick={() => setActivePill(pill)}
+                style={{
+                  padding: "3px 10px",
+                  borderRadius: 20,
+                  cursor: "pointer",
+                  border: `1px solid ${active ? "rgba(232,162,42,0.28)" : "rgba(255,255,255,0.08)"}`,
+                  background: active ? "rgba(232,162,42,0.1)" : "transparent",
+                  color: active ? "#e8a22a" : "rgba(255,255,255,0.3)",
+                  fontSize: 11,
+                  fontFamily: "inherit",
+                  transition: "all 0.12s",
+                  textTransform: "capitalize",
+                }}
+              >
+                {pill}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* ── Scan feedback ─────────────────────────────────────── */}
+      {scanning && scanProgress && (
+        <div style={{ padding: "10px 26px 0", flexShrink: 0 }}>
+          <div style={{ background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255,0.07)", borderRadius: 8, color: "rgba(255,255,255,0.42)", fontSize: 12, padding: "8px 14px", fontFamily: "monospace" }}>
             {scanProgress}
           </div>
-        )}
-        {scanMsg && (
-          <div style={{ background: "var(--teal-bg)", border: "1px solid var(--teal)", borderRadius: 8, color: "var(--teal)", fontSize: 12, padding: "8px 14px", marginBottom: 12 }}>
+        </div>
+      )}
+      {scanMsg && (
+        <div style={{ padding: "10px 26px 0", flexShrink: 0 }}>
+          <div style={{ background: "rgba(61,200,120,0.06)", border: "1px solid rgba(61,200,120,0.25)", borderRadius: 8, color: "#4dba85", fontSize: 12, padding: "8px 14px" }}>
             {scanMsg}
           </div>
-        )}
+        </div>
+      )}
 
-        {showCreate && (
-          <div style={{ background: "var(--bg-subtle)", border: "1px solid var(--border)", borderRadius: 8, padding: 20, marginBottom: 16 }}>
-            {error && <p style={{ color: "var(--danger)", fontSize: 13, marginBottom: 12 }}>{error}</p>}
-            <label style={{ display: "block", color: "var(--text-muted)", fontSize: 11, marginBottom: 6 }}>SONG TITLE</label>
+      {/* ── New song / upload form ─────────────────────────────── */}
+      {showCreate && (
+        <div style={{ padding: "14px 26px 0", flexShrink: 0 }}>
+          <div style={{ background: "rgba(255,255,255,0.025)", border: "1px solid rgba(255,255,255,0.07)", borderRadius: 8, padding: 18 }}>
+            {error && <p style={{ color: "#e07070", fontSize: 13, marginBottom: 12 }}>{error}</p>}
+            <label style={{ display: "block", color: "rgba(255,255,255,0.28)", fontSize: 11, letterSpacing: "0.6px", textTransform: "uppercase", marginBottom: 6 }}>
+              Song title
+            </label>
             <input
-              value={title}
-              onChange={(e) => setTitle(e.target.value)}
-              onKeyDown={(e) => e.key === "Enter" && title && createMutation.mutate()}
-              style={{ width: "100%", padding: "8px 12px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 7, color: "var(--text)", marginBottom: 12, fontSize: 14, boxSizing: "border-box" }}
+              value={newTitle}
+              onChange={(e) => setNewTitle(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && newTitle && createMutation.mutate()}
+              style={{ width: "100%", padding: "8px 12px", background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.08)", borderRadius: 7, color: "#eeeef2", marginBottom: 12, fontSize: 14, fontFamily: "inherit", boxSizing: "border-box", outline: "none" }}
               autoFocus
             />
             <div style={{ display: "flex", gap: 8 }}>
               <button
                 onClick={() => createMutation.mutate()}
-                disabled={!title}
-                style={{ background: "var(--accent)", border: "none", borderRadius: 6, color: "var(--accent-fg)", cursor: "pointer", padding: "8px 18px", fontWeight: 600, fontSize: 13 }}
+                disabled={!newTitle}
+                style={{ background: "rgba(232,162,42,0.14)", border: "1px solid rgba(232,162,42,0.28)", borderRadius: 6, color: "#e8a22a", cursor: newTitle ? "pointer" : "default", padding: "7px 18px", fontWeight: 600, fontSize: 13, fontFamily: "inherit", opacity: newTitle ? 1 : 0.4 }}
               >
                 Create
               </button>
               <button
                 onClick={() => { setShowCreate(false); setError(null); }}
-                style={{ background: "none", border: "1px solid var(--border)", borderRadius: 6, color: "var(--text-muted)", cursor: "pointer", padding: "8px 18px", fontSize: 13 }}
+                style={{ background: "none", border: "1px solid rgba(255,255,255,0.09)", borderRadius: 6, color: "rgba(255,255,255,0.42)", cursor: "pointer", padding: "7px 18px", fontSize: 13, fontFamily: "inherit" }}
               >
                 Cancel
               </button>
             </div>
           </div>
-        )}
-
-        {/* Tabs */}
-        <div style={{ display: "flex", gap: 0, marginBottom: 16, borderBottom: "1px solid var(--border)" }}>
-          {(["dates", "search"] as const).map((t) => (
-            <button
-              key={t}
-              onClick={() => setTab(t)}
-              style={{
-                background: "none",
-                border: "none",
-                borderBottom: `2px solid ${tab === t ? "var(--accent)" : "transparent"}`,
-                color: tab === t ? "var(--accent)" : "var(--text-muted)",
-                cursor: "pointer",
-                padding: "8px 16px",
-                fontSize: 13,
-                fontWeight: tab === t ? 600 : 400,
-                marginBottom: -1,
-              }}
-            >
-              {t === "dates" ? "By Date" : "Search"}
-            </button>
-          ))}
         </div>
+      )}
 
-        {/* By Date tab */}
-        {tab === "dates" && (
-          <div style={{ display: "grid", gap: 6 }}>
-            {sessions?.map((s) => (
-              <Link
-                key={s.id}
-                to={`/bands/${bandId}/sessions/${s.id}`}
-                style={{
-                  background: "var(--bg-subtle)",
-                  border: "1px solid var(--border-subtle)",
-                  borderRadius: 8,
-                  padding: "14px 18px",
-                  textDecoration: "none",
-                  color: "var(--text)",
-                  display: "flex",
-                  justifyContent: "space-between",
-                  alignItems: "center",
-                  gap: 12,
-                }}
-              >
-                <div>
-                  <span style={{ fontFamily: "monospace", color: "var(--text-muted)", fontSize: 10, marginRight: 8 }}>{weekday(s.date)}</span>
-                  <span style={{ fontWeight: 500 }}>{formatDate(s.date)}</span>
-                  {s.label && (
-                    <span style={{ color: "var(--teal)", fontSize: 12, marginLeft: 10 }}>{s.label}</span>
-                  )}
-                </div>
-                <span style={{ color: "var(--text-muted)", fontSize: 12, whiteSpace: "nowrap" }}>
-                  {s.recording_count} recording{s.recording_count !== 1 ? "s" : ""}
-                </span>
-              </Link>
-            ))}
-            {sessions?.length === 0 && !unattributedSongs?.length && (
-              <p style={{ color: "var(--text-muted)", fontSize: 13 }}>
-                No sessions yet. Scan Nextcloud to import from <code style={{ color: "var(--teal)" }}>{band.nc_folder_path ?? `bands/${band.slug}/`}</code>.
-              </p>
-            )}
+      {/* ── Scrollable content ────────────────────────────────── */}
+      <div style={{ flex: 1, overflowY: "auto", padding: "4px 26px 26px" }}>
 
-            {/* Songs not linked to any dated session */}
-            {!!unattributedSongs?.length && (
-              <div style={{ marginTop: sessions?.length ? 24 : 0 }}>
-                <div style={{ color: "var(--text-muted)", fontSize: 11, fontFamily: "monospace", letterSpacing: 1, marginBottom: 8 }}>
-                  UNATTRIBUTED RECORDINGS
-                </div>
-                <div style={{ display: "grid", gap: 6 }}>
-                  {unattributedSongs.map((song) => (
-                    <Link
-                      key={song.id}
-                      to={`/bands/${bandId}/songs/${song.id}`}
-                      style={{
-                        background: "var(--bg-subtle)",
-                        border: "1px solid var(--border-subtle)",
-                        borderRadius: 8,
-                        padding: "14px 18px",
-                        textDecoration: "none",
-                        color: "var(--text)",
-                        display: "flex",
-                        justifyContent: "space-between",
-                        alignItems: "center",
-                        gap: 12,
-                      }}
-                    >
-                      <div style={{ minWidth: 0 }}>
-                        <div style={{ fontWeight: 500, marginBottom: 4 }}>{song.title}</div>
-                        <div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
-                          {song.tags.map((t) => (
-                            <span key={t} style={{ background: "var(--teal-bg)", color: "var(--teal)", fontSize: 9, padding: "1px 6px", borderRadius: 3, fontFamily: "monospace" }}>{t}</span>
-                          ))}
-                        </div>
-                      </div>
-                      <span style={{ color: "var(--text-muted)", fontSize: 12, whiteSpace: "nowrap" }}>
-                        <span style={{ background: "var(--bg-subtle)", borderRadius: 4, padding: "2px 6px", marginRight: 8, fontFamily: "monospace", fontSize: 10 }}>{song.status}</span>
-                        {song.version_count} version{song.version_count !== 1 ? "s" : ""}
-                      </span>
-                    </Link>
-                  ))}
-                </div>
-              </div>
-            )}
-          </div>
-        )}
-
-        {/* Search tab */}
-        {tab === "search" && (
-          <div>
-            {/* Filters */}
-            <div style={{ background: "var(--bg-subtle)", border: "1px solid var(--border)", borderRadius: 8, padding: 16, marginBottom: 16 }}>
-              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginBottom: 10 }}>
-                <div>
-                  <label style={{ display: "block", color: "var(--text-muted)", fontSize: 10, marginBottom: 4 }}>TITLE</label>
-                  <input
-                    value={searchQ}
-                    onChange={(e) => setSearchQ(e.target.value)}
-                    onKeyDown={(e) => { if (e.key === "Enter") { setSearchDirty(true); qc.invalidateQueries({ queryKey: ["songs-search", bandId] }); } }}
-                    placeholder="Search by name…"
-                    style={{ width: "100%", padding: "8px 12px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 7, color: "var(--text)", fontSize: 13, boxSizing: "border-box" }}
-                  />
-                </div>
-                <div>
-                  <label style={{ display: "block", color: "var(--text-muted)", fontSize: 10, marginBottom: 4 }}>KEY</label>
-                  <input
-                    value={searchKey}
-                    onChange={(e) => setSearchKey(e.target.value)}
-                    placeholder="e.g. Am, C, F#"
-                    style={{ width: "100%", padding: "8px 12px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 7, color: "var(--text)", fontSize: 13, boxSizing: "border-box" }}
-                  />
-                </div>
-                <div>
-                  <label style={{ display: "block", color: "var(--text-muted)", fontSize: 10, marginBottom: 4 }}>BPM MIN</label>
-                  <input
-                    value={searchBpmMin}
-                    onChange={(e) => setSearchBpmMin(e.target.value)}
-                    type="number"
-                    min={0}
-                    placeholder="e.g. 80"
-                    style={{ width: "100%", padding: "8px 12px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 7, color: "var(--text)", fontSize: 13, boxSizing: "border-box" }}
-                  />
-                </div>
-                <div>
-                  <label style={{ display: "block", color: "var(--text-muted)", fontSize: 10, marginBottom: 4 }}>BPM MAX</label>
-                  <input
-                    value={searchBpmMax}
-                    onChange={(e) => setSearchBpmMax(e.target.value)}
-                    type="number"
-                    min={0}
-                    placeholder="e.g. 140"
-                    style={{ width: "100%", padding: "8px 12px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 7, color: "var(--text)", fontSize: 13, boxSizing: "border-box" }}
-                  />
-                </div>
-              </div>
-
-              {/* Tag filter */}
-              <div>
-                <label style={{ display: "block", color: "var(--text-muted)", fontSize: 10, marginBottom: 4 }}>TAGS (must have all)</label>
-                <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginBottom: 6 }}>
-                  {searchTags.map((t) => (
-                    <span
-                      key={t}
-                      style={{ background: "var(--teal-bg)", color: "var(--teal)", fontSize: 11, padding: "2px 8px", borderRadius: 12, fontFamily: "monospace", display: "flex", alignItems: "center", gap: 4 }}
-                    >
-                      {t}
-                      <button
-                        onClick={() => removeTag(t)}
-                        style={{ background: "none", border: "none", color: "var(--teal)", cursor: "pointer", fontSize: 12, padding: 0, lineHeight: 1 }}
-                      >×</button>
-                    </span>
-                  ))}
-                </div>
-                <div style={{ display: "flex", gap: 6 }}>
-                  <input
-                    value={searchTagInput}
-                    onChange={(e) => setSearchTagInput(e.target.value)}
-                    onKeyDown={(e) => e.key === "Enter" && addTag()}
-                    placeholder="Add tag…"
-                    style={{ flex: 1, padding: "6px 10px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 7, color: "var(--text)", fontSize: 12 }}
-                  />
-                  <button
-                    onClick={addTag}
-                    style={{ background: "none", border: "1px solid var(--border)", borderRadius: 6, color: "var(--teal)", cursor: "pointer", padding: "6px 10px", fontSize: 12 }}
-                  >
-                    +
-                  </button>
-                </div>
-              </div>
-
-              <button
-                onClick={() => { setSearchDirty(true); qc.invalidateQueries({ queryKey: ["songs-search", bandId] }); }}
-                style={{ marginTop: 12, background: "var(--accent)", border: "none", borderRadius: 6, color: "var(--accent-fg)", cursor: "pointer", padding: "7px 18px", fontSize: 13, fontWeight: 600 }}
-              >
-                Search
-              </button>
+        {/* Sessions — one date group per session */}
+        {filteredSessions.map((s) => (
+          <div key={s.id} style={{ marginTop: 18 }}>
+            {/* Date group header */}
+            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8 }}>
+              <span style={{ fontSize: 10, fontWeight: 500, color: "rgba(255,255,255,0.32)", textTransform: "uppercase", letterSpacing: "0.6px", whiteSpace: "nowrap" }}>
+                {formatDateLabel(s.date)}{s.label ? ` — ${s.label}` : ""}
+              </span>
+              <div style={{ flex: 1, height: 1, background: "rgba(255,255,255,0.05)" }} />
+              <span style={{ fontSize: 10, color: "rgba(255,255,255,0.18)", whiteSpace: "nowrap" }}>
+                {s.recording_count} recording{s.recording_count !== 1 ? "s" : ""}
+              </span>
             </div>
 
-            {/* Results */}
-            {searchFetching && <p style={{ color: "var(--text-muted)", fontSize: 13 }}>Searching…</p>}
-            {!searchFetching && searchDirty && (
-              <div style={{ display: "grid", gap: 8 }}>
-                {searchResults?.map((song) => (
-                  <Link
-                    key={song.id}
-                    to={`/bands/${bandId}/songs/${song.id}`}
-                    style={{
-                      background: "var(--bg-subtle)",
-                      border: "1px solid var(--border-subtle)",
-                      borderRadius: 8,
-                      padding: "14px 18px",
-                      textDecoration: "none",
-                      color: "var(--text)",
-                      display: "flex",
-                      justifyContent: "space-between",
-                      alignItems: "center",
-                      gap: 12,
-                    }}
-                  >
-                    <div style={{ minWidth: 0 }}>
-                      <div style={{ fontWeight: 500, marginBottom: 4 }}>{song.title}</div>
-                      <div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
-                        {song.tags.map((t) => (
-                          <span key={t} style={{ background: "var(--teal-bg)", color: "var(--teal)", fontSize: 9, padding: "1px 6px", borderRadius: 3, fontFamily: "monospace" }}>{t}</span>
-                        ))}
-                        {song.global_key && (
-                          <span style={{ background: "var(--bg-subtle)", color: "var(--text-muted)", fontSize: 9, padding: "1px 6px", borderRadius: 3, fontFamily: "monospace" }}>{song.global_key}</span>
-                        )}
-                        {song.global_bpm && (
-                          <span style={{ background: "var(--bg-subtle)", color: "var(--text-muted)", fontSize: 9, padding: "1px 6px", borderRadius: 3, fontFamily: "monospace" }}>{song.global_bpm.toFixed(0)} BPM</span>
-                        )}
-                      </div>
-                    </div>
-                    <div style={{ color: "var(--text-muted)", fontSize: 12, whiteSpace: "nowrap" }}>
-                      <span style={{ background: "var(--bg-subtle)", borderRadius: 4, padding: "2px 6px", marginRight: 8, fontFamily: "monospace", fontSize: 10 }}>{song.status}</span>
-                      {song.version_count} version{song.version_count !== 1 ? "s" : ""}
-                    </div>
-                  </Link>
-                ))}
-                {searchResults?.length === 0 && (
-                  <p style={{ color: "var(--text-muted)", fontSize: 13 }}>No songs match your filters.</p>
-                )}
-              </div>
-            )}
-            {!searchDirty && (
-              <p style={{ color: "var(--text-muted)", fontSize: 13 }}>Enter filters above and hit Search.</p>
-            )}
+            {/* Session row */}
+            <Link
+              to={`/bands/${bandId}/sessions/${s.id}`}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: 11,
+                padding: "9px 13px",
+                borderRadius: 8,
+                background: "rgba(255,255,255,0.02)",
+                border: "1px solid rgba(255,255,255,0.04)",
+                textDecoration: "none",
+                cursor: "pointer",
+                transition: "background 0.12s, border-color 0.12s",
+              }}
+              onMouseEnter={(e) => {
+                (e.currentTarget as HTMLElement).style.background = "rgba(255,255,255,0.048)";
+                (e.currentTarget as HTMLElement).style.borderColor = "rgba(255,255,255,0.08)";
+              }}
+              onMouseLeave={(e) => {
+                (e.currentTarget as HTMLElement).style.background = "rgba(255,255,255,0.02)";
+                (e.currentTarget as HTMLElement).style.borderColor = "rgba(255,255,255,0.04)";
+              }}
+            >
+              {/* Session name */}
+              <span style={{ flex: 1, fontSize: 13, color: "#c8c8d0", fontFamily: "'SF Mono','Fira Code',monospace", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                {s.label ?? formatDate(s.date)}
+              </span>
+
+              {/* Recording count */}
+              <span style={{ fontSize: 11, color: "rgba(255,255,255,0.28)", whiteSpace: "nowrap", flexShrink: 0 }}>
+                {s.recording_count}
+              </span>
+            </Link>
           </div>
+        ))}
+
+        {/* Unattributed recordings */}
+        {filteredUnattributed.length > 0 && (
+          <div style={{ marginTop: filteredSessions.length > 0 ? 28 : 18 }}>
+            {/* Section header */}
+            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8 }}>
+              <span style={{ fontSize: 10, fontWeight: 500, color: "rgba(255,255,255,0.32)", textTransform: "uppercase", letterSpacing: "0.6px", whiteSpace: "nowrap" }}>
+                Unattributed
+              </span>
+              <div style={{ flex: 1, height: 1, background: "rgba(255,255,255,0.05)" }} />
+              <span style={{ fontSize: 10, color: "rgba(255,255,255,0.18)", whiteSpace: "nowrap" }}>
+                {filteredUnattributed.length} track{filteredUnattributed.length !== 1 ? "s" : ""}
+              </span>
+            </div>
+
+            <div style={{ display: "grid", gap: 3 }}>
+              {filteredUnattributed.map((song) => (
+                <Link
+                  key={song.id}
+                  to={`/bands/${bandId}/songs/${song.id}`}
+                  style={{ display: "flex", alignItems: "center", gap: 11, padding: "9px 13px", borderRadius: 8, background: "rgba(255,255,255,0.02)", border: "1px solid rgba(255,255,255,0.04)", textDecoration: "none", transition: "background 0.12s, border-color 0.12s" }}
+                  onMouseEnter={(e) => {
+                    (e.currentTarget as HTMLElement).style.background = "rgba(255,255,255,0.048)";
+                    (e.currentTarget as HTMLElement).style.borderColor = "rgba(255,255,255,0.08)";
+                  }}
+                  onMouseLeave={(e) => {
+                    (e.currentTarget as HTMLElement).style.background = "rgba(255,255,255,0.02)";
+                    (e.currentTarget as HTMLElement).style.borderColor = "rgba(255,255,255,0.04)";
+                  }}
+                >
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <div style={{ fontSize: 13, color: "#c8c8d0", fontFamily: "'SF Mono','Fira Code',monospace", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", marginBottom: 3 }}>
+                      {song.title}
+                    </div>
+                    <div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
+                      {song.tags.map((t) => (
+                        <span key={t} style={{ background: "rgba(61,200,120,0.08)", color: "#4dba85", fontSize: 9, padding: "1px 6px", borderRadius: 3, fontFamily: "monospace" }}>
+                          {t}
+                        </span>
+                      ))}
+                      {song.global_key && (
+                        <span style={{ background: "rgba(255,255,255,0.05)", color: "rgba(255,255,255,0.28)", fontSize: 9, padding: "1px 6px", borderRadius: 3, fontFamily: "monospace" }}>
+                          {song.global_key}
+                        </span>
+                      )}
+                      {song.global_bpm && (
+                        <span style={{ background: "rgba(255,255,255,0.05)", color: "rgba(255,255,255,0.28)", fontSize: 9, padding: "1px 6px", borderRadius: 3, fontFamily: "monospace" }}>
+                          {song.global_bpm.toFixed(0)} BPM
+                        </span>
+                      )}
+                    </div>
+                  </div>
+
+                  <span style={{ fontSize: 11, color: "rgba(255,255,255,0.28)", whiteSpace: "nowrap", flexShrink: 0 }}>
+                    {song.version_count} ver{song.version_count !== 1 ? "s" : ""}
+                  </span>
+                </Link>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Empty state */}
+        {!hasResults && (
+          <p style={{ color: "rgba(255,255,255,0.28)", fontSize: 13, padding: "24px 0 8px" }}>
+            {librarySearch
+              ? "No results match your search."
+              : "No sessions yet. Scan Nextcloud or create a song to get started."}
+          </p>
         )}
       </div>
     </div>
   );
 }
+

web/src/pages/BandSettingsPage.test.md

@@ -0,0 +1,151 @@
+# BandSettingsPage — Test Cases
+
+Feature branch: `feature/main-view-refactor`
+
+---
+
+## 1. BandPage cleanliness
+
+**TC-01** — BandPage renders no member list
+Navigate to `/bands/:bandId`. Assert that no member name, email, or role badge is rendered.
+
+**TC-02** — BandPage renders no invite button
+Navigate to `/bands/:bandId`. Assert that "+ Invite" is absent.
+
+**TC-03** — BandPage renders no NC folder widget
+Navigate to `/bands/:bandId`. Assert that "NEXTCLOUD SCAN FOLDER" / "SCAN PATH" label is absent.
+
+**TC-04** — BandPage still shows sessions
+Navigate to `/bands/:bandId`. Assert that dated session rows are rendered (or empty-state message if no sessions).
+
+**TC-05** — BandPage still shows Scan Nextcloud button
+Navigate to `/bands/:bandId`. Assert "⟳ Scan Nextcloud" button is present.
+
+**TC-06** — BandPage still shows + New Song button
+Navigate to `/bands/:bandId`. Assert "+ New Song" button is present.
+
+**TC-07** — BandPage search tab remains functional
+Click "Search" tab, enter a query, click Search. Assert results render or empty state shown.
+
+---
+
+## 2. Navigation — sidebar
+
+**TC-08** — Band settings nav items appear when band is active
+Log in, select any band. Assert sidebar contains "Members", "Storage", "Band Settings" nav items under a "Band Settings" section label.
+
+**TC-09** — Band settings nav items absent when no band active
+Navigate to `/` (no band selected). Assert sidebar does NOT show "Members", "Storage", "Band Settings" items.
+
+**TC-10** — Members nav item highlights correctly
+Navigate to `/bands/:bandId/settings/members`. Assert "Members" nav item has amber active style; "Storage" and "Band Settings" do not.
+
+**TC-11** — Storage nav item highlights correctly
+Navigate to `/bands/:bandId/settings/storage`. Assert "Storage" nav item is active.
+
+**TC-12** — Band Settings nav item highlights correctly
+Navigate to `/bands/:bandId/settings/band`. Assert "Band Settings" nav item is active.
+
+**TC-13** — Switching bands from band switcher while on settings stays on the same panel type
+On `/bands/A/settings/storage`, switch to band B. Assert navigation goes to `/bands/B` (library) — band switcher navigates to library, which is correct. Band settings panel is band-specific.
+
+---
+
+## 3. Routing
+
+**TC-14** — Base settings URL redirects to members panel
+Navigate directly to `/bands/:bandId/settings`. Assert browser URL redirects to `/bands/:bandId/settings/members` without a visible flash.
+
+**TC-15** — Direct URL navigation to storage panel works
+Navigate directly to `/bands/:bandId/settings/storage`. Assert Storage panel content is rendered.
+
+**TC-16** — Direct URL navigation to band panel works
+Navigate directly to `/bands/:bandId/settings/band`. Assert Band Settings panel content is rendered.
+
+**TC-17** — Unknown panel falls back to members
+Navigate to `/bands/:bandId/settings/unknown-panel`. Assert Members panel is rendered (fallback in `activePanel` logic).
+
+---
+
+## 4. Members panel — access control
+
+**TC-18** — Admin sees + Invite button
+Log in as admin, navigate to `/bands/:bandId/settings/members`. Assert "+ Invite" button is present.
+
+**TC-19** — Non-admin does not see + Invite button
+Log in as member (non-admin), navigate to `/bands/:bandId/settings/members`. Assert "+ Invite" button is absent.
+
+**TC-20** — Admin sees Remove button on non-admin members
+Log in as admin. Assert "Remove" button appears next to member-role users.
+
+**TC-21** — Non-admin does not see Remove button
+Log in as member. Assert no "Remove" button appears for any member.
+
+**TC-22** — Admin does not see Remove button for other admins
+Log in as admin. Assert "Remove" button is absent next to rows where role is "admin".
+
+**TC-23** — Pending Invites section only visible to admins
+Log in as member. Assert "Pending Invites" heading is absent.
+
+---
+
+## 5. Members panel — functionality
+
+**TC-24** — Generate invite creates a link and copies to clipboard
+As admin, click "+ Invite". Assert an invite URL (`/invite/<token>`) appears in the UI and `navigator.clipboard.writeText` was called with it.
+
+**TC-25** — Dismiss hides the invite link banner
+After generating an invite, click "Dismiss". Assert the invite link banner disappears.
+
+**TC-26** — Remove member removes from list
+As admin, click "Remove" on a member-role row. Mock the DELETE endpoint to 200. Assert the members query is invalidated and the member disappears.
+
+**TC-27** — Revoke invite removes from pending list
+As admin, click "Revoke" on a pending invite. Mock the DELETE endpoint. Assert the invites query is invalidated.
+
+**TC-28** — Copy invite link writes to clipboard
+In the pending invites list, click "Copy" on an invite row. Assert `navigator.clipboard.writeText` was called with the correct URL.
+
+---
+
+## 6. Storage panel — access control and functionality
+
+**TC-29** — Admin sees Edit button on NC folder path
+Log in as admin, navigate to storage panel. Assert "Edit" button is visible next to the scan path.
+
+**TC-30** — Non-admin does not see Edit button
+Log in as member, navigate to storage panel. Assert "Edit" button is absent.
+
+**TC-31** — Editing NC folder path and saving updates the band
+As admin, click Edit, change the path, click Save. Mock PATCH `/bands/:bandId` to 200. Assert band query is invalidated and edit form closes.
+
+**TC-32** — Cancel edit closes form without saving
+As admin, click Edit, change the path, click Cancel. Assert the form disappears and PATCH was not called.
+
+**TC-33** — Default path shown when nc_folder_path is null
+When `band.nc_folder_path` is null, assert the displayed path is `bands/<slug>/`.
+
+---
+
+## 7. Band settings panel — access control and functionality
+
+**TC-34** — Admin sees Save changes button
+Log in as admin, navigate to band panel. Assert "Save changes" button is present.
+
+**TC-35** — Non-admin does not see Save button, sees info text
+Log in as member, navigate to band panel. Assert "Save changes" absent and "Only admins can edit band settings." is shown.
+
+**TC-36** — Name field is disabled for non-admins
+Log in as member. Assert the band name input has the `disabled` attribute.
+
+**TC-37** — Saving band name and tags calls PATCH
+As admin, change band name to "New Name", click Save. Assert PATCH `/bands/:bandId` called with `{ name: "New Name", genre_tags: [...] }`.
+
+**TC-38** — Adding a genre tag updates the tag list
+Type "punk" in the tag input, press Enter. Assert "punk" pill appears in the tag list.
+
+**TC-39** — Removing a genre tag removes its pill
+Click the × on a genre tag pill. Assert the pill disappears from the list.
+
+**TC-40** — Delete band button disabled for non-admins
+Log in as member. Assert the "Delete band" button has the `disabled` attribute.

web/src/pages/BandSettingsPage.test.tsx

@@ -0,0 +1,320 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { screen, fireEvent, waitFor } from "@testing-library/react";
+import { renderWithProviders } from "../test/helpers";
+import { BandSettingsPage } from "./BandSettingsPage";
+
+// ── Shared fixtures ───────────────────────────────────────────────────────────
+
+const ME = { id: "m-me", email: "s@example.com", display_name: "Steffen", avatar_url: null, created_at: "" };
+
+const BAND = {
+  id: "band-1",
+  name: "Loud Hands",
+  slug: "loud-hands",
+  genre_tags: ["post-rock", "math-rock"],
+  nc_folder_path: "bands/loud-hands/",
+};
+
+const MEMBERS_ADMIN = [
+  { id: "m-me", display_name: "Steffen", email: "s@example.com", role: "admin", joined_at: "" },
+  { id: "m-2", display_name: "Alex", email: "a@example.com", role: "member", joined_at: "" },
+];
+
+const MEMBERS_NON_ADMIN = [
+  { id: "m-me", display_name: "Steffen", email: "s@example.com", role: "member", joined_at: "" },
+  { id: "m-2", display_name: "Alex", email: "a@example.com", role: "admin", joined_at: "" },
+];
+
+const INVITES_RESPONSE = {
+  invites: [
+    {
+      id: "inv-1",
+      token: "abcdef1234567890abcd",
+      role: "member",
+      expires_at: new Date(Date.now() + 48 * 60 * 60 * 1000).toISOString(),
+      is_used: false,
+      band_id: "band-1",
+      created_at: new Date().toISOString(),
+      used_at: null,
+    },
+  ],
+  total: 1,
+  pending: 1,
+};
+
+// ── Mocks ─────────────────────────────────────────────────────────────────────
+
+const {
+  mockGetBand,
+  mockApiGet,
+  mockApiPost,
+  mockApiPatch,
+  mockApiDelete,
+  mockListInvites,
+  mockRevokeInvite,
+} = vi.hoisted(() => ({
+  mockGetBand: vi.fn(),
+  mockApiGet: vi.fn(),
+  mockApiPost: vi.fn(),
+  mockApiPatch: vi.fn(),
+  mockApiDelete: vi.fn(),
+  mockListInvites: vi.fn(),
+  mockRevokeInvite: vi.fn(),
+}));
+
+vi.mock("../api/bands", () => ({ getBand: mockGetBand }));
+vi.mock("../api/invites", () => ({
+  listInvites: mockListInvites,
+  revokeInvite: mockRevokeInvite,
+}));
+vi.mock("../api/client", () => ({
+  api: {
+    get: mockApiGet,
+    post: mockApiPost,
+    patch: mockApiPatch,
+    delete: mockApiDelete,
+  },
+  isLoggedIn: vi.fn().mockReturnValue(true),
+}));
+
+// ── Default mock implementations ─────────────────────────────────────────────
+
+afterEach(() => vi.clearAllMocks());
+
+function setupApiGet(members: typeof MEMBERS_ADMIN) {
+  mockApiGet.mockImplementation((url: string) => {
+    if (url === "/auth/me") return Promise.resolve(ME);
+    if (url.includes("/members")) return Promise.resolve(members);
+    return Promise.resolve([]);
+  });
+}
+
+beforeEach(() => {
+  mockGetBand.mockResolvedValue(BAND);
+  setupApiGet(MEMBERS_ADMIN);
+  mockApiPost.mockResolvedValue({ id: "inv-new", token: "newtoken123", role: "member", expires_at: "" });
+  mockApiPatch.mockResolvedValue(BAND);
+  mockApiDelete.mockResolvedValue({});
+  mockListInvites.mockResolvedValue(INVITES_RESPONSE);
+  mockRevokeInvite.mockResolvedValue({});
+});
+
+// ── Render helpers ────────────────────────────────────────────────────────────
+
+function renderPanel(panel: "members" | "storage" | "band", members = MEMBERS_ADMIN) {
+  setupApiGet(members);
+  return renderWithProviders(<BandSettingsPage />, {
+    path: "/bands/:bandId/settings/:panel",
+    route: `/bands/band-1/settings/${panel}`,
+  });
+}
+
+// ── Routing ───────────────────────────────────────────────────────────────────
+
+describe("BandSettingsPage — routing (TC-15 to TC-17)", () => {
+  it("TC-15: renders Storage panel for /settings/storage", async () => {
+    renderPanel("storage");
+    const heading = await screen.findByRole("heading", { name: /storage/i });
+    expect(heading).toBeTruthy();
+  });
+
+  it("TC-16: renders Band Settings panel for /settings/band", async () => {
+    renderPanel("band");
+    const heading = await screen.findByRole("heading", { name: /band settings/i });
+    expect(heading).toBeTruthy();
+  });
+
+  it("TC-17: unknown panel falls back to Members", async () => {
+    mockApiGet.mockResolvedValue(MEMBERS_ADMIN);
+    renderWithProviders(<BandSettingsPage />, {
+      path: "/bands/:bandId/settings/:panel",
+      route: "/bands/band-1/settings/unknown-panel",
+    });
+    const heading = await screen.findByRole("heading", { name: /members/i });
+    expect(heading).toBeTruthy();
+  });
+});
+
+// ── Members panel — access control ───────────────────────────────────────────
+
+describe("BandSettingsPage — Members panel access control (TC-18 to TC-23)", () => {
+  it("TC-18: admin sees + Invite button", async () => {
+    renderPanel("members", MEMBERS_ADMIN);
+    const btn = await screen.findByText(/\+ invite/i);
+    expect(btn).toBeTruthy();
+  });
+
+  it("TC-19: non-admin does not see + Invite button", async () => {
+    renderPanel("members", MEMBERS_NON_ADMIN);
+    await screen.findByText("Alex"); // wait for members to load
+    expect(screen.queryByText(/\+ invite/i)).toBeNull();
+  });
+
+  it("TC-20: admin sees Remove button on non-admin members", async () => {
+    renderPanel("members", MEMBERS_ADMIN);
+    const removeBtn = await screen.findByText("Remove");
+    expect(removeBtn).toBeTruthy();
+  });
+
+  it("TC-21: non-admin does not see any Remove button", async () => {
+    renderPanel("members", MEMBERS_NON_ADMIN);
+    await screen.findByText("Alex");
+    expect(screen.queryByText("Remove")).toBeNull();
+  });
+
+  it("TC-22: admin does not see Remove on admin-role members", async () => {
+    renderPanel("members", MEMBERS_ADMIN);
+    await screen.findByText("Steffen");
+    // Only one Remove button — for Alex (member), not Steffen (admin)
+    const removeBtns = screen.queryAllByText("Remove");
+    expect(removeBtns).toHaveLength(1);
+  });
+
+  it("TC-23: Pending Invites section hidden from non-admins", async () => {
+    renderPanel("members", MEMBERS_NON_ADMIN);
+    await screen.findByText("Alex");
+    expect(screen.queryByText(/pending invites/i)).toBeNull();
+  });
+});
+
+// ── Members panel — functionality ─────────────────────────────────────────────
+
+describe("BandSettingsPage — Members panel functionality (TC-24 to TC-28)", () => {
+  it("TC-24: generate invite shows link in UI", async () => {
+    const token = "tok123abc456def789gh";
+    mockApiPost.mockResolvedValue({ id: "inv-new", token, role: "member", expires_at: "" });
+    renderPanel("members", MEMBERS_ADMIN);
+    const inviteBtn = await screen.findByText(/\+ invite/i);
+    fireEvent.click(inviteBtn);
+    const linkEl = await screen.findByText(new RegExp(token));
+    expect(linkEl).toBeTruthy();
+  });
+
+  it("TC-26: remove member calls DELETE endpoint", async () => {
+    renderPanel("members", MEMBERS_ADMIN);
+    const removeBtn = await screen.findByText("Remove");
+    fireEvent.click(removeBtn);
+    await waitFor(() => {
+      expect(mockApiDelete).toHaveBeenCalledWith("/bands/band-1/members/m-2");
+    });
+  });
+
+  it("TC-27: revoke invite calls revokeInvite and refetches", async () => {
+    renderPanel("members", MEMBERS_ADMIN);
+    const revokeBtn = await screen.findByText("Revoke");
+    fireEvent.click(revokeBtn);
+    await waitFor(() => {
+      expect(mockRevokeInvite).toHaveBeenCalledWith("inv-1");
+    });
+  });
+});
+
+// ── Storage panel — access control ───────────────────────────────────────────
+
+describe("BandSettingsPage — Storage panel access control (TC-29 to TC-33)", () => {
+  it("TC-29: admin sees Edit button", async () => {
+    renderPanel("storage", MEMBERS_ADMIN);
+    const edit = await screen.findByText("Edit");
+    expect(edit).toBeTruthy();
+  });
+
+  it("TC-30: non-admin does not see Edit button", async () => {
+    renderPanel("storage", MEMBERS_NON_ADMIN);
+    await screen.findByText(/scan path/i);
+    expect(screen.queryByText("Edit")).toBeNull();
+  });
+
+  it("TC-31: saving NC folder path calls PATCH and closes form", async () => {
+    renderPanel("storage", MEMBERS_ADMIN);
+    fireEvent.click(await screen.findByText("Edit"));
+    const input = screen.getByPlaceholderText(/bands\/loud-hands\//i);
+    fireEvent.change(input, { target: { value: "bands/custom-path/" } });
+    fireEvent.click(screen.getByText("Save"));
+    await waitFor(() => {
+      expect(mockApiPatch).toHaveBeenCalledWith(
+        "/bands/band-1",
+        { nc_folder_path: "bands/custom-path/" }
+      );
+    });
+  });
+
+  it("TC-32: cancel edit closes form without calling PATCH", async () => {
+    renderPanel("storage", MEMBERS_ADMIN);
+    fireEvent.click(await screen.findByText("Edit"));
+    fireEvent.click(screen.getByText("Cancel"));
+    await waitFor(() => {
+      expect(mockApiPatch).not.toHaveBeenCalled();
+    });
+    expect(screen.queryByText("Save")).toBeNull();
+  });
+
+  it("TC-33: shows default path when nc_folder_path is null", async () => {
+    mockGetBand.mockResolvedValueOnce({ ...BAND, nc_folder_path: null });
+    renderPanel("storage", MEMBERS_ADMIN);
+    const path = await screen.findByText("bands/loud-hands/");
+    expect(path).toBeTruthy();
+  });
+});
+
+// ── Band settings panel — access control ──────────────────────────────────────
+
+describe("BandSettingsPage — Band Settings panel access control (TC-34 to TC-40)", () => {
+  it("TC-34: admin sees Save changes button", async () => {
+    renderPanel("band", MEMBERS_ADMIN);
+    const btn = await screen.findByText(/save changes/i);
+    expect(btn).toBeTruthy();
+  });
+
+  it("TC-35: non-admin sees info text instead of Save button", async () => {
+    renderPanel("band", MEMBERS_NON_ADMIN);
+    // Wait for the band panel heading so we know the page has fully loaded
+    await screen.findByRole("heading", { name: /band settings/i });
+    // Once queries settle, the BandPanel-level info text should appear and Save should be absent
+    await waitFor(() => {
+      expect(screen.getByText(/only admins can edit band settings/i)).toBeTruthy();
+    });
+    expect(screen.queryByText(/save changes/i)).toBeNull();
+  });
+
+  it("TC-36: name field is disabled for non-admins", async () => {
+    renderPanel("band", MEMBERS_NON_ADMIN);
+    const input = await screen.findByDisplayValue("Loud Hands");
+    expect((input as HTMLInputElement).disabled).toBe(true);
+  });
+
+  it("TC-37: saving calls PATCH with name and genre_tags", async () => {
+    renderPanel("band", MEMBERS_ADMIN);
+    await screen.findByText(/save changes/i);
+    fireEvent.click(screen.getByText(/save changes/i));
+    await waitFor(() => {
+      expect(mockApiPatch).toHaveBeenCalledWith("/bands/band-1", {
+        name: "Loud Hands",
+        genre_tags: ["post-rock", "math-rock"],
+      });
+    });
+  });
+
+  it("TC-38: adding a genre tag shows the new pill", async () => {
+    renderPanel("band", MEMBERS_ADMIN);
+    const tagInput = await screen.findByPlaceholderText(/add genre tag/i);
+    fireEvent.change(tagInput, { target: { value: "punk" } });
+    fireEvent.keyDown(tagInput, { key: "Enter" });
+    expect(screen.getByText("punk")).toBeTruthy();
+  });
+
+  it("TC-39: removing a genre tag removes its pill", async () => {
+    renderPanel("band", MEMBERS_ADMIN);
+    // Find the × button next to "post-rock"
+    await screen.findByText("post-rock");
+    // There are two tags; find the × buttons
+    const removeButtons = screen.getAllByText("×");
+    fireEvent.click(removeButtons[0]);
+    expect(screen.queryByText("post-rock")).toBeNull();
+  });
+
+  it("TC-40: Delete band button is disabled for non-admins", async () => {
+    renderPanel("band", MEMBERS_NON_ADMIN);
+    const deleteBtn = await screen.findByText(/delete band/i);
+    expect((deleteBtn as HTMLButtonElement).disabled).toBe(true);
+  });
+});

web/src/pages/BandSettingsPage.tsx

@@ -0,0 +1,867 @@
+import { useState } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { getBand } from "../api/bands";
+import { api } from "../api/client";
+import { listInvites, revokeInvite } from "../api/invites";
+import type { MemberRead } from "../api/auth";
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+interface BandMember {
+  id: string;
+  display_name: string;
+  email: string;
+  role: string;
+  joined_at: string;
+}
+
+interface BandInvite {
+  id: string;
+  token: string;
+  role: string;
+  expires_at: string | null;
+  is_used: boolean;
+}
+
+type Panel = "members" | "storage" | "band";
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function formatExpiry(expiresAt: string | null | undefined): string {
+  if (!expiresAt) return "No expiry";
+  const date = new Date(expiresAt);
+  const diffHours = Math.floor((date.getTime() - Date.now()) / (1000 * 60 * 60));
+  if (diffHours <= 0) return "Expired";
+  if (diffHours < 24) return `Expires in ${diffHours}h`;
+  return `Expires in ${Math.floor(diffHours / 24)}d`;
+}
+
+function isActive(invite: BandInvite): boolean {
+  return !invite.is_used && !!invite.expires_at && new Date(invite.expires_at) > new Date();
+}
+
+// ── Panel nav item ────────────────────────────────────────────────────────────
+
+function PanelNavItem({
+  label,
+  active,
+  onClick,
+}: {
+  label: string;
+  active: boolean;
+  onClick: () => void;
+}) {
+  const [hovered, setHovered] = useState(false);
+  return (
+    <button
+      onClick={onClick}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      style={{
+        width: "100%",
+        textAlign: "left",
+        padding: "7px 10px",
+        borderRadius: 7,
+        border: "none",
+        cursor: "pointer",
+        fontSize: 12,
+        fontFamily: "inherit",
+        marginBottom: 1,
+        background: active
+          ? "rgba(232,162,42,0.1)"
+          : hovered
+          ? "rgba(255,255,255,0.04)"
+          : "transparent",
+        color: active
+          ? "#e8a22a"
+          : hovered
+          ? "rgba(255,255,255,0.65)"
+          : "rgba(255,255,255,0.35)",
+        transition: "background 0.12s, color 0.12s",
+      }}
+    >
+      {label}
+    </button>
+  );
+}
+
+// ── Section title ─────────────────────────────────────────────────────────────
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      style={{
+        fontSize: 11,
+        fontWeight: 500,
+        color: "rgba(255,255,255,0.28)",
+        textTransform: "uppercase",
+        letterSpacing: "0.7px",
+        marginBottom: 12,
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+function Divider() {
+  return <div style={{ height: 1, background: "rgba(255,255,255,0.05)", margin: "20px 0" }} />;
+}
+
+// ── Members panel ─────────────────────────────────────────────────────────────
+
+function MembersPanel({
+  bandId,
+  amAdmin,
+  members,
+  membersLoading,
+}: {
+  bandId: string;
+  amAdmin: boolean;
+  members: BandMember[] | undefined;
+  membersLoading: boolean;
+}) {
+  const qc = useQueryClient();
+  const [inviteLink, setInviteLink] = useState<string | null>(null);
+
+  const { data: invitesData, isLoading: invitesLoading } = useQuery({
+    queryKey: ["invites", bandId],
+    queryFn: () => listInvites(bandId),
+    enabled: amAdmin,
+    retry: false,
+  });
+
+  const inviteMutation = useMutation({
+    mutationFn: () => api.post<BandInvite>(`/bands/${bandId}/invites`, {}),
+    onSuccess: (invite) => {
+      const url = `${window.location.origin}/invite/${invite.token}`;
+      setInviteLink(url);
+      navigator.clipboard.writeText(url).catch(() => {});
+      qc.invalidateQueries({ queryKey: ["invites", bandId] });
+    },
+  });
+
+  const removeMutation = useMutation({
+    mutationFn: (memberId: string) => api.delete(`/bands/${bandId}/members/${memberId}`),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["members", bandId] }),
+  });
+
+  const revokeMutation = useMutation({
+    mutationFn: (inviteId: string) => revokeInvite(inviteId),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["invites", bandId] }),
+  });
+
+  const activeInvites = invitesData?.invites.filter(isActive) ?? [];
+
+  return (
+    <div>
+      {/* Member list */}
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
+        <SectionTitle>Members</SectionTitle>
+        {amAdmin && (
+          <button
+            onClick={() => inviteMutation.mutate()}
+            disabled={inviteMutation.isPending}
+            style={{
+              background: "rgba(232,162,42,0.14)",
+              border: "1px solid rgba(232,162,42,0.28)",
+              borderRadius: 6,
+              color: "#e8a22a",
+              cursor: "pointer",
+              padding: "4px 12px",
+              fontSize: 12,
+              fontFamily: "inherit",
+            }}
+          >
+            {inviteMutation.isPending ? "Generating…" : "+ Invite"}
+          </button>
+        )}
+      </div>
+
+      {inviteLink && (
+        <div
+          style={{
+            background: "rgba(232,162,42,0.06)",
+            border: "1px solid rgba(232,162,42,0.22)",
+            borderRadius: 8,
+            padding: "10px 14px",
+            marginBottom: 14,
+          }}
+        >
+          <p style={{ color: "rgba(255,255,255,0.35)", fontSize: 11, margin: "0 0 5px" }}>
+            Invite link (copied to clipboard · valid 72h):
+          </p>
+          <code style={{ color: "#e8a22a", fontSize: 12, wordBreak: "break-all" }}>{inviteLink}</code>
+          <button
+            onClick={() => setInviteLink(null)}
+            style={{
+              display: "block",
+              marginTop: 6,
+              background: "none",
+              border: "none",
+              color: "rgba(255,255,255,0.28)",
+              cursor: "pointer",
+              fontSize: 11,
+              padding: 0,
+              fontFamily: "inherit",
+            }}
+          >
+            Dismiss
+          </button>
+        </div>
+      )}
+
+      {membersLoading ? (
+        <p style={{ color: "rgba(255,255,255,0.28)", fontSize: 13 }}>Loading…</p>
+      ) : (
+        <div style={{ display: "grid", gap: 6, marginBottom: 0 }}>
+          {members?.map((m) => (
+            <div
+              key={m.id}
+              style={{
+                background: "rgba(255,255,255,0.025)",
+                border: "1px solid rgba(255,255,255,0.05)",
+                borderRadius: 8,
+                padding: "10px 14px",
+                display: "flex",
+                alignItems: "center",
+                gap: 10,
+              }}
+            >
+              <div
+                style={{
+                  width: 30,
+                  height: 30,
+                  borderRadius: "50%",
+                  background: "rgba(232,162,42,0.15)",
+                  border: "1px solid rgba(232,162,42,0.3)",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  fontSize: 11,
+                  fontWeight: 700,
+                  color: "#e8a22a",
+                  flexShrink: 0,
+                }}
+              >
+                {m.display_name.slice(0, 2).toUpperCase()}
+              </div>
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <div style={{ fontSize: 13, color: "rgba(255,255,255,0.72)" }}>{m.display_name}</div>
+                <div style={{ fontSize: 11, color: "rgba(255,255,255,0.28)", marginTop: 1 }}>{m.email}</div>
+              </div>
+              <span
+                style={{
+                  fontSize: 10,
+                  fontFamily: "monospace",
+                  padding: "2px 7px",
+                  borderRadius: 3,
+                  background: m.role === "admin" ? "rgba(232,162,42,0.1)" : "rgba(255,255,255,0.06)",
+                  color: m.role === "admin" ? "#e8a22a" : "rgba(255,255,255,0.38)",
+                  border: `1px solid ${m.role === "admin" ? "rgba(232,162,42,0.28)" : "rgba(255,255,255,0.08)"}`,
+                  whiteSpace: "nowrap",
+                }}
+              >
+                {m.role}
+              </span>
+              {amAdmin && m.role !== "admin" && (
+                <button
+                  onClick={() => removeMutation.mutate(m.id)}
+                  disabled={removeMutation.isPending}
+                  style={{
+                    background: "rgba(220,80,80,0.08)",
+                    border: "1px solid rgba(220,80,80,0.2)",
+                    borderRadius: 5,
+                    color: "#e07070",
+                    cursor: "pointer",
+                    fontSize: 11,
+                    padding: "3px 8px",
+                    fontFamily: "inherit",
+                  }}
+                >
+                  Remove
+                </button>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Role info cards */}
+      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, marginTop: 16 }}>
+        <div
+          style={{
+            padding: "10px 12px",
+            background: "rgba(255,255,255,0.025)",
+            border: "1px solid rgba(255,255,255,0.05)",
+            borderRadius: 8,
+          }}
+        >
+          <div style={{ fontSize: 12, color: "#e8a22a", marginBottom: 4 }}>Admin</div>
+          <div style={{ fontSize: 11, color: "rgba(255,255,255,0.28)", lineHeight: 1.55 }}>
+            Upload, delete, manage members and storage
+          </div>
+        </div>
+        <div
+          style={{
+            padding: "10px 12px",
+            background: "rgba(255,255,255,0.025)",
+            border: "1px solid rgba(255,255,255,0.05)",
+            borderRadius: 8,
+          }}
+        >
+          <div style={{ fontSize: 12, color: "rgba(255,255,255,0.55)", marginBottom: 4 }}>Member</div>
+          <div style={{ fontSize: 11, color: "rgba(255,255,255,0.28)", lineHeight: 1.55 }}>
+            Listen, comment, annotate — no upload or management
+          </div>
+        </div>
+      </div>
+
+      {/* Pending invites — admin only */}
+      {amAdmin && (
+        <>
+          <Divider />
+          <SectionTitle>Pending Invites</SectionTitle>
+
+          {invitesLoading ? (
+            <p style={{ color: "rgba(255,255,255,0.28)", fontSize: 13 }}>Loading invites…</p>
+          ) : activeInvites.length === 0 ? (
+            <p style={{ color: "rgba(255,255,255,0.28)", fontSize: 13 }}>No pending invites.</p>
+          ) : (
+            <div style={{ display: "grid", gap: 6 }}>
+              {activeInvites.map((invite) => (
+                <div
+                  key={invite.id}
+                  style={{
+                    background: "rgba(255,255,255,0.025)",
+                    border: "1px solid rgba(255,255,255,0.05)",
+                    borderRadius: 8,
+                    padding: "10px 14px",
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 10,
+                  }}
+                >
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <code
+                      style={{
+                        fontSize: 11,
+                        color: "rgba(255,255,255,0.35)",
+                        fontFamily: "monospace",
+                      }}
+                    >
+                      {invite.token.slice(0, 8)}…{invite.token.slice(-4)}
+                    </code>
+                    <div style={{ fontSize: 11, color: "rgba(255,255,255,0.25)", marginTop: 2 }}>
+                      {formatExpiry(invite.expires_at)} · {invite.role}
+                    </div>
+                  </div>
+                  <button
+                    onClick={() =>
+                      navigator.clipboard
+                        .writeText(`${window.location.origin}/invite/${invite.token}`)
+                        .catch(() => {})
+                    }
+                    style={{
+                      background: "none",
+                      border: "1px solid rgba(255,255,255,0.09)",
+                      borderRadius: 5,
+                      color: "rgba(255,255,255,0.42)",
+                      cursor: "pointer",
+                      fontSize: 11,
+                      padding: "3px 8px",
+                      fontFamily: "inherit",
+                    }}
+                  >
+                    Copy
+                  </button>
+                  <button
+                    onClick={() => revokeMutation.mutate(invite.id)}
+                    disabled={revokeMutation.isPending}
+                    style={{
+                      background: "rgba(220,80,80,0.08)",
+                      border: "1px solid rgba(220,80,80,0.2)",
+                      borderRadius: 5,
+                      color: "#e07070",
+                      cursor: "pointer",
+                      fontSize: 11,
+                      padding: "3px 8px",
+                      fontFamily: "inherit",
+                    }}
+                  >
+                    Revoke
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+          <p style={{ fontSize: 11, color: "rgba(255,255,255,0.2)", marginTop: 8 }}>
+            No account needed to accept an invite.
+          </p>
+        </>
+      )}
+    </div>
+  );
+}
+
+// ── Storage panel ─────────────────────────────────────────────────────────────
+
+function StoragePanel({
+  bandId,
+  band,
+  amAdmin,
+}: {
+  bandId: string;
+  band: { slug: string; nc_folder_path: string | null };
+  amAdmin: boolean;
+}) {
+  const qc = useQueryClient();
+  const [editing, setEditing] = useState(false);
+  const [folderInput, setFolderInput] = useState("");
+
+  const updateMutation = useMutation({
+    mutationFn: (nc_folder_path: string) => api.patch(`/bands/${bandId}`, { nc_folder_path }),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["band", bandId] });
+      setEditing(false);
+    },
+  });
+
+  const defaultPath = `bands/${band.slug}/`;
+  const currentPath = band.nc_folder_path ?? defaultPath;
+
+  return (
+    <div>
+      <SectionTitle>Nextcloud Scan Folder</SectionTitle>
+      <p style={{ fontSize: 12, color: "rgba(255,255,255,0.3)", marginBottom: 16, lineHeight: 1.55 }}>
+        RehearsalHub reads recordings directly from your Nextcloud — files are never copied to our
+        servers.
+      </p>
+
+      <div
+        style={{
+          background: "rgba(255,255,255,0.025)",
+          border: "1px solid rgba(255,255,255,0.05)",
+          borderRadius: 9,
+          padding: "12px 16px",
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: 8,
+          }}
+        >
+          <div>
+            <div style={{ fontSize: 10, color: "rgba(255,255,255,0.22)", textTransform: "uppercase", letterSpacing: "0.6px", marginBottom: 4 }}>
+              Scan path
+            </div>
+            <code style={{ fontSize: 13, color: "#4dba85", fontFamily: "monospace" }}>
+              {currentPath}
+            </code>
+          </div>
+          {amAdmin && !editing && (
+            <button
+              onClick={() => { setFolderInput(band.nc_folder_path ?? ""); setEditing(true); }}
+              style={{
+                background: "none",
+                border: "1px solid rgba(255,255,255,0.09)",
+                borderRadius: 6,
+                color: "rgba(255,255,255,0.42)",
+                cursor: "pointer",
+                padding: "4px 10px",
+                fontSize: 11,
+                fontFamily: "inherit",
+              }}
+            >
+              Edit
+            </button>
+          )}
+        </div>
+
+        {editing && (
+          <div style={{ marginTop: 12 }}>
+            <input
+              value={folderInput}
+              onChange={(e) => setFolderInput(e.target.value)}
+              placeholder={defaultPath}
+              style={{
+                width: "100%",
+                padding: "8px 12px",
+                background: "rgba(255,255,255,0.05)",
+                border: "1px solid rgba(255,255,255,0.08)",
+                borderRadius: 7,
+                color: "#eeeef2",
+                fontSize: 13,
+                fontFamily: "monospace",
+                boxSizing: "border-box",
+                outline: "none",
+              }}
+            />
+            <div style={{ display: "flex", gap: 8, marginTop: 8 }}>
+              <button
+                onClick={() => updateMutation.mutate(folderInput)}
+                disabled={updateMutation.isPending}
+                style={{
+                  background: "rgba(232,162,42,0.14)",
+                  border: "1px solid rgba(232,162,42,0.28)",
+                  borderRadius: 6,
+                  color: "#e8a22a",
+                  cursor: "pointer",
+                  padding: "6px 14px",
+                  fontSize: 12,
+                  fontWeight: 600,
+                  fontFamily: "inherit",
+                }}
+              >
+                {updateMutation.isPending ? "Saving…" : "Save"}
+              </button>
+              <button
+                onClick={() => setEditing(false)}
+                style={{
+                  background: "none",
+                  border: "1px solid rgba(255,255,255,0.09)",
+                  borderRadius: 6,
+                  color: "rgba(255,255,255,0.42)",
+                  cursor: "pointer",
+                  padding: "6px 14px",
+                  fontSize: 12,
+                  fontFamily: "inherit",
+                }}
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ── Band settings panel ───────────────────────────────────────────────────────
+
+function BandPanel({
+  bandId,
+  band,
+  amAdmin,
+}: {
+  bandId: string;
+  band: { name: string; slug: string; genre_tags: string[] };
+  amAdmin: boolean;
+}) {
+  const qc = useQueryClient();
+  const [nameInput, setNameInput] = useState(band.name);
+  const [tagInput, setTagInput] = useState("");
+  const [tags, setTags] = useState<string[]>(band.genre_tags);
+  const [saved, setSaved] = useState(false);
+
+  const updateMutation = useMutation({
+    mutationFn: (payload: { name?: string; genre_tags?: string[] }) =>
+      api.patch(`/bands/${bandId}`, payload),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["band", bandId] });
+      qc.invalidateQueries({ queryKey: ["bands"] });
+      setSaved(true);
+      setTimeout(() => setSaved(false), 2000);
+    },
+  });
+
+  function addTag() {
+    const t = tagInput.trim();
+    if (t && !tags.includes(t)) setTags((prev) => [...prev, t]);
+    setTagInput("");
+  }
+
+  function removeTag(t: string) {
+    setTags((prev) => prev.filter((x) => x !== t));
+  }
+
+  return (
+    <div>
+      <SectionTitle>Identity</SectionTitle>
+
+      <div style={{ marginBottom: 14 }}>
+        <label style={{ display: "block", fontSize: 12, color: "rgba(255,255,255,0.42)", marginBottom: 5 }}>
+          Band name
+        </label>
+        <input
+          value={nameInput}
+          onChange={(e) => setNameInput(e.target.value)}
+          disabled={!amAdmin}
+          style={{
+            width: "100%",
+            padding: "8px 11px",
+            background: "rgba(255,255,255,0.05)",
+            border: "1px solid rgba(255,255,255,0.08)",
+            borderRadius: 7,
+            color: "#eeeef2",
+            fontSize: 13,
+            fontFamily: "inherit",
+            boxSizing: "border-box",
+            outline: "none",
+            opacity: amAdmin ? 1 : 0.5,
+          }}
+        />
+      </div>
+
+      <div style={{ marginBottom: 14 }}>
+        <label style={{ display: "block", fontSize: 12, color: "rgba(255,255,255,0.42)", marginBottom: 5 }}>
+          Genre tags
+        </label>
+        <div style={{ display: "flex", gap: 5, flexWrap: "wrap", marginBottom: 6 }}>
+          {tags.map((t) => (
+            <span
+              key={t}
+              style={{
+                background: "rgba(140,90,220,0.1)",
+                color: "#a878e8",
+                fontSize: 11,
+                padding: "2px 8px",
+                borderRadius: 12,
+                display: "flex",
+                alignItems: "center",
+                gap: 4,
+              }}
+            >
+              {t}
+              {amAdmin && (
+                <button
+                  onClick={() => removeTag(t)}
+                  style={{
+                    background: "none",
+                    border: "none",
+                    color: "#a878e8",
+                    cursor: "pointer",
+                    fontSize: 13,
+                    padding: 0,
+                    lineHeight: 1,
+                    fontFamily: "inherit",
+                  }}
+                >
+                  ×
+                </button>
+              )}
+            </span>
+          ))}
+        </div>
+        {amAdmin && (
+          <div style={{ display: "flex", gap: 6 }}>
+            <input
+              value={tagInput}
+              onChange={(e) => setTagInput(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && addTag()}
+              placeholder="Add genre tag…"
+              style={{
+                flex: 1,
+                padding: "6px 10px",
+                background: "rgba(255,255,255,0.05)",
+                border: "1px solid rgba(255,255,255,0.08)",
+                borderRadius: 7,
+                color: "#eeeef2",
+                fontSize: 12,
+                fontFamily: "inherit",
+                outline: "none",
+              }}
+            />
+            <button
+              onClick={addTag}
+              style={{
+                background: "none",
+                border: "1px solid rgba(255,255,255,0.09)",
+                borderRadius: 6,
+                color: "rgba(255,255,255,0.42)",
+                cursor: "pointer",
+                padding: "6px 10px",
+                fontSize: 12,
+                fontFamily: "inherit",
+              }}
+            >
+              +
+            </button>
+          </div>
+        )}
+      </div>
+
+      {amAdmin && (
+        <button
+          onClick={() => updateMutation.mutate({ name: nameInput.trim() || band.name, genre_tags: tags })}
+          disabled={updateMutation.isPending}
+          style={{
+            background: "rgba(232,162,42,0.14)",
+            border: "1px solid rgba(232,162,42,0.28)",
+            borderRadius: 6,
+            color: saved ? "#4dba85" : "#e8a22a",
+            cursor: "pointer",
+            padding: "7px 18px",
+            fontSize: 13,
+            fontWeight: 600,
+            fontFamily: "inherit",
+            transition: "color 0.2s",
+          }}
+        >
+          {updateMutation.isPending ? "Saving…" : saved ? "Saved ✓" : "Save changes"}
+        </button>
+      )}
+
+      {!amAdmin && (
+        <p style={{ fontSize: 12, color: "rgba(255,255,255,0.28)" }}>Only admins can edit band settings.</p>
+      )}
+
+      <Divider />
+
+      {/* Danger zone */}
+      <div
+        style={{
+          border: "1px solid rgba(220,80,80,0.18)",
+          borderRadius: 9,
+          padding: "14px 16px",
+          background: "rgba(220,80,80,0.04)",
+        }}
+      >
+        <div style={{ fontSize: 13, color: "#e07070", marginBottom: 3 }}>Delete this band</div>
+        <div style={{ fontSize: 11, color: "rgba(220,80,80,0.45)", marginBottom: 10 }}>
+          Removes all members and deletes comments. Storage files are NOT deleted.
+        </div>
+        <button
+          disabled={!amAdmin}
+          style={{
+            background: "rgba(220,80,80,0.08)",
+            border: "1px solid rgba(220,80,80,0.2)",
+            borderRadius: 6,
+            color: "#e07070",
+            cursor: amAdmin ? "pointer" : "default",
+            padding: "5px 12px",
+            fontSize: 11,
+            fontFamily: "inherit",
+            opacity: amAdmin ? 1 : 0.4,
+          }}
+        >
+          Delete band
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// ── BandSettingsPage ──────────────────────────────────────────────────────────
+
+export function BandSettingsPage() {
+  const { bandId, panel } = useParams<{ bandId: string; panel: string }>();
+  const navigate = useNavigate();
+
+  const activePanel: Panel =
+    panel === "storage" ? "storage" : panel === "band" ? "band" : "members";
+
+  const { data: band, isLoading: bandLoading } = useQuery({
+    queryKey: ["band", bandId],
+    queryFn: () => getBand(bandId!),
+    enabled: !!bandId,
+  });
+
+  const { data: members, isLoading: membersLoading } = useQuery({
+    queryKey: ["members", bandId],
+    queryFn: () => api.get<BandMember[]>(`/bands/${bandId}/members`),
+    enabled: !!bandId,
+  });
+
+  const { data: me } = useQuery({
+    queryKey: ["me"],
+    queryFn: () => api.get<MemberRead>("/auth/me"),
+  });
+
+  const amAdmin =
+    !!me && (members?.some((m) => m.id === me.id && m.role === "admin") ?? false);
+
+  const go = (p: Panel) => navigate(`/bands/${bandId}/settings/${p}`);
+
+  if (bandLoading) {
+    return <div style={{ color: "rgba(255,255,255,0.28)", padding: 32 }}>Loading…</div>;
+  }
+  if (!band) {
+    return <div style={{ color: "#e07070", padding: 32 }}>Band not found</div>;
+  }
+
+  return (
+    <div style={{ display: "flex", height: "100%", overflow: "hidden" }}>
+      {/* ── Left panel nav ─────────────────────────────── */}
+      <div
+        style={{
+          width: 180,
+          minWidth: 180,
+          background: "#0b0b0e",
+          borderRight: "1px solid rgba(255,255,255,0.05)",
+          padding: "20px 10px",
+          display: "flex",
+          flexDirection: "column",
+          gap: 0,
+        }}
+      >
+        <div
+          style={{
+            fontSize: 10,
+            fontWeight: 500,
+            color: "rgba(255,255,255,0.2)",
+            textTransform: "uppercase",
+            letterSpacing: "0.7px",
+            padding: "0 6px 8px",
+          }}
+        >
+          Band — {band.name}
+        </div>
+        <PanelNavItem label="Members" active={activePanel === "members"} onClick={() => go("members")} />
+        <PanelNavItem label="Storage" active={activePanel === "storage"} onClick={() => go("storage")} />
+        <PanelNavItem label="Band Settings" active={activePanel === "band"} onClick={() => go("band")} />
+      </div>
+
+      {/* ── Panel content ──────────────────────────────── */}
+      <div style={{ flex: 1, overflowY: "auto", padding: "28px 32px" }}>
+        <div style={{ maxWidth: 580 }}>
+          {activePanel === "members" && (
+            <>
+              <h1 style={{ fontSize: 17, fontWeight: 500, color: "#eeeef2", margin: "0 0 4px" }}>
+                Members
+              </h1>
+              <p style={{ fontSize: 12, color: "rgba(255,255,255,0.3)", marginBottom: 24 }}>
+                Manage who has access to {band.name}'s recordings.
+              </p>
+              <MembersPanel
+                bandId={bandId!}
+                amAdmin={amAdmin}
+                members={members}
+                membersLoading={membersLoading}
+              />
+            </>
+          )}
+
+          {activePanel === "storage" && (
+            <>
+              <h1 style={{ fontSize: 17, fontWeight: 500, color: "#eeeef2", margin: "0 0 4px" }}>
+                Storage
+              </h1>
+              <p style={{ fontSize: 12, color: "rgba(255,255,255,0.3)", marginBottom: 24 }}>
+                Configure where {band.name} stores recordings.
+              </p>
+              <StoragePanel bandId={bandId!} band={band} amAdmin={amAdmin} />
+            </>
+          )}
+
+          {activePanel === "band" && (
+            <>
+              <h1 style={{ fontSize: 17, fontWeight: 500, color: "#eeeef2", margin: "0 0 4px" }}>
+                Band Settings
+              </h1>
+              <p style={{ fontSize: 12, color: "rgba(255,255,255,0.3)", marginBottom: 24 }}>
+                Only admins can edit these settings.
+              </p>
+              <BandPanel bandId={bandId!} band={band} amAdmin={amAdmin} />
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

web/src/pages/SessionPage.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useMemo } from "react";
 import { useParams, Link } from "react-router-dom";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { api } from "../api/client";
@@ -24,10 +24,29 @@ interface SessionDetail {
 }
 
 function formatDate(iso: string): string {
-  const d = new Date(iso);
+  const d = new Date(iso.slice(0, 10) + "T12:00:00");
   return d.toLocaleDateString(undefined, { weekday: "long", year: "numeric", month: "long", day: "numeric" });
 }
 
+function computeWaveBars(seed: string): number[] {
+  let s = seed.split("").reduce((acc, c) => acc + c.charCodeAt(0), 31337);
+  return Array.from({ length: 14 }, () => {
+    s = ((s * 1664525 + 1013904223) & 0xffffffff) >>> 0;
+    return Math.max(15, Math.floor((s / 0xffffffff) * 100));
+  });
+}
+
+function MiniWaveBars({ seed }: { seed: string }) {
+  const bars = useMemo(() => computeWaveBars(seed), [seed]);
+  return (
+    <div style={{ display: "flex", alignItems: "flex-end", gap: "1.5px", height: 18, width: 34, flexShrink: 0 }}>
+      {bars.map((h, i) => (
+        <div key={i} style={{ width: 2, background: "rgba(255,255,255,0.11)", borderRadius: 1, height: `${h}%` }} />
+      ))}
+    </div>
+  );
+}
+
 export function SessionPage() {
   const { bandId, sessionId } = useParams<{ bandId: string; sessionId: string }>();
   const qc = useQueryClient();
@@ -165,9 +184,12 @@ export function SessionPage() {
                   )}
                 </div>
               </div>
-              <div style={{ color: "var(--text-muted)", fontSize: 12, whiteSpace: "nowrap" }}>
-                <span style={{ background: "var(--bg-subtle)", borderRadius: 4, padding: "2px 6px", marginRight: 8, fontFamily: "monospace", fontSize: 10 }}>{song.status}</span>
-                {song.version_count} version{song.version_count !== 1 ? "s" : ""}
+              <div style={{ display: "flex", alignItems: "center", gap: 10, flexShrink: 0 }}>
+                <MiniWaveBars seed={song.id} />
+                <div style={{ color: "var(--text-muted)", fontSize: 12, whiteSpace: "nowrap" }}>
+                  <span style={{ background: "var(--bg-subtle)", borderRadius: 4, padding: "2px 6px", marginRight: 8, fontFamily: "monospace", fontSize: 10 }}>{song.status}</span>
+                  {song.version_count} version{song.version_count !== 1 ? "s" : ""}
+                </div>
               </div>
             </Link>
           ))}

web/src/test/helpers.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { MemoryRouter, Routes, Route } from "react-router-dom";
+import { render } from "@testing-library/react";
+
+export function createTestQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: { retry: false, staleTime: 0 },
+      mutations: { retry: false },
+    },
+  });
+}
+
+interface RenderOptions {
+  path?: string;
+  route?: string;
+}
+
+export function renderWithProviders(
+  ui: React.ReactElement,
+  { path = "/", route = "/" }: RenderOptions = {}
+) {
+  const queryClient = createTestQueryClient();
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={[route]}>
+        <Routes>
+          <Route path={path} element={ui} />
+        </Routes>
+      </MemoryRouter>
+    </QueryClientProvider>
+  );
+}

web/vite.config.ts

@@ -1,13 +1,16 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 
+const apiBase = process.env.API_URL ?? "http://localhost:8000";
+const wsBase = apiBase.replace(/^http/, "ws");
+
 export default defineConfig({
   plugins: [react()],
   server: {
     port: 3000,
     proxy: {
-      "/api": { target: "http://localhost:8000", changeOrigin: true },
-      "/ws": { target: "ws://localhost:8000", ws: true },
+      "/api": { target: apiBase, changeOrigin: true },
+      "/ws": { target: wsBase, ws: true },
     },
   },
   test: {

worker/src/worker/pipeline/waveform.py

@@ -7,7 +7,7 @@ import json
 import numpy as np
 
 
-def extract_peaks(audio: np.ndarray, num_points: int = 1000) -> list[float]:
+def extract_peaks(audio: np.ndarray, num_points: int = 500) -> list[float]:
     """
     Downsample audio to `num_points` RMS+peak values for waveform display.
     Returns a flat list of [peak, peak, ...] normalized to 0-1.