merge: bring notifications-realtime + modules into master (preserves files attachments)
This commit is contained in:
egutierrez
+160
-9
@@ -55,6 +55,8 @@ import {
|
||||
IconChevronRight,
|
||||
IconLayoutKanban,
|
||||
IconLogout,
|
||||
IconPlug,
|
||||
IconKey,
|
||||
IconMenu2,
|
||||
IconMessageChatbot,
|
||||
IconMoodSmile,
|
||||
@@ -81,7 +83,11 @@ import { StickerPicker } from "./components/StickerPicker";
|
||||
import { ColorPickerGrid, CustomColorModal } from "./components/ColorPickerGrid";
|
||||
import { AVATAR_COLORS } from "./components/colors";
|
||||
import { colorBg, colorBorder } from "./components/colors";
|
||||
import type { Board, Card, CardColor, Column, ColumnLocation, User } from "./types";
|
||||
import { NotificationsBell } from "./components/NotificationsBell";
|
||||
import { ModulesModal } from "./components/ModulesModal";
|
||||
import { MCPTokensModal } from "./components/MCPTokensModal";
|
||||
import { useEventStream } from "./hooks/useEventStream";
|
||||
import type { Board, Card, CardColor, Column, ColumnLocation, Notification, User } from "./types";
|
||||
|
||||
const COL_PREFIX = "column-";
|
||||
|
||||
@@ -251,6 +257,23 @@ export function App() {
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Coalesce ráfagas de board.invalidated (trailing debounce 300ms) — sin esto
|
||||
// cada mutación remota dispara un refetch /api/board completo y la memoria
|
||||
// del navegador crece sin techo.
|
||||
const reloadTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
const debouncedReload = useCallback(() => {
|
||||
if (reloadTimerRef.current) clearTimeout(reloadTimerRef.current);
|
||||
reloadTimerRef.current = setTimeout(() => {
|
||||
reloadTimerRef.current = null;
|
||||
reload();
|
||||
}, 300);
|
||||
}, [reload]);
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (reloadTimerRef.current) clearTimeout(reloadTimerRef.current);
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
reload();
|
||||
}, [reload]);
|
||||
@@ -326,12 +349,75 @@ export function App() {
|
||||
return () => clearInterval(t);
|
||||
}, [activeCard, activeColumnId]);
|
||||
|
||||
// Notifications state (populated by SSE + initial fetch).
|
||||
const [notifs, setNotifs] = useState<Notification[]>([]);
|
||||
const [notifUnread, setNotifUnread] = useState(0);
|
||||
|
||||
// Build version (injected at compile time via -ldflags). Fetched once.
|
||||
const [appVersion, setAppVersion] = useState<string>("");
|
||||
useEffect(() => {
|
||||
const t = setInterval(() => {
|
||||
reload();
|
||||
}, 30000);
|
||||
return () => clearInterval(t);
|
||||
}, [reload]);
|
||||
api
|
||||
.getVersion()
|
||||
.then((v) => setAppVersion(v.version))
|
||||
.catch(() => setAppVersion(""));
|
||||
}, []);
|
||||
|
||||
const [modulesOpen, setModulesOpen] = useState(false);
|
||||
const [mcpTokensOpen, setMcpTokensOpen] = useState(false);
|
||||
|
||||
const reloadNotifs = useCallback(async () => {
|
||||
try {
|
||||
const [list, c] = await Promise.all([api.listNotifications(false), api.unreadNotificationCount()]);
|
||||
setNotifs(list);
|
||||
setNotifUnread(c.count);
|
||||
} catch {
|
||||
// best-effort; SSE will reconcile
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (auth.user) reloadNotifs();
|
||||
}, [auth.user, reloadNotifs]);
|
||||
|
||||
// Replace 30s polling with SSE. Server pushes board.invalidated on every
|
||||
// mutation, message.created on chat traffic and notification.created on
|
||||
// per-user notifications. We refetch /api/board on invalidate (cheap +
|
||||
// keeps merge logic simple) and patch notification state in-place.
|
||||
useEventStream(
|
||||
useMemo(
|
||||
() => ({
|
||||
"board.invalidated": () => {
|
||||
debouncedReload();
|
||||
},
|
||||
"notification.created": (payload: unknown) => {
|
||||
const n = payload as Notification;
|
||||
if (!n || !n.id) return;
|
||||
setNotifs((prev) => (prev.some((x) => x.id === n.id) ? prev : [n, ...prev].slice(0, 100)));
|
||||
setNotifUnread((c) => c + 1);
|
||||
const who = n.actor_name || "Alguien";
|
||||
const card = n.card_seq_num ? `#${n.card_seq_num}` : n.card_title;
|
||||
notifications.show({
|
||||
autoClose: 4000,
|
||||
color: n.kind === "mention" ? "grape" : "blue",
|
||||
title: `${who} en ${card}`,
|
||||
message: n.snippet,
|
||||
});
|
||||
},
|
||||
"notification.read": (payload: unknown) => {
|
||||
const p = payload as { id?: string } | null;
|
||||
if (!p?.id) return;
|
||||
setNotifs((prev) => prev.map((x) => (x.id === p.id ? { ...x, read_at: new Date().toISOString() } : x)));
|
||||
setNotifUnread((c) => Math.max(0, c - 1));
|
||||
},
|
||||
"notification.read_all": () => {
|
||||
setNotifs((prev) => prev.map((x) => (x.read_at ? x : { ...x, read_at: new Date().toISOString() })));
|
||||
setNotifUnread(0);
|
||||
},
|
||||
}),
|
||||
[debouncedReload],
|
||||
),
|
||||
!!auth.user,
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!activeSticker) return;
|
||||
@@ -363,16 +449,21 @@ export function App() {
|
||||
(c: Card): boolean => {
|
||||
const term = searchTerm.trim().toLowerCase();
|
||||
if (term) {
|
||||
const seqStr = c.seq_num > 0 ? String(c.seq_num) : "";
|
||||
const seqPadded = c.seq_num > 0 ? String(c.seq_num).padStart(5, "0") : "";
|
||||
const hay = [
|
||||
c.title,
|
||||
c.description,
|
||||
c.requester,
|
||||
seqStr,
|
||||
seqPadded,
|
||||
...(c.tags || []),
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" ")
|
||||
.toLowerCase();
|
||||
if (!hay.includes(term)) return false;
|
||||
const normalizedTerm = term.replace(/^#/, "").replace(/^0+(?=\d)/, "");
|
||||
if (!hay.includes(term) && !(normalizedTerm && hay.includes(normalizedTerm))) return false;
|
||||
}
|
||||
if (filterAssigneeId && c.assignee_id !== filterAssigneeId) return false;
|
||||
if (filterUnassigned && c.assignee_id) return false;
|
||||
@@ -658,7 +749,7 @@ export function App() {
|
||||
});
|
||||
}, [reload, users, auth.user, requesterOptions, tagOptions]);
|
||||
|
||||
const openEditCard = useCallback((card: Card) => {
|
||||
const openEditCard = useCallback((card: Card, options?: { highlightMessageId?: string }) => {
|
||||
const id = modals.open({
|
||||
title: "Editar tarjeta",
|
||||
size: "85%",
|
||||
@@ -669,6 +760,7 @@ export function App() {
|
||||
currentUserId={auth.user?.id}
|
||||
requesterOptions={requesterOptions}
|
||||
tagOptions={tagOptions}
|
||||
highlightMessageId={options?.highlightMessageId}
|
||||
onCancel={() => modals.close(id)}
|
||||
onSubmit={async (v) => {
|
||||
try {
|
||||
@@ -1113,6 +1205,38 @@ export function App() {
|
||||
<ActionIcon variant="subtle" onClick={reload} aria-label="Refresh">
|
||||
<IconRefresh size={16} />
|
||||
</ActionIcon>
|
||||
{auth.user && (
|
||||
<NotificationsBell
|
||||
unreadCount={notifUnread}
|
||||
notifications={notifs}
|
||||
onOpenCard={async (cardId, messageId) => {
|
||||
// Resolve the card across all possible buckets: live
|
||||
// board, refreshed board, archive, trash. Notifications
|
||||
// can point at any of them.
|
||||
const find = (cs?: Card[]) => cs?.find((c) => c.id === cardId);
|
||||
let card = find(board?.cards);
|
||||
if (!card) {
|
||||
await reload();
|
||||
const fresh = await api.getBoard();
|
||||
card = find(fresh.cards);
|
||||
}
|
||||
if (!card) {
|
||||
const archived = await api.listArchive();
|
||||
card = find(archived);
|
||||
}
|
||||
if (!card) {
|
||||
const trashed = await api.listTrash();
|
||||
card = find(trashed);
|
||||
}
|
||||
if (!card) {
|
||||
notifications.show({ color: "red", message: "Card no encontrada" });
|
||||
return;
|
||||
}
|
||||
openEditCard(card, { highlightMessageId: messageId });
|
||||
}}
|
||||
onChanged={reloadNotifs}
|
||||
/>
|
||||
)}
|
||||
<ActionIcon
|
||||
variant={chatOpen ? "filled" : "subtle"}
|
||||
onClick={() => setChatOpen((v) => !v)}
|
||||
@@ -1130,7 +1254,16 @@ export function App() {
|
||||
</ActionIcon>
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown>
|
||||
<Menu.Label>{auth.user.display_name || auth.user.username}</Menu.Label>
|
||||
<Menu.Label>
|
||||
<Group justify="space-between" gap={6} wrap="nowrap">
|
||||
<Text size="xs" fw={600} truncate>
|
||||
{auth.user.display_name || auth.user.username}
|
||||
</Text>
|
||||
{appVersion && (
|
||||
<Text size="xs" c="dimmed" ff="monospace">v{appVersion}</Text>
|
||||
)}
|
||||
</Group>
|
||||
</Menu.Label>
|
||||
<Box p="xs">
|
||||
<Text size="xs" c="dimmed" mb={4}>Color del avatar</Text>
|
||||
<ColorPickerGrid
|
||||
@@ -1151,6 +1284,20 @@ export function App() {
|
||||
/>
|
||||
</Box>
|
||||
<Menu.Divider />
|
||||
{auth.user.is_admin && (
|
||||
<Menu.Item
|
||||
leftSection={<IconPlug size={14} />}
|
||||
onClick={() => setModulesOpen(true)}
|
||||
>
|
||||
Modulos
|
||||
</Menu.Item>
|
||||
)}
|
||||
<Menu.Item
|
||||
leftSection={<IconKey size={14} />}
|
||||
onClick={() => setMcpTokensOpen(true)}
|
||||
>
|
||||
MCP tokens
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconLogout size={14} />}
|
||||
color="red"
|
||||
@@ -1161,6 +1308,10 @@ export function App() {
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
)}
|
||||
{auth.user?.is_admin && (
|
||||
<ModulesModal opened={modulesOpen} onClose={() => setModulesOpen(false)} />
|
||||
)}
|
||||
<MCPTokensModal opened={mcpTokensOpen} onClose={() => setMcpTokensOpen(false)} />
|
||||
</Group>
|
||||
</Group>
|
||||
</AppShell.Header>
|
||||
|
||||
@@ -5,8 +5,12 @@ import type {
|
||||
CardHistoryResponse,
|
||||
CardMessage,
|
||||
Column,
|
||||
KanbanModule,
|
||||
Metrics,
|
||||
MetricsFilter,
|
||||
ModuleLog,
|
||||
ModuleTestResult,
|
||||
Notification,
|
||||
Sticker,
|
||||
User,
|
||||
} from "./types";
|
||||
@@ -28,6 +32,10 @@ export function getFlags(): Promise<Record<string, boolean>> {
|
||||
return fetchJSON("/flags");
|
||||
}
|
||||
|
||||
export function getVersion(): Promise<{ version: string }> {
|
||||
return fetchJSON("/version");
|
||||
}
|
||||
|
||||
export function createColumn(name: string): Promise<Column> {
|
||||
return fetchJSON("/columns", { method: "POST", body: JSON.stringify({ name }) });
|
||||
}
|
||||
@@ -292,6 +300,61 @@ export function chatWSURL(): string {
|
||||
return `${proto}//${window.location.host}/api/chat/ws`;
|
||||
}
|
||||
|
||||
export function cardChatWSURL(cardId: string): string {
|
||||
const proto = window.location.protocol === "https:" ? "wss:" : "ws:";
|
||||
return `${proto}//${window.location.host}/api/cards/${cardId}/chat/ws`;
|
||||
}
|
||||
|
||||
export function listNotifications(unreadOnly = false): Promise<Notification[]> {
|
||||
return fetchJSON(`/notifications${unreadOnly ? "?unread=1" : ""}`);
|
||||
}
|
||||
|
||||
export function unreadNotificationCount(): Promise<{ count: number }> {
|
||||
return fetchJSON("/notifications/unread-count");
|
||||
}
|
||||
|
||||
export function markNotificationRead(id: string): Promise<void> {
|
||||
return fetchJSON(`/notifications/${id}/read`, { method: "POST" });
|
||||
}
|
||||
|
||||
export function markAllNotificationsRead(): Promise<{ count: number }> {
|
||||
return fetchJSON("/notifications/read-all", { method: "POST" });
|
||||
}
|
||||
|
||||
export function listModules(): Promise<KanbanModule[]> {
|
||||
return fetchJSON("/modules");
|
||||
}
|
||||
|
||||
export interface ModuleInput {
|
||||
name: string;
|
||||
kind: string;
|
||||
enabled: boolean;
|
||||
event_filter: string[];
|
||||
config: Record<string, unknown>;
|
||||
}
|
||||
|
||||
export function createModule(body: ModuleInput): Promise<KanbanModule> {
|
||||
return fetchJSON("/modules", { method: "POST", body: JSON.stringify(body) });
|
||||
}
|
||||
|
||||
export function updateModule(id: string, patch: Partial<ModuleInput>): Promise<KanbanModule> {
|
||||
return fetchJSON(`/modules/${id}`, { method: "PATCH", body: JSON.stringify(patch) });
|
||||
}
|
||||
|
||||
export function deleteModule(id: string): Promise<void> {
|
||||
return fetchJSON(`/modules/${id}`, { method: "DELETE" });
|
||||
}
|
||||
|
||||
export function listModuleLogs(id: string, limit = 100): Promise<ModuleLog[]> {
|
||||
return fetchJSON(`/modules/${id}/logs?limit=${limit}`);
|
||||
}
|
||||
|
||||
export function testModule(idOrDraft: string, body?: ModuleInput): Promise<ModuleTestResult> {
|
||||
const init: RequestInit = { method: "POST" };
|
||||
if (body) init.body = JSON.stringify(body);
|
||||
return fetchJSON(`/modules/${idOrDraft}/test`, init);
|
||||
}
|
||||
|
||||
// streamChat opens a WebSocket, sends the message history, and streams events
|
||||
// to onEvent. Returns a Promise that resolves when the server closes the
|
||||
// connection (after a "done" event) and rejects on transport errors.
|
||||
@@ -417,6 +480,31 @@ export function deleteCardFile(fileId: string): Promise<void> {
|
||||
return fetchJSON(`/files/${fileId}`, { method: "DELETE" });
|
||||
}
|
||||
|
||||
// --- MCP per-user tokens ----------------------------------------------------
|
||||
|
||||
export interface MCPToken {
|
||||
id: string;
|
||||
name: string;
|
||||
created_at: string;
|
||||
last_used_at?: string;
|
||||
}
|
||||
|
||||
export interface MCPTokenCreated extends MCPToken {
|
||||
token: string;
|
||||
}
|
||||
|
||||
export function createMCPToken(name: string): Promise<MCPTokenCreated> {
|
||||
return fetchJSON("/mcp-tokens", { method: "POST", body: JSON.stringify({ name }) });
|
||||
}
|
||||
|
||||
export function listMCPTokens(): Promise<MCPToken[]> {
|
||||
return fetchJSON("/mcp-tokens");
|
||||
}
|
||||
|
||||
export function revokeMCPToken(id: string): Promise<void> {
|
||||
return fetchJSON(`/mcp-tokens/${id}`, { method: "DELETE" });
|
||||
}
|
||||
|
||||
export function getMetrics(f: MetricsFilter): Promise<Metrics> {
|
||||
const qs = new URLSearchParams();
|
||||
if (f.from) qs.set("from", f.from);
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
import {
|
||||
ActionIcon,
|
||||
Avatar,
|
||||
Badge,
|
||||
Box,
|
||||
Combobox,
|
||||
FileButton,
|
||||
Group,
|
||||
Loader,
|
||||
@@ -11,10 +13,20 @@ import {
|
||||
Text,
|
||||
Textarea,
|
||||
Tooltip,
|
||||
useCombobox,
|
||||
} from "@mantine/core";
|
||||
import { IconPaperclip, IconSend, IconTrash } from "@tabler/icons-react";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import { DragEvent, KeyboardEvent, useCallback, useEffect, useRef, useState } from "react";
|
||||
import {
|
||||
DragEvent,
|
||||
KeyboardEvent,
|
||||
ReactNode,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import * as api from "../api";
|
||||
import type { CardMessage, User } from "../types";
|
||||
import { tagColor } from "./colors";
|
||||
@@ -27,6 +39,9 @@ interface Props {
|
||||
currentUserId?: string;
|
||||
onMessagesChange?: (messages: CardMessage[]) => void;
|
||||
onFileUploaded?: () => void;
|
||||
// When set, the panel scrolls the matching message into view and flashes a
|
||||
// brief highlight (~2s). Used by notification click → open card.
|
||||
highlightMessageId?: string;
|
||||
}
|
||||
|
||||
function refForFile(filename: string, url: string, mime: string): string {
|
||||
@@ -34,16 +49,90 @@ function refForFile(filename: string, url: string, mime: string): string {
|
||||
return mime.startsWith("image/") ? `` : `[${safe}](${url})`;
|
||||
}
|
||||
|
||||
export function CardChatPanel({ cardId, users, currentUserId, onMessagesChange, onFileUploaded }: Props) {
|
||||
// Window for considering a peer "actively typing" after its last event.
|
||||
const TYPING_LIFETIME_MS = 4000;
|
||||
// Minimum gap between successive typing pings emitted while the user types.
|
||||
const TYPING_THROTTLE_MS = 1500;
|
||||
|
||||
interface MentionMatch {
|
||||
start: number; // index of '@' in the textarea value
|
||||
query: string; // text after '@', lowercased
|
||||
}
|
||||
|
||||
function detectMention(value: string, cursor: number): MentionMatch | null {
|
||||
// Look backwards from cursor for an '@' that starts a word.
|
||||
for (let i = cursor - 1; i >= 0 && cursor - i <= 64; i--) {
|
||||
const ch = value[i];
|
||||
if (ch === "@") {
|
||||
// Valid start: beginning of string or whitespace before.
|
||||
if (i === 0 || /\s/.test(value[i - 1])) {
|
||||
const q = value.slice(i + 1, cursor);
|
||||
if (/^[a-z0-9_.-]*$/i.test(q)) {
|
||||
return { start: i, query: q.toLowerCase() };
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
if (/\s/.test(ch)) return null;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
const mentionRegex = /(^|\s)(@[a-z0-9][a-z0-9_.-]{0,63})/gi;
|
||||
|
||||
function renderBody(body: string, knownUsers: Map<string, User>): ReactNode {
|
||||
const out: ReactNode[] = [];
|
||||
let last = 0;
|
||||
let key = 0;
|
||||
for (const m of body.matchAll(mentionRegex)) {
|
||||
const handle = m[2].slice(1).toLowerCase();
|
||||
const idx = (m.index ?? 0) + m[1].length;
|
||||
if (idx > last) out.push(body.slice(last, idx));
|
||||
const user = knownUsers.get(handle);
|
||||
if (user) {
|
||||
out.push(
|
||||
<Badge
|
||||
key={`m${key++}`}
|
||||
size="xs"
|
||||
variant="light"
|
||||
color={user.color || tagColor(user.username)}
|
||||
style={{ verticalAlign: "middle" }}
|
||||
>
|
||||
@{user.username}
|
||||
</Badge>,
|
||||
);
|
||||
} else {
|
||||
out.push(`@${handle}`);
|
||||
}
|
||||
last = idx + m[2].length;
|
||||
}
|
||||
if (last < body.length) out.push(body.slice(last));
|
||||
return out;
|
||||
}
|
||||
|
||||
export function CardChatPanel({
|
||||
cardId,
|
||||
users,
|
||||
currentUserId,
|
||||
onMessagesChange,
|
||||
onFileUploaded,
|
||||
highlightMessageId,
|
||||
}: Props) {
|
||||
const [messages, setMessages] = useState<CardMessage[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [body, setBody] = useState("");
|
||||
const [sending, setSending] = useState(false);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [dragOver, setDragOver] = useState(false);
|
||||
const [typingUsers, setTypingUsers] = useState<Record<string, number>>({});
|
||||
const [mention, setMention] = useState<MentionMatch | null>(null);
|
||||
const viewportRef = useRef<HTMLDivElement | null>(null);
|
||||
const wsRef = useRef<WebSocket | null>(null);
|
||||
const textareaRef = useRef<HTMLTextAreaElement | null>(null);
|
||||
const lastTypingEmitRef = useRef(0);
|
||||
|
||||
const usersById = new Map(users.map((u) => [u.id, u]));
|
||||
const usersById = useMemo(() => new Map(users.map((u) => [u.id, u])), [users]);
|
||||
const usersByUsername = useMemo(() => new Map(users.map((u) => [u.username.toLowerCase(), u])), [users]);
|
||||
|
||||
const reload = useCallback(async () => {
|
||||
try {
|
||||
@@ -61,22 +150,142 @@ export function CardChatPanel({ cardId, users, currentUserId, onMessagesChange,
|
||||
reload();
|
||||
}, [reload]);
|
||||
|
||||
// Open one WebSocket per cardId for realtime chat + typing.
|
||||
useEffect(() => {
|
||||
const ws = new WebSocket(api.cardChatWSURL(cardId));
|
||||
wsRef.current = ws;
|
||||
ws.onmessage = (ev) => {
|
||||
try {
|
||||
const data = JSON.parse(ev.data) as
|
||||
| { type: "message.created"; message: CardMessage }
|
||||
| { type: "typing"; user_id: string }
|
||||
| { type: "error"; error: string };
|
||||
if (data.type === "message.created" && data.message) {
|
||||
setMessages((prev) => {
|
||||
if (prev.some((m) => m.id === data.message!.id)) return prev;
|
||||
const next = [...prev, data.message!];
|
||||
onMessagesChange?.(next);
|
||||
return next;
|
||||
});
|
||||
} else if (data.type === "typing" && data.user_id) {
|
||||
setTypingUsers((prev) => ({ ...prev, [data.user_id]: Date.now() }));
|
||||
} else if (data.type === "error") {
|
||||
notifications.show({ color: "red", message: data.error });
|
||||
}
|
||||
} catch {
|
||||
// ignore malformed
|
||||
}
|
||||
};
|
||||
ws.onerror = () => {
|
||||
// browser will report; we keep the panel functional via REST fallback
|
||||
};
|
||||
return () => {
|
||||
ws.close();
|
||||
wsRef.current = null;
|
||||
};
|
||||
}, [cardId, onMessagesChange]);
|
||||
|
||||
// Sweep stale typing entries.
|
||||
useEffect(() => {
|
||||
const t = setInterval(() => {
|
||||
const now = Date.now();
|
||||
setTypingUsers((prev) => {
|
||||
const next: Record<string, number> = {};
|
||||
for (const [k, v] of Object.entries(prev)) {
|
||||
if (now - v < TYPING_LIFETIME_MS) next[k] = v;
|
||||
}
|
||||
return next;
|
||||
});
|
||||
}, 1000);
|
||||
return () => clearInterval(t);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (viewportRef.current) {
|
||||
viewportRef.current.scrollTo({ top: viewportRef.current.scrollHeight, behavior: "smooth" });
|
||||
}
|
||||
}, [messages.length]);
|
||||
|
||||
// Scroll to + briefly pulse the message that triggered an incoming
|
||||
// notification. Runs whenever the highlight id changes AND the message
|
||||
// is present in the list (it may arrive asynchronously after WS sync).
|
||||
const [pulse, setPulse] = useState<string | null>(null);
|
||||
useEffect(() => {
|
||||
if (!highlightMessageId) return;
|
||||
if (!messages.some((m) => m.id === highlightMessageId)) return;
|
||||
const el = document.querySelector(`[data-msg-id="${highlightMessageId}"]`);
|
||||
if (el && el instanceof HTMLElement) {
|
||||
el.scrollIntoView({ behavior: "smooth", block: "center" });
|
||||
}
|
||||
setPulse(highlightMessageId);
|
||||
const t = setTimeout(() => setPulse(null), 2200);
|
||||
return () => clearTimeout(t);
|
||||
}, [highlightMessageId, messages]);
|
||||
|
||||
const sendTypingPing = () => {
|
||||
const ws = wsRef.current;
|
||||
if (!ws || ws.readyState !== WebSocket.OPEN) return;
|
||||
const now = Date.now();
|
||||
if (now - lastTypingEmitRef.current < TYPING_THROTTLE_MS) return;
|
||||
lastTypingEmitRef.current = now;
|
||||
ws.send(JSON.stringify({ type: "typing" }));
|
||||
};
|
||||
|
||||
const combobox = useCombobox({
|
||||
onDropdownClose: () => setMention(null),
|
||||
});
|
||||
|
||||
const mentionCandidates = useMemo(() => {
|
||||
if (!mention) return [] as User[];
|
||||
return users
|
||||
.filter((u) => u.username.toLowerCase().startsWith(mention.query))
|
||||
.slice(0, 8);
|
||||
}, [users, mention]);
|
||||
|
||||
useEffect(() => {
|
||||
if (mention && mentionCandidates.length > 0) {
|
||||
combobox.openDropdown();
|
||||
combobox.selectFirstOption();
|
||||
} else {
|
||||
combobox.closeDropdown();
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [mention?.query, mentionCandidates.length]);
|
||||
|
||||
const insertMention = (username: string) => {
|
||||
if (!mention) return;
|
||||
const before = body.slice(0, mention.start);
|
||||
const after = body.slice(mention.start + 1 + mention.query.length);
|
||||
const inserted = `@${username} `;
|
||||
const next = before + inserted + after;
|
||||
setBody(next);
|
||||
setMention(null);
|
||||
// Restore caret right after the inserted mention.
|
||||
requestAnimationFrame(() => {
|
||||
const el = textareaRef.current;
|
||||
if (!el) return;
|
||||
const pos = (before + inserted).length;
|
||||
el.focus();
|
||||
el.setSelectionRange(pos, pos);
|
||||
});
|
||||
};
|
||||
|
||||
const send = async () => {
|
||||
const text = body.trim();
|
||||
if (!text || sending) return;
|
||||
setSending(true);
|
||||
const ws = wsRef.current;
|
||||
try {
|
||||
const m = await api.createCardMessage(cardId, text);
|
||||
const next = [...messages, m];
|
||||
setMessages(next);
|
||||
onMessagesChange?.(next);
|
||||
setBody("");
|
||||
if (ws && ws.readyState === WebSocket.OPEN) {
|
||||
ws.send(JSON.stringify({ type: "send", body: text }));
|
||||
// Optimistic clear; server will broadcast the persisted message.
|
||||
setBody("");
|
||||
} else {
|
||||
const m = await api.createCardMessage(cardId, text);
|
||||
setMessages((prev) => [...prev, m]);
|
||||
onMessagesChange?.([...messages, m]);
|
||||
setBody("");
|
||||
}
|
||||
} catch (e) {
|
||||
notifications.show({ color: "red", message: (e as Error).message });
|
||||
} finally {
|
||||
@@ -95,7 +304,25 @@ export function CardChatPanel({ cardId, users, currentUserId, onMessagesChange,
|
||||
}
|
||||
};
|
||||
|
||||
const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
setBody(e.currentTarget.value);
|
||||
sendTypingPing();
|
||||
const cursor = e.currentTarget.selectionStart ?? e.currentTarget.value.length;
|
||||
setMention(detectMention(e.currentTarget.value, cursor));
|
||||
};
|
||||
|
||||
const onKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
|
||||
if (mention && mentionCandidates.length > 0 && (e.key === "Enter" || e.key === "Tab")) {
|
||||
e.preventDefault();
|
||||
const sel = combobox.getSelectedOptionIndex();
|
||||
const pick = mentionCandidates[Math.max(0, sel)];
|
||||
if (pick) insertMention(pick.username);
|
||||
return;
|
||||
}
|
||||
if (mention && e.key === "Escape") {
|
||||
setMention(null);
|
||||
return;
|
||||
}
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
send();
|
||||
@@ -143,6 +370,13 @@ export function CardChatPanel({ cardId, users, currentUserId, onMessagesChange,
|
||||
setDragOver(false);
|
||||
};
|
||||
|
||||
const typingNames = Object.keys(typingUsers)
|
||||
.filter((uid) => uid !== currentUserId)
|
||||
.map((uid) => {
|
||||
const u = usersById.get(uid);
|
||||
return u?.display_name || u?.username || "alguien";
|
||||
});
|
||||
|
||||
return (
|
||||
<Stack
|
||||
gap="xs"
|
||||
@@ -176,13 +410,25 @@ export function CardChatPanel({ cardId, users, currentUserId, onMessagesChange,
|
||||
const author = m.author_id ? usersById.get(m.author_id) : null;
|
||||
const isMe = m.author_id && m.author_id === currentUserId;
|
||||
const label = author ? author.display_name || author.username : "Anonimo";
|
||||
const highlighted = pulse === m.id;
|
||||
return (
|
||||
<Paper
|
||||
key={m.id}
|
||||
withBorder
|
||||
p="xs"
|
||||
radius="sm"
|
||||
bg={isMe ? "var(--mantine-color-blue-light)" : undefined}
|
||||
data-msg-id={m.id}
|
||||
bg={
|
||||
highlighted
|
||||
? "var(--mantine-color-yellow-light)"
|
||||
: isMe
|
||||
? "var(--mantine-color-blue-light)"
|
||||
: undefined
|
||||
}
|
||||
style={{
|
||||
transition: "background-color 600ms ease",
|
||||
boxShadow: highlighted ? "0 0 0 2px var(--mantine-color-yellow-5)" : undefined,
|
||||
}}
|
||||
>
|
||||
<Group gap={6} wrap="nowrap" align="flex-start">
|
||||
<Avatar size={22} radius="xl" color={author?.color || tagColor(label)}>
|
||||
@@ -213,47 +459,81 @@ export function CardChatPanel({ cardId, users, currentUserId, onMessagesChange,
|
||||
</Stack>
|
||||
)}
|
||||
</ScrollArea>
|
||||
<Group gap="xs" align="flex-end">
|
||||
<Textarea
|
||||
value={body}
|
||||
onChange={(e) => setBody(e.currentTarget.value)}
|
||||
onKeyDown={onKeyDown}
|
||||
placeholder="Escribe un mensaje. Arrastra archivos o usa el clip."
|
||||
autosize
|
||||
minRows={1}
|
||||
maxRows={6}
|
||||
style={{ flex: 1 }}
|
||||
disabled={sending}
|
||||
/>
|
||||
<FileButton onChange={(file) => file && handleFiles([file])} disabled={uploading}>
|
||||
{(props) => (
|
||||
<Tooltip label="Adjuntar archivo" withArrow>
|
||||
{typingNames.length > 0 && (
|
||||
<Text size="xs" c="dimmed" px={6}>
|
||||
{typingNames.length === 1
|
||||
? `${typingNames[0]} esta escribiendo...`
|
||||
: `${typingNames.slice(0, 2).join(", ")}${typingNames.length > 2 ? "..." : ""} estan escribiendo...`}
|
||||
</Text>
|
||||
)}
|
||||
<Combobox
|
||||
store={combobox}
|
||||
onOptionSubmit={(value) => insertMention(value)}
|
||||
position="top-start"
|
||||
withinPortal={false}
|
||||
>
|
||||
<Combobox.DropdownTarget>
|
||||
<Group gap="xs" align="flex-end">
|
||||
<Textarea
|
||||
ref={textareaRef}
|
||||
value={body}
|
||||
onChange={onChange}
|
||||
onKeyDown={onKeyDown}
|
||||
placeholder="Escribe un mensaje (Enter = enviar, @ para mencionar). Arrastra archivos o usa el clip."
|
||||
autosize
|
||||
minRows={1}
|
||||
maxRows={6}
|
||||
style={{ flex: 1 }}
|
||||
disabled={sending}
|
||||
/>
|
||||
<FileButton onChange={(file) => file && handleFiles([file])} disabled={uploading}>
|
||||
{(props) => (
|
||||
<Tooltip label="Adjuntar archivo" withArrow>
|
||||
<ActionIcon
|
||||
size="lg"
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
aria-label="Adjuntar"
|
||||
loading={uploading}
|
||||
{...props}
|
||||
>
|
||||
<IconPaperclip size={16} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
)}
|
||||
</FileButton>
|
||||
<Tooltip label="Enviar" withArrow>
|
||||
<ActionIcon
|
||||
size="lg"
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
aria-label="Adjuntar"
|
||||
loading={uploading}
|
||||
{...props}
|
||||
variant="filled"
|
||||
color="blue"
|
||||
onClick={send}
|
||||
disabled={!body.trim() || sending}
|
||||
aria-label="Enviar"
|
||||
>
|
||||
<IconPaperclip size={16} />
|
||||
<IconSend size={16} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
)}
|
||||
</FileButton>
|
||||
<Tooltip label="Enviar" withArrow>
|
||||
<ActionIcon
|
||||
size="lg"
|
||||
variant="filled"
|
||||
color="blue"
|
||||
onClick={send}
|
||||
disabled={!body.trim() || sending}
|
||||
aria-label="Enviar"
|
||||
>
|
||||
<IconSend size={16} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
</Group>
|
||||
</Combobox.DropdownTarget>
|
||||
<Combobox.Dropdown hidden={!mention || mentionCandidates.length === 0}>
|
||||
<Combobox.Options>
|
||||
{mentionCandidates.map((u) => (
|
||||
<Combobox.Option key={u.id} value={u.username}>
|
||||
<Group gap={6} wrap="nowrap">
|
||||
<Avatar size={18} radius="xl" color={u.color || tagColor(u.username)}>
|
||||
{(u.display_name || u.username).slice(0, 2).toUpperCase()}
|
||||
</Avatar>
|
||||
<Text size="sm" fw={600}>@{u.username}</Text>
|
||||
{u.display_name && u.display_name !== u.username && (
|
||||
<Text size="xs" c="dimmed">{u.display_name}</Text>
|
||||
)}
|
||||
</Group>
|
||||
</Combobox.Option>
|
||||
))}
|
||||
</Combobox.Options>
|
||||
</Combobox.Dropdown>
|
||||
</Combobox>
|
||||
{(dragOver || uploading) && (
|
||||
<Box
|
||||
style={{
|
||||
|
||||
@@ -15,6 +15,9 @@ interface Props {
|
||||
tagOptions: string[];
|
||||
onSubmit: (v: CardFormValues) => Promise<void> | void;
|
||||
onCancel: () => void;
|
||||
// When set, the chat panel auto-scrolls to this message id and pulses
|
||||
// it briefly. Used when opening a card from a notification click.
|
||||
highlightMessageId?: string;
|
||||
}
|
||||
|
||||
export function CardEditPanel({
|
||||
@@ -25,6 +28,7 @@ export function CardEditPanel({
|
||||
tagOptions,
|
||||
onSubmit,
|
||||
onCancel,
|
||||
highlightMessageId,
|
||||
}: Props) {
|
||||
const [messages, setMessages] = useState<CardMessage[]>([]);
|
||||
const [liveCard, setLiveCard] = useState(card);
|
||||
@@ -75,6 +79,7 @@ export function CardEditPanel({
|
||||
currentUserId={currentUserId}
|
||||
onMessagesChange={setMessages}
|
||||
onFileUploaded={bumpFiles}
|
||||
highlightMessageId={highlightMessageId}
|
||||
/>
|
||||
</Box>
|
||||
</Tabs.Panel>
|
||||
|
||||
@@ -25,12 +25,17 @@ export function LoginPage() {
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [registrationEnabled, setRegistrationEnabled] = useState(false);
|
||||
const [appVersion, setAppVersion] = useState<string>("");
|
||||
|
||||
useEffect(() => {
|
||||
api
|
||||
.getFlags()
|
||||
.then((f) => setRegistrationEnabled(!!f["registration-enabled"]))
|
||||
.catch(() => setRegistrationEnabled(false));
|
||||
api
|
||||
.getVersion()
|
||||
.then((v) => setAppVersion(v.version))
|
||||
.catch(() => setAppVersion(""));
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -62,6 +67,9 @@ export function LoginPage() {
|
||||
<Stack gap={4} align="center">
|
||||
<IconLayoutKanban size={36} />
|
||||
<Title order={3}>Kanban</Title>
|
||||
{appVersion && (
|
||||
<Text size="xs" c="dimmed" ff="monospace">v{appVersion}</Text>
|
||||
)}
|
||||
<Text size="sm" c="dimmed">
|
||||
{mode === "login" ? "Inicia sesion" : "Crea una cuenta"}
|
||||
</Text>
|
||||
|
||||
@@ -0,0 +1,192 @@
|
||||
import {
|
||||
ActionIcon,
|
||||
Alert,
|
||||
Box,
|
||||
Button,
|
||||
Code,
|
||||
CopyButton,
|
||||
Divider,
|
||||
Group,
|
||||
Loader,
|
||||
Modal,
|
||||
Stack,
|
||||
Table,
|
||||
Text,
|
||||
TextInput,
|
||||
Tooltip,
|
||||
} from "@mantine/core";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import { IconCopy, IconCheck, IconTrash } from "@tabler/icons-react";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import * as api from "../api";
|
||||
import type { MCPToken, MCPTokenCreated } from "../api";
|
||||
import { formatDateTimeShort } from "./format";
|
||||
|
||||
interface Props {
|
||||
opened: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function MCPTokensModal({ opened, onClose }: Props) {
|
||||
const [tokens, setTokens] = useState<MCPToken[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [newName, setNewName] = useState("");
|
||||
const [creating, setCreating] = useState(false);
|
||||
const [justCreated, setJustCreated] = useState<MCPTokenCreated | null>(null);
|
||||
|
||||
const reload = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
setTokens(await api.listMCPTokens());
|
||||
} catch (e) {
|
||||
notifications.show({ color: "red", message: (e as Error).message });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (opened) {
|
||||
reload();
|
||||
setJustCreated(null);
|
||||
setNewName("");
|
||||
}
|
||||
}, [opened, reload]);
|
||||
|
||||
const create = async () => {
|
||||
const name = newName.trim() || "default";
|
||||
setCreating(true);
|
||||
try {
|
||||
const t = await api.createMCPToken(name);
|
||||
setJustCreated(t);
|
||||
setNewName("");
|
||||
await reload();
|
||||
} catch (e) {
|
||||
notifications.show({ color: "red", message: (e as Error).message });
|
||||
} finally {
|
||||
setCreating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const revoke = async (id: string) => {
|
||||
if (!confirm("Revocar este token? Quien lo este usando dejara de tener acceso.")) return;
|
||||
try {
|
||||
await api.revokeMCPToken(id);
|
||||
await reload();
|
||||
} catch (e) {
|
||||
notifications.show({ color: "red", message: (e as Error).message });
|
||||
}
|
||||
};
|
||||
|
||||
const mcpURL = `${window.location.origin}/mcp`;
|
||||
const claudeCmd = justCreated
|
||||
? `claude mcp add kanban --transport http ${mcpURL} --header "Authorization: Bearer ${justCreated.token}"`
|
||||
: "";
|
||||
|
||||
return (
|
||||
<Modal opened={opened} onClose={onClose} title="MCP Tokens" size="lg">
|
||||
<Stack gap="md">
|
||||
<Text size="sm" c="dimmed">
|
||||
Cada token deja conectar un cliente Claude al kanban como tu usuario.
|
||||
El valor solo aparece UNA vez al crearlo. Si lo pierdes, generas otro y revocas el antiguo.
|
||||
</Text>
|
||||
|
||||
<Group align="end">
|
||||
<TextInput
|
||||
label="Nombre del token"
|
||||
placeholder="ej. portatil, sobremesa..."
|
||||
value={newName}
|
||||
onChange={(e) => setNewName(e.currentTarget.value)}
|
||||
style={{ flex: 1 }}
|
||||
disabled={creating}
|
||||
/>
|
||||
<Button onClick={create} loading={creating}>
|
||||
Generar
|
||||
</Button>
|
||||
</Group>
|
||||
|
||||
{justCreated && (
|
||||
<Alert color="yellow" title="Copia el token ahora — no se mostrara mas">
|
||||
<Stack gap="xs">
|
||||
<Group gap="xs" align="center">
|
||||
<Code style={{ flex: 1, wordBreak: "break-all" }}>{justCreated.token}</Code>
|
||||
<CopyButton value={justCreated.token}>
|
||||
{({ copied, copy }) => (
|
||||
<Tooltip label={copied ? "Copiado" : "Copiar token"}>
|
||||
<ActionIcon variant="subtle" onClick={copy}>
|
||||
{copied ? <IconCheck size={16} /> : <IconCopy size={16} />}
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
)}
|
||||
</CopyButton>
|
||||
</Group>
|
||||
<Divider />
|
||||
<Text size="xs" c="dimmed">
|
||||
Pega este comando en tu PC para registrar el MCP en Claude Code:
|
||||
</Text>
|
||||
<Group gap="xs" align="center">
|
||||
<Code block style={{ flex: 1 }}>{claudeCmd}</Code>
|
||||
<CopyButton value={claudeCmd}>
|
||||
{({ copied, copy }) => (
|
||||
<Tooltip label={copied ? "Copiado" : "Copiar comando"}>
|
||||
<ActionIcon variant="subtle" onClick={copy}>
|
||||
{copied ? <IconCheck size={16} /> : <IconCopy size={16} />}
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
)}
|
||||
</CopyButton>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Divider label="Tokens activos" labelPosition="left" />
|
||||
|
||||
{loading ? (
|
||||
<Group justify="center" p="md">
|
||||
<Loader size="sm" />
|
||||
</Group>
|
||||
) : tokens.length === 0 ? (
|
||||
<Text size="sm" c="dimmed" ta="center" py="md">
|
||||
Sin tokens. Genera uno arriba.
|
||||
</Text>
|
||||
) : (
|
||||
<Table withTableBorder withColumnBorders verticalSpacing="xs" highlightOnHover>
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th>Nombre</Table.Th>
|
||||
<Table.Th>Creado</Table.Th>
|
||||
<Table.Th>Ultimo uso</Table.Th>
|
||||
<Table.Th w={60} />
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
<Table.Tbody>
|
||||
{tokens.map((t) => (
|
||||
<Table.Tr key={t.id}>
|
||||
<Table.Td>{t.name}</Table.Td>
|
||||
<Table.Td>{formatDateTimeShort(t.created_at)}</Table.Td>
|
||||
<Table.Td>
|
||||
{t.last_used_at ? formatDateTimeShort(t.last_used_at) : <Text c="dimmed">nunca</Text>}
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Tooltip label="Revocar">
|
||||
<ActionIcon color="red" variant="subtle" onClick={() => revoke(t.id)}>
|
||||
<IconTrash size={14} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
))}
|
||||
</Table.Tbody>
|
||||
</Table>
|
||||
)}
|
||||
|
||||
<Box>
|
||||
<Text size="xs" c="dimmed">
|
||||
Endpoint MCP: <Code>{mcpURL}</Code>
|
||||
</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,441 @@
|
||||
import {
|
||||
ActionIcon,
|
||||
Alert,
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
Checkbox,
|
||||
Code,
|
||||
Divider,
|
||||
Group,
|
||||
JsonInput,
|
||||
Loader,
|
||||
Modal,
|
||||
ScrollArea,
|
||||
Select,
|
||||
Stack,
|
||||
Table,
|
||||
Tabs,
|
||||
Text,
|
||||
TextInput,
|
||||
Tooltip,
|
||||
} from "@mantine/core";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import { IconPlug, IconPlugConnected, IconRefresh, IconTestPipe, IconTrash } from "@tabler/icons-react";
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import * as api from "../api";
|
||||
import type { KanbanModule, ModuleLog } from "../types";
|
||||
import { formatDateTimeShort } from "./format";
|
||||
|
||||
interface Props {
|
||||
opened: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const KANBAN_EVENTS = [
|
||||
"card.created",
|
||||
"card.updated",
|
||||
"card.moved",
|
||||
"card.deleted",
|
||||
"message.created",
|
||||
"board.invalidated",
|
||||
];
|
||||
|
||||
const DEFAULT_JIRA_CONFIG = {
|
||||
base_url: "",
|
||||
email: "",
|
||||
api_token: "",
|
||||
project_key: "",
|
||||
status_map: {
|
||||
"Por hacer": "To Do",
|
||||
"Doing": "In Progress",
|
||||
"Done": "Done",
|
||||
},
|
||||
};
|
||||
|
||||
export function ModulesModal({ opened, onClose }: Props) {
|
||||
const [modules, setModules] = useState<KanbanModule[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
const [editing, setEditing] = useState<KanbanModule | null>(null);
|
||||
const [logs, setLogs] = useState<ModuleLog[]>([]);
|
||||
const [logsLoading, setLogsLoading] = useState(false);
|
||||
const [activeTab, setActiveTab] = useState<string | null>("form");
|
||||
|
||||
const reload = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const list = await api.listModules();
|
||||
setModules(list);
|
||||
} catch (e) {
|
||||
notifications.show({ color: "red", message: (e as Error).message });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (opened) reload();
|
||||
}, [opened, reload]);
|
||||
|
||||
const reloadLogs = useCallback(async (id: string) => {
|
||||
setLogsLoading(true);
|
||||
try {
|
||||
const out = await api.listModuleLogs(id);
|
||||
setLogs(out);
|
||||
} catch (e) {
|
||||
notifications.show({ color: "red", message: (e as Error).message });
|
||||
} finally {
|
||||
setLogsLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const select = (m: KanbanModule | null) => {
|
||||
setEditing(m ? { ...m, config: { ...m.config } } : null);
|
||||
setSelectedId(m?.id ?? null);
|
||||
setActiveTab("form");
|
||||
setLogs([]);
|
||||
if (m) reloadLogs(m.id);
|
||||
};
|
||||
|
||||
const startNew = () => {
|
||||
const blank: KanbanModule = {
|
||||
id: "",
|
||||
name: "Nuevo modulo",
|
||||
kind: "jira",
|
||||
enabled: false,
|
||||
event_filter: ["card.created", "card.updated", "card.moved", "message.created"],
|
||||
config: { ...DEFAULT_JIRA_CONFIG, status_map: { ...DEFAULT_JIRA_CONFIG.status_map } },
|
||||
created_at: "",
|
||||
updated_at: "",
|
||||
};
|
||||
setEditing(blank);
|
||||
setSelectedId(null);
|
||||
setActiveTab("form");
|
||||
setLogs([]);
|
||||
};
|
||||
|
||||
const save = async () => {
|
||||
if (!editing) return;
|
||||
try {
|
||||
const payload = {
|
||||
name: editing.name,
|
||||
kind: editing.kind,
|
||||
enabled: editing.enabled,
|
||||
event_filter: editing.event_filter,
|
||||
config: editing.config,
|
||||
};
|
||||
const saved = editing.id
|
||||
? await api.updateModule(editing.id, payload)
|
||||
: await api.createModule(payload);
|
||||
notifications.show({ color: "green", message: "Modulo guardado" });
|
||||
await reload();
|
||||
select(saved);
|
||||
} catch (e) {
|
||||
notifications.show({ color: "red", message: (e as Error).message });
|
||||
}
|
||||
};
|
||||
|
||||
const remove = async () => {
|
||||
if (!selectedId) return;
|
||||
if (!confirm("Borrar modulo?")) return;
|
||||
try {
|
||||
await api.deleteModule(selectedId);
|
||||
notifications.show({ color: "green", message: "Modulo borrado" });
|
||||
setEditing(null);
|
||||
setSelectedId(null);
|
||||
reload();
|
||||
} catch (e) {
|
||||
notifications.show({ color: "red", message: (e as Error).message });
|
||||
}
|
||||
};
|
||||
|
||||
const test = async () => {
|
||||
if (!editing) return;
|
||||
try {
|
||||
const result = editing.id
|
||||
? await api.testModule(editing.id)
|
||||
: await api.testModule("draft", {
|
||||
name: editing.name,
|
||||
kind: editing.kind,
|
||||
enabled: editing.enabled,
|
||||
event_filter: editing.event_filter,
|
||||
config: editing.config,
|
||||
});
|
||||
if (result.ok) {
|
||||
notifications.show({
|
||||
color: "green",
|
||||
title: `Test OK (${result.status})`,
|
||||
message: `Conexion verificada en ${result.duration_ms}ms`,
|
||||
});
|
||||
} else {
|
||||
notifications.show({
|
||||
color: "red",
|
||||
title: `Test fallo (${result.status})`,
|
||||
message: result.error || "sin detalle",
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
notifications.show({ color: "red", message: (e as Error).message });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
opened={opened}
|
||||
onClose={onClose}
|
||||
title={
|
||||
<Group gap={8}>
|
||||
<IconPlug size={18} />
|
||||
<Text fw={600}>Modulos / Integraciones</Text>
|
||||
</Group>
|
||||
}
|
||||
size="xl"
|
||||
centered
|
||||
>
|
||||
<Group align="flex-start" gap="md" wrap="nowrap">
|
||||
<Box style={{ width: 220, minWidth: 220 }}>
|
||||
<Group justify="space-between" mb={6}>
|
||||
<Text size="xs" c="dimmed">Configurados</Text>
|
||||
<Tooltip label="Refrescar" withArrow>
|
||||
<ActionIcon size="sm" variant="subtle" onClick={reload}>
|
||||
<IconRefresh size={14} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
<ScrollArea h={400} type="auto">
|
||||
<Stack gap={4}>
|
||||
{loading && <Loader size="xs" />}
|
||||
{modules.map((m) => (
|
||||
<Box
|
||||
key={m.id}
|
||||
p="xs"
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
border: "1px solid var(--mantine-color-gray-3)",
|
||||
borderRadius: 4,
|
||||
background:
|
||||
selectedId === m.id ? "var(--mantine-color-blue-light)" : undefined,
|
||||
}}
|
||||
onClick={() => select(m)}
|
||||
>
|
||||
<Group justify="space-between" gap={4} wrap="nowrap">
|
||||
<Text size="sm" fw={600} truncate>
|
||||
{m.name}
|
||||
</Text>
|
||||
<Badge size="xs" color={m.enabled ? "green" : "gray"}>
|
||||
{m.enabled ? "on" : "off"}
|
||||
</Badge>
|
||||
</Group>
|
||||
<Text size="xs" c="dimmed">{m.kind}</Text>
|
||||
</Box>
|
||||
))}
|
||||
<Button size="xs" variant="light" onClick={startNew} mt="xs">
|
||||
+ Nuevo
|
||||
</Button>
|
||||
</Stack>
|
||||
</ScrollArea>
|
||||
</Box>
|
||||
|
||||
<Divider orientation="vertical" />
|
||||
|
||||
<Box style={{ flex: 1, minWidth: 0 }}>
|
||||
{!editing ? (
|
||||
<Alert color="gray">Selecciona un modulo o pulsa "Nuevo".</Alert>
|
||||
) : (
|
||||
<Tabs value={activeTab} onChange={setActiveTab}>
|
||||
<Tabs.List>
|
||||
<Tabs.Tab value="form">Configuracion</Tabs.Tab>
|
||||
<Tabs.Tab value="logs">Logs</Tabs.Tab>
|
||||
</Tabs.List>
|
||||
|
||||
<Tabs.Panel value="form" pt="xs">
|
||||
<Stack gap="xs">
|
||||
<Group gap="xs">
|
||||
<TextInput
|
||||
label="Nombre"
|
||||
value={editing.name}
|
||||
onChange={(e) => setEditing({ ...editing, name: e.currentTarget.value })}
|
||||
style={{ flex: 1 }}
|
||||
/>
|
||||
<Select
|
||||
label="Kind"
|
||||
value={editing.kind}
|
||||
onChange={(v) => setEditing({ ...editing, kind: v || "jira" })}
|
||||
data={[{ value: "jira", label: "Jira" }]}
|
||||
w={140}
|
||||
/>
|
||||
</Group>
|
||||
<Checkbox
|
||||
label="Activo"
|
||||
checked={editing.enabled}
|
||||
onChange={(e) => setEditing({ ...editing, enabled: e.currentTarget.checked })}
|
||||
/>
|
||||
<Box>
|
||||
<Text size="xs" fw={600} mb={4}>Eventos</Text>
|
||||
<Group gap="xs">
|
||||
{KANBAN_EVENTS.map((ev) => (
|
||||
<Checkbox
|
||||
key={ev}
|
||||
label={<Code>{ev}</Code>}
|
||||
checked={editing.event_filter.includes(ev)}
|
||||
onChange={(e) => {
|
||||
const next = e.currentTarget.checked
|
||||
? [...editing.event_filter, ev]
|
||||
: editing.event_filter.filter((x) => x !== ev);
|
||||
setEditing({ ...editing, event_filter: next });
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</Group>
|
||||
</Box>
|
||||
<JiraConfigEditor editing={editing} setEditing={setEditing} />
|
||||
<Group gap="xs">
|
||||
<Button onClick={save} leftSection={<IconPlugConnected size={14} />}>
|
||||
Guardar
|
||||
</Button>
|
||||
<Button variant="default" onClick={test} leftSection={<IconTestPipe size={14} />}>
|
||||
Probar conexion
|
||||
</Button>
|
||||
{selectedId && (
|
||||
<Button
|
||||
color="red"
|
||||
variant="subtle"
|
||||
onClick={remove}
|
||||
leftSection={<IconTrash size={14} />}
|
||||
ml="auto"
|
||||
>
|
||||
Borrar
|
||||
</Button>
|
||||
)}
|
||||
</Group>
|
||||
</Stack>
|
||||
</Tabs.Panel>
|
||||
|
||||
<Tabs.Panel value="logs" pt="xs">
|
||||
<Group justify="space-between" mb={6}>
|
||||
<Text size="xs" c="dimmed">Ultimas 100 entradas</Text>
|
||||
<ActionIcon
|
||||
size="sm"
|
||||
variant="subtle"
|
||||
onClick={() => selectedId && reloadLogs(selectedId)}
|
||||
>
|
||||
<IconRefresh size={14} />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
{logsLoading ? (
|
||||
<Loader size="sm" />
|
||||
) : logs.length === 0 ? (
|
||||
<Text size="sm" c="dimmed">Sin entradas.</Text>
|
||||
) : (
|
||||
<ScrollArea h={400}>
|
||||
<Table withTableBorder striped highlightOnHover stickyHeader>
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th>Hora</Table.Th>
|
||||
<Table.Th>Evento</Table.Th>
|
||||
<Table.Th>HTTP</Table.Th>
|
||||
<Table.Th>ms</Table.Th>
|
||||
<Table.Th>Error</Table.Th>
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
<Table.Tbody>
|
||||
{logs.map((l) => (
|
||||
<Table.Tr key={l.id}>
|
||||
<Table.Td>{formatDateTimeShort(l.created_at)}</Table.Td>
|
||||
<Table.Td><Code>{l.event_type}</Code></Table.Td>
|
||||
<Table.Td>
|
||||
<Badge color={l.status >= 400 || l.error ? "red" : "green"} size="sm">
|
||||
{l.status || "-"}
|
||||
</Badge>
|
||||
</Table.Td>
|
||||
<Table.Td>{l.duration_ms}</Table.Td>
|
||||
<Table.Td>
|
||||
<Text size="xs" c="red" lineClamp={2}>{l.error}</Text>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
))}
|
||||
</Table.Tbody>
|
||||
</Table>
|
||||
</ScrollArea>
|
||||
)}
|
||||
</Tabs.Panel>
|
||||
</Tabs>
|
||||
)}
|
||||
</Box>
|
||||
</Group>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
interface JiraConfigEditorProps {
|
||||
editing: KanbanModule;
|
||||
setEditing: (m: KanbanModule) => void;
|
||||
}
|
||||
|
||||
function JiraConfigEditor({ editing, setEditing }: JiraConfigEditorProps) {
|
||||
const cfg = editing.config as Record<string, unknown>;
|
||||
const set = (key: string, value: unknown) =>
|
||||
setEditing({ ...editing, config: { ...cfg, [key]: value } });
|
||||
|
||||
const statusMapText = useMemo(() => {
|
||||
return JSON.stringify(cfg.status_map ?? {}, null, 2);
|
||||
}, [cfg.status_map]);
|
||||
|
||||
if (editing.kind !== "jira") {
|
||||
return (
|
||||
<Alert color="yellow" mt="xs">
|
||||
Editor especifico para esta kind aun no implementado.
|
||||
</Alert>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Stack gap="xs">
|
||||
<TextInput
|
||||
label="Base URL"
|
||||
placeholder="https://acme.atlassian.net"
|
||||
value={(cfg.base_url as string) || ""}
|
||||
onChange={(e) => set("base_url", e.currentTarget.value)}
|
||||
/>
|
||||
<Group gap="xs">
|
||||
<TextInput
|
||||
label="Email"
|
||||
value={(cfg.email as string) || ""}
|
||||
onChange={(e) => set("email", e.currentTarget.value)}
|
||||
style={{ flex: 1 }}
|
||||
/>
|
||||
<TextInput
|
||||
label="API token"
|
||||
placeholder={editing.id ? "*** (deja vacio para conservar)" : ""}
|
||||
value={(cfg.api_token as string) || ""}
|
||||
onChange={(e) => set("api_token", e.currentTarget.value)}
|
||||
style={{ flex: 1 }}
|
||||
/>
|
||||
</Group>
|
||||
<TextInput
|
||||
label="Project key"
|
||||
placeholder="KAN"
|
||||
value={(cfg.project_key as string) || ""}
|
||||
onChange={(e) => set("project_key", e.currentTarget.value)}
|
||||
/>
|
||||
<JsonInput
|
||||
label="Status map (columna kanban → transicion Jira)"
|
||||
description='{"Doing":"In Progress","Done":"Done"}'
|
||||
value={statusMapText}
|
||||
autosize
|
||||
minRows={3}
|
||||
validationError="JSON invalido"
|
||||
onChange={(v) => {
|
||||
try {
|
||||
const parsed = JSON.parse(v);
|
||||
set("status_map", parsed);
|
||||
} catch {
|
||||
// Hold invalid input in textarea via raw state; final save will
|
||||
// reuse last valid parse.
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,199 @@
|
||||
import {
|
||||
ActionIcon,
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
Group,
|
||||
Indicator,
|
||||
Loader,
|
||||
Popover,
|
||||
ScrollArea,
|
||||
Stack,
|
||||
Text,
|
||||
Tooltip,
|
||||
UnstyledButton,
|
||||
} from "@mantine/core";
|
||||
import { IconAt, IconBell, IconCheck, IconMessage, IconUserCheck } from "@tabler/icons-react";
|
||||
import { ReactElement, useCallback, useEffect, useState } from "react";
|
||||
import * as api from "../api";
|
||||
import type { Notification, NotificationKind } from "../types";
|
||||
import { formatDateTimeShort } from "./format";
|
||||
|
||||
interface Props {
|
||||
// External counter — App.tsx updates this via SSE events. When undefined
|
||||
// the bell polls /api/notifications/unread-count on mount.
|
||||
unreadCount?: number;
|
||||
notifications?: Notification[];
|
||||
// Called when the user clicks a notification → open the relevant card.
|
||||
// messageId points to the chat message that triggered the notification so
|
||||
// the parent can scroll to it.
|
||||
onOpenCard?: (cardId: string, messageId: string) => void;
|
||||
// Called whenever the bell mutates state (mark read / mark all) so the
|
||||
// parent can refresh its cached lists.
|
||||
onChanged?: () => void;
|
||||
}
|
||||
|
||||
const kindIcon: Record<NotificationKind, ReactElement> = {
|
||||
mention: <IconAt size={14} />,
|
||||
assigned_chat: <IconUserCheck size={14} />,
|
||||
reply: <IconMessage size={14} />,
|
||||
};
|
||||
|
||||
const kindLabel: Record<NotificationKind, string> = {
|
||||
mention: "Mencion",
|
||||
assigned_chat: "Asignado",
|
||||
reply: "Respuesta",
|
||||
};
|
||||
|
||||
const kindColor: Record<NotificationKind, string> = {
|
||||
mention: "grape",
|
||||
assigned_chat: "blue",
|
||||
reply: "gray",
|
||||
};
|
||||
|
||||
export function NotificationsBell({ unreadCount: extCount, notifications: extList, onOpenCard, onChanged }: Props) {
|
||||
const [opened, setOpened] = useState(false);
|
||||
const [items, setItems] = useState<Notification[]>(extList ?? []);
|
||||
const [count, setCount] = useState<number>(extCount ?? 0);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
// Keep local state in sync with parent-supplied values when present.
|
||||
useEffect(() => {
|
||||
if (extList) setItems(extList);
|
||||
}, [extList]);
|
||||
useEffect(() => {
|
||||
if (extCount !== undefined) setCount(extCount);
|
||||
}, [extCount]);
|
||||
|
||||
const refresh = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const [list, c] = await Promise.all([
|
||||
api.listNotifications(false),
|
||||
api.unreadNotificationCount(),
|
||||
]);
|
||||
setItems(list);
|
||||
setCount(c.count);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
// Initial fetch only when parent does not provide list/count.
|
||||
if (extList === undefined || extCount === undefined) {
|
||||
refresh();
|
||||
}
|
||||
}, [extList, extCount, refresh]);
|
||||
|
||||
const handleOpen = (isOpen: boolean) => {
|
||||
setOpened(isOpen);
|
||||
if (isOpen) refresh();
|
||||
};
|
||||
|
||||
const handleClick = async (n: Notification) => {
|
||||
if (!n.read_at) {
|
||||
try {
|
||||
await api.markNotificationRead(n.id);
|
||||
setItems((prev) => prev.map((x) => (x.id === n.id ? { ...x, read_at: new Date().toISOString() } : x)));
|
||||
setCount((c) => Math.max(0, c - 1));
|
||||
onChanged?.();
|
||||
} catch {
|
||||
// ignore — UI will recover on next refresh
|
||||
}
|
||||
}
|
||||
setOpened(false);
|
||||
onOpenCard?.(n.card_id, n.message_id);
|
||||
};
|
||||
|
||||
const handleMarkAll = async () => {
|
||||
try {
|
||||
await api.markAllNotificationsRead();
|
||||
setItems((prev) => prev.map((x) => (x.read_at ? x : { ...x, read_at: new Date().toISOString() })));
|
||||
setCount(0);
|
||||
onChanged?.();
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
};
|
||||
|
||||
const badge = (
|
||||
<ActionIcon variant="subtle" aria-label="Notificaciones">
|
||||
<IconBell size={16} />
|
||||
</ActionIcon>
|
||||
);
|
||||
|
||||
return (
|
||||
<Popover opened={opened} onChange={handleOpen} position="bottom-end" width={380} withArrow shadow="md">
|
||||
<Popover.Target>
|
||||
<Box onClick={() => handleOpen(!opened)} style={{ display: "inline-flex" }}>
|
||||
{count > 0 ? (
|
||||
<Indicator color="red" label={count > 99 ? "99+" : count} size={16} offset={4}>
|
||||
{badge}
|
||||
</Indicator>
|
||||
) : (
|
||||
badge
|
||||
)}
|
||||
</Box>
|
||||
</Popover.Target>
|
||||
<Popover.Dropdown p={0}>
|
||||
<Group justify="space-between" px="sm" py="xs">
|
||||
<Text fw={600} size="sm">Notificaciones</Text>
|
||||
<Tooltip label="Marcar todas como leidas" withArrow>
|
||||
<Button
|
||||
size="compact-xs"
|
||||
variant="subtle"
|
||||
leftSection={<IconCheck size={12} />}
|
||||
onClick={handleMarkAll}
|
||||
disabled={count === 0}
|
||||
>
|
||||
Todas leidas
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
<ScrollArea h={420} type="auto" offsetScrollbars>
|
||||
{loading && items.length === 0 ? (
|
||||
<Group justify="center" p="md"><Loader size="sm" /></Group>
|
||||
) : items.length === 0 ? (
|
||||
<Text size="sm" c="dimmed" ta="center" p="md">Sin notificaciones</Text>
|
||||
) : (
|
||||
<Stack gap={0}>
|
||||
{items.map((n) => {
|
||||
const unread = !n.read_at;
|
||||
return (
|
||||
<UnstyledButton
|
||||
key={n.id}
|
||||
onClick={() => handleClick(n)}
|
||||
p="sm"
|
||||
style={{
|
||||
borderTop: "1px solid var(--mantine-color-gray-2)",
|
||||
background: unread ? "var(--mantine-color-blue-light)" : undefined,
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
<Group gap={6} wrap="nowrap" align="flex-start">
|
||||
<Badge size="xs" variant="light" color={kindColor[n.kind]} leftSection={kindIcon[n.kind]}>
|
||||
{kindLabel[n.kind]}
|
||||
</Badge>
|
||||
<Box style={{ flex: 1, minWidth: 0 }}>
|
||||
<Group gap={6} wrap="nowrap" justify="space-between">
|
||||
<Text size="xs" fw={600} truncate>
|
||||
{n.actor_name || "Alguien"} · #{n.card_seq_num} {n.card_title}
|
||||
</Text>
|
||||
<Text size="xs" c="dimmed">{formatDateTimeShort(n.created_at)}</Text>
|
||||
</Group>
|
||||
<Text size="xs" c={unread ? undefined : "dimmed"} lineClamp={2} style={{ whiteSpace: "pre-wrap" }}>
|
||||
{n.snippet}
|
||||
</Text>
|
||||
</Box>
|
||||
</Group>
|
||||
</UnstyledButton>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
)}
|
||||
</ScrollArea>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import { useEffect, useRef } from "react";
|
||||
|
||||
export type EventStreamHandlers = Record<string, (payload: unknown) => void>;
|
||||
|
||||
// useEventStream connects to /api/events via EventSource and dispatches
|
||||
// named events to the matching handler. The handlers object is captured in
|
||||
// a ref so callers can supply fresh closures every render without tearing
|
||||
// the connection down. Reconnection is handled by the browser's built-in
|
||||
// EventSource backoff; the hook only opens one socket per mount.
|
||||
export function useEventStream(handlers: EventStreamHandlers, enabled = true) {
|
||||
const ref = useRef(handlers);
|
||||
ref.current = handlers;
|
||||
|
||||
useEffect(() => {
|
||||
if (!enabled) return;
|
||||
const es = new EventSource("/api/events", { withCredentials: true });
|
||||
const listeners: Record<string, (ev: MessageEvent) => void> = {};
|
||||
|
||||
// We attach a listener per event type known when this effect runs.
|
||||
// Types added later via handler ref updates are still handled because
|
||||
// the inner closure always reads ref.current.
|
||||
for (const type of Object.keys(ref.current)) {
|
||||
const fn = (ev: MessageEvent) => {
|
||||
const cb = ref.current[type];
|
||||
if (!cb) return;
|
||||
try {
|
||||
const payload = ev.data ? JSON.parse(ev.data) : null;
|
||||
cb(payload);
|
||||
} catch {
|
||||
// Malformed payload; ignore.
|
||||
}
|
||||
};
|
||||
es.addEventListener(type, fn);
|
||||
listeners[type] = fn;
|
||||
}
|
||||
|
||||
return () => {
|
||||
for (const [type, fn] of Object.entries(listeners)) {
|
||||
es.removeEventListener(type, fn);
|
||||
}
|
||||
es.close();
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [enabled]);
|
||||
}
|
||||
@@ -63,9 +63,41 @@ export interface User {
|
||||
username: string;
|
||||
display_name: string;
|
||||
color: string;
|
||||
is_admin?: boolean;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export type ModuleKind = "jira" | "webhook";
|
||||
|
||||
export interface KanbanModule {
|
||||
id: string;
|
||||
name: string;
|
||||
kind: ModuleKind | string;
|
||||
enabled: boolean;
|
||||
event_filter: string[];
|
||||
config: Record<string, unknown>;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface ModuleLog {
|
||||
id: string;
|
||||
module_id: string;
|
||||
event_type: string;
|
||||
card_id: string;
|
||||
status: number;
|
||||
duration_ms: number;
|
||||
error: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export interface ModuleTestResult {
|
||||
ok: boolean;
|
||||
status: number;
|
||||
duration_ms: number;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export interface MetricsRange {
|
||||
from: string;
|
||||
to: string;
|
||||
@@ -210,3 +242,20 @@ export interface CardMessage {
|
||||
body: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export type NotificationKind = "mention" | "assigned_chat" | "reply";
|
||||
|
||||
export interface Notification {
|
||||
id: string;
|
||||
user_id: string;
|
||||
card_id: string;
|
||||
message_id: string;
|
||||
kind: NotificationKind;
|
||||
actor_id: string;
|
||||
created_at: string;
|
||||
read_at: string | null;
|
||||
card_title: string;
|
||||
card_seq_num: number;
|
||||
actor_name: string;
|
||||
snippet: string;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user