MVP-1: helpdesk core with dashboard, Telegram channel, customer portal

Next.js 16 + Drizzle/SQLite (matching ~/project-claude conventions), SSE-based
realtime updates, admin dashboard with status columns, ticket thread view,
Telegram long-polling integration (inbound + outbound), token-based customer
portal, Docker Compose packaging.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QcXH24ky6zjk2UyK5oZUPH

src/app/(portal)/layout.tsx

@@ -0,0 +1,17 @@
+import { Ticket } from "lucide-react";
+
+export default function PortalLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex min-h-screen flex-col bg-bg">
+      <header className="border-b border-border bg-surface">
+        <div className="mx-auto flex max-w-2xl items-center gap-2 px-6 py-3 font-bold tracking-tight">
+          <div className="flex h-7 w-7 items-center justify-center rounded-md bg-accent text-white">
+            <Ticket size={15} strokeWidth={2.5} />
+          </div>
+          Поддержка
+        </div>
+      </header>
+      <main className="mx-auto w-full max-w-2xl flex-1 px-6 py-6">{children}</main>
+    </div>
+  );
+}

src/app/(portal)/t/[token]/[ticketId]/page.tsx

@@ -0,0 +1,25 @@
+import { notFound } from "next/navigation";
+import { getCustomerByPortalToken, getTicketForCustomer } from "@/lib/tickets/service";
+import { PortalThread } from "./portal-thread";
+
+export default async function PortalTicketPage({
+  params,
+}: {
+  params: Promise<{ token: string; ticketId: string }>;
+}) {
+  const { token, ticketId } = await params;
+  const customer = await getCustomerByPortalToken(token);
+  if (!customer) notFound();
+
+  const result = await getTicketForCustomer(customer.id, ticketId);
+  if (!result) notFound();
+
+  return (
+    <PortalThread
+      token={token}
+      ticket={result.ticket}
+      initialMessages={result.messages}
+      customerName={customer.displayName}
+    />
+  );
+}

src/app/(portal)/t/[token]/[ticketId]/portal-thread.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import Link from "next/link";
+import { AnimatePresence, motion } from "framer-motion";
+import { ArrowLeft, Send } from "lucide-react";
+import { useTicketEvents } from "@/lib/events/use-ticket-events";
+import { formatRelativeTime } from "@/lib/format";
+import type { TicketDTO, MessageDTO } from "@/lib/tickets/types";
+
+export function PortalThread({
+  token,
+  ticket,
+  initialMessages,
+  customerName,
+}: {
+  token: string;
+  ticket: TicketDTO;
+  initialMessages: MessageDTO[];
+  customerName: string;
+}) {
+  const [messages, setMessages] = useState(initialMessages);
+  const [draft, setDraft] = useState("");
+  const [sending, setSending] = useState(false);
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  useTicketEvents(`/api/portal/events?token=${encodeURIComponent(token)}`, (event) => {
+    if (event.type === "message.created" && event.ticketId === ticket.id) {
+      setMessages((prev) => (prev.some((m) => m.id === event.message.id) ? prev : [...prev, event.message]));
+    }
+  });
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages.length]);
+
+  async function sendReply() {
+    if (!draft.trim()) return;
+    setSending(true);
+    const res = await fetch(`/api/portal/tickets/${ticket.id}/messages`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ token, body: draft }),
+    });
+    setSending(false);
+    if (res.ok) setDraft("");
+  }
+
+  return (
+    <div className="flex h-[calc(100vh-8rem)] flex-col">
+      <Link href={`/t/${token}`} className="mb-3 flex items-center gap-1 text-xs text-text-muted hover:text-text">
+        <ArrowLeft size={13} />
+        Все обращения
+      </Link>
+      <h1 className="mb-4 text-lg font-bold">{ticket.subject}</h1>
+
+      <div className="card flex-1 overflow-y-auto p-4">
+        <AnimatePresence initial={false}>
+          {messages.map((message) => (
+            <MessageBubble key={message.id} message={message} isMine={message.authorType === "customer"} />
+          ))}
+        </AnimatePresence>
+        <div ref={bottomRef} />
+      </div>
+
+      <div className="mt-3 flex gap-2">
+        <textarea
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && !e.shiftKey) {
+              e.preventDefault();
+              sendReply();
+            }
+          }}
+          rows={2}
+          placeholder={`Ответить как ${customerName}…`}
+          className="flex-1 resize-none rounded-md border border-border bg-surface px-3 py-2 text-sm outline-none focus:border-accent"
+        />
+        <button onClick={sendReply} disabled={sending || !draft.trim()} className="btn btn-primary self-end">
+          <Send size={15} />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function MessageBubble({ message, isMine }: { message: MessageDTO; isMine: boolean }) {
+  if (message.authorType === "system") {
+    return <p className="my-2 text-center text-xs text-text-faint">{message.body}</p>;
+  }
+
+  return (
+    <motion.div
+      layout
+      initial={{ opacity: 0, y: 8 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.18 }}
+      className={`mb-3 flex ${isMine ? "justify-end" : "justify-start"}`}
+    >
+      <div className={`max-w-[75%] rounded-lg px-3 py-2 text-sm ${isMine ? "bg-accent text-white" : "bg-surface-hover"}`}>
+        <p className="mb-1 whitespace-pre-wrap">{message.body}</p>
+        <p className={`text-[11px] ${isMine ? "text-white/70" : "text-text-faint"}`}>
+          {message.authorName} · {formatRelativeTime(message.createdAt)}
+        </p>
+      </div>
+    </motion.div>
+  );
+}

src/app/(portal)/t/[token]/page.tsx

@@ -0,0 +1,44 @@
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import { getCustomerByPortalToken, listTicketsForCustomer } from "@/lib/tickets/service";
+import { formatRelativeTime } from "@/lib/format";
+
+const STATUS_LABEL: Record<string, string> = {
+  new: "Новая",
+  open: "Открыта",
+  pending: "В ожидании",
+  closed: "Закрыта",
+};
+
+export default async function PortalTicketListPage({
+  params,
+}: {
+  params: Promise<{ token: string }>;
+}) {
+  const { token } = await params;
+  const customer = await getCustomerByPortalToken(token);
+  if (!customer) notFound();
+
+  const tickets = await listTicketsForCustomer(customer.id);
+
+  return (
+    <div>
+      <h1 className="mb-1 text-xl font-bold tracking-tight">Здравствуйте, {customer.displayName}</h1>
+      <p className="mb-6 text-sm text-text-muted">Ваши обращения в поддержку.</p>
+
+      {tickets.length === 0 && <p className="text-sm text-text-muted">Заявок пока нет.</p>}
+
+      <div className="flex flex-col gap-2">
+        {tickets.map((ticket) => (
+          <Link key={ticket.id} href={`/t/${token}/${ticket.id}`} className="card block p-4 hover:shadow-md">
+            <div className="mb-1 flex items-center justify-between gap-3">
+              <p className="truncate text-sm font-medium">{ticket.subject}</p>
+              <span className={`badge badge-${ticket.status}`}>{STATUS_LABEL[ticket.status]}</span>
+            </div>
+            <p className="text-xs text-text-faint">{formatRelativeTime(ticket.lastMessageAt)}</p>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}