d0zingcat/alert-message-center
1
0
Fork 0
mirror of https://github.com/d0zingcat/alert-message-center.git synced 2026-05-13 15:09:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #8 from d0zingcat/feature/add_lint

Browse Source
This commit is contained in:
Tony Tang
2026-01-14 20:26:41 +08:00
committed by GitHub
parent f414264050 99fa772000
commit 607f12b154
45 changed files with 3838 additions and 3024 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
.github/workflows/ci.yml vendored
View File

@@ -1,4 +1,4 @@
name: Build and Push Docker Images
name: CI
on:
push:
@@ -11,7 +11,27 @@ env:
IMAGE_NAME: ${{ github.repository }}
jobs:
build-and-push:
lint:
name: Lint Check
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v4
- name: Setup Bun
uses: oven-sh/setup-bun@v2
with:
bun-version: latest
- name: Install dependencies
run: bun install
- name: Run Biome Check
run: bun x @biomejs/biome ci .
build:
name: Build & Push Docker
needs: lint
runs-on: ubuntu-latest
permissions:
contents: read
@@ -22,6 +42,7 @@ jobs:
uses: actions/checkout@v4
- name: Log in to the Container registry
if: github.event_name == 'push' && github.ref == 'refs/heads/main'
uses: docker/login-action@v3
with:
registry: ${{ env.REGISTRY }}
@@ -33,7 +54,7 @@ jobs:
with:
context: .
file: Dockerfile
push: true
push: ${{ github.event_name == 'push' && github.ref == 'refs/heads/main' }}
tags: |
${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest
${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ github.sha }}

13
CHANGELOG.md
View File

@@ -4,6 +4,19 @@
本文件的格式基于 [Keep a Changelog](https://keepachangelog.com/zh-CN/1.0.0/)，
并且本项目遵循 [语义化版本 (Semantic Versioning)](https://semver.org/lang/zh-CN/spec/v2.0.0.html)。
## [1.2.2] - 2026-01-14
### 变更
- **Linting**: 强化了 Biome 配置，启用了更严格的 `a11y` (可访问性), `suspicious` (可疑代码), `style` (代码规范) 和 `correctness` (正确性) 检查规则。
- **配置**: 配置 `noUnknownAtRules` 规则以忽略 Tailwind CSS 特有的 At-rules。
- **CI/CD**: 集成 Biome 检查到 GitHub Actions 工作流，确保在所有 Pull Request 中强制执行代码规范检查。
### 修复
- **Web 可访问性**: 为所有按钮添加了显式的 `type="button"` 以符合规范。
- **语义化/ARAI**: 修正了 `Modal` 背景的交互逻辑，将非语义化的 `div` 替换为 `<button>` 并添加了必要的键盘事件与 ARIA 属性。
- **Hook 依赖**: 在多个视图中使用了 `useCallback` 来确保 `useEffect` 依赖链的稳定性，解决了 `exhaustive-deps` 警告。
- **代码健壮性**: 修复了 `main.tsx` 中的 Non-null Assertion 并解决了 `TopicsView` 中的类型重声明冲突。
## [1.2.1] - 2026-01-14

16
apps/server/drizzle.config.ts
View File

@@ -1,10 +1,12 @@
import { defineConfig } from 'drizzle-kit';
import { defineConfig } from "drizzle-kit";
export default defineConfig({
schema: './src/db/schema.ts',
out: './drizzle',
dialect: 'postgresql',
dbCredentials: {
url: process.env.DATABASE_URL || 'postgres://postgres:password@localhost:5432/alert_message_center',
},
schema: "./src/db/schema.ts",
out: "./drizzle",
dialect: "postgresql",
dbCredentials: {
url:
process.env.DATABASE_URL ||
"postgres://postgres:password@localhost:5432/alert_message_center",
},
});

52
apps/server/package.json
View File

@@ -1,27 +1,27 @@
{
"name": "@alertmessagecenter/server",
"version": "1.2.0",
"scripts": {
"dev": "bun run --env-file .env --watch src/index.ts",
"start": "bun run src/index.ts",
"db:generate": "drizzle-kit generate",
"db:migrate": "drizzle-kit migrate",
"db:push": "drizzle-kit push",
"db:studio": "drizzle-kit studio"
},
"dependencies": {
"@hono/zod-validator": "^0.7.6",
"@larksuiteoapi/node-sdk": "^1.56.1",
"drizzle-orm": "^0.45.1",
"hono": "^4.11.3",
"pino": "^10.1.1",
"postgres": "^3.4.8",
"zod": "^3.0.0"
},
"devDependencies": {
"@types/node": "^20.0.0",
"bun-types": "latest",
"drizzle-kit": "^0.31.8",
"pino-pretty": "^13.1.3"
}
}
"name": "@alertmessagecenter/server",
"version": "1.2.0",
"scripts": {
"dev": "bun run --env-file .env --watch src/index.ts",
"start": "bun run src/index.ts",
"db:generate": "drizzle-kit generate",
"db:migrate": "drizzle-kit migrate",
"db:push": "drizzle-kit push",
"db:studio": "drizzle-kit studio"
},
"dependencies": {
"@hono/zod-validator": "^0.7.6",
"@larksuiteoapi/node-sdk": "^1.56.1",
"drizzle-orm": "^0.45.1",
"hono": "^4.11.3",
"pino": "^10.1.1",
"postgres": "^3.4.8",
"zod": "^3.0.0"
},
"devDependencies": {
"@types/node": "^20.0.0",
"bun-types": "latest",
"drizzle-kit": "^0.31.8",
"pino-pretty": "^13.1.3"
}
}

44
apps/server/scripts/check_admin_requests.ts
View File

@@ -1,28 +1,30 @@
export { };
export {};
// Simulate admin checking requests
async function run() {
console.log('Fetching pending topics as admin...');
const adminEmail = (process.env.ADMIN_EMAILS || '').split(',')[0].trim();
const res = await fetch('http://localhost:3000/api/topics/requests', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Cookie': `session=${encodeURIComponent(JSON.stringify({
id: 'admin_123',
name: 'Admin User',
email: adminEmail,
isAdmin: true
}))}`
}
});
console.log("Fetching pending topics as admin...");
const adminEmail = (process.env.ADMIN_EMAILS || "").split(",")[0].trim();
const res = await fetch("http://localhost:3000/api/topics/requests", {
method: "GET",
headers: {
"Content-Type": "application/json",
Cookie: `session=${encodeURIComponent(
JSON.stringify({
id: "admin_123",
name: "Admin User",
email: adminEmail,
isAdmin: true,
}),
)}`,
},
});
if (res.ok) {
const data = await res.json();
console.log('Pending topics:', JSON.stringify(data, null, 2));
} else {
console.log('Error:', res.status, await res.text());
}
if (res.ok) {
const data = await res.json();
console.log("Pending topics:", JSON.stringify(data, null, 2));
} else {
console.log("Error:", res.status, await res.text());
}
}
run();

46
apps/server/scripts/check_dashboard.ts
View File

@@ -1,28 +1,30 @@
export { };
export {};
async function run() {
console.log('Fetching dashboard stats as admin...');
const adminEmail = (process.env.ADMIN_EMAILS || '').split(',')[0].trim();
const res = await fetch('http://localhost:3000/api/dashboard/stats', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
// Admin cookie
'Cookie': `session=${encodeURIComponent(JSON.stringify({
id: 'admin_123',
name: 'Admin User',
email: adminEmail,
isAdmin: true
}))}`
}
});
console.log("Fetching dashboard stats as admin...");
const adminEmail = (process.env.ADMIN_EMAILS || "").split(",")[0].trim();
const res = await fetch("http://localhost:3000/api/dashboard/stats", {
method: "GET",
headers: {
"Content-Type": "application/json",
// Admin cookie
Cookie: `session=${encodeURIComponent(
JSON.stringify({
id: "admin_123",
name: "Admin User",
email: adminEmail,
isAdmin: true,
}),
)}`,
},
});
if (res.ok) {
const data = await res.json();
console.log('Dashboard Stats:', JSON.stringify(data, null, 2));
} else {
console.log('Error:', res.status, await res.text());
}
if (res.ok) {
const data = await res.json();
console.log("Dashboard Stats:", JSON.stringify(data, null, 2));
} else {
console.log("Error:", res.status, await res.text());
}
}
run();

13
apps/server/scripts/check_topics.ts
View File

@@ -1,9 +1,10 @@
import { Database } from 'bun:sqlite';
const db = new Database('dev.db');
import { Database } from "bun:sqlite";
const db = new Database("dev.db");
try {
const query = db.query("SELECT * FROM topics");
const topics = query.all();
console.log('Topics:', JSON.stringify(topics, null, 2));
const query = db.query("SELECT * FROM topics");
const topics = query.all();
console.log("Topics:", JSON.stringify(topics, null, 2));
} catch (e) {
console.error('Error querying topics:', e);
console.error("Error querying topics:", e);
}

64
apps/server/scripts/create_request.ts
View File

@@ -1,40 +1,38 @@
// Simulate topic creation
import { client } from './client'; // This won't work in node script easily due to frontend dependencies
// Let's use fetch directly against the server
async function run() {
console.log('Creating pending topic...');
const res = await fetch('http://localhost:3000/api/topics', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
// We need to bake a cookie.
// But we can't easily bake a signed cookie without the secret.
// Wait, the cookies are not signed in the strict sense, just set.
// But `middleware.ts` parses `JSON.parse(sessionCookie)`.
console.log("Creating pending topic...");
const res = await fetch("http://localhost:3000/api/topics", {
method: "POST",
headers: {
"Content-Type": "application/json",
// We need to bake a cookie.
// But we can't easily bake a signed cookie without the secret.
// Wait, the cookies are not signed in the strict sense, just set.
// But `middleware.ts` parses `JSON.parse(sessionCookie)`.
// Let's fake a session cookie for a non-admin user.
'Cookie': `session=${encodeURIComponent(JSON.stringify({
id: 'user_123',
name: 'Test User',
email: 'test@example.com',
isAdmin: false
}))}`
},
body: JSON.stringify({
name: 'Test Pending Topic',
slug: 'test-pending',
description: 'This should be pending'
})
});
// Let's fake a session cookie for a non-admin user.
Cookie: `session=${encodeURIComponent(
JSON.stringify({
id: "user_123",
name: "Test User",
email: "test@example.com",
isAdmin: false,
}),
)}`,
},
body: JSON.stringify({
name: "Test Pending Topic",
slug: "test-pending",
description: "This should be pending",
}),
});
if (res.ok) {
const data = await res.json();
console.log('Created topic:', data);
} else {
console.log('Error:', res.status, await res.text());
}
if (res.ok) {
const data = await res.json();
console.log("Created topic:", data);
} else {
console.log("Error:", res.status, await res.text());
}
}
run();

121
apps/server/scripts/debug_subscription.ts
View File

@@ -1,69 +1,78 @@
import postgres from 'postgres';
import postgres from "postgres";
const sql = postgres('postgres://localhost:5432/alertmessagecenter');
const sql = postgres("postgres://localhost:5432/alertmessagecenter");
async function run() {
try {
// 1. Get a topic
const [topic] = await sql`SELECT * FROM topics LIMIT 1`;
if (!topic) {
console.log('No topics found. Create a topic first.');
return;
}
console.log('Using topic:', topic.id, topic.slug);
try {
// 1. Get a topic
const [topic] = await sql`SELECT * FROM topics LIMIT 1`;
if (!topic) {
console.log("No topics found. Create a topic first.");
return;
}
console.log("Using topic:", topic.id, topic.slug);
// 2. Define a fake user ID
const fakeUserId = 'user_fake_002';
// 2. Define a fake user ID
const fakeUserId = "user_fake_002";
// Clean up first
await sql`DELETE FROM subscriptions WHERE user_id = ${fakeUserId}`;
await sql`DELETE FROM users WHERE id = ${fakeUserId}`;
// Clean up first
await sql`DELETE FROM subscriptions WHERE user_id = ${fakeUserId}`;
await sql`DELETE FROM users WHERE id = ${fakeUserId}`;
// 3. Try to subscribe with non-existent user
console.log('\n--- Attempt 1: Subscribe with non-existent user ---');
const res1 = await fetch(`http://localhost:3000/api/topics/${topic.id}/subscribe/${fakeUserId}`, {
method: 'POST',
headers: {
'Cookie': `session=${encodeURIComponent(JSON.stringify({
id: fakeUserId,
name: 'Fake User',
email: 'fake@example.com',
isAdmin: false
}))}`
}
});
console.log('Status:', res1.status);
const text1 = await res1.text();
console.log('Response:', text1); // Expect 500 FK violation
// 3. Try to subscribe with non-existent user
console.log("\n--- Attempt 1: Subscribe with non-existent user ---");
const res1 = await fetch(
`http://localhost:3000/api/topics/${topic.id}/subscribe/${fakeUserId}`,
{
method: "POST",
headers: {
Cookie: `session=${encodeURIComponent(
JSON.stringify({
id: fakeUserId,
name: "Fake User",
email: "fake@example.com",
isAdmin: false,
}),
)}`,
},
},
);
console.log("Status:", res1.status);
const text1 = await res1.text();
console.log("Response:", text1); // Expect 500 FK violation
// 4. Create the user
console.log('\n--- Creating user... ---');
await sql`INSERT INTO users (id, name, feishu_user_id, email, is_admin)
// 4. Create the user
console.log("\n--- Creating user... ---");
await sql`INSERT INTO users (id, name, feishu_user_id, email, is_admin)
VALUES (${fakeUserId}, 'Fake User', 'ou_fake', 'fake2@example.com', false)
ON CONFLICT (id) DO NOTHING`;
// 5. Try to subscribe again
console.log('\n--- Attempt 2: Subscribe with existing user ---');
const res2 = await fetch(`http://localhost:3000/api/topics/${topic.id}/subscribe/${fakeUserId}`, {
method: 'POST',
headers: {
'Cookie': `session=${encodeURIComponent(JSON.stringify({
id: fakeUserId,
name: 'Fake User',
email: 'fake@example.com',
isAdmin: false
}))}`
}
});
console.log('Status:', res2.status);
const text2 = await res2.text();
console.log('Response:', text2); // Expect 200
} catch (e) {
console.error(e);
} finally {
await sql.end();
}
// 5. Try to subscribe again
console.log("\n--- Attempt 2: Subscribe with existing user ---");
const res2 = await fetch(
`http://localhost:3000/api/topics/${topic.id}/subscribe/${fakeUserId}`,
{
method: "POST",
headers: {
Cookie: `session=${encodeURIComponent(
JSON.stringify({
id: fakeUserId,
name: "Fake User",
email: "fake@example.com",
isAdmin: false,
}),
)}`,
},
},
);
console.log("Status:", res2.status);
const text2 = await res2.text();
console.log("Response:", text2); // Expect 200
} catch (e) {
console.error(e);
} finally {
await sql.end();
}
}
run();

533
apps/server/src/api.ts
View File

