feat: CMS improvements batch 1-4

Batch 1:
- Fix .mcp.json formatting
- Remove type assertions in migration files
- Add aria-label to toast close button

Batch 2:
- Fix AddMemberModal accessibility (focus trap, Esc handler, aria)
- Add alt text to image-upload preview

Batch 3:
- Fix HeroSection color scheme (orange → green for brand consistency)

Batch 4:
- Replace getStats with COUNT queries for performance
- Image upload: progressive compression (quality 0.9→0.3, dimension 1920→720), never rejects
- Add meta info display (cover image, slug) to Article/Project/Member editors
- Document image upload pipeline in docs/knowledges/image-upload.md

Author: aster-void

.mcp.json

@@ -2,9 +2,9 @@
   "mcpServers": {
     "svelte": {
       "type": "stdio",
-      "command": "npx",
+      "command": "bunx",
       "env": {},
-      "args": ["-y", "@sveltejs/mcp"]
+      "args": ["@sveltejs/mcp"]
     }
   }
 }

CLAUDE.md

@@ -97,5 +97,16 @@ run `bun tidy` after you finish your work. i.e. before commit
 
 - Never use `as` or `any`. Let TypeScript infer types properly.
 - Never just "fire and forget". it crashes the entire server. instead, catch `.catch(console.error)` then forget, if you want to dispatch the job.
+- **NEVER use `$derived(await ...)` in Svelte 5.** This causes infinite loops and memory leaks. Use top-level `await` instead:
+  ```ts
+  // ❌ WRONG - causes memory leak
+  const data = $derived(await fetchData());
+
+  // ✅ CORRECT - use top-level await
+  const data = await fetchData();
+
+  // ✅ For reactive dependencies, use $derived without await
+  const filtered = $derived(data.filter(x => x.active));
+  ```
 
 For detailed coding standards (import order, async patterns, naming conventions), see `docs/knowledges/coding-standards.md`.

bun.lock