@@ -1,174 +1,208 @@
import { Hono } from 'hono';
import { eq, and, desc, sql, gt, sum, count } from 'drizzle-orm';
import { z } from 'zod';
import { zValidator } from '@hono/zod-validator';
import { db } from './db';
import { topics, users, subscriptions, alertTasks, topicGroupChats, knownGroupChats } from './db/schema';
import { requireAuth, requireAdmin, AuthSession } from './middleware';
import { zValidator } from "@hono/zod-validator";
import { and, count, desc, eq, gt, sql, sum } from "drizzle-orm";
import { Hono } from "hono";
import { z } from "zod";
import { db } from "./db";
import {
alertTasks,
knownGroupChats,
subscriptions,
topicGroupChats,
topics,
users,
} from "./db/schema";
import { type AuthSession, requireAdmin, requireAuth } from "./middleware";
const api = new Hono<{ Variables: { session: AuthSession } }>();
const topicSchema = z.object({
name: z.string().min(1),
slug: z.string().min(1),
description: z.string().optional(),
name: z.string().min(1),
slug: z.string().min(1),
description: z.string().optional(),
});
const groupBindingSchema = z.object({
chatId: z.string().min(1),
name: z.string().min(1),
chatId: z.string().min(1),
name: z.string().min(1),
});
const userSchema = z.object({
name: z.string().min(1),
feishuUserId: z.string().min(1),
email: z.string().email().optional().or(z.literal('')),
name: z.string().min(1),
feishuUserId: z.string().min(1),
email: z.string().email().optional().or(z.literal("")),
});
// --- Topics ---
// --- Topics ---
api.get('/topics', requireAuth, async (c) => {
const session = c.get('session');
const isAdmin = session.isAdmin;
const currentUserId = session.id;
api.get("/topics", requireAuth, async (c) => {
const session = c.get("session");
const isAdmin = session.isAdmin;
const currentUserId = session.id;
const allTopics = await db.query.topics.findMany({
where: eq(topics.status, 'approved'),
with: {
creator: true,
approver: true,
subscriptions: {
where: (subscriptions, { eq }) =>
isAdmin ? undefined : (currentUserId ? eq(subscriptions.userId, currentUserId) : undefined),
with: {
user: true
}
}
}
});
const allTopics = await db.query.topics.findMany({
where: eq(topics.status, "approved"),
with: {
creator: true,
approver: true,
subscriptions: {
where: (subscriptions, { eq }) =>
isAdmin
? undefined
: currentUserId
? eq(subscriptions.userId, currentUserId)
: undefined,
with: {
user: true,
},
},
},
});
return c.json(allTopics);
return c.json(allTopics);
});
api.get('/topics/requests', requireAdmin, async (c) => {
const requests = await db.query.topics.findMany({
where: eq(topics.status, 'pending'),
with: {
creator: true
}
});
return c.json(requests);
api.get("/topics/requests", requireAdmin, async (c) => {
const requests = await db.query.topics.findMany({
where: eq(topics.status, "pending"),
with: {
creator: true,
},
});
return c.json(requests);
});
api.get('/topics/all', requireAdmin, async (c) => {
const allTopics = await db.query.topics.findMany({
with: {
creator: true,
approver: true,
subscriptions: true
},
orderBy: [desc(topics.createdAt)]
});
return c.json(allTopics);
api.get("/topics/all", requireAdmin, async (c) => {
const allTopics = await db.query.topics.findMany({
with: {
creator: true,
approver: true,
subscriptions: true,
},
orderBy: [desc(topics.createdAt)],
});
return c.json(allTopics);
});
api.get('/topics/my-requests', requireAuth, async (c) => {
const session = c.get('session');
const requests = await db.query.topics.findMany({
where: eq(topics.createdBy, session.id),
orderBy: [desc(topics.createdAt)],
with: {
approver: true,
}
});
return c.json(requests);
api.get("/topics/my-requests", requireAuth, async (c) => {
const session = c.get("session");
const requests = await db.query.topics.findMany({
where: eq(topics.createdBy, session.id),
orderBy: [desc(topics.createdAt)],
with: {
approver: true,
},
});
return c.json(requests);
});
api.post('/topics/:id/approve', requireAdmin, async (c) => {
const id = c.req.param('id');
const session = c.get('session');
const result = await db.update(topics)
.set({ status: 'approved', approvedBy: session.id })
.where(eq(topics.id, id))
.returning();
return c.json(result[0]);
api.post("/topics/:id/approve", requireAdmin, async (c) => {
const id = c.req.param("id");
const session = c.get("session");
const result = await db
.update(topics)
.set({ status: "approved", approvedBy: session.id })
.where(eq(topics.id, id))
.returning();
return c.json(result[0]);
});
api.post('/topics/:id/reject', requireAdmin, async (c) => {
const id = c.req.param('id');
const result = await db.update(topics)
.set({ status: 'rejected' })
.where(eq(topics.id, id))
.returning();
return c.json(result[0]);
api.post("/topics/:id/reject", requireAdmin, async (c) => {
const id = c.req.param("id");
const result = await db
.update(topics)
.set({ status: "rejected" })
.where(eq(topics.id, id))
.returning();
return c.json(result[0]);
});
// Only admins can create topics
// Authenticated users can create topics (requests)
api.post('/topics', requireAuth, zValidator('json', topicSchema), async (c) => {
const body = c.req.valid('json');
const session = c.get('session');
api.post("/topics", requireAuth, zValidator("json", topicSchema), async (c) => {
const body = c.req.valid("json");
const session = c.get("session");
const status = session.isAdmin ? 'approved' : 'pending';
const status = session.isAdmin ? "approved" : "pending";
const result = await db.insert(topics).values({
...body,
status,
createdBy: session.id,
approvedBy: session.isAdmin ? session.id : null,
}).returning();
return c.json(result[0]);
const result = await db
.insert(topics)
.values({
...body,
status,
createdBy: session.id,
approvedBy: session.isAdmin ? session.id : null,
})
.returning();
return c.json(result[0]);
});
// Only admins can update topics
api.put('/topics/:id', requireAdmin, zValidator('json', topicSchema.partial()), async (c) => {
const id = c.req.param('id');
const body = c.req.valid('json');
const result = await db.update(topics).set(body).where(eq(topics.id, id)).returning();
return c.json(result[0]);
});
api.put(
"/topics/:id",
requireAdmin,
zValidator("json", topicSchema.partial()),
async (c) => {
const id = c.req.param("id");
const body = c.req.valid("json");
const result = await db
.update(topics)
.set(body)
.where(eq(topics.id, id))
.returning();
return c.json(result[0]);
},
);
// Only admins can delete topics
api.delete('/topics/:id', requireAdmin, async (c) => {
const id = c.req.param('id');
await db.delete(topics).where(eq(topics.id, id));
return c.json({ success: true });
api.delete("/topics/:id", requireAdmin, async (c) => {
const id = c.req.param("id");
await db.delete(topics).where(eq(topics.id, id));
return c.json({ success: true });
});
// --- Users ---
api.get('/users', requireAdmin, async (c) => {
const allUsers = await db.query.users.findMany({
with: {
subscriptions: {
with: {
topic: true
}
}
}
});
return c.json(allUsers);
api.get("/users", requireAdmin, async (c) => {
const allUsers = await db.query.users.findMany({
with: {
subscriptions: {
with: {
topic: true,
},
},
},
});
return c.json(allUsers);
});
api.post('/users', requireAdmin, zValidator('json', userSchema), async (c) => {
const body = c.req.valid('json');
const result = await db.insert(users).values(body).returning();
return c.json(result[0]);
api.post("/users", requireAdmin, zValidator("json", userSchema), async (c) => {
const body = c.req.valid("json");
const result = await db.insert(users).values(body).returning();
return c.json(result[0]);
});
api.put('/users/:id', requireAdmin, zValidator('json', userSchema.partial()), async (c) => {
const id = c.req.param('id');
const body = c.req.valid('json');
const result = await db.update(users).set(body).where(eq(users.id, id)).returning();
return c.json(result[0]);
});
api.put(
"/users/:id",
requireAdmin,
zValidator("json", userSchema.partial()),
async (c) => {
const id = c.req.param("id");
const body = c.req.valid("json");
const result = await db
.update(users)
.set(body)
.where(eq(users.id, id))
.returning();
return c.json(result[0]);
},
);
api.delete('/users/:id', requireAdmin, async (c) => {
const id = c.req.param('id');
await db.delete(users).where(eq(users.id, id));
return c.json({ success: true });
api.delete("/users/:id", requireAdmin, async (c) => {
const id = c.req.param("id");
await db.delete(users).where(eq(users.id, id));
return c.json({ success: true });
});
// --- Subscriptions ---
@@ -176,159 +210,184 @@ api.delete('/users/:id', requireAdmin, async (c) => {
// --- Subscriptions ---
// Users can subscribe themselves or admins can subscribe anyone
api.post('/topics/:topicId/subscribe/:userId', requireAuth, async (c) => {
const { topicId, userId } = c.req.param();
const session = c.get('session');
api.post("/topics/:topicId/subscribe/:userId", requireAuth, async (c) => {
const { topicId, userId } = c.req.param();
const session = c.get("session");
// Check if user is subscribing themselves or is an admin
if (session.id !== userId && !session.isAdmin) {
return c.json({ error: 'You can only subscribe yourself' }, 403);
}
// Check if user is subscribing themselves or is an admin
if (session.id !== userId && !session.isAdmin) {
return c.json({ error: "You can only subscribe yourself" }, 403);
}
const result = await db.insert(subscriptions).values({ topicId, userId }).returning();
return c.json(result[0]);
const result = await db
.insert(subscriptions)
.values({ topicId, userId })
.returning();
return c.json(result[0]);
});
// Users can unsubscribe themselves or admins can unsubscribe anyone
api.delete('/topics/:topicId/subscribe/:userId', requireAuth, async (c) => {
const { topicId, userId } = c.req.param();
const session = c.get('session');
api.delete("/topics/:topicId/subscribe/:userId", requireAuth, async (c) => {
const { topicId, userId } = c.req.param();
const session = c.get("session");
// Check if user is unsubscribing themselves or is an admin
if (session.id !== userId && !session.isAdmin) {
return c.json({ error: 'You can only unsubscribe yourself' }, 403);
}
// Check if user is unsubscribing themselves or is an admin
if (session.id !== userId && !session.isAdmin) {
return c.json({ error: "You can only unsubscribe yourself" }, 403);
}
await db.delete(subscriptions)
.where(and(
eq(subscriptions.topicId, topicId),
eq(subscriptions.userId, userId)
));
return c.json({ success: true });
await db
.delete(subscriptions)
.where(
and(eq(subscriptions.topicId, topicId), eq(subscriptions.userId, userId)),
);
return c.json({ success: true });
});
// --- Group Bindings (App Bot) ---
// Get list of known groups (for selection)
api.get('/groups', requireAuth, async (c) => {
// Return recent active groups
const groups = await db.select().from(knownGroupChats)
.orderBy(desc(knownGroupChats.lastActiveAt))
.limit(50);
return c.json(groups);
api.get("/groups", requireAuth, async (c) => {
// Return recent active groups
const groups = await db
.select()
.from(knownGroupChats)
.orderBy(desc(knownGroupChats.lastActiveAt))
.limit(50);
return c.json(groups);
});
// Get bindings for a topic
api.get('/topics/:id/groups', requireAuth, async (c) => {
const topicId = c.req.param('id');
const groups = await db.select().from(topicGroupChats)
.where(eq(topicGroupChats.topicId, topicId))
.orderBy(desc(topicGroupChats.createdAt));
return c.json(groups);
api.get("/topics/:id/groups", requireAuth, async (c) => {
const topicId = c.req.param("id");
const groups = await db
.select()
.from(topicGroupChats)
.where(eq(topicGroupChats.topicId, topicId))
.orderBy(desc(topicGroupChats.createdAt));
return c.json(groups);
});
// Bind a group to a topic
api.post('/topics/:id/groups', requireAuth, zValidator('json', groupBindingSchema), async (c) => {
const topicId = c.req.param('id');
const body = c.req.valid('json');
const session = c.get('session');
api.post(
"/topics/:id/groups",
requireAuth,
zValidator("json", groupBindingSchema),
async (c) => {
const topicId = c.req.param("id");
const body = c.req.valid("json");
const session = c.get("session");
const result = await db.insert(topicGroupChats).values({
topicId,
chatId: body.chatId,
name: body.name,
createdBy: session.id,
}).returning();
const result = await db
.insert(topicGroupChats)
.values({
topicId,
chatId: body.chatId,
name: body.name,
createdBy: session.id,
})
.returning();
return c.json(result[0]);
});
return c.json(result[0]);
},
);
// Unbind a group
api.delete('/topics/:id/groups/:bindingId', requireAuth, async (c) => {
const { id: topicId, bindingId } = c.req.param();
api.delete("/topics/:id/groups/:bindingId", requireAuth, async (c) => {
const { id: topicId, bindingId } = c.req.param();
await db.delete(topicGroupChats)
.where(and(
eq(topicGroupChats.id, bindingId),
eq(topicGroupChats.topicId, topicId)
));
await db
.delete(topicGroupChats)
.where(
and(
eq(topicGroupChats.id, bindingId),
eq(topicGroupChats.topicId, topicId),
),
);
return c.json({ success: true });
return c.json({ success: true });
});
// --- Alert Tasks ---
api.get('/alerts/tasks', requireAdmin, async (c) => {
const limit = Math.min(Number(c.req.query('limit') || 50), 100);
const tasks = await db.query.alertTasks.findMany({
orderBy: [desc(alertTasks.createdAt)],
limit,
with: {
sender: true,
logs: {
limit: 10, // Only show first 10 logs inline
}
}
});
return c.json(tasks);
api.get("/alerts/tasks", requireAdmin, async (c) => {
const limit = Math.min(Number(c.req.query("limit") || 50), 100);
const tasks = await db.query.alertTasks.findMany({
orderBy: [desc(alertTasks.createdAt)],
limit,
with: {
sender: true,
logs: {
limit: 10, // Only show first 10 logs inline
},
},
});
return c.json(tasks);
});
api.get('/alerts/tasks/:id', requireAuth, async (c) => {
const id = c.req.param('id');
const task = await db.query.alertTasks.findFirst({
where: eq(alertTasks.id, id),
with: {
sender: true,
logs: true // Show all logs for detail view
}
});
api.get("/alerts/tasks/:id", requireAuth, async (c) => {
const id = c.req.param("id");
const task = await db.query.alertTasks.findFirst({
where: eq(alertTasks.id, id),
with: {
sender: true,
logs: true, // Show all logs for detail view
},
});
if (!task) {
return c.json({ error: 'Task not found' }, 404);
}
if (!task) {
return c.json({ error: "Task not found" }, 404);
}
return c.json(task);
return c.json(task);
});
// --- Stats ---
api.get('/stats', requireAdmin, async (c) => {
// 1. Message count per topic
const topicStats = await db.select({
topicSlug: alertTasks.topicSlug,
totalTasks: count(),
totalRecipients: sql<number>`cast(${sum(alertTasks.recipientCount)} as int)`,
totalSuccess: sql<number>`cast(${sum(alertTasks.successCount)} as int)`,
})
.from(alertTasks)
.groupBy(alertTasks.topicSlug);
api.get("/stats", requireAdmin, async (c) => {
// 1. Message count per topic
const topicStats = await db
.select({
topicSlug: alertTasks.topicSlug,
totalTasks: count(),
totalRecipients: sql<number>`cast(${sum(alertTasks.recipientCount)} as int)`,
totalSuccess: sql<number>`cast(${sum(alertTasks.successCount)} as int)`,
})
.from(alertTasks)
.groupBy(alertTasks.topicSlug);
// 2. Recent metrics (last 24h)
const last24h = new Date(Date.now() - 24 * 60 * 60 * 1000);
const recentStats = await db.select({
totalRecipients: sql<number>`cast(${sum(alertTasks.recipientCount)} as int)`,
totalSuccess: sql<number>`cast(${sum(alertTasks.successCount)} as int)`,
taskCount: count(),
})
.from(alertTasks)
.where(gt(alertTasks.createdAt, last24h));
// 2. Recent metrics (last 24h)
const last24h = new Date(Date.now() - 24 * 60 * 60 * 1000);
const recentStats = await db
.select({
totalRecipients: sql<number>`cast(${sum(alertTasks.recipientCount)} as int)`,
totalSuccess: sql<number>`cast(${sum(alertTasks.successCount)} as int)`,
taskCount: count(),
})
.from(alertTasks)
.where(gt(alertTasks.createdAt, last24h));
const recent = recentStats[0] || { totalRecipients: 0, totalSuccess: 0, taskCount: 0 };
const totalRecipients = Number(recent.totalRecipients || 0);
const totalSuccess = Number(recent.totalSuccess || 0);
const failedCount = totalRecipients - totalSuccess;
const successRate = totalRecipients > 0 ? (totalSuccess / totalRecipients) * 100 : 100;
const recent = recentStats[0] || {
totalRecipients: 0,
totalSuccess: 0,
taskCount: 0,
};
const totalRecipients = Number(recent.totalRecipients || 0);
const totalSuccess = Number(recent.totalSuccess || 0);
const failedCount = totalRecipients - totalSuccess;
const successRate =
totalRecipients > 0 ? (totalSuccess / totalRecipients) * 100 : 100;
return c.json({
topics: topicStats,
recent: {
alertsReceived: Number(recent.taskCount || 0),
plannedMessages: totalRecipients,
successCount: totalSuccess,
failedCount: failedCount,
successRate: successRate,
}
});
return c.json({
topics: topicStats,
recent: {
alertsReceived: Number(recent.taskCount || 0),
plannedMessages: totalRecipients,
successCount: totalSuccess,
failedCount: failedCount,
successRate: successRate,
},
});
});
export default api;

63
apps/server/src/api/feishu-event.ts
View File

@@ -1,43 +1,46 @@
import { Hono } from 'hono';
import * as lark from '@larksuiteoapi/node-sdk';
import { eventDispatcher } from '../event-handler';
import * as lark from "@larksuiteoapi/node-sdk";
import { Hono } from "hono";
import { eventDispatcher } from "../event-handler";
const feishuEvent = new Hono();
// Helper to adapt Hono request to Lark SDK request
feishuEvent.post('/', async (c) => {
try {
const headers = c.req.raw.headers;
const headerRecord: Record<string, string> = {};
headers.forEach((value, key) => {
headerRecord[key] = value;
});
feishuEvent.post("/", async (c) => {
try {
const headers = c.req.raw.headers;
const headerRecord: Record<string, string> = {};
headers.forEach((value, key) => {
headerRecord[key] = value;
});
const body = await c.req.json();
const body = await c.req.json();
// Use the official SDK functions directly for Hono compatibility
// 1. Handle URL verification (Challenge)
const { isChallenge, challenge } = lark.generateChallenge(body, {
encryptKey: process.env.FEISHU_ENCRYPT_KEY || ''
});
// Use the official SDK functions directly for Hono compatibility
// 1. Handle URL verification (Challenge)
const { isChallenge, challenge } = lark.generateChallenge(body, {
encryptKey: process.env.FEISHU_ENCRYPT_KEY || "",
});
if (isChallenge) {
return c.json(challenge);
}
if (isChallenge) {
return c.json(challenge);
}
// 2. Dispatch event
// The dispatcher expects an object containing headers and body.
// We use Object.create to put headers on the prototype so they are accessible
// but not included in JSON.stringify, which preserves signature verification.
const payload = Object.assign(Object.create({ headers: headerRecord }), body);
const result = await eventDispatcher.invoke(payload);
// 2. Dispatch event
// The dispatcher expects an object containing headers and body.
// We use Object.create to put headers on the prototype so they are accessible
// but not included in JSON.stringify, which preserves signature verification.
const payload = Object.assign(
Object.create({ headers: headerRecord }),
body,
);
const result = await eventDispatcher.invoke(payload);
return c.json(result || {});
} catch (e) {
console.error('[Feishu Event] Error:', e);
return c.json({ error: 'Internal Server Error' }, 500);
}
return c.json(result || {});
} catch (e) {
console.error("[Feishu Event] Error:", e);
return c.json({ error: "Internal Server Error" }, 500);
}
});
export default feishuEvent;

238
apps/server/src/auth.ts
View File

@@ -1,142 +1,156 @@
import { Hono } from 'hono';
import { logger } from './lib/logger';
import { setCookie, getCookie } from 'hono/cookie';
import { db } from './db';
import { users } from './db/schema';
import { eq } from 'drizzle-orm';
import { feishuClient } from './feishu';
import { eq } from "drizzle-orm";
import { Hono } from "hono";
import { getCookie, setCookie } from "hono/cookie";
import { db } from "./db";
import { users } from "./db/schema";
import { feishuClient } from "./feishu";
import { logger } from "./lib/logger";
const auth = new Hono();
const ADMIN_EMAILS = (process.env.ADMIN_EMAILS || '').split(',').map(email => email.trim()).filter(Boolean);
const ADMIN_EMAILS = (process.env.ADMIN_EMAILS || "")
.split(",")
.map((email) => email.trim())
.filter(Boolean);
// Get the login URL for frontend to redirect
auth.get('/login-url', (c) => {
const appId = process.env.FEISHU_APP_ID;
const redirectUri = encodeURIComponent(process.env.REDIRECT_URI || 'http://localhost:5173/auth/callback');
const state = crypto.randomUUID();
auth.get("/login-url", (c) => {
const appId = process.env.FEISHU_APP_ID;
const redirectUri = encodeURIComponent(
process.env.REDIRECT_URI || "http://localhost:5173/auth/callback",
);
const state = crypto.randomUUID();
// Store state in cookie for CSRF protection
setCookie(c, 'oauth_state', state, {
httpOnly: true,
secure: process.env.NODE_ENV === 'production',
maxAge: 600, // 10 minutes
sameSite: 'Lax',
});
// Store state in cookie for CSRF protection
setCookie(c, "oauth_state", state, {
httpOnly: true,
secure: process.env.NODE_ENV === "production",
maxAge: 600, // 10 minutes
sameSite: "Lax",
});
const loginUrl = `https://open.feishu.cn/open-apis/authen/v1/index?app_id=${appId}&redirect_uri=${redirectUri}&state=${state}`;
const loginUrl = `https://open.feishu.cn/open-apis/authen/v1/index?app_id=${appId}&redirect_uri=${redirectUri}&state=${state}`;
return c.json({ loginUrl });
return c.json({ loginUrl });
});
// Handle OAuth callback
auth.get('/callback', async (c) => {
const code = c.req.query('code');
const state = c.req.query('state');
const storedState = getCookie(c, 'oauth_state');
auth.get("/callback", async (c) => {
const code = c.req.query("code");
const state = c.req.query("state");
const storedState = getCookie(c, "oauth_state");
// Verify state for CSRF protection
if (!state || state !== storedState) {
return c.json({ error: 'Invalid state parameter' }, 400);
}
// Verify state for CSRF protection
if (!state || state !== storedState) {
return c.json({ error: "Invalid state parameter" }, 400);
}
if (!code) {
return c.json({ error: 'No code provided' }, 400);
}
if (!code) {
return c.json({ error: "No code provided" }, 400);
}
try {
// Exchange code for user access token and user info
const userData = await feishuClient.getUserAccessToken(code);
try {
// Exchange code for user access token and user info
const userData = await feishuClient.getUserAccessToken(code);
// Check if user exists, otherwise create
let user = await db.query.users.findFirst({
where: eq(users.feishuUserId, userData.open_id),
});
// Check if user exists, otherwise create
let user = await db.query.users.findFirst({
where: eq(users.feishuUserId, userData.open_id),
});
const isAdmin = ADMIN_EMAILS.includes(userData.email || '');
const isAdmin = ADMIN_EMAILS.includes(userData.email || "");
if (!user) {
// Create new user
const result = await db.insert(users).values({
name: userData.name,
feishuUserId: userData.open_id,
email: userData.email || null,
isAdmin,
}).returning();
user = result[0];
} else {
// Update user info (in case name or admin status changed)
const result = await db.update(users)
.set({
name: userData.name,
email: userData.email || user.email,
isAdmin,
})
.where(eq(users.id, user.id))
.returning();
user = result[0];
}
if (!user) {
// Create new user
const result = await db
.insert(users)
.values({
name: userData.name,
feishuUserId: userData.open_id,
email: userData.email || null,
isAdmin,
})
.returning();
user = result[0];
} else {
// Update user info (in case name or admin status changed)
const result = await db
.update(users)
.set({
name: userData.name,
email: userData.email || user.email,
isAdmin,
})
.where(eq(users.id, user.id))
.returning();
user = result[0];
}
// Set session cookie
setCookie(c, 'session', JSON.stringify({
id: user.id,
name: user.name,
email: user.email,
isAdmin: user.isAdmin,
personalToken: user.personalToken,
}), {
httpOnly: true,
secure: process.env.NODE_ENV === 'production',
maxAge: 60 * 60 * 24 * 7, // 7 days
sameSite: 'Lax',
});
// Set session cookie
setCookie(
c,
"session",
JSON.stringify({
id: user.id,
name: user.name,
email: user.email,
isAdmin: user.isAdmin,
personalToken: user.personalToken,
}),
{
httpOnly: true,
secure: process.env.NODE_ENV === "production",
maxAge: 60 * 60 * 24 * 7, // 7 days
sameSite: "Lax",
},
);
return c.json({
success: true,
user: {
id: user.id,
name: user.name,
email: user.email,
isAdmin: user.isAdmin,
},
});
} catch (error) {
logger.error({ err: error }, 'OAuth callback error');
return c.json({ error: 'Authentication failed' }, 500);
}
return c.json({
success: true,
user: {
id: user.id,
name: user.name,
email: user.email,
isAdmin: user.isAdmin,
},
});
} catch (error) {
logger.error({ err: error }, "OAuth callback error");
return c.json({ error: "Authentication failed" }, 500);
}
});
// Get current user from session
auth.get('/me', (c) => {
const sessionCookie = getCookie(c, 'session');
auth.get("/me", (c) => {
const sessionCookie = getCookie(c, "session");
if (!sessionCookie) {
return c.json({ error: 'Not authenticated' }, 401);
}
if (!sessionCookie) {
return c.json({ error: "Not authenticated" }, 401);
}
try {
const session = sessionCookie ? JSON.parse(sessionCookie) : null;
if (!session) {
return c.json({ error: 'Not authenticated' }, 401);
}
// Normalize user object to ensure id is present (handle legacy session with userId)
const user = {
...session,
id: session.id || session.userId,
};
return c.json({ user });
} catch (error) {
logger.error({ err: error }, '[Auth] Failed to parse session cookie');
return c.json({ error: 'Invalid session' }, 401);
}
try {
const session = sessionCookie ? JSON.parse(sessionCookie) : null;
if (!session) {
return c.json({ error: "Not authenticated" }, 401);
}
// Normalize user object to ensure id is present (handle legacy session with userId)
const user = {
...session,
id: session.id || session.userId,
};
return c.json({ user });
} catch (error) {
logger.error({ err: error }, "[Auth] Failed to parse session cookie");
return c.json({ error: "Invalid session" }, 401);
}
});
// Logout
auth.post('/logout', (c) => {
setCookie(c, 'session', '', {
maxAge: 0,
});
return c.json({ success: true });
auth.post("/logout", (c) => {
setCookie(c, "session", "", {
maxAge: 0,
});
return c.json({ success: true });
});
export default auth;

10
apps/server/src/db/index.ts
View File

@@ -1,7 +1,9 @@
import { drizzle } from 'drizzle-orm/postgres-js';
import postgres from 'postgres';
import * as schema from './schema';
import { drizzle } from "drizzle-orm/postgres-js";
import postgres from "postgres";
import * as schema from "./schema";
const connectionString = process.env.DATABASE_URL || 'postgres://postgres:password@localhost:5432/alert_message_center';
const connectionString =
process.env.DATABASE_URL ||
"postgres://postgres:password@localhost:5432/alert_message_center";
const client = postgres(connectionString);
export const db = drizzle(client, { schema });

234
apps/server/src/db/schema.ts
View File

@@ -1,131 +1,173 @@
import { pgTable, text, integer, primaryKey, boolean, jsonb, timestamp } from 'drizzle-orm/pg-core';
import { relations } from 'drizzle-orm';
import { relations } from "drizzle-orm";
import {
boolean,
integer,
jsonb,
pgTable,
primaryKey,
text,
timestamp,
} from "drizzle-orm/pg-core";
// Topics: 类似于 Kafka 的 Topic 或 告警的 Tag，例如 "payment-service",
export const topics = pgTable('topics', {
id: text('id').primaryKey().$defaultFn(() => crypto.randomUUID()),
slug: text('slug').notNull().unique(), // 告警发送时使用的 key
name: text('name').notNull(),
description: text('description'),
status: text('status', { enum: ['pending', 'approved', 'rejected'] }).default('approved').notNull(),
createdBy: text('created_by').references(() => users.id),
approvedBy: text('approved_by').references(() => users.id),
createdAt: timestamp('created_at').defaultNow().notNull(),
export const topics = pgTable("topics", {
id: text("id")
.primaryKey()
.$defaultFn(() => crypto.randomUUID()),
slug: text("slug").notNull().unique(), // 告警发送时使用的 key
name: text("name").notNull(),
description: text("description"),
status: text("status", { enum: ["pending", "approved", "rejected"] })
.default("approved")
.notNull(),
createdBy: text("created_by").references(() => users.id),
approvedBy: text("approved_by").references(() => users.id),
createdAt: timestamp("created_at").defaultNow().notNull(),
});
// Group Chats: App Bot 所在的群绑定
export const topicGroupChats = pgTable('topic_group_chats', {
id: text('id').primaryKey().$defaultFn(() => crypto.randomUUID()),
topicId: text('topic_id').notNull().references(() => topics.id, { onDelete: 'cascade' }),
chatId: text('chat_id').notNull(), // 飞书群 chat_id
name: text('name').notNull(), // 群名称快照
createdAt: timestamp('created_at').defaultNow().notNull(),
createdBy: text('created_by').references(() => users.id),
export const topicGroupChats = pgTable("topic_group_chats", {
id: text("id")
.primaryKey()
.$defaultFn(() => crypto.randomUUID()),
topicId: text("topic_id")
.notNull()
.references(() => topics.id, { onDelete: "cascade" }),
chatId: text("chat_id").notNull(), // 飞书群 chat_id
name: text("name").notNull(), // 群名称快照
createdAt: timestamp("created_at").defaultNow().notNull(),
createdBy: text("created_by").references(() => users.id),
});
export const topicGroupChatsRelations = relations(topicGroupChats, ({ one }) => ({
topic: one(topics, {
fields: [topicGroupChats.topicId],
references: [topics.id],
}),
creator: one(users, {
fields: [topicGroupChats.createdBy],
references: [users.id],
}),
}));
export const topicGroupChatsRelations = relations(
topicGroupChats,
({ one }) => ({
topic: one(topics, {
fields: [topicGroupChats.topicId],
references: [topics.id],
}),
creator: one(users, {
fields: [topicGroupChats.createdBy],
references: [users.id],
}),
}),
);
// Known Group Chats: 机器人已知的群 (通过事件发现)
export const knownGroupChats = pgTable('known_group_chats', {
chatId: text('chat_id').primaryKey(), // 飞书 chat_id
name: text('name').notNull(),
lastActiveAt: timestamp('last_active_at').defaultNow(),
export const knownGroupChats = pgTable("known_group_chats", {
chatId: text("chat_id").primaryKey(), // 飞书 chat_id
name: text("name").notNull(),
lastActiveAt: timestamp("last_active_at").defaultNow(),
});
export const topicsRelations = relations(topics, ({ many, one }) => ({
subscriptions: many(subscriptions),
groupChats: many(topicGroupChats),
creator: one(users, {
fields: [topics.createdBy],
references: [users.id],
relationName: 'creator',
}),
approver: one(users, {
fields: [topics.approvedBy],
references: [users.id],
relationName: 'approver',
}),
subscriptions: many(subscriptions),
groupChats: many(topicGroupChats),
creator: one(users, {
fields: [topics.createdBy],
references: [users.id],
relationName: "creator",
}),
approver: one(users, {
fields: [topics.approvedBy],
references: [users.id],
relationName: "approver",
}),
}));
export const users = pgTable('users', {
id: text('id').primaryKey().$defaultFn(() => crypto.randomUUID()),
name: text('name').notNull(),
feishuUserId: text('feishu_user_id').notNull(), // 必须有飞书 ID 才能私聊 (open_id 或 user_id)
email: text('email').unique(),
isAdmin: boolean('is_admin').default(false),
personalToken: text('personal_token').notNull().unique().$defaultFn(() => crypto.randomUUID().replace(/-/g, '')),
export const users = pgTable("users", {
id: text("id")
.primaryKey()
.$defaultFn(() => crypto.randomUUID()),
name: text("name").notNull(),
feishuUserId: text("feishu_user_id").notNull(), // 必须有飞书 ID 才能私聊 (open_id 或 user_id)
email: text("email").unique(),
isAdmin: boolean("is_admin").default(false),
personalToken: text("personal_token")
.notNull()
.unique()
.$defaultFn(() => crypto.randomUUID().replace(/-/g, "")),
});
export const usersRelations = relations(users, ({ many }) => ({
subscriptions: many(subscriptions),
createdTopics: many(topics, { relationName: 'creator' }),
approvedTopics: many(topics, { relationName: 'approver' }),
subscriptions: many(subscriptions),
createdTopics: many(topics, { relationName: "creator" }),
approvedTopics: many(topics, { relationName: "approver" }),
}));
// Subscriptions: 用户直接订阅 Topic
export const subscriptions = pgTable('subscriptions', {
userId: text('user_id').notNull().references(() => users.id, { onDelete: 'cascade' }),
topicId: text('topic_id').notNull().references(() => topics.id, { onDelete: 'cascade' }),
createdAt: timestamp('created_at').defaultNow().notNull(),
}, (t) => ({
pk: primaryKey({ columns: [t.userId, t.topicId] }),
}));
export const subscriptions = pgTable(
"subscriptions",
{
userId: text("user_id")
.notNull()
.references(() => users.id, { onDelete: "cascade" }),
topicId: text("topic_id")
.notNull()
.references(() => topics.id, { onDelete: "cascade" }),
createdAt: timestamp("created_at").defaultNow().notNull(),
},
(t) => ({
pk: primaryKey({ columns: [t.userId, t.topicId] }),
}),
);
export const subscriptionsRelations = relations(subscriptions, ({ one }) => ({
user: one(users, {
fields: [subscriptions.userId],
references: [users.id],
}),
topic: one(topics, {
fields: [subscriptions.topicId],
references: [topics.id],
}),
user: one(users, {
fields: [subscriptions.userId],
references: [users.id],
}),
topic: one(topics, {
fields: [subscriptions.topicId],
references: [topics.id],
}),
}));
// API Tasks: 记录 webhook 请求的处理状态
export const alertTasks = pgTable('alert_tasks', {
id: text('id').primaryKey().$defaultFn(() => crypto.randomUUID()),
topicSlug: text('topic_slug'),
senderId: text('sender_id').references(() => users.id), // 记录是谁发送的 (通过 personal_token)
status: text('status', { enum: ['pending', 'processing', 'completed', 'failed'] }).default('pending').notNull(),
recipientCount: integer('recipient_count').default(0),
successCount: integer('success_count').default(0),
payload: jsonb('payload'), // 存储 webhook body
error: text('error'),
createdAt: timestamp('created_at').defaultNow().notNull(),
updatedAt: timestamp('updated_at').defaultNow().notNull(),
export const alertTasks = pgTable("alert_tasks", {
id: text("id")
.primaryKey()
.$defaultFn(() => crypto.randomUUID()),
topicSlug: text("topic_slug"),
senderId: text("sender_id").references(() => users.id), // 记录是谁发送的 (通过 personal_token)
status: text("status", {
enum: ["pending", "processing", "completed", "failed"],
})
.default("pending")
.notNull(),
recipientCount: integer("recipient_count").default(0),
successCount: integer("success_count").default(0),
payload: jsonb("payload"), // 存储 webhook body
error: text("error"),
createdAt: timestamp("created_at").defaultNow().notNull(),
updatedAt: timestamp("updated_at").defaultNow().notNull(),
});
// Logs for each recipient in a task (optional detail)
export const alertLogs = pgTable('alert_logs', {
id: text('id').primaryKey().$defaultFn(() => crypto.randomUUID()),
taskId: text('task_id').notNull().references(() => alertTasks.id, { onDelete: 'cascade' }),
userId: text('user_id'), // Optional, in case user is deleted later
status: text('status', { enum: ['sent', 'failed'] }).notNull(),
error: text('error'),
createdAt: timestamp('created_at').defaultNow().notNull(),
export const alertLogs = pgTable("alert_logs", {
id: text("id")
.primaryKey()
.$defaultFn(() => crypto.randomUUID()),
taskId: text("task_id")
.notNull()
.references(() => alertTasks.id, { onDelete: "cascade" }),
userId: text("user_id"), // Optional, in case user is deleted later
status: text("status", { enum: ["sent", "failed"] }).notNull(),
error: text("error"),
createdAt: timestamp("created_at").defaultNow().notNull(),
});
export const alertTasksRelations = relations(alertTasks, ({ many, one }) => ({
logs: many(alertLogs),
sender: one(users, {
fields: [alertTasks.senderId],
references: [users.id],
}),
logs: many(alertLogs),
sender: one(users, {
fields: [alertTasks.senderId],
references: [users.id],
}),
}));
export const alertLogsRelations = relations(alertLogs, ({ one }) => ({
task: one(alertTasks, {
fields: [alertLogs.taskId],
references: [alertTasks.id],
}),
task: one(alertTasks, {
fields: [alertLogs.taskId],
references: [alertTasks.id],
}),
}));

71
apps/server/src/event-handler.ts
View File

@@ -1,38 +1,45 @@
import { db } from './db';
import { knownGroupChats, topicGroupChats } from './db/schema';
import { eq } from 'drizzle-orm';
import * as lark from '@larksuiteoapi/node-sdk';
import { logger } from './lib/logger';
import * as lark from "@larksuiteoapi/node-sdk";
import { eq } from "drizzle-orm";
import { db } from "./db";
import { knownGroupChats, topicGroupChats } from "./db/schema";
import { logger } from "./lib/logger";
export const eventDispatcher = new lark.EventDispatcher({
encryptKey: process.env.FEISHU_ENCRYPT_KEY,
verificationToken: process.env.FEISHU_VERIFICATION_TOKEN,
encryptKey: process.env.FEISHU_ENCRYPT_KEY,
verificationToken: process.env.FEISHU_VERIFICATION_TOKEN,
}).register({
'im.chat.member.bot.added_v1': async (data) => {
const { chat_id, name } = data as any;
logger.info({ chat_id, name }, '[Feishu Event] Bot added to group');
"im.chat.member.bot.added_v1": async (data) => {
const { chat_id, name } = data as any;
logger.info({ chat_id, name }, "[Feishu Event] Bot added to group");
if (chat_id) {
await db.insert(knownGroupChats).values({
chatId: chat_id,
name: name || 'Unknown Group',
lastActiveAt: new Date(),
}).onConflictDoUpdate({
target: knownGroupChats.chatId,
set: {
name: name || 'Unknown Group',
lastActiveAt: new Date(),
}
});
}
},
'im.chat.member.bot.deleted_v1': async (data) => {
const { chat_id } = data as any;
logger.info({ chat_id }, '[Feishu Event] Bot removed from group');
if (chat_id) {
await db
.insert(knownGroupChats)
.values({
chatId: chat_id,
name: name || "Unknown Group",
lastActiveAt: new Date(),
})
.onConflictDoUpdate({
target: knownGroupChats.chatId,
set: {
name: name || "Unknown Group",
lastActiveAt: new Date(),
},
});
}
},
"im.chat.member.bot.deleted_v1": async (data) => {
const { chat_id } = data as any;
logger.info({ chat_id }, "[Feishu Event] Bot removed from group");
if (chat_id) {
await db.delete(knownGroupChats).where(eq(knownGroupChats.chatId, chat_id));
await db.delete(topicGroupChats).where(eq(topicGroupChats.chatId, chat_id));
}
},
if (chat_id) {
await db
.delete(knownGroupChats)
.where(eq(knownGroupChats.chatId, chat_id));
await db
.delete(topicGroupChats)
.where(eq(topicGroupChats.chatId, chat_id));
}
},
});

124
apps/server/src/feishu.ts
View File

@@ -1,72 +1,78 @@
import * as lark from '@larksuiteoapi/node-sdk';
import { logger } from './lib/logger';
import * as lark from "@larksuiteoapi/node-sdk";
import { logger } from "./lib/logger";
export class FeishuClient {
public client: lark.Client;
public appId: string;
public appSecret: string;
public client: lark.Client;
public appId: string;
public appSecret: string;
constructor(appId: string, appSecret: string) {
this.appId = appId;
this.appSecret = appSecret;
this.client = new lark.Client({
appId: appId,
appSecret: appSecret,
disableTokenCache: false,
});
}
constructor(appId: string, appSecret: string) {
this.appId = appId;
this.appSecret = appSecret;
this.client = new lark.Client({
appId: appId,
appSecret: appSecret,
disableTokenCache: false,
});
}
async sendMessage(receiveId: string, receiveIdType: 'open_id' | 'user_id' | 'email' | 'chat_id', msgType: string, content: any) {
// Content needs to be stringified for 'text' type in API, but SDK might handle it differently?
// Actually SDK expects 'content' as string JSON for 'im.v1.messages.create'
const contentStr = typeof content === 'string' ? content : JSON.stringify(content);
async sendMessage(
receiveId: string,
receiveIdType: "open_id" | "user_id" | "email" | "chat_id",
msgType: string,
content: any,
) {
// Content needs to be stringified for 'text' type in API, but SDK might handle it differently?
// Actually SDK expects 'content' as string JSON for 'im.v1.messages.create'
const contentStr =
typeof content === "string" ? content : JSON.stringify(content);
try {
const response = await this.client.im.message.create({
params: {
receive_id_type: receiveIdType,
},
data: {
receive_id: receiveId,
msg_type: msgType,
content: contentStr,
},
});
try {
const response = await this.client.im.message.create({
params: {
receive_id_type: receiveIdType,
},
data: {
receive_id: receiveId,
msg_type: msgType,
content: contentStr,
},
});
if (response.code !== 0) {
logger.error({ response }, 'Feishu send message error');
throw new Error(`Failed to send message: ${response.msg}`);
}
return response.data;
} catch (e) {
console.error('Feishu SDK error:', e);
throw e;
}
}
if (response.code !== 0) {
logger.error({ response }, "Feishu send message error");
throw new Error(`Failed to send message: ${response.msg}`);
}
return response.data;
} catch (e) {
console.error("Feishu SDK error:", e);
throw e;
}
}
async getUserAccessToken(code: string): Promise<any> {
try {
const response = await this.client.authen.accessToken.create({
data: {
grant_type: 'authorization_code',
code,
},
});
async getUserAccessToken(code: string): Promise<any> {
try {
const response = await this.client.authen.accessToken.create({
data: {
grant_type: "authorization_code",
code,
},
});
if (response.code !== 0) {
logger.error({ response }, 'Feishu get user access token error');
throw new Error(`Failed to get user access token: ${response.msg}`);
}
return response.data;
} catch (e) {
console.error('Feishu SDK error:', e);
throw e;
}
}
if (response.code !== 0) {
logger.error({ response }, "Feishu get user access token error");
throw new Error(`Failed to get user access token: ${response.msg}`);
}
return response.data;
} catch (e) {
console.error("Feishu SDK error:", e);
throw e;
}
}
}
// Singleton instance
export const feishuClient = new FeishuClient(
process.env.FEISHU_APP_ID || '',
process.env.FEISHU_APP_SECRET || ''
process.env.FEISHU_APP_ID || "",
process.env.FEISHU_APP_SECRET || "",
);

57
apps/server/src/index.ts
View File

@@ -1,47 +1,52 @@
import { Hono } from 'hono';
import { logger } from './lib/logger';
import { cors } from 'hono/cors';
import { serveStatic } from 'hono/bun';
import { db } from './db';
import { topics } from './db/schema';
import webhook from './webhook';
import api from './api';
import auth from './auth';
import { Hono } from "hono";
import { serveStatic } from "hono/bun";
import { cors } from "hono/cors";
import api from "./api";
import auth from "./auth";
import { db } from "./db";
import { topics } from "./db/schema";
import { logger } from "./lib/logger";
import webhook from "./webhook";
const app = new Hono();
// Enable CORS for frontend
app.use('/*', cors({
origin: process.env.FRONTEND_URL || 'http://localhost:5173',
credentials: true,
}));
app.use(
"/*",
cors({
origin: process.env.FRONTEND_URL || "http://localhost:5173",
credentials: true,
}),
);
import feishuEvent from './api/feishu-event';
import feishuEvent from "./api/feishu-event";
// ...
// API Routes
const routes = app.route('/api/auth', auth)
.route('/api', api)
.route('/api/feishu/event', feishuEvent)
.route('/webhook', webhook);
const routes = app
.route("/api/auth", auth)
.route("/api", api)
.route("/api/feishu/event", feishuEvent)
.route("/webhook", webhook);
// Serve static files (Frontend)
app.use('/*', serveStatic({ root: './public' }));
app.get('*', serveStatic({ path: './public/index.html' }));
app.use("/*", serveStatic({ root: "./public" }));
app.get("*", serveStatic({ path: "./public/index.html" }));
app.onError((err, c) => {
logger.error({ err, method: c.req.method, url: c.req.url }, 'Global Error');
return c.json({ error: err.message || 'Internal Server Error' }, 500);
logger.error({ err, method: c.req.method, url: c.req.url }, "Global Error");
return c.json({ error: err.message || "Internal Server Error" }, 500);
});
app.get('/topics', async (c) => {
const allTopics = await db.select().from(topics);
return c.json(allTopics);
app.get("/topics", async (c) => {
const allTopics = await db.select().from(topics);
return c.json(allTopics);
});
// Start WebSocket if enabled
import { startWebSocket } from './ws';
import { startWebSocket } from "./ws";
startWebSocket();
export type AppType = typeof routes;

26
apps/server/src/lib/logger.ts
View File

@@ -1,19 +1,19 @@
import pino from 'pino';
import pino from "pino";
const isDevelopment = process.env.NODE_ENV !== 'production';
const isDevelopment = process.env.NODE_ENV !== "production";
export const logger = pino({
level: process.env.LOG_LEVEL || 'info',
transport: isDevelopment
? {
target: 'pino-pretty',
options: {
colorize: true,
translateTime: 'HH:MM:ss Z',
ignore: 'pid,hostname',
},
}
: undefined,
level: process.env.LOG_LEVEL || "info",
transport: isDevelopment
? {
target: "pino-pretty",
options: {
colorize: true,
translateTime: "HH:MM:ss Z",
ignore: "pid,hostname",
},
}
: undefined,
});
export default logger;

79
apps/server/src/middleware.ts
View File

@@ -1,51 +1,58 @@
import { Context, Next } from 'hono';
import { getCookie } from 'hono/cookie';
import type { Context, Next } from "hono";
import { getCookie } from "hono/cookie";
export interface AuthSession {
id: string;
name: string;
email: string | null;
isAdmin: boolean;
id: string;
name: string;
email: string | null;
isAdmin: boolean;
}
export async function requireAuth(c: Context, next: Next) {
const sessionCookie = getCookie(c, 'session');
const sessionCookie = getCookie(c, "session");
if (!sessionCookie) {
return c.json({ error: 'Authentication required' }, 401);
}
if (!sessionCookie) {
return c.json({ error: "Authentication required" }, 401);
}
try {
const session: AuthSession = sessionCookie ? JSON.parse(sessionCookie) : null;
if (!session) {
return c.json({ error: 'Authentication required' }, 401);
}
c.set('session', session);
await next();
} catch (error) {
console.error('[Middleware] Failed to parse session cookie:', error);
return c.json({ error: 'Invalid session' }, 401);
}
try {
const session: AuthSession = sessionCookie
? JSON.parse(sessionCookie)
: null;
if (!session) {
return c.json({ error: "Authentication required" }, 401);
}
c.set("session", session);
await next();
} catch (error) {
console.error("[Middleware] Failed to parse session cookie:", error);
return c.json({ error: "Invalid session" }, 401);
}
}
export async function requireAdmin(c: Context, next: Next) {
const sessionCookie = getCookie(c, 'session');
const sessionCookie = getCookie(c, "session");
if (!sessionCookie) {
return c.json({ error: 'Authentication required' }, 401);
}
if (!sessionCookie) {
return c.json({ error: "Authentication required" }, 401);
}
try {
const session: AuthSession = sessionCookie ? JSON.parse(sessionCookie) : null;
try {
const session: AuthSession = sessionCookie
? JSON.parse(sessionCookie)
: null;
if (!session || !session.isAdmin) {
return c.json({ error: 'Admin access required' }, 403);
}
if (!session || !session.isAdmin) {
return c.json({ error: "Admin access required" }, 403);
}
c.set('session', session);
await next();
} catch (error) {
console.error('[Middleware] Failed to parse session cookie in requireAdmin:', error);
return c.json({ error: 'Invalid session' }, 401);
}
c.set("session", session);
await next();
} catch (error) {
console.error(
"[Middleware] Failed to parse session cookie in requireAdmin:",
error,
);
return c.json({ error: "Invalid session" }, 401);
}
}

289
apps/server/src/verify_permissions.ts
View File

@@ -1,148 +1,187 @@
import app from './index';
import { db } from './db';
import { users, topics, subscriptions } from './db/schema';
import { eq } from 'drizzle-orm';
import { eq } from "drizzle-orm";
import { db } from "./db";
import { subscriptions, topics, users } from "./db/schema";
import app from "./index";
async function verify() {
console.log('Starting Verification...');
let errors = 0;
console.log("Starting Verification...");
let errors = 0;
// 1. Setup Test Data
const timestamp = Date.now();
// 1. Setup Test Data
const timestamp = Date.now();
// Create Non-Admin User
const [userUser] = await db.insert(users).values({
name: `TestUser_${timestamp}`,
feishuUserId: `test_user_${timestamp}`,
email: `test_user_${timestamp}@example.com`,
isAdmin: false
}).returning();
// Create Non-Admin User
const [userUser] = await db
.insert(users)
.values({
name: `TestUser_${timestamp}`,
feishuUserId: `test_user_${timestamp}`,
email: `test_user_${timestamp}@example.com`,
isAdmin: false,
})
.returning();
// Create Admin User
const [adminUser] = await db.insert(users).values({
name: `TestAdmin_${timestamp}`,
feishuUserId: `test_admin_${timestamp}`,
email: `test_admin_${timestamp}@example.com`,
isAdmin: true
}).returning();
// Create Admin User
const [adminUser] = await db
.insert(users)
.values({
name: `TestAdmin_${timestamp}`,
feishuUserId: `test_admin_${timestamp}`,
email: `test_admin_${timestamp}@example.com`,
isAdmin: true,
})
.returning();
// Create Topic
const [topic] = await db.insert(topics).values({
name: `TestTopic_${timestamp}`,
slug: `test-topic-${timestamp}`,
description: 'Test Description'
}).returning();
// Create Topic
const [topic] = await db
.insert(topics)
.values({
name: `TestTopic_${timestamp}`,
slug: `test-topic-${timestamp}`,
description: "Test Description",
})
.returning();
// Subscribe User to Topic
await db.insert(subscriptions).values({
userId: userUser.id,
topicId: topic.id
});
// Subscribe User to Topic
await db.insert(subscriptions).values({
userId: userUser.id,
topicId: topic.id,
});
console.log('Test Data Created:', { user: userUser.id, admin: adminUser.id, topic: topic.id });
console.log("Test Data Created:", {
user: userUser.id,
admin: adminUser.id,
topic: topic.id,
});
try {
// 2. Test GET /users (Admin Only)
try {
// 2. Test GET /users (Admin Only)
// Test as Non-Admin
const sessionUser = { userId: userUser.id, name: userUser.name, email: userUser.email, isAdmin: userUser.isAdmin };
const req1 = new Request('http://localhost/api/users', {
headers: {
'Cookie': `session=${encodeURIComponent(JSON.stringify(sessionUser))}`
}
});
const res1 = await app.request(req1);
// Test as Non-Admin
const sessionUser = {
userId: userUser.id,
name: userUser.name,
email: userUser.email,
isAdmin: userUser.isAdmin,
};
const req1 = new Request("http://localhost/api/users", {
headers: {
Cookie: `session=${encodeURIComponent(JSON.stringify(sessionUser))}`,
},
});
const res1 = await app.request(req1);
if (res1.status === 403) {
console.log('✅ PASS: GET /users as Non-Admin returned 403');
} else {
console.error(`❌ FAIL: GET /users as Non-Admin returned ${res1.status} (expected 403)`);
errors++;
}
if (res1.status === 403) {
console.log("✅ PASS: GET /users as Non-Admin returned 403");
} else {
console.error(
`❌ FAIL: GET /users as Non-Admin returned ${res1.status} (expected 403)`,
);
errors++;
}
// Test as Admin
const sessionAdmin = { userId: adminUser.id, name: adminUser.name, email: adminUser.email, isAdmin: adminUser.isAdmin };
const req2 = new Request('http://localhost/api/users', {
headers: {
'Cookie': `session=${encodeURIComponent(JSON.stringify(sessionAdmin))}`
}
});
const res2 = await app.request(req2);
// Test as Admin
const sessionAdmin = {
userId: adminUser.id,
name: adminUser.name,
email: adminUser.email,
isAdmin: adminUser.isAdmin,
};
const req2 = new Request("http://localhost/api/users", {
headers: {
Cookie: `session=${encodeURIComponent(JSON.stringify(sessionAdmin))}`,
},
});
const res2 = await app.request(req2);
if (res2.status === 200) {
console.log('✅ PASS: GET /users as Admin returned 200');
} else {
console.error(`❌ FAIL: GET /users as Admin returned ${res2.status} (expected 200)`);
errors++;
}
if (res2.status === 200) {
console.log("✅ PASS: GET /users as Admin returned 200");
} else {
console.error(
`❌ FAIL: GET /users as Admin returned ${res2.status} (expected 200)`,
);
errors++;
}
// 3. Test GET /topics (Filtered)
// 3. Test GET /topics (Filtered)
// Test as Non-Admin (Should see ONLY their subscription)
const req3 = new Request('http://localhost/api/topics', {
headers: {
'Cookie': `session=${encodeURIComponent(JSON.stringify(sessionUser))}`
}
});
const res3 = await app.request(req3);
const data3 = await res3.json();
// Test as Non-Admin (Should see ONLY their subscription)
const req3 = new Request("http://localhost/api/topics", {
headers: {
Cookie: `session=${encodeURIComponent(JSON.stringify(sessionUser))}`,
},
});
const res3 = await app.request(req3);
const data3 = await res3.json();
const targetTopic = (data3 as any).find((t: any) => t.id === topic.id);
if (targetTopic) {
if (targetTopic.subscriptions.length === 1 && targetTopic.subscriptions[0].userId === userUser.id) {
console.log('✅ PASS: GET /topics as Non-Admin shows correct personal subscription');
} else {
console.error('❌ FAIL: GET /topics as Non-Admin showed wrong subscriptions:', targetTopic.subscriptions);
errors++;
}
} else {
console.error('❌ FAIL: Test topic not found in list');
errors++;
}
const targetTopic = (data3 as any).find((t: any) => t.id === topic.id);
if (targetTopic) {
if (
targetTopic.subscriptions.length === 1 &&
targetTopic.subscriptions[0].userId === userUser.id
) {
console.log(
"✅ PASS: GET /topics as Non-Admin shows correct personal subscription",
);
} else {
console.error(
"❌ FAIL: GET /topics as Non-Admin showed wrong subscriptions:",
targetTopic.subscriptions,
);
errors++;
}
} else {
console.error("❌ FAIL: Test topic not found in list");
errors++;
}
// Test as Admin (Should see ALL subscriptions?? Wait, I didn't add another subscription. Let's add admin subscription too)
// Actually, let's just check that Admin sees the User's subscription.
// In my logic: isAdmin ? undefined (all) : ...
// So Admin should see User's subscription.
// Test as Admin (Should see ALL subscriptions?? Wait, I didn't add another subscription. Let's add admin subscription too)
// Actually, let's just check that Admin sees the User's subscription.
// In my logic: isAdmin ? undefined (all) : ...
// So Admin should see User's subscription.
const req4 = new Request('http://localhost/api/topics', {
headers: {
'Cookie': `session=${encodeURIComponent(JSON.stringify(sessionAdmin))}`
}
});
const res4 = await app.request(req4);
const data4 = await res4.json();
const req4 = new Request("http://localhost/api/topics", {
headers: {
Cookie: `session=${encodeURIComponent(JSON.stringify(sessionAdmin))}`,
},
});
const res4 = await app.request(req4);
const data4 = await res4.json();
const targetTopicAdmin = (data4 as any).find((t: any) => t.id === topic.id);
// Should see the subscription for userUser
const hasUserSub = targetTopicAdmin.subscriptions.some((s: any) => s.userId === userUser.id);
if (hasUserSub) {
console.log('✅ PASS: GET /topics as Admin sees other users subscriptions');
} else {
console.error('❌ FAIL: GET /topics as Admin did NOT see other users subscriptions');
errors++;
}
const targetTopicAdmin = (data4 as any).find((t: any) => t.id === topic.id);
// Should see the subscription for userUser
const hasUserSub = targetTopicAdmin.subscriptions.some(
(s: any) => s.userId === userUser.id,
);
if (hasUserSub) {
console.log(
"✅ PASS: GET /topics as Admin sees other users subscriptions",
);
} else {
console.error(
"❌ FAIL: GET /topics as Admin did NOT see other users subscriptions",
);
errors++;
}
} catch (e) {
console.error("Test Exception:", e);
errors++;
} finally {
// 4. Cleanup
await db.delete(subscriptions).where(eq(subscriptions.topicId, topic.id));
await db.delete(topics).where(eq(topics.id, topic.id));
await db.delete(users).where(eq(users.id, userUser.id));
await db.delete(users).where(eq(users.id, adminUser.id));
console.log("Cleanup Completed");
}
} catch (e) {
console.error('Test Exception:', e);
errors++;
} finally {
// 4. Cleanup
await db.delete(subscriptions).where(eq(subscriptions.topicId, topic.id));
await db.delete(topics).where(eq(topics.id, topic.id));
await db.delete(users).where(eq(users.id, userUser.id));
await db.delete(users).where(eq(users.id, adminUser.id));
console.log('Cleanup Completed');
}
if (errors === 0) {
console.log('🎉 ALL TESTS PASSED');
process.exit(0);
} else {
console.error('💥 SOME TESTS FAILED');
process.exit(1);
}
if (errors === 0) {
console.log("🎉 ALL TESTS PASSED");
process.exit(0);
} else {
console.error("💥 SOME TESTS FAILED");
process.exit(1);
}
}
verify();

579
apps/server/src/webhook.ts
View File

@@ -1,311 +1,362 @@
import { Hono } from 'hono';
import { eq } from 'drizzle-orm';
import { db } from './db';
import { topics, alertTasks, alertLogs, users } from './db/schema';
import { feishuClient } from './feishu';
import { logger } from './lib/logger';
import { eq } from "drizzle-orm";
import { Hono } from "hono";
import { db } from "./db";
import { alertLogs, alertTasks, topics, users } from "./db/schema";
import { feishuClient } from "./feishu";
import { logger } from "./lib/logger";
const webhook = new Hono();
webhook.post('/:token/topic/:slug', async (c) => {
const token = c.req.param('token');
const slug = c.req.param('slug');
logger.info({ token, slug }, '[Webhook] Received request');
webhook.post("/:token/topic/:slug", async (c) => {
const token = c.req.param("token");
const slug = c.req.param("slug");
logger.info({ token, slug }, "[Webhook] Received request");
// 0. Find the User by Token
const user = await db.query.users.findFirst({
where: eq(users.personalToken, token),
});
// 0. Find the User by Token
const user = await db.query.users.findFirst({
where: eq(users.personalToken, token),
});
if (!user) {
logger.warn({ token }, '[Webhook] Invalid personal token');
return c.json({ error: 'Invalid personal token' }, 401);
}
let body;
try {
const rawBody = await c.req.text();
logger.debug({ bodyLength: rawBody.length }, '[Webhook] Received raw body');
if (!rawBody || rawBody.trim() === '') {
return c.json({ error: 'Empty body' }, 400);
}
body = JSON.parse(rawBody);
} catch (e) {
logger.error({ err: e }, '[Webhook] Failed to parse JSON body');
return c.json({ error: 'Invalid JSON body' }, 400);
}
if (!user) {
logger.warn({ token }, "[Webhook] Invalid personal token");
return c.json({ error: "Invalid personal token" }, 401);
}
let body: any;
try {
const rawBody = await c.req.text();
logger.debug({ bodyLength: rawBody.length }, "[Webhook] Received raw body");
if (!rawBody || rawBody.trim() === "") {
return c.json({ error: "Empty body" }, 400);
}
body = JSON.parse(rawBody);
} catch (e) {
logger.error({ err: e }, "[Webhook] Failed to parse JSON body");
return c.json({ error: "Invalid JSON body" }, 400);
}
// 1. Find the Topic
const topic = await db.query.topics.findFirst({
where: eq(topics.slug, slug),
with: {
subscriptions: {
with: {
user: true
}
},
groupChats: true
}
});
// 1. Find the Topic
const topic = await db.query.topics.findFirst({
where: eq(topics.slug, slug),
with: {
subscriptions: {
with: {
user: true,
},
},
groupChats: true,
},
});
if (!topic) {
logger.warn({ slug }, '[Webhook] Topic not found');
return c.json({ error: 'Topic not found' }, 404);
}
if (!topic) {
logger.warn({ slug }, "[Webhook] Topic not found");
return c.json({ error: "Topic not found" }, 404);
}
logger.info({ topicName: topic.name }, '[Webhook] Found topic');
logger.info({ topicName: topic.name }, "[Webhook] Found topic");
// 2. Collect recipients
const userRecipients = topic.subscriptions
.map(sub => sub.user)
.filter(u => !!u && !!u.feishuUserId)
.map(u => ({
type: 'user',
id: u.id,
name: u.name,
feishuId: u.feishuUserId,
idType: u.feishuUserId.startsWith('ou_') ? 'open_id' : 'user_id'
}));
// 2. Collect recipients
const userRecipients = topic.subscriptions
.map((sub) => sub.user)
.filter((u) => !!u && !!u.feishuUserId)
.map((u) => ({
type: "user",
id: u.id,
name: u.name,
feishuId: u.feishuUserId,
idType: u.feishuUserId.startsWith("ou_") ? "open_id" : "user_id",
}));
const groupRecipients = topic.groupChats.map(g => ({
type: 'group',
id: g.id, // Binding ID
name: g.name,
feishuId: g.chatId,
idType: 'chat_id'
}));
const groupRecipients = topic.groupChats.map((g) => ({
type: "group",
id: g.id, // Binding ID
name: g.name,
feishuId: g.chatId,
idType: "chat_id",
}));
const allRecipients = [...userRecipients, ...groupRecipients];
const allRecipients = [...userRecipients, ...groupRecipients];
const [task] = await db.insert(alertTasks).values({
topicSlug: topic.slug,
senderId: user.id,
status: 'processing',
recipientCount: allRecipients.length,
successCount: 0,
payload: body,
}).returning();
const [task] = await db
.insert(alertTasks)
.values({
topicSlug: topic.slug,
senderId: user.id,
status: "processing",
recipientCount: allRecipients.length,
successCount: 0,
payload: body,
})
.returning();
if (allRecipients.length === 0) {
await db.update(alertTasks)
.set({ status: 'completed', updatedAt: new Date() })
.where(eq(alertTasks.id, task.id));
if (allRecipients.length === 0) {
await db
.update(alertTasks)
.set({ status: "completed", updatedAt: new Date() })
.where(eq(alertTasks.id, task.id));
return c.json({
message: 'No subscribers for this topic',
taskId: task.id,
status: 'completed'
});
}
return c.json({
message: "No subscribers for this topic",
taskId: task.id,
status: "completed",
});
}
logger.info({
taskId: task.id,
userCount: userRecipients.length,
groupCount: groupRecipients.length
}, '[Webhook] Dispatching alerts');
logger.info(
{
taskId: task.id,
userCount: userRecipients.length,
groupCount: groupRecipients.length,
},
"[Webhook] Dispatching alerts",
);
// 4. Send Private Messages asynchronously
Promise.allSettled(allRecipients.map(async (recipient) => {
try {
// Construct message content
let msgType = body.msg_type || 'text';
let content = body.content;
// 4. Send Private Messages asynchronously
Promise.allSettled(
allRecipients.map(async (recipient) => {
try {
// Construct message content
let msgType = body.msg_type || "text";
let content = body.content;
if (!content) {
msgType = 'text';
content = { text: JSON.stringify(body, null, 2) };
// Deep copy needed? usually content is new obj if we parsed body
} else {
// Deep clone content to avoid mutating shared object for parallel requests if we modify it
content = JSON.parse(JSON.stringify(content));
}
if (!content) {
msgType = "text";
content = { text: JSON.stringify(body, null, 2) };
// Deep copy needed? usually content is new obj if we parsed body
} else {
// Deep clone content to avoid mutating shared object for parallel requests if we modify it
content = JSON.parse(JSON.stringify(content));
}
// Add metadata
if (msgType === 'text' && content.text) {
content.text = `[Topic: ${topic.name}]\n${content.text}`;
}
if (msgType === 'interactive' && content.header) {
content.header.title.content = `[${topic.name}] ${content.header.title.content}`;
}
// Add metadata
if (msgType === "text" && content.text) {
content.text = `[Topic: ${topic.name}]\n${content.text}`;
}
if (msgType === "interactive" && content.header) {
content.header.title.content = `[${topic.name}] ${content.header.title.content}`;
}
await feishuClient.sendMessage(recipient.feishuId, recipient.idType as any, msgType, content);
await feishuClient.sendMessage(
recipient.feishuId,
recipient.idType as any,
msgType,
content,
);
return { recipientId: recipient.id, status: 'sent', error: null };
} catch (error: any) {
logger.error({
err: error,
recipientType: recipient.type,
recipientName: recipient.name
}, 'Failed to send alert');
return { recipientId: recipient.id, status: 'failed', error: error.message };
}
})).then(async (results) => {
const successCount = results.filter(r => r.status === 'fulfilled' && (r.value as any).status === 'sent').length;
const failures = results
.filter(r => r.status === 'rejected' || (r.status === 'fulfilled' && (r.value as any).status === 'failed'))
.length;
return { recipientId: recipient.id, status: "sent", error: null };
} catch (error: any) {
logger.error(
{
err: error,
recipientType: recipient.type,
recipientName: recipient.name,
},
"Failed to send alert",
);
return {
recipientId: recipient.id,
status: "failed",
error: error.message,
};
}
}),
).then(async (results) => {
const successCount = results.filter(
(r) => r.status === "fulfilled" && (r.value as any).status === "sent",
).length;
const failures = results.filter(
(r) =>
r.status === "rejected" ||
(r.status === "fulfilled" && (r.value as any).status === "failed"),
).length;
// Determine final status
const finalStatus = failures === 0 ? 'completed' : (successCount > 0 ? 'completed' : 'failed');
// Determine final status
const finalStatus =
failures === 0 ? "completed" : successCount > 0 ? "completed" : "failed";
// Update Task
await db.update(alertTasks).set({
status: finalStatus,
successCount,
updatedAt: new Date(),
// If fully failed, maybe store the first error in the task record for quick view
error: failures > 0 ? `Failed to send to ${failures} recipients` : null,
}).where(eq(alertTasks.id, task.id));
// Update Task
await db
.update(alertTasks)
.set({
status: finalStatus,
successCount,
updatedAt: new Date(),
// If fully failed, maybe store the first error in the task record for quick view
error: failures > 0 ? `Failed to send to ${failures} recipients` : null,
})
.where(eq(alertTasks.id, task.id));
// Insert Logs
const logs = results.map((r, index) => {
const recipient = allRecipients[index];
if (r.status === 'fulfilled') {
const val = r.value as any;
return {
taskId: task.id,
userId: recipient.type === 'user' ? recipient.id : null, // Only link users
// We could add connection to group binding if we altered schema, but for now log it
status: val.status,
error: val.error,
};
} else {
return {
taskId: task.id,
userId: recipient.type === 'user' ? recipient.id : null,
status: 'failed',
error: r.reason ? String(r.reason) : 'Unknown error',
};
}
});
// Insert Logs
const logs = results.map((r, index) => {
const recipient = allRecipients[index];
if (r.status === "fulfilled") {
const val = r.value as any;
return {
taskId: task.id,
userId: recipient.type === "user" ? recipient.id : null, // Only link users
// We could add connection to group binding if we altered schema, but for now log it
status: val.status,
error: val.error,
};
} else {
return {
taskId: task.id,
userId: recipient.type === "user" ? recipient.id : null,
status: "failed",
error: r.reason ? String(r.reason) : "Unknown error",
};
}
});
if (logs.length > 0) {
await db.insert(alertLogs).values(logs as any);
}
if (logs.length > 0) {
await db.insert(alertLogs).values(logs as any);
}
logger.info({
taskId: task.id,
successCount,
totalCount: allRecipients.length,
slug
}, '[Webhook] Task processed');
});
logger.info(
{
taskId: task.id,
successCount,
totalCount: allRecipients.length,
slug,
},
"[Webhook] Task processed",
);
});
return c.json({
message: 'Alert received and processing started',
taskId: task.id,
status: 'processing',
recipientCount: allRecipients.length
});
return c.json({
message: "Alert received and processing started",
taskId: task.id,
status: "processing",
recipientCount: allRecipients.length,
});
});
webhook.post('/:token/dm', async (c) => {
const token = c.req.param('token');
logger.info({ token }, '[Webhook] Received DM request');
webhook.post("/:token/dm", async (c) => {
const token = c.req.param("token");
logger.info({ token }, "[Webhook] Received DM request");
// 0. Find the User by Token
const user = await db.query.users.findFirst({
where: eq(users.personalToken, token),
});
// 0. Find the User by Token
const user = await db.query.users.findFirst({
where: eq(users.personalToken, token),
});
if (!user) {
logger.warn({ token }, '[Webhook] Invalid personal token');
return c.json({ error: 'Invalid personal token' }, 401);
}
if (!user) {
logger.warn({ token }, "[Webhook] Invalid personal token");
return c.json({ error: "Invalid personal token" }, 401);
}
if (!user.feishuUserId) {
return c.json({ error: 'User has no Feishu ID linked' }, 400);
}
if (!user.feishuUserId) {
return c.json({ error: "User has no Feishu ID linked" }, 400);
}
let body;
try {
const rawBody = await c.req.text();
if (!rawBody || rawBody.trim() === '') {
return c.json({ error: 'Empty body' }, 400);
}
body = JSON.parse(rawBody);
} catch (e) {
return c.json({ error: 'Invalid JSON body' }, 400);
}
let body: any;
try {
const rawBody = await c.req.text();
if (!rawBody || rawBody.trim() === "") {
return c.json({ error: "Empty body" }, 400);
}
body = JSON.parse(rawBody);
} catch (_e) {
return c.json({ error: "Invalid JSON body" }, 400);
}
// 1. Create Task (topicSlug is null for DM)
const [task] = await db.insert(alertTasks).values({
topicSlug: null,
senderId: user.id,
status: 'processing',
recipientCount: 1,
successCount: 0,
payload: body,
}).returning();
// 1. Create Task (topicSlug is null for DM)
const [task] = await db
.insert(alertTasks)
.values({
topicSlug: null,
senderId: user.id,
status: "processing",
recipientCount: 1,
successCount: 0,
payload: body,
})
.returning();
// 2. Send Message
(async () => {
try {
let msgType = body.msg_type || 'text';
let content = body.content;
// 2. Send Message
(async () => {
try {
let msgType = body.msg_type || "text";
let content = body.content;
if (!content) {
msgType = 'text';
content = { text: JSON.stringify(body, null, 2) };
}
if (!content) {
msgType = "text";
content = { text: JSON.stringify(body, null, 2) };
}
// Add metadata
if (msgType === 'text' && content.text) {
content.text = `[Direct Message]\n${content.text}`;
}
if (msgType === 'interactive' && content.header) {
content.header.title.content = `[DM] ${content.header.title.content}`;
}
// Add metadata
if (msgType === "text" && content.text) {
content.text = `[Direct Message]\n${content.text}`;
}
if (msgType === "interactive" && content.header) {
content.header.title.content = `[DM] ${content.header.title.content}`;
}
const idType = user.feishuUserId.startsWith('ou_') ? 'open_id' : 'user_id';
await feishuClient.sendMessage(user.feishuUserId, idType, msgType, content);
const idType = user.feishuUserId.startsWith("ou_")
? "open_id"
: "user_id";
await feishuClient.sendMessage(
user.feishuUserId,
idType,
msgType,
content,
);
// Update Task
await db.update(alertTasks).set({
status: 'completed',
successCount: 1,
updatedAt: new Date(),
}).where(eq(alertTasks.id, task.id));
// Update Task
await db
.update(alertTasks)
.set({
status: "completed",
successCount: 1,
updatedAt: new Date(),
})
.where(eq(alertTasks.id, task.id));
// Insert Log
await db.insert(alertLogs).values({
taskId: task.id,
userId: user.id,
status: 'sent',
});
// Insert Log
await db.insert(alertLogs).values({
taskId: task.id,
userId: user.id,
status: "sent",
});
} catch (error: any) {
logger.error({ err: error, userName: user.name }, "Failed to send DM");
await db
.update(alertTasks)
.set({
status: "failed",
updatedAt: new Date(),
error: error.message,
})
.where(eq(alertTasks.id, task.id));
} catch (error: any) {
logger.error({ err: error, userName: user.name }, 'Failed to send DM');
await db.update(alertTasks).set({
status: 'failed',
updatedAt: new Date(),
error: error.message,
}).where(eq(alertTasks.id, task.id));
await db.insert(alertLogs).values({
taskId: task.id,
userId: user.id,
status: "failed",
error: error.message,
});
}
})();
await db.insert(alertLogs).values({
taskId: task.id,
userId: user.id,
status: 'failed',
error: error.message,
});
}
})();
return c.json({
message: 'DM received and processing started',
taskId: task.id,
status: 'processing',
recipientCount: 1
});
return c.json({
message: "DM received and processing started",
taskId: task.id,
status: "processing",
recipientCount: 1,
});
});
// Help message for non-POST requests or malformed URLs
webhook.all('/:token/topic/:slug', (c) => {
return c.json({
error: 'Method not allowed',
message: 'Please use POST to send alerts to this webhook',
format: 'POST /webhook/:token/topic/:slug',
example: 'curl -X POST -H "Content-Type: application/json" -d \'{"content":{"text":"Hello"}}\' URL'
}, 405);
webhook.all("/:token/topic/:slug", (c) => {
return c.json(
{
error: "Method not allowed",
message: "Please use POST to send alerts to this webhook",
format: "POST /webhook/:token/topic/:slug",
example:
'curl -X POST -H "Content-Type: application/json" -d \'{"content":{"text":"Hello"}}\' URL',
},
405,
);
});
export default webhook;

36
apps/server/src/ws.ts
View File

@@ -1,22 +1,22 @@
import * as lark from '@larksuiteoapi/node-sdk';
import { feishuClient } from './feishu';
import { eventDispatcher } from './event-handler';
import { logger } from './lib/logger';
import * as lark from "@larksuiteoapi/node-sdk";
import { eventDispatcher } from "./event-handler";
import { feishuClient } from "./feishu";
import { logger } from "./lib/logger";
export const startWebSocket = async () => {
if (process.env.FEISHU_USE_WS !== 'true') {
return;
}
if (process.env.FEISHU_USE_WS !== "true") {
return;
}
logger.info('[Feishu WS] Starting WebSocket connection...');
try {
const wsClient = new lark.WSClient({
appId: feishuClient.appId,
appSecret: feishuClient.appSecret,
});
await wsClient.start({ eventDispatcher });
logger.info('[Feishu WS] Connected successfully');
} catch (e) {
logger.error({ err: e }, '[Feishu WS] Connection failed');
}
logger.info("[Feishu WS] Starting WebSocket connection...");
try {
const wsClient = new lark.WSClient({
appId: feishuClient.appId,
appSecret: feishuClient.appSecret,
});
await wsClient.start({ eventDispatcher });
logger.info("[Feishu WS] Connected successfully");
} catch (e) {
logger.error({ err: e }, "[Feishu WS] Connection failed");
}
};

34
apps/server/tsconfig.json
View File

@@ -1,21 +1,15 @@
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"moduleResolution": "bundler",
"strict": true,
"skipLibCheck": true,
"types": [
"bun-types"
],
"baseUrl": ".",
"paths": {
"@/*": [
"./src/*"
]
}
},
"include": [
"src"
]
}
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"moduleResolution": "bundler",
"strict": true,
"skipLibCheck": true,
"types": ["bun-types"],
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["src"]
}

62
apps/web/package.json
View File

@@ -1,32 +1,32 @@
{
"name": "@alertmessagecenter/web",
"version": "1.2.0",
"type": "module",
"scripts": {
"dev": "bun run --env-file .env vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"clsx": "^2.0.0",
"hono": "^4.11.3",
"lucide-react": "^0.300.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"tailwind-merge": "^2.0.0"
},
"devDependencies": {
"@types/react": "^18.2.0",
"@types/react-dom": "^18.2.0",
"@vitejs/plugin-react": "^4.0.0",
"autoprefixer": "^10.0.0",
"postcss": "^8.0.0",
"tailwindcss": "^3.0.0",
"typescript": "^5.0.0",
"vite": "^5.0.0",
"drizzle-orm": "^0.45.1",
"zod": "^3.0.0",
"@types/node": "^20.0.0",
"bun-types": "latest"
}
}
"name": "@alertmessagecenter/web",
"version": "1.2.0",
"type": "module",
"scripts": {
"dev": "bun run --env-file .env vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"clsx": "^2.0.0",
"hono": "^4.11.3",
"lucide-react": "^0.300.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"tailwind-merge": "^2.0.0"
},
"devDependencies": {
"@types/react": "^18.2.0",
"@types/react-dom": "^18.2.0",
"@vitejs/plugin-react": "^4.0.0",
"autoprefixer": "^10.0.0",
"postcss": "^8.0.0",
"tailwindcss": "^3.0.0",
"typescript": "^5.0.0",
"vite": "^5.0.0",
"drizzle-orm": "^0.45.1",
"zod": "^3.0.0",
"@types/node": "^20.0.0",
"bun-types": "latest"
}
}

10
apps/web/postcss.config.js
View File

@@ -1,6 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};

252
apps/web/src/App.tsx
View File

@@ -1,125 +1,147 @@
import { useState, useEffect } from 'react'
import { Hash, Users, Activity, LogIn, LogOut, ShieldCheck, Settings } from 'lucide-react'
import { useAuth } from './contexts/AuthContext'
import TopicsView from './views/TopicsView'
import UsersView from './views/UsersView'
import AdminView from './views/AdminView'
import {
Activity,
Hash,
LogIn,
LogOut,
Settings,
ShieldCheck,
Users,
} from "lucide-react";
import { useEffect, useState } from "react";
import { useAuth } from "./contexts/AuthContext";
import AdminView from "./views/AdminView";
import TopicsView from "./views/TopicsView";
import UsersView from "./views/UsersView";
function App() {
const { user, loading, login, logout } = useAuth()
const [activeTab, setActiveTab] = useState('topics')
const [hasSetDefault, setHasSetDefault] = useState(false)
const { user, loading, login, logout } = useAuth();
const [activeTab, setActiveTab] = useState("topics");
const [hasSetDefault, setHasSetDefault] = useState(false);
useEffect(() => {
if (!loading && user && !hasSetDefault) {
setActiveTab(user.isAdmin ? 'admin' : 'topics')
setHasSetDefault(true)
}
}, [user, loading, hasSetDefault])
useEffect(() => {
if (!loading && user && !hasSetDefault) {
setActiveTab(user.isAdmin ? "admin" : "topics");
setHasSetDefault(true);
}
}, [user, loading, hasSetDefault]);
if (loading) {
return (
<div className="min-h-screen flex items-center justify-center bg-gray-50">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600"></div>
</div>
)
}
if (loading) {
return (
<div className="min-h-screen flex items-center justify-center bg-gray-50">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600"></div>
</div>
);
}
if (!user) {
return (
<div className="min-h-screen flex items-center justify-center bg-gray-50">
<div className="max-w-md w-full bg-white shadow-lg rounded-lg p-8">
<div className="text-center">
<Activity className="h-16 w-16 text-indigo-600 mx-auto mb-4" />
<h1 className="text-3xl font-bold text-gray-900 mb-2">Alert Message Center</h1>
<p className="text-gray-600 mb-6">Please sign in with Feishu to continue</p>
<button
onClick={login}
className="w-full flex items-center justify-center bg-indigo-600 text-white py-3 px-4 rounded-lg hover:bg-indigo-700 transition"
>
<LogIn className="mr-2 h-5 w-5" />
Sign in with Feishu
</button>
</div>
</div>
</div>
)
}
if (!user) {
return (
<div className="min-h-screen flex items-center justify-center bg-gray-50">
<div className="max-w-md w-full bg-white shadow-lg rounded-lg p-8">
<div className="text-center">
<Activity className="h-16 w-16 text-indigo-600 mx-auto mb-4" />
<h1 className="text-3xl font-bold text-gray-900 mb-2">
Alert Message Center
</h1>
<p className="text-gray-600 mb-6">
Please sign in with Feishu to continue
</p>
<button
type="button"
onClick={login}
className="w-full flex items-center justify-center bg-indigo-600 text-white py-3 px-4 rounded-lg hover:bg-indigo-700 transition"
>
<LogIn className="mr-2 h-5 w-5" />
Sign in with Feishu
</button>
</div>
</div>
</div>
);
}
return (
<div className="min-h-screen bg-gray-50">
<nav className="bg-white shadow-sm border-b">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between h-16">
<div className="flex">
<div className="flex-shrink-0 flex items-center">
<Activity className="h-8 w-8 text-indigo-600" />
<span className="ml-2 text-xl font-bold text-gray-900">Alert Message Center</span>
</div>
<div className="hidden sm:ml-6 sm:flex sm:space-x-8">
{user.isAdmin && (
<button
onClick={() => setActiveTab('admin')}
className={`${activeTab === 'admin'
? 'border-indigo-500 text-gray-900'
: 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'
} inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium`}
>
<Settings className="mr-2 h-4 w-4" />
Admin
</button>
)}
<button
onClick={() => setActiveTab('topics')}
className={`${activeTab === 'topics'
? 'border-indigo-500 text-gray-900'
: 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'
} inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium`}
>
<Hash className="mr-2 h-4 w-4" />
Topics
</button>
{user.isAdmin && (
<button
onClick={() => setActiveTab('users')}
className={`${activeTab === 'users'
? 'border-indigo-500 text-gray-900'
: 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'
} inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium`}
>
<Users className="mr-2 h-4 w-4" />
Users
</button>
)}
</div>
</div>
return (
<div className="min-h-screen bg-gray-50">
<nav className="bg-white shadow-sm border-b">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between h-16">
<div className="flex">
<div className="flex-shrink-0 flex items-center">
<Activity className="h-8 w-8 text-indigo-600" />
<span className="ml-2 text-xl font-bold text-gray-900">
Alert Message Center
</span>
</div>
<div className="hidden sm:ml-6 sm:flex sm:space-x-8">
{user.isAdmin && (
<button
type="button"
onClick={() => setActiveTab("admin")}
className={`${
activeTab === "admin"
? "border-indigo-500 text-gray-900"
: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700"
} inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium`}
>
<Settings className="mr-2 h-4 w-4" />
Admin
</button>
)}
<button
type="button"
onClick={() => setActiveTab("topics")}
className={`${
activeTab === "topics"
? "border-indigo-500 text-gray-900"
: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700"
} inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium`}
>
<Hash className="mr-2 h-4 w-4" />
Topics
</button>
{user.isAdmin && (
<button
type="button"
onClick={() => setActiveTab("users")}
className={`${
activeTab === "users"
? "border-indigo-500 text-gray-900"
: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700"
} inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium`}
>
<Users className="mr-2 h-4 w-4" />
Users
</button>
)}
</div>
</div>
<div className="flex items-center space-x-4">
<div className="flex items-center space-x-2">
<span className="text-sm text-gray-700">{user.name}</span>
{user.isAdmin && (
<ShieldCheck className="h-5 w-5 text-indigo-600" />
)}
</div>
<button
onClick={logout}
className="inline-flex items-center px-3 py-2 border border-transparent text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100"
>
<LogOut className="mr-1 h-4 w-4" />
Logout
</button>
</div>
</div>
</div>
</nav>
<div className="flex items-center space-x-4">
<div className="flex items-center space-x-2">
<span className="text-sm text-gray-700">{user.name}</span>
{user.isAdmin && (
<ShieldCheck className="h-5 w-5 text-indigo-600" />
)}
</div>
<button
type="button"
onClick={logout}
className="inline-flex items-center px-3 py-2 border border-transparent text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100"
>
<LogOut className="mr-1 h-4 w-4" />
Logout
</button>
</div>
</div>
</div>
</nav>
<main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
{activeTab === 'topics' && <TopicsView />}
{activeTab === 'users' && user.isAdmin && <UsersView />}
{activeTab === 'admin' && user.isAdmin && <AdminView />}
</main>
</div>
)
<main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
{activeTab === "topics" && <TopicsView />}
{activeTab === "users" && user.isAdmin && <UsersView />}
{activeTab === "admin" && user.isAdmin && <AdminView />}
</main>
</div>
);
}
export default App
export default App;

375
apps/web/src/components/GroupBindingsModal.tsx
View File

@@ -1,196 +1,229 @@
import { useState, useEffect } from 'react';
import { Trash2, Plus, MessageCircle } from 'lucide-react';
import Modal from './Modal';
import { client } from '../lib/client';
import { MessageCircle, Plus, Trash2 } from "lucide-react";
import { useCallback, useEffect, useState } from "react";
import { client } from "../lib/client";
import Modal from "./Modal";
interface GroupBinding {
id: string;
chatId: string;
name: string;
id: string;
chatId: string;
name: string;
}
interface KnownGroup {
chatId: string;
name: string;
lastActiveAt: string;
chatId: string;
name: string;
lastActiveAt: string;
}
interface GroupBindingsModalProps {
isOpen: boolean;
onClose: () => void;
topicId: string;
topicName: string;
isOpen: boolean;
onClose: () => void;
topicId: string;
topicName: string;
}
export default function GroupBindingsModal({ isOpen, onClose, topicId, topicName }: GroupBindingsModalProps) {
// const { user } = useAuth(); // Unused
const [bindings, setBindings] = useState<GroupBinding[]>([]);
const [knownGroups, setKnownGroups] = useState<KnownGroup[]>([]);
const [selectedChatId, setSelectedChatId] = useState('');
const [loading, setLoading] = useState(false);
const [status, setStatus] = useState<{ type: 'success' | 'error', message: string } | null>(null);
export default function GroupBindingsModal({
isOpen,
onClose,
topicId,
topicName,
}: GroupBindingsModalProps) {
// const { user } = useAuth(); // Unused
const [bindings, setBindings] = useState<GroupBinding[]>([]);
const [knownGroups, setKnownGroups] = useState<KnownGroup[]>([]);
const [selectedChatId, setSelectedChatId] = useState("");
const [loading, setLoading] = useState(false);
const [status, setStatus] = useState<{
type: "success" | "error";
message: string;
} | null>(null);
useEffect(() => {
if (isOpen && topicId) {
fetchBindings();
fetchKnownGroups();
setStatus(null);
setSelectedChatId('');
}
}, [isOpen, topicId]);
const fetchBindings = useCallback(async () => {
try {
const res = await client.api.topics[":id"].groups.$get(
{
param: { id: topicId },
},
{
init: { credentials: "include" },
},
);
const data = await res.json();
setBindings(data as any);
} catch (err) {
console.error(err);
}
}, [topicId]);
const fetchBindings = async () => {
try {
const res = await client.api.topics[':id'].groups.$get({
param: { id: topicId }
}, {
init: { credentials: 'include' }
});
const data = await res.json();
setBindings(data as any);
} catch (err) {
console.error(err);
}
};
const fetchKnownGroups = useCallback(async () => {
try {
const res = await client.api.groups.$get(undefined, {
init: { credentials: "include" },
});
const data = await res.json();
setKnownGroups(data as any);
} catch (err) {
console.error(err);
}
}, []);
const fetchKnownGroups = async () => {
try {
const res = await client.api.groups.$get(undefined, {
init: { credentials: 'include' }
});
const data = await res.json();
// Only verify uniqueness if needed, but here we just list what server returns
setKnownGroups(data as any);
} catch (err) {
console.error(err);
}
};
useEffect(() => {
if (isOpen && topicId) {
fetchBindings();
fetchKnownGroups();
setStatus(null);
setSelectedChatId("");
}
}, [isOpen, topicId, fetchBindings, fetchKnownGroups]);
const handleBind = async () => {
if (!selectedChatId) return;
setLoading(true);
setStatus(null);
const handleBind = async () => {
if (!selectedChatId) return;
setLoading(true);
setStatus(null);
const group = knownGroups.find(g => g.chatId === selectedChatId);
if (!group) return;
const group = knownGroups.find((g) => g.chatId === selectedChatId);
if (!group) return;
try {
const res = await client.api.topics[':id'].groups.$post({
param: { id: topicId },
json: {
chatId: group.chatId,
name: group.name,
}
}, {
init: { credentials: 'include' }
});
try {
const res = await client.api.topics[":id"].groups.$post(
{
param: { id: topicId },
json: {
chatId: group.chatId,
name: group.name,
},
},
{
init: { credentials: "include" },
},
);
if (res.ok) {
setStatus({ type: 'success', message: 'Group bound successfully!' });
fetchBindings();
setSelectedChatId('');
} else {
await res.json(); // Consume body
setStatus({ type: 'error', message: 'Failed to bind group' });
}
} catch (_) { // Ignore error
setStatus({ type: 'error', message: 'An error occurred' });
} finally {
setLoading(false);
}
};
if (res.ok) {
setStatus({ type: "success", message: "Group bound successfully!" });
fetchBindings();
setSelectedChatId("");
} else {
await res.json(); // Consume body
setStatus({ type: "error", message: "Failed to bind group" });
}
} catch (_) {
// Ignore error
setStatus({ type: "error", message: "An error occurred" });
} finally {
setLoading(false);
}
};
const handleUnbind = async (bindingId: string) => {
if (!confirm('Are you sure you want to remove this group binding?')) return;
const handleUnbind = async (bindingId: string) => {
if (!confirm("Are you sure you want to remove this group binding?")) return;
try {
const res = await client.api.topics[':id'].groups[':bindingId'].$delete({
param: { id: topicId, bindingId }
}, {
init: { credentials: 'include' }
});
try {
const res = await client.api.topics[":id"].groups[":bindingId"].$delete(
{
param: { id: topicId, bindingId },
},
{
init: { credentials: "include" },
},
);
if (res.ok) {
setBindings(prev => prev.filter(b => b.id !== bindingId));
}
} catch (err) {
console.error(err);
}
};
if (res.ok) {
setBindings((prev) => prev.filter((b) => b.id !== bindingId));
}
} catch (err) {
console.error(err);
}
};
// Filter out groups that are already bound
const availableGroups = knownGroups.filter(
kg => !bindings.some(b => b.chatId === kg.chatId)
);
// Filter out groups that are already bound
const availableGroups = knownGroups.filter(
(kg) => !bindings.some((b) => b.chatId === kg.chatId),
);
return (
<Modal
isOpen={isOpen}
onClose={onClose}
title={`Manage Group Chats for ${topicName}`}
>
<div className="space-y-6">
<div>
<h4 className="text-sm font-medium text-gray-900 mb-2">Bound Groups</h4>
{bindings.length === 0 ? (
<p className="text-sm text-gray-500 italic">No groups bound to this topic yet.</p>
) : (
<ul className="divide-y divide-gray-200 border rounded-md">
{bindings.map(binding => (
<li key={binding.id} className="flex justify-between items-center p-3">
<div className="flex items-center">
<MessageCircle className="w-4 h-4 text-gray-400 mr-2" />
<span className="text-sm text-gray-700">{binding.name}</span>
</div>
<button
onClick={() => handleUnbind(binding.id)}
className="text-red-500 hover:text-red-700 p-1 rounded hover:bg-red-50"
title="Remove binding"
>
<Trash2 className="w-4 h-4" />
</button>
</li>
))}
</ul>
)}
</div>
return (
<Modal
isOpen={isOpen}
onClose={onClose}
title={`Manage Group Chats for ${topicName}`}
>
<div className="space-y-6">
<div>
<h4 className="text-sm font-medium text-gray-900 mb-2">
Bound Groups
</h4>
{bindings.length === 0 ? (
<p className="text-sm text-gray-500 italic">
No groups bound to this topic yet.
</p>
) : (
<ul className="divide-y divide-gray-200 border rounded-md">
{bindings.map((binding) => (
<li
key={binding.id}
className="flex justify-between items-center p-3"
>
<div className="flex items-center">
<MessageCircle className="w-4 h-4 text-gray-400 mr-2" />
<span className="text-sm text-gray-700">
{binding.name}
</span>
</div>
<button
type="button"
onClick={() => handleUnbind(binding.id)}
className="text-red-500 hover:text-red-700 p-1 rounded hover:bg-red-50"
title="Remove binding"
>
<Trash2 className="w-4 h-4" />
</button>
</li>
))}
</ul>
)}
</div>
<div className="bg-gray-50 p-4 rounded-md border border-gray-200">
<h4 className="text-sm font-medium text-gray-900 mb-3">Add Group Binding</h4>
<p className="text-xs text-gray-500 mb-3">
Select a group where the Feishu Bot has been added. If your group is not listed, try removing and re-adding the bot to the group.
</p>
<div className="bg-gray-50 p-4 rounded-md border border-gray-200">
<h4 className="text-sm font-medium text-gray-900 mb-3">
Add Group Binding
</h4>
<p className="text-xs text-gray-500 mb-3">
Select a group where the Feishu Bot has been added. If your group is
not listed, try removing and re-adding the bot to the group.
</p>
<div className="flex gap-2">
<select
className="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border p-2 text-gray-900"
value={selectedChatId}
onChange={(e) => setSelectedChatId(e.target.value)}
disabled={loading}
>
<option value="">Select a group...</option>
{availableGroups.map(group => (
<option key={group.chatId} value={group.chatId}>
{group.name}
</option>
))}
</select>
<button
onClick={handleBind}
disabled={!selectedChatId || loading}
className="inline-flex items-center px-3 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed"
>
<Plus className="w-4 h-4 mr-1" />
Add
</button>
</div>
{status && (
<p className={`mt-2 text-xs ${status.type === 'success' ? 'text-green-600' : 'text-red-600'}`}>
{status.message}
</p>
)}
</div>
</div>
</Modal>
);
<div className="flex gap-2">
<select
className="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border p-2 text-gray-900"
value={selectedChatId}
onChange={(e) => setSelectedChatId(e.target.value)}
disabled={loading}
>
<option value="">Select a group...</option>
{availableGroups.map((group) => (
<option key={group.chatId} value={group.chatId}>
{group.name}
</option>
))}
</select>
<button
type="button"
onClick={handleBind}
disabled={!selectedChatId || loading}
className="inline-flex items-center px-3 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed"
>
<Plus className="w-4 h-4 mr-1" />
Add
</button>
</div>
{status && (
<p
className={`mt-2 text-xs ${status.type === "success" ? "text-green-600" : "text-red-600"}`}
>
{status.message}
</p>
)}
</div>
</div>
</Modal>
);
}

90
apps/web/src/components/Modal.tsx
View File

@@ -1,44 +1,62 @@
import React from 'react';
import { X } from 'lucide-react';
import { X } from "lucide-react";
import type React from "react";
interface ModalProps {
isOpen: boolean;
onClose: () => void;
title: string;
children: React.ReactNode;
isOpen: boolean;
onClose: () => void;
title: string;
children: React.ReactNode;
}
export default function Modal({ isOpen, onClose, title, children }: ModalProps) {
if (!isOpen) return null;
export default function Modal({
isOpen,
onClose,
title,
children,
}: ModalProps) {
if (!isOpen) return null;
return (
<div className="fixed inset-0 z-50 overflow-y-auto">
<div className="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
<div className="fixed inset-0 transition-opacity" aria-hidden="true">
<div className="absolute inset-0 bg-gray-500 opacity-75" onClick={onClose}></div>
</div>
return (
<div className="fixed inset-0 z-50 overflow-y-auto">
<div className="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
<div className="fixed inset-0 transition-opacity" aria-hidden="true">
<button
type="button"
className="absolute inset-0 bg-gray-500 opacity-75 w-full h-full cursor-default"
onClick={onClose}
onKeyDown={(e) => e.key === "Escape" && onClose()}
aria-label="Close modal"
/>
</div>
<span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
<span
className="hidden sm:inline-block sm:align-middle sm:h-screen"
aria-hidden="true"
>
&#8203;
</span>
<div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
<div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div className="flex justify-between items-start">
<h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">
{title}
</h3>
<button
onClick={onClose}
className="bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none"
>
<X className="h-6 w-6" />
</button>
</div>
<div className="mt-2">
{children}
</div>
</div>
</div>
</div>
</div>
);
<div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
<div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div className="flex justify-between items-start">
<h3
className="text-lg leading-6 font-medium text-gray-900"
id="modal-title"
>
{title}
</h3>
<button
type="button"
onClick={onClose}
className="bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none"
>
<X className="h-6 w-6" />
</button>
</div>
<div className="mt-2">{children}</div>
</div>
</div>
</div>
</div>
);
}

139
apps/web/src/contexts/AuthContext.tsx
View File

@@ -1,85 +1,92 @@
import { createContext, useContext, useState, useEffect, ReactNode, useCallback } from 'react';
import { client } from '../lib/client';
import {
createContext,
type ReactNode,
useCallback,
useContext,
useEffect,
useState,
} from "react";
import { client } from "../lib/client";
interface User {
id: string;
name: string;
email: string | null;
isAdmin: boolean;
personalToken: string;
id: string;
name: string;
email: string | null;
isAdmin: boolean;
personalToken: string;
}
interface AuthContextType {
user: User | null;
loading: boolean;
login: () => void;
logout: () => void;
checkAuth: () => Promise<void>;
user: User | null;
loading: boolean;
login: () => void;
logout: () => void;
checkAuth: () => Promise<void>;
}
const AuthContext = createContext<AuthContextType | undefined>(undefined);
export function AuthProvider({ children }: { children: ReactNode }) {
const [user, setUser] = useState<User | null>(null);
const [loading, setLoading] = useState(true);
const [user, setUser] = useState<User | null>(null);
const [loading, setLoading] = useState(true);
const checkAuth = useCallback(async () => {
try {
const res = await client.api.auth.me.$get(undefined, {
init: { credentials: 'include' }
});
if (res.ok) {
const data = await res.json();
setUser(data.user);
} else {
setUser(null);
}
} catch (error) {
console.error('Auth check failed:', error);
setUser(null);
} finally {
setLoading(false);
}
}, []);
const checkAuth = useCallback(async () => {
try {
const res = await client.api.auth.me.$get(undefined, {
init: { credentials: "include" },
});
if (res.ok) {
const data = await res.json();
setUser(data.user);
} else {
setUser(null);
}
} catch (error) {
console.error("Auth check failed:", error);
setUser(null);
} finally {
setLoading(false);
}
}, []);
useEffect(() => {
checkAuth();
}, [checkAuth]);
useEffect(() => {
checkAuth();
}, [checkAuth]);
const login = useCallback(async () => {
try {
const res = await client.api.auth['login-url'].$get(undefined, {
init: { credentials: 'include' }
});
const data = await res.json();
window.location.href = data.loginUrl;
} catch (error) {
console.error('Login failed:', error);
}
}, []);
const login = useCallback(async () => {
try {
const res = await client.api.auth["login-url"].$get(undefined, {
init: { credentials: "include" },
});
const data = await res.json();
window.location.href = data.loginUrl;
} catch (error) {
console.error("Login failed:", error);
}
}, []);
const logout = useCallback(async () => {
try {
await client.api.auth.logout.$post(undefined, {
init: { credentials: 'include' }
});
setUser(null);
} catch (error) {
console.error('Logout failed:', error);
}
}, []);
const logout = useCallback(async () => {
try {
await client.api.auth.logout.$post(undefined, {
init: { credentials: "include" },
});
setUser(null);
} catch (error) {
console.error("Logout failed:", error);
}
}, []);
return (
<AuthContext.Provider value={{ user, loading, login, logout, checkAuth }}>
{children}
</AuthContext.Provider>
);
return (
<AuthContext.Provider value={{ user, loading, login, logout, checkAuth }}>
{children}
</AuthContext.Provider>
);
}
export function useAuth() {
const context = useContext(AuthContext);
if (context === undefined) {
throw new Error('useAuth must be used within an AuthProvider');
}
return context;
const context = useContext(AuthContext);
if (context === undefined) {
throw new Error("useAuth must be used within an AuthProvider");
}
return context;
}

16
apps/web/src/index.css
View File

@@ -3,12 +3,18 @@
@tailwind utilities;
@layer utilities {
.animate-fade-in {
animation: fadeIn 0.5s ease-out forwards;
}
.animate-fade-in {
animation: fadeIn 0.5s ease-out forwards;
}
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

7
apps/web/src/lib/client.ts
View File

@@ -1,4 +1,5 @@
import { hc } from 'hono/client';
import type { AppType } from '../../../server/src/index';
import { hc } from "hono/client";
import type { AppType } from "../../../server/src/index";
export const client = hc<AppType>('/') as any;
// biome-ignore lint/suspicious/noExplicitAny: Hono client types can be complex
export const client = hc<AppType>("/") as any;

29
apps/web/src/main.tsx
View File

@@ -1,17 +1,20 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import AuthCallback from './views/AuthCallback.tsx'
import { AuthProvider } from './contexts/AuthContext.tsx'
import './index.css'
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import { AuthProvider } from "./contexts/AuthContext.tsx";
import AuthCallback from "./views/AuthCallback.tsx";
import "./index.css";
// Simple routing based on pathname
const pathname = window.location.pathname;
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<AuthProvider>
{pathname === '/auth/callback' ? <AuthCallback /> : <App />}
</AuthProvider>
</React.StrictMode>,
)
const rootElement = document.getElementById("root");
if (rootElement) {
ReactDOM.createRoot(rootElement).render(
<React.StrictMode>
<AuthProvider>
{pathname === "/auth/callback" ? <AuthCallback /> : <App />}
</AuthProvider>
</React.StrictMode>,
);
}

480
apps/web/src/views/AdminView.tsx
View File

@@ -1,236 +1,292 @@
import { useState, useEffect } from 'react';
import { client } from '../lib/client';
import SystemLoadView from './SystemLoadView';
import { useCallback, useEffect, useState } from "react";
import { client } from "../lib/client";
import SystemLoadView from "./SystemLoadView";
export default function AdminView() {
const [activeTab, setActiveTab] = useState('load');
const [activeTab, setActiveTab] = useState("load");
return (
<div>
<div className="flex justify-between items-center mb-6">
<h2 className="text-2xl font-bold text-gray-900">Admin Dashboard</h2>
</div>
return (
<div>
<div className="flex justify-between items-center mb-6">
<h2 className="text-2xl font-bold text-gray-900">Admin Dashboard</h2>
</div>
<div className="bg-white shadow rounded-lg p-6">
<div className="border-b border-gray-200 mb-6">
<nav className="-mb-px flex space-x-8">
<button
onClick={() => setActiveTab('load')}
className={`${activeTab === 'load'
? 'border-indigo-500 text-indigo-600'
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
} whitespace-nowrap pb-4 px-1 border-b-2 font-medium text-sm`}
>
System Load
</button>
<button
onClick={() => setActiveTab('requests')}
className={`${activeTab === 'requests'
? 'border-indigo-500 text-indigo-600'
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
} whitespace-nowrap pb-4 px-1 border-b-2 font-medium text-sm`}
>
Topic Requests
</button>
<button
onClick={() => setActiveTab('topics')}
className={`${activeTab === 'topics'
? 'border-indigo-500 text-indigo-600'
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
} whitespace-nowrap pb-4 px-1 border-b-2 font-medium text-sm`}
>
All Topics
</button>
</nav>
</div>
<div className="bg-white shadow rounded-lg p-6">
<div className="border-b border-gray-200 mb-6">
<nav className="-mb-px flex space-x-8">
<button
type="button"
onClick={() => setActiveTab("load")}
className={`${
activeTab === "load"
? "border-indigo-500 text-indigo-600"
: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
} whitespace-nowrap pb-4 px-1 border-b-2 font-medium text-sm`}
>
System Load
</button>
<button
type="button"
onClick={() => setActiveTab("requests")}
className={`${
activeTab === "requests"
? "border-indigo-500 text-indigo-600"
: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
} whitespace-nowrap pb-4 px-1 border-b-2 font-medium text-sm`}
>
Topic Requests
</button>
<button
type="button"
onClick={() => setActiveTab("topics")}
className={`${
activeTab === "topics"
? "border-indigo-500 text-indigo-600"
: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
} whitespace-nowrap pb-4 px-1 border-b-2 font-medium text-sm`}
>
All Topics
</button>
</nav>
</div>
{activeTab === 'load' && <SystemLoadView />}
{activeTab === 'requests' && <TopicRequestsList />}
{activeTab === 'topics' && <TopicsManagement />}
</div>
</div>
);
{activeTab === "load" && <SystemLoadView />}
{activeTab === "requests" && <TopicRequestsList />}
{activeTab === "topics" && <TopicsManagement />}
</div>
</div>
);
}
function TopicsManagement() {
const [topics, setTopics] = useState<any[]>([]);
const [loading, setLoading] = useState(true);
const [topics, setTopics] = useState<any[]>([]);
const [loading, setLoading] = useState(true);
const fetchAllTopics = async () => {
setLoading(true);
try {
const res = await client.api.topics.all.$get(undefined, {
init: { credentials: 'include' }
});
const data = await res.json();
setTopics(data);
} catch (error) {
console.error(error);
} finally {
setLoading(false);
}
};
const fetchAllTopics = useCallback(async () => {
setLoading(true);
try {
const res = await client.api.topics.all.$get(undefined, {
init: { credentials: "include" },
});
const data = await res.json();
setTopics(data);
} catch (error) {
console.error(error);
} finally {
setLoading(false);
}
}, []);
useEffect(() => {
fetchAllTopics();
}, []);
useEffect(() => {
fetchAllTopics();
}, [fetchAllTopics]);
const handleDelete = async (id: string, name: string) => {
if (!confirm(`Are you sure you want to delete topic "${name}"? This will also remove all subscriptions.`)) {
return;
}
const handleDelete = async (id: string, name: string) => {
if (
!confirm(
`Are you sure you want to delete topic "${name}"? This will also remove all subscriptions.`,
)
) {
return;
}
try {
await client.api.topics[':id'].$delete({ param: { id } }, { init: { credentials: 'include' } });
fetchAllTopics();
} catch (error) {
console.error(error);
}
};
try {
await client.api.topics[":id"].$delete(
{ param: { id } },
{ init: { credentials: "include" } },
);
fetchAllTopics();
} catch (error) {
console.error(error);
}
};
if (loading) return <div>Loading topics...</div>;
if (loading) return <div>Loading topics...</div>;
return (
<div className="overflow-hidden">
<table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50">
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Topic</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Subscribers</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Created By</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Approved By</th>
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{topics.map((topic) => (
<tr key={topic.id}>
<td className="px-6 py-4 whitespace-nowrap">
<div className="text-sm font-medium text-gray-900">{topic.name}</div>
<div className="text-sm text-gray-500 font-mono">{topic.slug}</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${topic.status === 'approved' ? 'bg-green-100 text-green-800' :
topic.status === 'rejected' ? 'bg-red-100 text-red-800' :
'bg-yellow-100 text-yellow-800'
}`}>
{topic.status}
</span>
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{topic.subscriptions?.length || 0}
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{topic.creator?.name || 'Unknown'}
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{topic.approver?.name || '-'}
</td>
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button
onClick={() => handleDelete(topic.id, topic.name)}
className="text-red-600 hover:text-red-900"
>
Delete
</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
);
return (
<div className="overflow-hidden">
<table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50">
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Topic
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Status
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Subscribers
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Created By
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Approved By
</th>
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
Actions
</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{topics.map((topic) => (
<tr key={topic.id}>
<td className="px-6 py-4 whitespace-nowrap">
<div className="text-sm font-medium text-gray-900">
{topic.name}
</div>
<div className="text-sm text-gray-500 font-mono">
{topic.slug}
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<span
className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
topic.status === "approved"
? "bg-green-100 text-green-800"
: topic.status === "rejected"
? "bg-red-100 text-red-800"
: "bg-yellow-100 text-yellow-800"
}`}
>
{topic.status}
</span>
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{topic.subscriptions?.length || 0}
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{topic.creator?.name || "Unknown"}
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{topic.approver?.name || "-"}
</td>
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button
type="button"
onClick={() => handleDelete(topic.id, topic.name)}
className="text-red-600 hover:text-red-900"
>
Delete
</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
);
}
function TopicRequestsList() {
const [requests, setRequests] = useState<any[]>([]);
const [loading, setLoading] = useState(true);
const [requests, setRequests] = useState<any[]>([]);
const [loading, setLoading] = useState(true);
const fetchRequests = async () => {
setLoading(true);
try {
const res = await client.api.topics.requests.$get(undefined, {
init: { credentials: 'include' }
});
const data = await res.json();
setRequests(data);
} catch (error) {
console.error(error);
} finally {
setLoading(false);
}
};
const fetchRequests = useCallback(async () => {
setLoading(true);
try {
const res = await client.api.topics.requests.$get(undefined, {
init: { credentials: "include" },
});
const data = await res.json();
setRequests(data);
} catch (error) {
console.error(error);
} finally {
setLoading(false);
}
}, []);
useEffect(() => {
fetchRequests();
}, []);
useEffect(() => {
fetchRequests();
}, [fetchRequests]);
const handleAction = async (id: string, action: 'approve' | 'reject' | 'delete', name?: string) => {
try {
if (action === 'approve') {
await client.api.topics[':id'].approve.$post({ param: { id } }, { init: { credentials: 'include' } });
} else if (action === 'reject') {
await client.api.topics[':id'].reject.$post({ param: { id } }, { init: { credentials: 'include' } });
} else if (action === 'delete') {
if (!confirm(`Are you sure you want to delete request "${name}"?`)) return;
await client.api.topics[':id'].$delete({ param: { id } }, { init: { credentials: 'include' } });
}
fetchRequests();
} catch (error) {
console.error(error);
}
};
const handleAction = async (
id: string,
action: "approve" | "reject" | "delete",
name?: string,
) => {
try {
if (action === "approve") {
await client.api.topics[":id"].approve.$post(
{ param: { id } },
{ init: { credentials: "include" } },
);
} else if (action === "reject") {
await client.api.topics[":id"].reject.$post(
{ param: { id } },
{ init: { credentials: "include" } },
);
} else if (action === "delete") {
if (!confirm(`Are you sure you want to delete request "${name}"?`))
return;
await client.api.topics[":id"].$delete(
{ param: { id } },
{ init: { credentials: "include" } },
);
}
fetchRequests();
} catch (error) {
console.error(error);
}
};
if (loading) return <div>Loading requests...</div>;
if (loading) return <div>Loading requests...</div>;
if (requests.length === 0) {
return (
<div className="text-center py-8 text-gray-500">
No pending topic requests.
</div>
);
}
if (requests.length === 0) {
return (
<div className="text-center py-8 text-gray-500">
No pending topic requests.
</div>
);
}
return (
<div className="overflow-hidden">
<ul className="divide-y divide-gray-200">
{requests.map(req => (
<li key={req.id} className="py-4 flex justify-between items-center">
<div>
<p className="font-medium text-gray-900">{req.name}</p>
<p className="text-sm text-gray-500">Slug: <span className="font-mono">{req.slug}</span></p>
<p className="text-sm text-gray-500">
Requested by: {req.creator?.name || 'Unknown'}
{req.creator?.email ? ` (${req.creator.email})` : ''}
</p>
{req.description && (
<p className="text-sm text-gray-500 mt-1 italic">"{req.description}"</p>
)}
</div>
<div className="flex gap-2">
<button
onClick={() => handleAction(req.id, 'approve')}
className="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 text-sm font-medium shadow-sm transition-colors"
>
Approve
</button>
<button
onClick={() => handleAction(req.id, 'reject')}
className="px-4 py-2 bg-red-100 text-red-700 rounded hover:bg-red-200 text-sm font-medium transition-colors"
>
Reject
</button>
<button
onClick={() => handleAction(req.id, 'delete', req.name)}
className="px-4 py-2 border border-gray-300 text-gray-600 rounded hover:bg-gray-50 text-sm font-medium transition-colors"
>
Delete
</button>
</div>
</li>
))}
</ul>
</div>
);
return (
<div className="overflow-hidden">
<ul className="divide-y divide-gray-200">
{requests.map((req) => (
<li key={req.id} className="py-4 flex justify-between items-center">
<div>
<p className="font-medium text-gray-900">{req.name}</p>
<p className="text-sm text-gray-500">
Slug: <span className="font-mono">{req.slug}</span>
</p>
<p className="text-sm text-gray-500">
Requested by: {req.creator?.name || "Unknown"}
{req.creator?.email ? ` (${req.creator.email})` : ""}
</p>
{req.description && (
<p className="text-sm text-gray-500 mt-1 italic">
"{req.description}"
</p>
)}
</div>
<div className="flex gap-2">
<button
type="button"
onClick={() => handleAction(req.id, "approve")}
className="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 text-sm font-medium shadow-sm transition-colors"
>
Approve
</button>
<button
type="button"
onClick={() => handleAction(req.id, "reject")}
className="px-4 py-2 bg-red-100 text-red-700 rounded hover:bg-red-200 text-sm font-medium transition-colors"
>
Reject
</button>
<button
type="button"
onClick={() => handleAction(req.id, "delete", req.name)}
className="px-4 py-2 border border-gray-300 text-gray-600 rounded hover:bg-gray-50 text-sm font-medium transition-colors"
>
Delete
</button>
</div>
</li>
))}
</ul>
</div>
);
}

140
apps/web/src/views/AuthCallback.tsx
View File

@@ -1,76 +1,86 @@
import { useEffect, useState, useRef } from 'react';
import { useAuth } from '../contexts/AuthContext';
import { client } from '../lib/client';
import { useEffect, useRef, useState } from "react";
import { useAuth } from "../contexts/AuthContext";
import { client } from "../lib/client";
export default function AuthCallback() {
const [error, setError] = useState<string | null>(null);
const { checkAuth } = useAuth();
const processed = useRef(false);
const [error, setError] = useState<string | null>(null);
const { checkAuth } = useAuth();
const processed = useRef(false);
useEffect(() => {
const handleCallback = async () => {
if (processed.current) return;
processed.current = true;
useEffect(() => {
const handleCallback = async () => {
if (processed.current) return;
processed.current = true;
const params = new URLSearchParams(window.location.search);
const code = params.get('code');
const state = params.get('state');
const params = new URLSearchParams(window.location.search);
const code = params.get("code");
const state = params.get("state");
if (!code) {
setError('No authorization code received');
return;
}
if (!code) {
setError("No authorization code received");
return;
}
try {
const res = await client.api.auth.callback.$get({
query: {
code,
state: state || undefined
}
}, {
init: { credentials: 'include' }
});
try {
const res = await client.api.auth.callback.$get(
{
query: {
code,
state: state || undefined,
},
},
{
init: { credentials: "include" },
},
);
if (res.ok) {
await checkAuth();
// Redirect to home
window.location.href = '/';
} else {
const data = await res.json();
setError(data.error || 'Authentication failed');
}
} catch (err) {
setError('Authentication failed');
console.error(err);
}
};
if (res.ok) {
await checkAuth();
// Redirect to home
window.location.href = "/";
} else {
const data = await res.json();
setError(data.error || "Authentication failed");
}
} catch (err) {
setError("Authentication failed");
console.error(err);
}
};
handleCallback();
}, [checkAuth]);
handleCallback();
}, [checkAuth]);
if (error) {
return (
<div className="min-h-screen flex items-center justify-center bg-gray-50">
<div className="max-w-md w-full bg-white shadow-lg rounded-lg p-6">
<h2 className="text-2xl font-bold text-red-600 mb-4">Authentication Error</h2>
<p className="text-gray-700">{error}</p>
<button
onClick={() => window.location.href = '/'}
className="mt-4 w-full bg-indigo-600 text-white py-2 px-4 rounded hover:bg-indigo-700"
>
Return to Home
</button>
</div>
</div>
);
}
if (error) {
return (
<div className="min-h-screen flex items-center justify-center bg-gray-50">
<div className="max-w-md w-full bg-white shadow-lg rounded-lg p-6">
<h2 className="text-2xl font-bold text-red-600 mb-4">
Authentication Error
</h2>
<p className="text-gray-700">{error}</p>
<button
type="button"
onClick={() => {
window.location.href = "/";
}}
className="mt-4 w-full bg-indigo-600 text-white py-2 px-4 rounded hover:bg-indigo-700"
>
Return to Home
</button>
</div>
</div>
);
}
return (
<div className="min-h-screen flex items-center justify-center bg-gray-50">
<div className="max-w-md w-full bg-white shadow-lg rounded-lg p-6">
<h2 className="text-2xl font-bold text-gray-900 mb-4">Authenticating...</h2>
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mx-auto"></div>
</div>
</div>
);
return (
<div className="min-h-screen flex items-center justify-center bg-gray-50">
<div className="max-w-md w-full bg-white shadow-lg rounded-lg p-6">
<h2 className="text-2xl font-bold text-gray-900 mb-4">
Authenticating...
</h2>
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mx-auto"></div>
</div>
</div>
);
}

625
apps/web/src/views/SystemLoadView.tsx
View File

@@ -1,291 +1,380 @@
import { useState, useEffect } from 'react';
import { client } from '../lib/client';
import { Activity, CheckCircle, XCircle, BarChart3, Clock } from 'lucide-react';
import { Activity, BarChart3, CheckCircle, Clock, XCircle } from "lucide-react";
import { useCallback, useEffect, useState } from "react";
import { client } from "../lib/client";
interface Stats {
topics: {
topicSlug: string;
totalTasks: number;
totalRecipients: number;
totalSuccess: number;
}[];
recent: {
alertsReceived: number;
plannedMessages: number;
successCount: number;
failedCount: number;
successRate: number;
};
tasks: any[];
topics: {
topicSlug: string;
totalTasks: number;
totalRecipients: number;
totalSuccess: number;
}[];
recent: {
alertsReceived: number;
plannedMessages: number;
successCount: number;
failedCount: number;
successRate: number;
};
tasks: any[];
}
export default function SystemLoadView() {
const [stats, setStats] = useState<Stats | null>(null);
const [loading, setLoading] = useState(true);
const [lastUpdated, setLastUpdated] = useState<Date>(new Date());
const [stats, setStats] = useState<Stats | null>(null);
const [loading, setLoading] = useState(true);
const [lastUpdated, setLastUpdated] = useState<Date>(new Date());
const fetchStats = async () => {
try {
const res = await client.api.stats.$get(undefined, {
init: { credentials: 'include' }
});
const data = await res.json();
const fetchStats = useCallback(async () => {
try {
const res = await client.api.stats.$get(undefined, {
init: { credentials: "include" },
});
const data = await res.json();
// Fetch recent tasks as well
const tasksRes = await client.api.alerts.tasks.$get({ query: { limit: '10' } }, {
init: { credentials: 'include' }
});
const tasks = await tasksRes.json();
// Fetch recent tasks as well
const tasksRes = await client.api.alerts.tasks.$get(
{ query: { limit: "10" } },
{
init: { credentials: "include" },
},
);
const tasks = await tasksRes.json();
setStats({ ...data, tasks } as Stats);
setLastUpdated(new Date());
} catch (error) {
console.error('Failed to fetch stats:', error);
} finally {
setLoading(false);
}
};
setStats({ ...data, tasks } as Stats);
setLastUpdated(new Date());
} catch (error) {
console.error("Failed to fetch stats:", error);
} finally {
setLoading(false);
}
}, []);
useEffect(() => {
fetchStats();
const interval = setInterval(fetchStats, 10000); // 10s refresh for dynamic feel
return () => clearInterval(interval);
}, []);
useEffect(() => {
fetchStats();
const interval = setInterval(fetchStats, 10000); // 10s refresh for dynamic feel
return () => clearInterval(interval);
}, [fetchStats]);
if (loading) return (
<div className="flex justify-center items-center h-64">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600"></div>
</div>
);
if (loading)
return (
<div className="flex justify-center items-center h-64">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600"></div>
</div>
);
if (!stats) return <div className="text-center py-12 text-gray-500">Failed to load statistics.</div>;
if (!stats)
return (
<div className="text-center py-12 text-gray-500">
Failed to load statistics.
</div>
);
return (
<div className="space-y-8 animate-fade-in">
<div className="flex justify-between items-center">
<div className="flex items-center gap-2">
<span className="relative flex h-3 w-3">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
</span>
<span className="text-xs font-semibold uppercase tracking-wider text-gray-400">Live Feedback</span>
</div>
<span className="text-xs text-gray-400">Last updated: {lastUpdated.toLocaleTimeString()}</span>
</div>
return (
<div className="space-y-8 animate-fade-in">
<div className="flex justify-between items-center">
<div className="flex items-center gap-2">
<span className="relative flex h-3 w-3">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
</span>
<span className="text-xs font-semibold uppercase tracking-wider text-gray-400">
Live Feedback
</span>
</div>
<span className="text-xs text-gray-400">
Last updated: {lastUpdated.toLocaleTimeString()}
</span>
</div>
{/* Top Row: General Metrics */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6">
<MetricCard
title="Alerts Received"
value={stats.recent.alertsReceived}
icon={<Activity className="w-5 h-5 text-purple-500" />}
color="purple"
description="Total webhook hits"
/>
<MetricCard
title="Planned Deliveries"
value={stats.recent.plannedMessages}
icon={<Clock className="w-5 h-5 text-blue-500" />}
color="blue"
description="Total subscribers"
/>
<MetricCard
title="Success"
value={stats.recent.successCount}
icon={<CheckCircle className="w-5 h-5 text-green-500" />}
color="green"
description="Successfully sent"
/>
<MetricCard
title="Failed"
value={stats.recent.failedCount}
icon={<XCircle className="w-5 h-5 text-red-500" />}
color="red"
description="API errors/failures"
/>
<div className="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 flex flex-col items-center justify-center">
<span className="text-xs font-medium text-gray-500 mb-2">Success Rate</span>
<Gauge value={stats.recent.successRate} />
</div>
</div>
{/* Top Row: General Metrics */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6">
<MetricCard
title="Alerts Received"
value={stats.recent.alertsReceived}
icon={<Activity className="w-5 h-5 text-purple-500" />}
color="purple"
description="Total webhook hits"
/>
<MetricCard
title="Planned Deliveries"
value={stats.recent.plannedMessages}
icon={<Clock className="w-5 h-5 text-blue-500" />}
color="blue"
description="Total subscribers"
/>
<MetricCard
title="Success"
value={stats.recent.successCount}
icon={<CheckCircle className="w-5 h-5 text-green-500" />}
color="green"
description="Successfully sent"
/>
<MetricCard
title="Failed"
value={stats.recent.failedCount}
icon={<XCircle className="w-5 h-5 text-red-500" />}
color="red"
description="API errors/failures"
/>
<div className="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 flex flex-col items-center justify-center">
<span className="text-xs font-medium text-gray-500 mb-2">
Success Rate
</span>
<Gauge value={stats.recent.successRate} />
</div>
</div>
{/* Middle Row: Topic Message Counts */}
<div className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
<div className="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
<div className="flex items-center gap-2">
<BarChart3 className="w-5 h-5 text-indigo-500" />
<h3 className="font-semibold text-gray-800">Historical Topic Metrics</h3>
</div>
</div>
<div className="overflow-x-auto">
<table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50 text-[10px] uppercase font-bold text-gray-500">
<tr>
<th className="px-6 py-4 text-left tracking-wider">Topic</th>
<th className="px-6 py-4 text-left tracking-wider">Alerts (Tasks)</th>
<th className="px-6 py-4 text-left tracking-wider">Planned (Recipients)</th>
<th className="px-6 py-4 text-left tracking-wider">Distributed (Success)</th>
<th className="px-6 py-4 text-left tracking-wider">Health Rate</th>
<th className="px-6 py-4 text-left tracking-wider">Status</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{stats.topics.map((topic) => {
const rate = topic.totalRecipients > 0 ? (topic.totalSuccess / topic.totalRecipients) * 100 : 100;
return (
<tr key={topic.topicSlug} className="hover:bg-gray-50 transition-colors">
<td className="px-6 py-4 whitespace-nowrap">
<span className={`font-mono text-xs font-bold ${topic.topicSlug ? 'text-indigo-600 bg-indigo-50' : 'text-gray-600 bg-gray-100'} px-2 py-1 rounded-md`}>
{topic.topicSlug || '[Private DM]'}
</span>
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600 font-medium">{topic.totalTasks}</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{topic.totalRecipients}</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{topic.totalSuccess}</td>
<td className="px-6 py-4 whitespace-nowrap">
<div className="flex items-center gap-3">
<div className="w-20 bg-gray-100 rounded-full h-1.5">
<div
className={`h-1.5 rounded-full transition-all duration-1000 ${rate > 90 ? 'bg-green-500' : rate > 70 ? 'bg-yellow-500' : 'bg-red-500'}`}
style={{ width: `${rate}%` }}
></div>
</div>
<span className="text-[11px] font-bold text-gray-700">{rate.toFixed(1)}%</span>
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<span className={`inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold uppercase ${rate === 100 ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'
}`}>
{rate === 100 ? 'Healthy' : 'Errors'}
</span>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</div>
{/* Middle Row: Topic Message Counts */}
<div className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
<div className="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
<div className="flex items-center gap-2">
<BarChart3 className="w-5 h-5 text-indigo-500" />
<h3 className="font-semibold text-gray-800">
Historical Topic Metrics
</h3>
</div>
</div>
<div className="overflow-x-auto">
<table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50 text-[10px] uppercase font-bold text-gray-500">
<tr>
<th className="px-6 py-4 text-left tracking-wider">Topic</th>
<th className="px-6 py-4 text-left tracking-wider">
Alerts (Tasks)
</th>
<th className="px-6 py-4 text-left tracking-wider">
Planned (Recipients)
</th>
<th className="px-6 py-4 text-left tracking-wider">
Distributed (Success)
</th>
<th className="px-6 py-4 text-left tracking-wider">
Health Rate
</th>
<th className="px-6 py-4 text-left tracking-wider">Status</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{stats.topics.map((topic) => {
const rate =
topic.totalRecipients > 0
? (topic.totalSuccess / topic.totalRecipients) * 100
: 100;
return (
<tr
key={topic.topicSlug}
className="hover:bg-gray-50 transition-colors"
>
<td className="px-6 py-4 whitespace-nowrap">
<span
className={`font-mono text-xs font-bold ${topic.topicSlug ? "text-indigo-600 bg-indigo-50" : "text-gray-600 bg-gray-100"} px-2 py-1 rounded-md`}
>
{topic.topicSlug || "[Private DM]"}
</span>
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600 font-medium">
{topic.totalTasks}
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
{topic.totalRecipients}
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
{topic.totalSuccess}
</td>
<td className="px-6 py-4 whitespace-nowrap">
<div className="flex items-center gap-3">
<div className="w-20 bg-gray-100 rounded-full h-1.5">
<div
className={`h-1.5 rounded-full transition-all duration-1000 ${rate > 90 ? "bg-green-500" : rate > 70 ? "bg-yellow-500" : "bg-red-500"}`}
style={{ width: `${rate}%` }}
></div>
</div>
<span className="text-[11px] font-bold text-gray-700">
{rate.toFixed(1)}%
</span>
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<span
className={`inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold uppercase ${
rate === 100
? "bg-green-100 text-green-700"
: "bg-red-100 text-red-700"
}`}
>
{rate === 100 ? "Healthy" : "Errors"}
</span>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</div>
{/* Bottom Row: Recent Alerts with Sender Info */}
<div className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
<div className="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
<div className="flex items-center gap-2">
<Clock className="w-5 h-5 text-indigo-500" />
<h3 className="font-semibold text-gray-800">Recent Alerts (Audit Log)</h3>
</div>
</div>
<div className="overflow-x-auto">
<table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50 text-[10px] uppercase font-bold text-gray-500">
<tr>
<th className="px-6 py-4 text-left tracking-wider">Time</th>
<th className="px-6 py-4 text-left tracking-wider">Topic</th>
<th className="px-6 py-4 text-left tracking-wider">Sender</th>
<th className="px-6 py-4 text-left tracking-wider">Recipients</th>
<th className="px-6 py-4 text-left tracking-wider">Status</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{stats.tasks.map((task: any) => (
<tr key={task.id} className="hover:bg-gray-50 transition-colors">
<td className="px-6 py-4 whitespace-nowrap text-xs text-gray-500 font-medium">
{new Date(task.createdAt).toLocaleString()}
</td>
<td className="px-6 py-4 whitespace-nowrap">
<span className={`font-mono text-xs font-bold ${task.topicSlug ? 'text-indigo-600 bg-indigo-50' : 'text-gray-600 bg-gray-100'} px-2 py-1 rounded-md`}>
{task.topicSlug || '[Private DM]'}
</span>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<div className="flex flex-col">
<span className="text-sm font-medium text-gray-900">{task.sender?.name || 'Unknown'}</span>
<span className="text-[10px] text-gray-400">{task.sender?.email || 'N/A'}</span>
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
{task.successCount} / {task.recipientCount}
</td>
<td className="px-6 py-4 whitespace-nowrap">
<span className={`inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold uppercase ${task.status === 'completed' ? 'bg-green-100 text-green-700' : task.status === 'failed' ? 'bg-red-100 text-red-700' : 'bg-blue-100 text-blue-700'
}`}>
{task.status}
</span>
</td>
</tr>
))}
{stats.tasks.length === 0 && (
<tr>
<td colSpan={5} className="px-6 py-8 text-center text-gray-500 italic text-sm">
No alerts sent yet.
</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
</div>
);
{/* Bottom Row: Recent Alerts with Sender Info */}
<div className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
<div className="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
<div className="flex items-center gap-2">
<Clock className="w-5 h-5 text-indigo-500" />
<h3 className="font-semibold text-gray-800">
Recent Alerts (Audit Log)
</h3>
</div>
</div>
<div className="overflow-x-auto">
<table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50 text-[10px] uppercase font-bold text-gray-500">
<tr>
<th className="px-6 py-4 text-left tracking-wider">Time</th>
<th className="px-6 py-4 text-left tracking-wider">Topic</th>
<th className="px-6 py-4 text-left tracking-wider">Sender</th>
<th className="px-6 py-4 text-left tracking-wider">
Recipients
</th>
<th className="px-6 py-4 text-left tracking-wider">Status</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{stats.tasks.map((task: any) => (
<tr
key={task.id}
className="hover:bg-gray-50 transition-colors"
>
<td className="px-6 py-4 whitespace-nowrap text-xs text-gray-500 font-medium">
{new Date(task.createdAt).toLocaleString()}
</td>
<td className="px-6 py-4 whitespace-nowrap">
<span
className={`font-mono text-xs font-bold ${task.topicSlug ? "text-indigo-600 bg-indigo-50" : "text-gray-600 bg-gray-100"} px-2 py-1 rounded-md`}
>
{task.topicSlug || "[Private DM]"}
</span>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<div className="flex flex-col">
<span className="text-sm font-medium text-gray-900">
{task.sender?.name || "Unknown"}
</span>
<span className="text-[10px] text-gray-400">
{task.sender?.email || "N/A"}
</span>
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
{task.successCount} / {task.recipientCount}
</td>
<td className="px-6 py-4 whitespace-nowrap">
<span
className={`inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold uppercase ${
task.status === "completed"
? "bg-green-100 text-green-700"
: task.status === "failed"
? "bg-red-100 text-red-700"
: "bg-blue-100 text-blue-700"
}`}
>
{task.status}
</span>
</td>
</tr>
))}
{stats.tasks.length === 0 && (
<tr>
<td
colSpan={5}
className="px-6 py-8 text-center text-gray-500 italic text-sm"
>
No alerts sent yet.
</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
</div>
);
}
function MetricCard({ title, value, icon, color, description }: { title: string, value: number, icon: React.ReactNode, color: string, description?: string }) {
return (
<div className="bg-white p-5 rounded-2xl shadow-sm border border-gray-100 flex flex-col transition-all hover:shadow-md hover:-translate-y-1">
<div className="flex items-start justify-between mb-4">
<div className={`p-2.5 rounded-xl bg-${color}-50`}>
{icon}
</div>
<div className="text-right">
<p className="text-[11px] font-bold text-gray-400 uppercase tracking-wider">{title}</p>
<h3 className="text-2xl font-black text-gray-900 leading-none mt-1">{value.toLocaleString()}</h3>
</div>
</div>
{description && <p className="text-[10px] text-gray-500 font-medium italic">/ {description}</p>}
</div>
);
function MetricCard({
title,
value,
icon,
color,
description,
}: {
title: string;
value: number;
icon: React.ReactNode;
color: string;
description?: string;
}) {
return (
<div className="bg-white p-5 rounded-2xl shadow-sm border border-gray-100 flex flex-col transition-all hover:shadow-md hover:-translate-y-1">
<div className="flex items-start justify-between mb-4">
<div className={`p-2.5 rounded-xl bg-${color}-50`}>{icon}</div>
<div className="text-right">
<p className="text-[11px] font-bold text-gray-400 uppercase tracking-wider">
{title}
</p>
<h3 className="text-2xl font-black text-gray-900 leading-none mt-1">
{value.toLocaleString()}
</h3>
</div>
</div>
{description && (
<p className="text-[10px] text-gray-500 font-medium italic">
/ {description}
</p>
)}
</div>
);
}
function Gauge({ value }: { value: number }) {
const radius = 40;
const circumference = 2 * Math.PI * radius;
const offset = circumference - (value / 100) * circumference;
const radius = 40;
const circumference = 2 * Math.PI * radius;
const offset = circumference - (value / 100) * circumference;
// Determine color based on value
const getColor = (v: number) => {
if (v >= 95) return '#10b981'; // green-500
if (v >= 80) return '#f59e0b'; // yellow-500
return '#ef4444'; // red-500
};
// Determine color based on value
const getColor = (v: number) => {
if (v >= 95) return "#10b981"; // green-500
if (v >= 80) return "#f59e0b"; // yellow-500
return "#ef4444"; // red-500
};
return (
<div className="relative flex items-center justify-center">
<svg className="w-32 h-32 transform -rotate-90">
<circle
className="text-gray-100"
strokeWidth="8"
stroke="currentColor"
fill="transparent"
r={radius}
cx="64"
cy="64"
/>
<circle
className="transition-all duration-1000 ease-out"
strokeWidth="8"
strokeDasharray={circumference}
strokeDashoffset={offset}
strokeLinecap="round"
stroke={getColor(value)}
fill="transparent"
r={radius}
cx="64"
cy="64"
/>
</svg>
<div className="absolute inset-0 flex flex-col items-center justify-center -mt-1">
<span className="text-2xl font-bold text-gray-900">{value.toFixed(1)}%</span>
</div>
</div>
);
return (
<div className="relative flex items-center justify-center">
<svg className="w-32 h-32 transform -rotate-90">
<circle
className="text-gray-100"
strokeWidth="8"
stroke="currentColor"
fill="transparent"
r={radius}
cx="64"
cy="64"
/>
<circle
className="transition-all duration-1000 ease-out"
strokeWidth="8"
strokeDasharray={circumference}
strokeDashoffset={offset}
strokeLinecap="round"
stroke={getColor(value)}
fill="transparent"
r={radius}
cx="64"
cy="64"
/>
</svg>
<div className="absolute inset-0 flex flex-col items-center justify-center -mt-1">
<span className="text-2xl font-bold text-gray-900">
{value.toFixed(1)}%
</span>
</div>
</div>
);
}

1233
apps/web/src/views/TopicsView.tsx
View File

File diff suppressed because it is too large Load Diff

394
apps/web/src/views/UsersView.tsx
View File

@@ -1,192 +1,232 @@
import { useState, useEffect } from 'react';
import { Trash2, Plus } from 'lucide-react';
import Modal from '../components/Modal';
import { useAuth } from '../contexts/AuthContext';
import { client } from '../lib/client';
import { Plus, Trash2 } from "lucide-react";
import { useCallback, useEffect, useState } from "react";
import Modal from "../components/Modal";
import { useAuth } from "../contexts/AuthContext";
import { client } from "../lib/client";
interface User {
id: string;
name: string;
feishuUserId?: string;
email?: string;
personalToken?: string;
id: string;
name: string;
feishuUserId?: string;
email?: string;
personalToken?: string;
}
export default function UsersView() {
const { user: currentUser } = useAuth();
const [users, setUsers] = useState<User[]>([]);
const [loading, setLoading] = useState(true);
const [isModalOpen, setIsModalOpen] = useState(false);
const [formData, setFormData] = useState<Partial<User>>({
name: '',
feishuUserId: '',
email: '',
});
const { user: currentUser } = useAuth();
const [users, setUsers] = useState<User[]>([]);
const [loading, setLoading] = useState(true);
const [isModalOpen, setIsModalOpen] = useState(false);
const [formData, setFormData] = useState<Partial<User>>({
name: "",
feishuUserId: "",
email: "",
});
const fetchUsers = async () => {
setLoading(true);
try {
const res = await client.api.users.$get(undefined, {
init: { credentials: 'include' }
});
const data = await res.json();
setUsers(data as unknown as User[]);
setLoading(false);
} catch (err) {
console.error(err);
setLoading(false);
}
};
const fetchUsers = useCallback(async () => {
setLoading(true);
try {
const res = await client.api.users.$get(undefined, {
init: { credentials: "include" },
});
const data = await res.json();
setUsers(data as unknown as User[]);
setLoading(false);
} catch (err) {
console.error(err);
setLoading(false);
}
}, []);
useEffect(() => {
fetchUsers();
}, []);
useEffect(() => {
fetchUsers();
}, [fetchUsers]);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
try {
const res = await client.api.users.$post({
json: formData as any
}, {
init: { credentials: 'include' }
});
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
try {
const res = await client.api.users.$post(
{
json: formData as any,
},
{
init: { credentials: "include" },
},
);
if (res.ok) {
setIsModalOpen(false);
setFormData({ name: '', feishuUserId: '', email: '' });
fetchUsers();
}
} catch (error) {
console.error('Error creating user:', error);
}
};
if (res.ok) {
setIsModalOpen(false);
setFormData({ name: "", feishuUserId: "", email: "" });
fetchUsers();
}
} catch (error) {
console.error("Error creating user:", error);
}
};
const handleDelete = async (id: string) => {
if (!confirm('Are you sure you want to delete this user?')) return;
try {
await client.api.users[':id'].$delete({
param: { id }
}, {
init: { credentials: 'include' }
});
fetchUsers();
} catch (error) {
console.error('Error deleting user:', error);
}
};
const handleDelete = async (id: string) => {
if (!confirm("Are you sure you want to delete this user?")) return;
try {
await client.api.users[":id"].$delete(
{
param: { id },
},
{
init: { credentials: "include" },
},
);
fetchUsers();
} catch (error) {
console.error("Error deleting user:", error);
}
};
if (loading) return <div className="p-4">Loading...</div>;
if (loading) return <div className="p-4">Loading...</div>;
return (
<div>
<div className="flex justify-between items-center mb-6">
<h2 className="text-2xl font-bold text-gray-900">Users</h2>
{currentUser?.isAdmin && (
<button
onClick={() => setIsModalOpen(true)}
className="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 flex items-center"
>
<Plus className="w-4 h-4 mr-2" />
Add User
</button>
)}
</div>
return (
<div>
<div className="flex justify-between items-center mb-6">
<h2 className="text-2xl font-bold text-gray-900">Users</h2>
{currentUser?.isAdmin && (
<button
type="button"
onClick={() => setIsModalOpen(true)}
className="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 flex items-center"
>
<Plus className="w-4 h-4 mr-2" />
Add User
</button>
)}
</div>
<div className="bg-white shadow overflow-hidden sm:rounded-md">
<ul className="divide-y divide-gray-200">
{users.map((user) => (
<li key={user.id}>
<div className="px-4 py-4 sm:px-6">
<div className="flex items-center justify-between">
<div className="flex-1">
<p className="text-sm font-medium text-indigo-600 truncate">{user.name}</p>
<div className="mt-2 sm:flex sm:justify-between">
<div className="sm:flex flex-col">
<p className="flex items-center text-sm text-gray-500">
Feishu ID: <span className="font-mono ml-1 bg-gray-100 px-1 rounded">{user.feishuUserId || 'N/A'}</span>
</p>
<p className="flex items-center text-sm text-gray-500 mt-1">
Email: {user.email || 'N/A'}
</p>
<p className="flex items-center text-sm text-gray-500 mt-1">
Personal Token: <span className="font-mono ml-1 bg-blue-50 text-blue-700 px-1 rounded">{user.personalToken || 'N/A'}</span>
</p>
</div>
</div>
</div>
{currentUser?.isAdmin && (
<div className="ml-4 flex items-center space-x-2">
<button
onClick={() => handleDelete(user.id)}
className="text-red-600 hover:text-red-900 p-2"
>
<Trash2 className="w-5 h-5" />
</button>
</div>
)}
</div>
</div>
</li>
))}
{users.length === 0 && (
<li className="px-4 py-8 text-center text-gray-500">
No users found. Create one to get started.
</li>
)}
</ul>
</div>
<div className="bg-white shadow overflow-hidden sm:rounded-md">
<ul className="divide-y divide-gray-200">
{users.map((user) => (
<li key={user.id}>
<div className="px-4 py-4 sm:px-6">
<div className="flex items-center justify-between">
<div className="flex-1">
<p className="text-sm font-medium text-indigo-600 truncate">
{user.name}
</p>
<div className="mt-2 sm:flex sm:justify-between">
<div className="sm:flex flex-col">
<p className="flex items-center text-sm text-gray-500">
Feishu ID:{" "}
<span className="font-mono ml-1 bg-gray-100 px-1 rounded">
{user.feishuUserId || "N/A"}
</span>
</p>
<p className="flex items-center text-sm text-gray-500 mt-1">
Email: {user.email || "N/A"}
</p>
<p className="flex items-center text-sm text-gray-500 mt-1">
Personal Token:{" "}
<span className="font-mono ml-1 bg-blue-50 text-blue-700 px-1 rounded">
{user.personalToken || "N/A"}
</span>
</p>
</div>
</div>
</div>
{currentUser?.isAdmin && (
<div className="ml-4 flex items-center space-x-2">
<button
type="button"
onClick={() => handleDelete(user.id)}
className="text-red-600 hover:text-red-900 p-2"
>
<Trash2 className="w-5 h-5" />
</button>
</div>
)}
</div>
</div>
</li>
))}
{users.length === 0 && (
<li className="px-4 py-8 text-center text-gray-500">
No users found. Create one to get started.
</li>
)}
</ul>
</div>
<Modal
isOpen={isModalOpen}
onClose={() => setIsModalOpen(false)}
title="Add New User"
>
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<label className="block text-sm font-medium text-gray-700">Name</label>
<input
type="text"
required
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border p-2"
value={formData.name}
onChange={e => setFormData({ ...formData, name: e.target.value })}
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700">Feishu User ID</label>
<input
type="text"
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border p-2"
value={formData.feishuUserId}
onChange={e => setFormData({ ...formData, feishuUserId: e.target.value })}
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700">Email</label>
<input
type="email"
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border p-2"
value={formData.email}
onChange={e => setFormData({ ...formData, email: e.target.value })}
/>
</div>
<div className="flex justify-end pt-4">
<button
type="button"
onClick={() => setIsModalOpen(false)}
className="mr-3 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50"
>
Cancel
</button>
<button
type="submit"
className="px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-700"
>
Create User
</button>
</div>
</form>
</Modal>
</div>
);
<Modal
isOpen={isModalOpen}
onClose={() => setIsModalOpen(false)}
title="Add New User"
>
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<label
htmlFor="user-name"
className="block text-sm font-medium text-gray-700"
>
Name
</label>
<input
id="user-name"
type="text"
required
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border p-2"
value={formData.name}
onChange={(e) =>
setFormData({ ...formData, name: e.target.value })
}
/>
</div>
<div>
<label
htmlFor="user-feishu"
className="block text-sm font-medium text-gray-700"
>
Feishu User ID
</label>
<input
id="user-feishu"
type="text"
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border p-2"
value={formData.feishuUserId}
onChange={(e) =>
setFormData({ ...formData, feishuUserId: e.target.value })
}
/>
</div>
<div>
<label
htmlFor="user-email"
className="block text-sm font-medium text-gray-700"
>
Email
</label>
<input
id="user-email"
type="email"
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border p-2"
value={formData.email}
onChange={(e) =>
setFormData({ ...formData, email: e.target.value })
}
/>
</div>
<div className="flex justify-end pt-4">
<button
type="button"
onClick={() => setIsModalOpen(false)}
className="mr-3 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50"
>
Cancel
</button>
<button
type="submit"
className="px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-700"
>
Create User
</button>
</div>
</form>
</Modal>
</div>
);
}

15
apps/web/tailwind.config.js
View File

@@ -1,11 +1,8 @@
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],
};

52
apps/web/tsconfig.json
View File

@@ -1,30 +1,30 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}

16
apps/web/tsconfig.node.json
View File

@@ -1,10 +1,10 @@
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}

44
apps/web/vite.config.ts
View File

@@ -1,25 +1,25 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'
import path from "node:path";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
server: {
proxy: {
'/api': {
target: process.env.VITE_API_URL || 'http://localhost:3000',
changeOrigin: true,
},
'/webhook': {
target: process.env.VITE_API_URL || 'http://localhost:3000',
changeOrigin: true,
}
}
}
})
plugins: [react()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
server: {
proxy: {
"/api": {
target: process.env.VITE_API_URL || "http://localhost:3000",
changeOrigin: true,
},
"/webhook": {
target: process.env.VITE_API_URL || "http://localhost:3000",
changeOrigin: true,
},
},
},
});

75
biome.json Normal file
View File

@@ -0,0 +1,75 @@
{
"$schema": "https://biomejs.dev/schemas/2.3.11/schema.json",
"vcs": {
"enabled": true,
"clientKind": "git",
"useIgnoreFile": true
},
"files": {
"ignoreUnknown": false
},
"formatter": {
"enabled": true,
"indentStyle": "tab"
},
"linter": {
"enabled": true,
"rules": {
"recommended": true,
"a11y": {
"useButtonType": "error",
"noStaticElementInteractions": "error",
"useKeyWithClickEvents": "warn",
"noSvgWithoutTitle": "warn",
"noLabelWithoutControl": "warn"
},
"suspicious": {
"noAssignInExpressions": "error",
"noExplicitAny": "warn",
"noImplicitAnyLet": "error",
"noRedeclare": "error",
"noUnknownAtRules": {
"level": "error",
"options": {
"ignore": [
"tailwind",
"layer",
"apply",
"variants",
"responsive",
"screen",
"config"
]
}
}
},
"style": {
"noNonNullAssertion": "warn",
"useNodejsImportProtocol": "error"
},
"correctness": {
"useExhaustiveDependencies": "warn",
"noUnusedVariables": "error",
"noUnusedImports": "error"
}
}
},
"css": {
"linter": {
"enabled": true
}
},
"javascript": {
"formatter": {
"quoteStyle": "double"
}
},
"assist": {
"enabled": true,
"actions": {
"source": {
"organizeImports": "on"
}
}
}
}

7
docs/copilot-context.md
View File

@@ -1,4 +1,4 @@
# Project Context for GitHub Copilot (v1.2.1)
# Project Context for GitHub Copilot (v1.2.2)
This document provides technical context, architectural decisions, and code conventions for the **Alert Message Center** project. It is intended to help AI assistants understand the codebase.
@@ -194,6 +194,11 @@ The database schema is defined in `apps/server/src/db/schema.ts`.
- **Styling**: Use Tailwind utility classes directly in JSX.
- **Async/Await**: Prefer `async/await` over `.then()`.
- **Type Safety**: strict TypeScript usage. Backend and Frontend share types via Hono RPC or shared interfaces.
- **Linter & Formatter**:
- Framework: [Biome](https://biomejs.dev/).
- **Rules**: Strict configuration for `a11y`, `suspicious`, `style`, and `correctness`.
- **Tailwind**: `noUnknownAtRules` is configured to ignore Tailwind directives (`@tailwind`, `@apply`, etc.).
- **Enforcement**: CI/CD runs `biome check` to ensure compliance. Avoid use of `as any` unless absolutely necessary (e.g., complex API payloads), in which case `// biome-ignore` should include a rationale.
- **Logging**:
- Framework: `pino`.
- **Structured Log**: Use JSON format for easy parsing and aggregation.

31
package.json
View File

@@ -1,15 +1,18 @@
{
"name": "alertmessagecenter",
"version": "1.1.1",
"workspaces": [
"apps/*"
],
"scripts": {
"dev": "bun run --filter '*' dev",
"build": "bun run --filter '*' build",
"start": "bun run --filter '@alertmessagecenter/server' start"
},
"devDependencies": {
"bun-types": "latest"
}
}
"name": "alertmessagecenter",
"version": "1.1.1",
"workspaces": [
"apps/*"
],
"scripts": {
"dev": "bun run --filter '*' dev",
"build": "bun run --filter '*' build",
"start": "bun run --filter '@alertmessagecenter/server' start",
"lint": "bunx @biomejs/biome lint .",
"format": "bunx @biomejs/biome format . --write",
"check": "bunx @biomejs/biome check --write ."
},
"devDependencies": {
"bun-types": "latest"
}
}

1
todo.md
View File

@@ -26,4 +26,5 @@
- [x] **Auto-Cleanup**: Unbind subscriptions when bot is removed from group.
- [x] **Long Connection**: WebSocket support for intranet deployments.
- [x] **Structured Logging**: Integrated `pino` for better observability.
- [x] **Linting**: Tightened Biome rules and resolved all a11y/correctness issues.