@@ -7,6 +7,7 @@
       "dependencies": {
         "better-auth": "^1.4.6",
         "bits-ui": "^2.14.4",
+        "chart.js": "^4.5.1",
         "drizzle-valibot": "^0.4.2",
         "isomorphic-dompurify": "^2.34.0",
         "lucide-svelte": "^0.561.0",
@@ -217,6 +218,8 @@
 
     "@jridgewell/trace-mapping": ["@jridgewell/[email protected]", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
 
+    "@kurkle/color": ["@kurkle/[email protected]", "", {}, "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w=="],
+
     "@libsql/client": ["@libsql/[email protected]", "", { "dependencies": { "@libsql/core": "^0.15.14", "@libsql/hrana-client": "^0.7.0", "js-base64": "^3.7.5", "libsql": "^0.5.22", "promise-limit": "^2.7.0" } }, "sha512-twC0hQxPNHPKfeOv3sNT6u2pturQjLcI+CnpTM0SjRpocEGgfiZ7DWKXLNnsothjyJmDqEsBQJ5ztq9Wlu470w=="],
 
     "@libsql/core": ["@libsql/[email protected]", "", { "dependencies": { "js-base64": "^3.7.5" } }, "sha512-C88Z6UKl+OyuKKPwz224riz02ih/zHYI3Ho/LAcVOgjsunIRZoBw7fjRfaH9oPMmSNeQfhGklSG2il1URoOIsA=="],
@@ -401,6 +404,8 @@
 
     "call-bound": ["[email protected]", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.2", "get-intrinsic": "^1.3.0" } }, "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg=="],
 
+    "chart.js": ["[email protected]", "", { "dependencies": { "@kurkle/color": "^0.3.0" } }, "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw=="],
+
     "chokidar": ["[email protected]", "", { "dependencies": { "readdirp": "^4.0.1" } }, "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA=="],
 
     "clsx": ["[email protected]", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],

docs/knowledges/data-models.md

@@ -86,6 +86,12 @@ projectMembers
 ├── projectId    TEXT FK → projects.id  ┐
 ├── memberId     TEXT FK → members.id   ┘ PK
 └── role         TEXT                      -- "lead", "member"
+
+viewLog (時系列アナリティクス用)
+├── id           TEXT PK
+├── resourceType TEXT NOT NULL             -- "article", "member", "project"
+├── resourceId   TEXT NOT NULL
+└── viewedAt     TIMESTAMP NOT NULL
 ```
 
 ## Actions
@@ -146,10 +152,12 @@ projectMembers
 
 ### Analytics
 
-| アクション                   | 公開 | 実装 |
-| ---------------------------- | ---- | ---- |
-| 閲覧数統計を見る             |      | ✓    |
-| 記事別閲覧数ランキング       |      | ✓    |
+| アクション                     | 公開 | 実装 |
+| ------------------------------ | ---- | ---- |
+| 閲覧数統計を見る               |      | ✓    |
+| 記事別閲覧数ランキング         |      | ✓    |
 | プロジェクト別閲覧数ランキング |      | ✓    |
-| メンバー別閲覧数ランキング   |      | ✓    |
+| メンバー別閲覧数ランキング     |      | ✓    |
 | ダッシュボードで統計概要を見る |      | ✓    |
+| 時系列グラフで閲覧傾向を見る   |      | ✓    |
+| コンテンツタイプ別推移を見る   |      | ✓    |

docs/knowledges/image-upload.md

@@ -0,0 +1,49 @@
+# Image Upload Pipeline
+
+## Size Limits
+
+```
+Browser (any size) → Compress → Server (10MB) → S3 (no limit)
+```
+
+| Stage | Limit | Enforcement |
+|-------|-------|-------------|
+| Browser input | None | User can upload any size |
+| Browser → Server | 10MB | Client compresses until it fits |
+| Server validation | 10MB (base64 ~13.7MB) | DoS protection |
+| Server → S3 | None | MinIO accepts any size |
+
+## Browser Compression
+
+Located in `$lib/shared/logic/image-processing.ts`:
+
+```ts
+const SERVER_LIMIT = 10 * 1024 * 1024; // 10MB
+const QUALITY_STEPS = [0.9, 0.7, 0.5, 0.3];
+const DIMENSION_STEPS = [1920, 1440, 1080, 720];
+```
+
+Algorithm:
+1. Start at 1920px, quality 0.9
+2. If > 10MB, reduce quality (0.9 → 0.7 → 0.5 → 0.3)
+3. If all qualities fail, reduce dimension (1920 → 1440)
+4. Reset quality, repeat
+5. Max 16 attempts (4 qualities × 4 dimensions)
+6. Best-effort: if still > 10MB after all attempts, return smallest achieved
+
+## Server Validation
+
+Located in `$lib/data/private/storage.remote.ts`:
+
+```ts
+const MAX_BASE64_SIZE = Math.ceil(10 * 1024 * 1024 * 1.37);
+```
+
+- Base64 adds ~37% overhead
+- 10MB file → ~13.7MB base64
+
+## Design Decisions
+
+- **Never reject user uploads**: Compress instead of refusing
+- **Quality over size**: Try high quality first, only reduce if needed
+- **GIF exception**: GIFs skip compression (animation would be lost)

docs/knowledges/project-context.md

@@ -97,6 +97,12 @@ bun tidy             # Auto-check + fix (type + format + lint)
 6. **Security**: Never read `.env` files, use `.env.sample` or `.env.example`
 7. **Type Safety**: Never use `as` or `any`, let TypeScript infer
 8. **Error Handling**: Never "fire and forget", use `.catch(console.error)` for async jobs
+9. **Remote Functions**: Always use explicit arrow functions with `query()` and `command()`
+   - ❌ `query(listPublishedArticles)` (function reference)
+   - ✅ `query(async () => listPublishedArticles())` (explicit arrow function)
+   - ❌ `query(v.string(), getPublishedArticle)` (function reference)
+   - ✅ `query(v.string(), async (slug) => getPublishedArticle(slug))` (explicit arrow function)
+   - Reason: Function references can cause 400 Bad Request errors due to validation issues
 
 ## Knowledge Base
 

docs/knowledges/ui-design.md

@@ -1,5 +1,7 @@
 # UI Design
 
+団体要件: プライマリカラー = RGB(0,211,114) #00D372 CMYK(68%, 0, 72%, 0)
+
 ## Inspiration
 
 - **Linear**: Typography, clarity, professional developer aesthetic

drizzle/0004_dry_adam_destine.sql

@@ -0,0 +1,9 @@
+CREATE TABLE "view_log" (
+	"id" text PRIMARY KEY NOT NULL,
+	"resource_type" text NOT NULL,
+	"resource_id" text NOT NULL,
+	"viewed_at" timestamp with time zone DEFAULT now() NOT NULL
+);
+--> statement-breakpoint
+CREATE INDEX "view_log_resourceType_resourceId_idx" ON "view_log" USING btree ("resource_type","resource_id");--> statement-breakpoint
+CREATE INDEX "view_log_viewedAt_idx" ON "view_log" USING btree ("viewed_at");