Deferred backlog: attachments, canned responses, tags, search, notifications, password change

Attachments: file storage on the same data volume, serving route with dual auth (session or portal/widget token, internal-note attachments never token-servable), inbound ingestion from email (mailparser) and Telegram (photo/document handlers), outbound delivery via SMTP attachments and Telegram sendDocument/sendPhoto, upload UI (paperclip + pending-file chip) on all three reply surfaces. Extracted lib/tickets/delivery.ts so the text-only and attachment-upload admin routes share one channel-delivery code path instead of duplicating it. Canned responses: CRUD + a popover picker in the reply box that inserts a saved template into the draft. Tags: fixed 6-color palette reusing existing soft-badge tokens, a picker on the ticket page, colored chips + a filter row on the dashboard. Search: LIKE-based (not FTS5 — simpler and sufficient at this volume) across ticket subject, customer name, and message bodies; a debounced search box on the dashboard. Desktop notifications: permission toggle + a background subscriber that fires for new tickets and customer messages while the tab is hidden, clicking one navigates to the ticket. Password change: new account settings page, verifies the current password before updating. Nav: gear-menu settings list now includes Шаблоны ответов/Теги/Аккаунт. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QcXH24ky6zjk2UyK5oZUPH
2026-07-26 17:32:12 +00:00
1 parent 7947633709
commit 89b9c5eaac
@@ -1,14 +1,15 @@
 "use client";

-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import Link from "next/link";
 import { AnimatePresence, motion } from "framer-motion";
-import { Send, Globe, UserRound, Mail, MessageSquare, Plus, Inbox } from "lucide-react";
+import { Send, Globe, UserRound, Mail, MessageSquare, Plus, Inbox, Search, X } from "lucide-react";
 import { useTicketEvents } from "@/lib/events/use-ticket-events";
 import { formatRelativeTime } from "@/lib/format";
 import type { TicketDTO, TicketStatus } from "@/lib/tickets/types";
 import { NewTicketModal } from "./new-ticket-modal";
 import { Avatar } from "@/components/avatar";
+import { TAG_COLOR_CLASSES } from "@/lib/tags/colors";

 const COLUMNS: { status: TicketStatus; label: string; empty: string }[] = [
  { status: "new", label: "Новые", empty: "Новых заявок нет" },
@@ -44,6 +45,10 @@ const PRIORITY_COLOR: Record<TicketDTO["priority"], string> = {
 export function TicketBoard({ initialTickets }: { initialTickets: TicketDTO[] }) {
  const [tickets, setTickets] = useState<TicketDTO[]>(initialTickets);
  const [modalOpen, setModalOpen] = useState(false);
+  const [activeTagId, setActiveTagId] = useState<string | null>(null);
+  const [query, setQuery] = useState("");
+  const [searchResults, setSearchResults] = useState<TicketDTO[] | null>(null);
+  const [searching, setSearching] = useState(false);

  useTicketEvents("/api/events", (event) => {
    if (event.type === "ticket.created" || event.type === "ticket.updated") {
@@ -54,20 +59,50 @@ export function TicketBoard({ initialTickets }: { initialTickets: TicketDTO[] })
    }
  });

+  // Search hits the server (message bodies aren't loaded client-side),
+  // debounced. An empty query needs no fetch — baseTickets below just falls
+  // back to the live SSE-backed list, so there's nothing to reset here.
+  useEffect(() => {
+    if (!query.trim()) return;
+    const handle = setTimeout(() => {
+      setSearching(true);
+      fetch(`/api/tickets?q=${encodeURIComponent(query)}`)
+        .then((res) => res.json())
+        .then((data) => setSearchResults(data.tickets ?? []))
+        .finally(() => setSearching(false));
+    }, 300);
+    return () => clearTimeout(handle);
+  }, [query]);
+
+  const baseTickets = query.trim() ? (searchResults ?? tickets) : tickets;
+
+  const availableTags = useMemo(() => {
+    const map = new Map<string, TicketDTO["tags"][number]>();
+    for (const ticket of baseTickets) {
+      for (const tag of ticket.tags) map.set(tag.id, tag);
+    }
+    return [...map.values()].sort((a, b) => a.name.localeCompare(b.name));
+  }, [baseTickets]);
+
+  const filteredTickets = useMemo(() => {
+    if (!activeTagId) return baseTickets;
+    return baseTickets.filter((t) => t.tags.some((tag) => tag.id === activeTagId));
+  }, [baseTickets, activeTagId]);
+
  const byStatus = useMemo(() => {
    const grouped: Record<TicketStatus, TicketDTO[]> = { new: [], open: [], pending: [], closed: [] };
-    for (const ticket of tickets) {
+    for (const ticket of filteredTickets) {
      grouped[ticket.status].push(ticket);
    }
    for (const list of Object.values(grouped)) {
      list.sort((a, b) => b.lastMessageAt - a.lastMessageAt);
    }
    return grouped;
-  }, [tickets]);
+  }, [filteredTickets]);

  return (
    <div>
-      <div className="mb-5 flex items-center justify-between">
+      <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
        <h1 className="font-display text-xl font-bold tracking-tight">Заявки</h1>
        <button className="btn btn-primary" onClick={() => setModalOpen(true)}>
          <Plus size={16} />
@@ -75,6 +110,46 @@ export function TicketBoard({ initialTickets }: { initialTickets: TicketDTO[] })
        </button>
      </div>

+      <div className="relative mb-4 max-w-sm">
+        <Search size={14} className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-text-faint" />
+        <input
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder="Поиск по заявкам…"
+          className="w-full rounded-md border border-border bg-surface py-2 pl-9 pr-8 text-sm outline-none focus:border-accent"
+        />
+        {query && (
+          <button
+            onClick={() => setQuery("")}
+            className="absolute right-2.5 top-1/2 -translate-y-1/2 text-text-faint hover:text-text"
+          >
+            <X size={14} />
+          </button>
+        )}
+      </div>
+
+      {query.trim() && searchResults && (
+        <p className="mb-4 text-xs text-text-faint">
+          {searching ? "Ищем…" : `Найдено: ${searchResults.length}`}
+        </p>
+      )}
+
+      {availableTags.length > 0 && (
+        <div className="mb-4 flex flex-wrap gap-1.5">
+          {availableTags.map((tag) => (
+            <button
+              key={tag.id}
+              onClick={() => setActiveTagId((prev) => (prev === tag.id ? null : tag.id))}
+              className={`rounded-full px-2.5 py-1 text-xs font-medium transition-opacity ${TAG_COLOR_CLASSES[tag.color]} ${
+                activeTagId && activeTagId !== tag.id ? "opacity-40" : ""
+              }`}
+            >
+              {tag.name}
+            </button>
+          ))}
+        </div>
+      )}
+
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
        {COLUMNS.map((col) => (
          <div key={col.status} className="min-w-0">
@@ -122,7 +197,16 @@ function TicketCard({ ticket }: { ticket: TicketDTO }) {
        className="card block p-3 shadow-sm transition-shadow hover:shadow-md"
        style={{ borderLeft: `3px solid ${PRIORITY_COLOR[ticket.priority]}` }}
      >
-        <p className="mb-2 line-clamp-2 text-sm font-medium">{ticket.subject}</p>
+        <p className="mb-1 line-clamp-2 text-sm font-medium">{ticket.subject}</p>
+        {ticket.tags.length > 0 && (
+          <div className="mb-2 flex flex-wrap gap-1">
+            {ticket.tags.map((tag) => (
+              <span key={tag.id} className={`rounded-full px-1.5 py-0.5 text-[10px] font-medium ${TAG_COLOR_CLASSES[tag.color]}`}>
+                {tag.name}
+              </span>
+            ))}
+          </div>
+        )}
        <div className="flex items-center justify-between">
          <span className="flex min-w-0 items-center gap-1.5">
            <Avatar name={ticket.customerName} size={20} />
@@ -0,0 +1,38 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useTicketEvents } from "@/lib/events/use-ticket-events";
+
+/**
+ * No visible UI — just a permanently-mounted subscriber (in the admin
+ * layout, so it's alive regardless of which admin page is open) that fires
+ * a desktop notification for events that mean "a customer needs a
+ * response," while the tab is in the background. Agent-authored messages
+ * are deliberately skipped — that's the agent's own action, not a signal.
+ */
+export function DesktopNotifications() {
+  const router = useRouter();
+
+  useTicketEvents("/api/events", (event) => {
+    if (typeof window === "undefined" || !("Notification" in window)) return;
+    if (Notification.permission !== "granted" || !document.hidden) return;
+
+    if (event.type === "ticket.created") {
+      const notification = new Notification("Новая заявка", { body: event.ticket.subject });
+      notification.onclick = () => {
+        window.focus();
+        router.push(`/tickets/${event.ticket.id}`);
+      };
+    } else if (event.type === "message.created" && event.message.authorType === "customer") {
+      const notification = new Notification(`Сообщение от ${event.message.authorName}`, {
+        body: event.message.body.slice(0, 120),
+      });
+      notification.onclick = () => {
+        window.focus();
+        router.push(`/tickets/${event.ticketId}`);
+      };
+    }
+  });
+
+  return null;
+}
@@ -5,6 +5,8 @@ import { LogoutButton } from "./logout-button";
 import { NavLinks } from "./nav-links";
 import { ThemeToggle } from "./theme-toggle";
 import { SettingsMenu } from "./settings-menu";
+import { NotificationToggle } from "./notification-toggle";
+import { DesktopNotifications } from "./desktop-notifications";

 export default async function AdminLayout({ children }: { children: React.ReactNode }) {
  const session = await getCurrentSession();
@@ -24,6 +26,7 @@ export default async function AdminLayout({ children }: { children: React.ReactN
          </div>
          <div className="ml-auto flex items-center gap-2 sm:gap-3">
            <span className="hidden text-sm text-text-muted sm:inline">{session.user.name}</span>
+            <NotificationToggle />
            <SettingsMenu />
            <ThemeToggle />
            <LogoutButton />
@@ -34,6 +37,7 @@ export default async function AdminLayout({ children }: { children: React.ReactN
        </div>
      </header>
      <main className="mx-auto w-full max-w-7xl flex-1 px-4 py-6 sm:px-6">{children}</main>
+      <DesktopNotifications />
    </div>
  );
 }
@@ -0,0 +1,30 @@
+"use client";
+
+import { useState } from "react";
+import { Bell, BellOff } from "lucide-react";
+
+function initialPermission(): NotificationPermission | "unsupported" {
+  if (typeof window === "undefined" || !("Notification" in window)) return "unsupported";
+  return Notification.permission;
+}
+
+export function NotificationToggle() {
+  const [permission, setPermission] = useState(initialPermission);
+
+  if (permission === "unsupported") return null;
+
+  async function requestPermission() {
+    if (permission === "granted") return; // no API to revoke it programmatically — only the browser's own site settings can
+    setPermission(await Notification.requestPermission());
+  }
+
+  return (
+    <button
+      onClick={requestPermission}
+      className="btn btn-ghost"
+      title={permission === "granted" ? "Уведомления включены" : "Включить уведомления о новых заявках"}
+    >
+      {permission === "granted" ? <Bell size={15} /> : <BellOff size={15} />}
+    </button>
+  );
+}
@@ -3,12 +3,15 @@
 import { useEffect, useRef, useState } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { Settings, Send, Mail, Code2 } from "lucide-react";
+import { Settings, Send, Mail, Code2, MessageSquareText, Tags, UserCog } from "lucide-react";

 const items = [
  { href: "/settings/telegram", label: "Telegram", icon: Send },
  { href: "/settings/email", label: "Почта", icon: Mail },
  { href: "/settings/widget", label: "Виджет", icon: Code2 },
+  { href: "/settings/canned", label: "Шаблоны ответов", icon: MessageSquareText },
+  { href: "/settings/tags", label: "Теги", icon: Tags },
+  { href: "/settings/account", label: "Аккаунт", icon: UserCog },
 ];

 export function SettingsMenu() {
@@ -39,7 +42,7 @@ export function SettingsMenu() {
        <Settings size={15} />
      </button>
      {open && (
-        <div className="card absolute right-0 top-full z-20 mt-2 w-44 overflow-hidden p-1">
+        <div className="card absolute right-0 top-full z-20 mt-2 w-52 overflow-hidden p-1">
          {items.map(({ href, label, icon: Icon }) => {
            const active = pathname.startsWith(href);
            return (
@@ -0,0 +1,90 @@
+"use client";
+
+import { useState } from "react";
+import { KeyRound } from "lucide-react";
+
+export function ChangePasswordForm() {
+  const [currentPassword, setCurrentPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setSuccess(false);
+
+    if (newPassword !== confirmPassword) {
+      setError("Пароли не совпадают");
+      return;
+    }
+
+    setLoading(true);
+    const res = await fetch("/api/auth/change-password", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ currentPassword, newPassword }),
+    });
+    setLoading(false);
+
+    if (!res.ok) {
+      const data = await res.json().catch(() => null);
+      setError(data?.error ?? "Не удалось сменить пароль");
+      return;
+    }
+
+    setSuccess(true);
+    setCurrentPassword("");
+    setNewPassword("");
+    setConfirmPassword("");
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="card p-4">
+      <label className="mb-3 block text-sm">
+        <span className="mb-1 block font-medium text-text-muted">Текущий пароль</span>
+        <input
+          required
+          type="password"
+          value={currentPassword}
+          onChange={(e) => setCurrentPassword(e.target.value)}
+          className="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm outline-none focus:border-accent"
+        />
+      </label>
+      <label className="mb-3 block text-sm">
+        <span className="mb-1 block font-medium text-text-muted">Новый пароль</span>
+        <input
+          required
+          type="password"
+          minLength={8}
+          value={newPassword}
+          onChange={(e) => setNewPassword(e.target.value)}
+          className="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm outline-none focus:border-accent"
+        />
+      </label>
+      <label className="mb-4 block text-sm">
+        <span className="mb-1 block font-medium text-text-muted">Повторите новый пароль</span>
+        <input
+          required
+          type="password"
+          minLength={8}
+          value={confirmPassword}
+          onChange={(e) => setConfirmPassword(e.target.value)}
+          className="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm outline-none focus:border-accent"
+        />
+      </label>
+
+      {error && <p className="mb-3 rounded-md bg-danger-soft px-3 py-2 text-sm text-danger-soft-text">{error}</p>}
+      {success && (
+        <p className="mb-3 rounded-md bg-success-soft px-3 py-2 text-sm text-success-soft-text">Пароль изменён</p>
+      )}
+
+      <button type="submit" disabled={loading} className="btn btn-primary w-full justify-center">
+        <KeyRound size={15} />
+        Сменить пароль
+      </button>
+    </form>
+  );
+}
@@ -0,0 +1,14 @@
+import { getCurrentSession } from "@/lib/auth/session";
+import { ChangePasswordForm } from "./change-password-form";
+
+export default async function AccountSettingsPage() {
+  const session = await getCurrentSession();
+
+  return (
+    <div className="max-w-sm">
+      <h1 className="mb-1 font-display text-xl font-bold tracking-tight">Аккаунт</h1>
+      <p className="mb-6 text-sm text-text-muted">{session?.user.email}</p>
+      <ChangePasswordForm />
+    </div>
+  );
+}
@@ -0,0 +1,161 @@
+"use client";
+
+import { useState } from "react";
+import { Plus, Pencil, Trash2, X, Check } from "lucide-react";
+
+interface CannedResponse {
+  id: string;
+  title: string;
+  body: string;
+}
+
+export function CannedResponsesManager({ initialResponses }: { initialResponses: CannedResponse[] }) {
+  const [responses, setResponses] = useState(initialResponses);
+  const [title, setTitle] = useState("");
+  const [body, setBody] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [editingId, setEditingId] = useState<string | null>(null);
+
+  async function handleCreate(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+
+    const res = await fetch("/api/canned-responses", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ title, body }),
+    });
+
+    setLoading(false);
+    if (!res.ok) {
+      const data = await res.json().catch(() => null);
+      setError(data?.error ?? "Не удалось создать шаблон");
+      return;
+    }
+
+    const { response } = await res.json();
+    setResponses((prev) => [...prev, response].sort((a, b) => a.title.localeCompare(b.title)));
+    setTitle("");
+    setBody("");
+  }
+
+  async function handleDelete(id: string) {
+    await fetch(`/api/canned-responses/${id}`, { method: "DELETE" });
+    setResponses((prev) => prev.filter((r) => r.id !== id));
+  }
+
+  async function handleUpdate(id: string, newTitle: string, newBody: string) {
+    const res = await fetch(`/api/canned-responses/${id}`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ title: newTitle, body: newBody }),
+    });
+    if (res.ok) {
+      const { response } = await res.json();
+      setResponses((prev) => prev.map((r) => (r.id === id ? response : r)));
+      setEditingId(null);
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <form onSubmit={handleCreate} className="card flex flex-col gap-3 p-4">
+        <label className="text-sm">
+          <span className="mb-1 block font-medium text-text-muted">Название</span>
+          <input
+            required
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            placeholder="Например: Просим больше информации"
+            className="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm outline-none focus:border-accent"
+          />
+        </label>
+        <label className="text-sm">
+          <span className="mb-1 block font-medium text-text-muted">Текст</span>
+          <textarea
+            required
+            rows={3}
+            value={body}
+            onChange={(e) => setBody(e.target.value)}
+            className="w-full resize-none rounded-md border border-border bg-surface px-3 py-2 text-sm outline-none focus:border-accent"
+          />
+        </label>
+        <button type="submit" disabled={loading} className="btn btn-primary self-start">
+          <Plus size={15} />
+          Добавить
+        </button>
+      </form>
+
+      {error && <p className="rounded-md bg-danger-soft px-3 py-2 text-sm text-danger-soft-text">{error}</p>}
+
+      {responses.length === 0 && <p className="text-sm text-text-muted">Шаблонов пока нет.</p>}
+
+      <div className="flex flex-col gap-3">
+        {responses.map((response) =>
+          editingId === response.id ? (
+            <EditForm
+              key={response.id}
+              response={response}
+              onCancel={() => setEditingId(null)}
+              onSave={(t, b) => handleUpdate(response.id, t, b)}
+            />
+          ) : (
+            <div key={response.id} className="card p-4">
+              <div className="mb-1 flex items-center justify-between gap-2">
+                <p className="text-sm font-medium">{response.title}</p>
+                <div className="flex shrink-0 gap-1">
+                  <button onClick={() => setEditingId(response.id)} className="btn btn-ghost px-2 py-1">
+                    <Pencil size={13} />
+                  </button>
+                  <button onClick={() => handleDelete(response.id)} className="btn btn-ghost px-2 py-1">
+                    <Trash2 size={13} />
+                  </button>
+                </div>
+              </div>
+              <p className="whitespace-pre-wrap text-sm text-text-muted">{response.body}</p>
+            </div>
+          ),
+        )}
+      </div>
+    </div>
+  );
+}
+
+function EditForm({
+  response,
+  onCancel,
+  onSave,
+}: {
+  response: CannedResponse;
+  onCancel: () => void;
+  onSave: (title: string, body: string) => void;
+}) {
+  const [title, setTitle] = useState(response.title);
+  const [body, setBody] = useState(response.body);
+
+  return (
+    <div className="card p-4">
+      <input
+        value={title}
+        onChange={(e) => setTitle(e.target.value)}
+        className="mb-2 w-full rounded-md border border-border bg-surface px-3 py-2 text-sm outline-none focus:border-accent"
+      />
+      <textarea
+        rows={3}
+        value={body}
+        onChange={(e) => setBody(e.target.value)}
+        className="mb-2 w-full resize-none rounded-md border border-border bg-surface px-3 py-2 text-sm outline-none focus:border-accent"
+      />
+      <div className="flex gap-2">
+        <button onClick={() => onSave(title, body)} className="btn btn-primary px-2 py-1">
+          <Check size={13} />
+        </button>
+        <button onClick={onCancel} className="btn btn-ghost px-2 py-1">
+          <X size={13} />
+        </button>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,15 @@
+import { listCannedResponses } from "@/lib/tickets/service";
+import { CannedResponsesManager } from "./canned-responses-manager";
+
+export default async function CannedResponsesPage() {
+  const responses = await listCannedResponses();
+  return (
+    <div className="max-w-2xl">
+      <h1 className="mb-1 font-display text-xl font-bold tracking-tight">Шаблоны ответов</h1>
+      <p className="mb-6 text-sm text-text-muted">
+        Готовые тексты, которые можно вставить в ответ клиенту одним кликом.
+      </p>
+      <CannedResponsesManager initialResponses={responses} />
+    </div>
+  );
+}
@@ -0,0 +1,13 @@
+import { listTags } from "@/lib/tickets/service";
+import { TagsManager } from "./tags-manager";
+
+export default async function TagsSettingsPage() {
+  const tags = await listTags();
+  return (
+    <div className="max-w-lg">
+      <h1 className="mb-1 font-display text-xl font-bold tracking-tight">Теги</h1>
+      <p className="mb-6 text-sm text-text-muted">Метки для категоризации заявок.</p>
+      <TagsManager initialTags={tags} />
+    </div>
+  );
+}
@@ -0,0 +1,95 @@
+"use client";
+
+import { useState } from "react";
+import { Plus, Trash2 } from "lucide-react";
+import { TAG_COLOR_CLASSES, TAG_COLORS, TAG_COLOR_LABELS } from "@/lib/tags/colors";
+import type { TagDTO, TagColor } from "@/lib/tickets/types";
+
+export function TagsManager({ initialTags }: { initialTags: TagDTO[] }) {
+  const [tags, setTags] = useState(initialTags);
+  const [name, setName] = useState("");
+  const [color, setColor] = useState<TagColor>("accent");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleCreate(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+
+    const res = await fetch("/api/tags", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ name, color }),
+    });
+
+    setLoading(false);
+    if (!res.ok) {
+      const data = await res.json().catch(() => null);
+      setError(data?.error ?? "Не удалось создать тег");
+      return;
+    }
+
+    const { tag } = await res.json();
+    setTags((prev) => [...prev, tag]);
+    setName("");
+  }
+
+  async function handleDelete(id: string) {
+    await fetch(`/api/tags/${id}`, { method: "DELETE" });
+    setTags((prev) => prev.filter((t) => t.id !== id));
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <form onSubmit={handleCreate} className="card flex flex-col gap-3 p-4 sm:flex-row sm:items-end">
+        <label className="flex-1 text-sm">
+          <span className="mb-1 block font-medium text-text-muted">Название</span>
+          <input
+            required
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder="Срочно"
+            className="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm outline-none focus:border-accent"
+          />
+        </label>
+        <label className="text-sm">
+          <span className="mb-1 block font-medium text-text-muted">Цвет</span>
+          <select
+            value={color}
+            onChange={(e) => setColor(e.target.value as TagColor)}
+            className="rounded-md border border-border bg-surface px-3 py-2 text-sm outline-none focus:border-accent"
+          >
+            {TAG_COLORS.map((c) => (
+              <option key={c} value={c}>
+                {TAG_COLOR_LABELS[c]}
+              </option>
+            ))}
+          </select>
+        </label>
+        <button type="submit" disabled={loading} className="btn btn-primary shrink-0">
+          <Plus size={15} />
+          Добавить
+        </button>
+      </form>
+
+      {error && <p className="rounded-md bg-danger-soft px-3 py-2 text-sm text-danger-soft-text">{error}</p>}
+
+      {tags.length === 0 && <p className="text-sm text-text-muted">Тегов пока нет.</p>}
+
+      <div className="flex flex-wrap gap-2">
+        {tags.map((tag) => (
+          <span
+            key={tag.id}
+            className={`flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-medium ${TAG_COLOR_CLASSES[tag.color]}`}
+          >
+            {tag.name}
+            <button onClick={() => handleDelete(tag.id)} className="opacity-60 hover:opacity-100">
+              <Trash2 size={12} />
+            </button>
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,87 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { Tags as TagsIcon, Check } from "lucide-react";
+import { TAG_COLOR_CLASSES } from "@/lib/tags/colors";
+import type { TagDTO } from "@/lib/tickets/types";
+
+export function TagPicker({
+  ticketId,
+  selectedTags,
+  onChange,
+}: {
+  ticketId: string;
+  selectedTags: TagDTO[];
+  onChange: (tags: TagDTO[]) => void;
+}) {
+  const [allTags, setAllTags] = useState<TagDTO[]>([]);
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    fetch("/api/tags")
+      .then((res) => res.json())
+      .then((data) => setAllTags(data.tags ?? []));
+  }, []);
+
+  useEffect(() => {
+    function onClickOutside(e: MouseEvent) {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) setOpen(false);
+    }
+    document.addEventListener("mousedown", onClickOutside);
+    return () => document.removeEventListener("mousedown", onClickOutside);
+  }, []);
+
+  async function toggle(tagId: string) {
+    const selectedIds = selectedTags.map((t) => t.id);
+    const nextIds = selectedIds.includes(tagId)
+      ? selectedIds.filter((id) => id !== tagId)
+      : [...selectedIds, tagId];
+
+    const res = await fetch(`/api/tickets/${ticketId}/tags`, {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ tagIds: nextIds }),
+    });
+    if (res.ok) {
+      const { tags } = await res.json();
+      onChange(tags);
+    }
+  }
+
+  return (
+    <div ref={rootRef} className="relative flex flex-wrap items-center gap-1.5">
+      {selectedTags.map((tag) => (
+        <span key={tag.id} className={`rounded-full px-2 py-0.5 text-xs font-medium ${TAG_COLOR_CLASSES[tag.color]}`}>
+          {tag.name}
+        </span>
+      ))}
+      <button type="button" onClick={() => setOpen((v) => !v)} className="btn btn-ghost px-1.5 py-1" title="Теги">
+        <TagsIcon size={13} />
+      </button>
+      {open && (
+        <div className="card absolute left-0 top-full z-20 mt-2 w-56 p-1">
+          {allTags.length === 0 && (
+            <p className="p-2 text-xs text-text-faint">Тегов пока нет — добавьте в настройках</p>
+          )}
+          {allTags.map((tag) => {
+            const active = selectedTags.some((t) => t.id === tag.id);
+            return (
+              <button
+                key={tag.id}
+                type="button"
+                onClick={() => toggle(tag.id)}
+                className="flex w-full items-center justify-between rounded-md px-2 py-1.5 text-left hover:bg-surface-hover"
+              >
+                <span className={`rounded-full px-2 py-0.5 text-xs font-medium ${TAG_COLOR_CLASSES[tag.color]}`}>
+                  {tag.name}
+                </span>
+                {active && <Check size={13} className="text-accent" />}
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
@@ -3,10 +3,12 @@
 import { useEffect, useRef, useState } from "react";
 import Link from "next/link";
 import { AnimatePresence, motion } from "framer-motion";
-import { ArrowLeft, Send, StickyNote } from "lucide-react";
+import { ArrowLeft, Send, StickyNote, Paperclip, X, MessageSquareText } from "lucide-react";
 import { useTicketEvents } from "@/lib/events/use-ticket-events";
 import { formatRelativeTime } from "@/lib/format";
 import { Avatar } from "@/components/avatar";
+import { AttachmentChip } from "@/components/attachment-chip";
+import { TagPicker } from "./tag-picker";
 import type { TicketDTO, MessageDTO, TicketStatus } from "@/lib/tickets/types";

 const STATUS_LABEL: Record<TicketStatus, string> = {
@@ -29,8 +31,32 @@ export function TicketThread({
  const [messages, setMessages] = useState(initialMessages);
  const [draft, setDraft] = useState("");
  const [visibility, setVisibility] = useState<"public" | "internal">("public");
+  const [pendingFile, setPendingFile] = useState<File | null>(null);
  const [sending, setSending] = useState(false);
+  const [cannedResponses, setCannedResponses] = useState<{ id: string; title: string; body: string }[]>([]);
+  const [cannedOpen, setCannedOpen] = useState(false);
  const bottomRef = useRef<HTMLDivElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const cannedRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    fetch("/api/canned-responses")
+      .then((res) => res.json())
+      .then((data) => setCannedResponses(data.responses ?? []));
+  }, []);
+
+  useEffect(() => {
+    function onClickOutside(e: MouseEvent) {
+      if (cannedRef.current && !cannedRef.current.contains(e.target as Node)) setCannedOpen(false);
+    }
+    document.addEventListener("mousedown", onClickOutside);
+    return () => document.removeEventListener("mousedown", onClickOutside);
+  }, []);
+
+  function insertCanned(body: string) {
+    setDraft((prev) => (prev.trim() ? `${prev}\n${body}` : body));
+    setCannedOpen(false);
+  }

  useTicketEvents("/api/events", (event) => {
    if (event.type === "ticket.updated" && event.ticket.id === ticket.id) {
@@ -46,15 +72,30 @@ export function TicketThread({
  }, [messages.length]);

  async function sendReply() {
-    if (!draft.trim()) return;
+    if (!draft.trim() && !pendingFile) return;
    setSending(true);
-    const res = await fetch(`/api/tickets/${ticket.id}/messages`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ body: draft, visibility }),
-    });
+
+    let res: Response;
+    if (pendingFile) {
+      const formData = new FormData();
+      formData.append("file", pendingFile);
+      formData.append("caption", draft);
+      formData.append("visibility", visibility);
+      res = await fetch(`/api/tickets/${ticket.id}/attachments`, { method: "POST", body: formData });
+    } else {
+      res = await fetch(`/api/tickets/${ticket.id}/messages`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ body: draft, visibility }),
+      });
+    }
+
    setSending(false);
-    if (res.ok) setDraft("");
+    if (res.ok) {
+      setDraft("");
+      setPendingFile(null);
+      if (fileInputRef.current) fileInputRef.current.value = "";
+    }
  }

  async function updateStatus(status: TicketStatus) {
@@ -90,10 +131,15 @@ export function TicketThread({
            Дашборд
          </Link>
          <h1 className="truncate font-display text-lg font-bold">{ticket.subject}</h1>
-          <span className="flex items-center gap-1.5">
+          <span className="mb-2 flex items-center gap-1.5">
            <Avatar name={ticket.customerName} size={18} />
            <span className="text-sm text-text-muted">{ticket.customerName}</span>
          </span>
+          <TagPicker
+            ticketId={ticket.id}
+            selectedTags={ticket.tags}
+            onChange={(tags) => setTicket((t) => ({ ...t, tags }))}
+          />
        </div>

        <div className="flex w-full shrink-0 items-center gap-2 sm:w-auto">
@@ -153,7 +199,22 @@ export function TicketThread({
            Заметка для команды
          </button>
        </div>
+        {pendingFile && (
+          <div className="mb-1.5 flex items-center gap-2 rounded-md border border-border bg-surface-hover px-2.5 py-1.5 text-xs">
+            <Paperclip size={12} />
+            <span className="flex-1 truncate">{pendingFile.name}</span>
+            <button type="button" onClick={() => setPendingFile(null)} className="text-text-muted hover:text-text">
+              <X size={13} />
+            </button>
+          </div>
+        )}
        <div className="flex gap-2">
+          <input
+            ref={fileInputRef}
+            type="file"
+            className="hidden"
+            onChange={(e) => setPendingFile(e.target.files?.[0] ?? null)}
+          />
          <textarea
            value={draft}
            onChange={(e) => setDraft(e.target.value)}
@@ -171,9 +232,45 @@ export function TicketThread({
                : "border-border bg-surface focus:border-accent"
            }`}
          />
+          <div ref={cannedRef} className="relative self-end">
+            <button
+              type="button"
+              onClick={() => setCannedOpen((v) => !v)}
+              className="btn btn-ghost"
+              title="Шаблоны ответов"
+            >
+              <MessageSquareText size={15} />
+            </button>
+            {cannedOpen && (
+              <div className="card absolute bottom-full right-0 z-20 mb-2 max-h-64 w-72 overflow-y-auto p-1">
+                {cannedResponses.length === 0 && (
+                  <p className="p-2 text-xs text-text-faint">Шаблонов пока нет</p>
+                )}
+                {cannedResponses.map((c) => (
+                  <button
+                    key={c.id}
+                    type="button"
+                    onClick={() => insertCanned(c.body)}
+                    className="block w-full rounded-md px-3 py-2 text-left text-sm hover:bg-surface-hover"
+                  >
+                    <p className="font-medium">{c.title}</p>
+                    <p className="truncate text-xs text-text-faint">{c.body}</p>
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+          <button
+            type="button"
+            onClick={() => fileInputRef.current?.click()}
+            className="btn btn-ghost self-end"
+            title="Прикрепить файл"
+          >
+            <Paperclip size={15} />
+          </button>
          <button
            onClick={sendReply}
-            disabled={sending || !draft.trim()}
+            disabled={sending || (!draft.trim() && !pendingFile)}
            className={visibility === "internal" ? "btn self-end bg-warning text-white hover:brightness-95" : "btn btn-primary self-end"}
          >
            {visibility === "internal" ? <StickyNote size={15} /> : <Send size={15} />}
@@ -208,6 +305,9 @@ function MessageBubble({ message }: { message: MessageDTO }) {
          Внутренняя заметка
        </p>
        <p className="mb-1 whitespace-pre-wrap text-sm">{message.body}</p>
+        {message.attachments.map((a) => (
+          <AttachmentChip key={a.id} attachment={a} />
+        ))}
        <p className="text-[11px] text-warning-soft-text/80">
          {message.authorName} · {formatRelativeTime(message.createdAt)}
        </p>
@@ -225,6 +325,9 @@ function MessageBubble({ message }: { message: MessageDTO }) {
    >
      <div className={`max-w-[75%] rounded-lg px-3 py-2 text-sm ${isAgent ? "bg-accent text-white" : "bg-surface-hover"}`}>
        <p className="mb-1 whitespace-pre-wrap">{message.body}</p>
+        {message.attachments.map((a) => (
+          <AttachmentChip key={a.id} attachment={a} />
+        ))}
        <p className={`text-[11px] ${isAgent ? "text-white/70" : "text-text-faint"}`}>
          {message.authorName} · {formatRelativeTime(message.createdAt)}
        </p>
@@ -3,9 +3,10 @@
 import { useEffect, useRef, useState } from "react";
 import Link from "next/link";
 import { AnimatePresence, motion } from "framer-motion";
-import { ArrowLeft, Send } from "lucide-react";
+import { ArrowLeft, Send, Paperclip, X } from "lucide-react";
 import { useTicketEvents } from "@/lib/events/use-ticket-events";
 import { formatRelativeTime } from "@/lib/format";
+import { AttachmentChip } from "@/components/attachment-chip";
 import type { TicketDTO, MessageDTO } from "@/lib/tickets/types";

 export function PortalThread({
@@ -21,8 +22,10 @@ export function PortalThread({
 }) {
  const [messages, setMessages] = useState(initialMessages);
  const [draft, setDraft] = useState("");
+  const [pendingFile, setPendingFile] = useState<File | null>(null);
  const [sending, setSending] = useState(false);
  const bottomRef = useRef<HTMLDivElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);

  useTicketEvents(`/api/portal/events?token=${encodeURIComponent(token)}`, (event) => {
    if (event.type === "message.created" && event.ticketId === ticket.id) {
@@ -35,15 +38,30 @@ export function PortalThread({
  }, [messages.length]);

  async function sendReply() {
-    if (!draft.trim()) return;
+    if (!draft.trim() && !pendingFile) 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 }),
-    });
+
+    let res: Response;
+    if (pendingFile) {
+      const formData = new FormData();
+      formData.append("token", token);
+      formData.append("file", pendingFile);
+      formData.append("caption", draft);
+      res = await fetch(`/api/portal/tickets/${ticket.id}/attachments`, { method: "POST", body: formData });
+    } else {
+      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("");
+    if (res.ok) {
+      setDraft("");
+      setPendingFile(null);
+      if (fileInputRef.current) fileInputRef.current.value = "";
+    }
  }

  return (
@@ -57,13 +75,29 @@ export function PortalThread({
      <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"} />
+            <MessageBubble key={message.id} message={message} isMine={message.authorType === "customer"} token={token} />
          ))}
        </AnimatePresence>
        <div ref={bottomRef} />
      </div>

+      {pendingFile && (
+        <div className="mt-3 flex items-center gap-2 rounded-md border border-border bg-surface-hover px-2.5 py-1.5 text-xs">
+          <Paperclip size={12} />
+          <span className="flex-1 truncate">{pendingFile.name}</span>
+          <button type="button" onClick={() => setPendingFile(null)} className="text-text-muted hover:text-text">
+            <X size={13} />
+          </button>
+        </div>
+      )}
+
      <div className="mt-3 flex gap-2">
+        <input
+          ref={fileInputRef}
+          type="file"
+          className="hidden"
+          onChange={(e) => setPendingFile(e.target.files?.[0] ?? null)}
+        />
        <textarea
          value={draft}
          onChange={(e) => setDraft(e.target.value)}
@@ -77,7 +111,19 @@ export function PortalThread({
          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">
+        <button
+          type="button"
+          onClick={() => fileInputRef.current?.click()}
+          className="btn btn-ghost self-end"
+          title="Прикрепить файл"
+        >
+          <Paperclip size={15} />
+        </button>
+        <button
+          onClick={sendReply}
+          disabled={sending || (!draft.trim() && !pendingFile)}
+          className="btn btn-primary self-end"
+        >
          <Send size={15} />
        </button>
      </div>
@@ -85,7 +131,15 @@ export function PortalThread({
  );
 }

-function MessageBubble({ message, isMine }: { message: MessageDTO; isMine: boolean }) {
+function MessageBubble({
+  message,
+  isMine,
+  token,
+}: {
+  message: MessageDTO;
+  isMine: boolean;
+  token: string;
+}) {
  if (message.authorType === "system") {
    return <p className="my-2 text-center text-xs text-text-faint">{message.body}</p>;
  }
@@ -100,6 +154,9 @@ function MessageBubble({ message, isMine }: { message: MessageDTO; isMine: boole
    >
      <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>
+        {message.attachments.map((a) => (
+          <AttachmentChip key={a.id} attachment={a} token={token} />
+        ))}
        <p className={`text-[11px] ${isMine ? "text-white/70" : "text-text-faint"}`}>
          {message.authorName} · {formatRelativeTime(message.createdAt)}
        </p>
@@ -0,0 +1,48 @@
+export const runtime = "nodejs";
+
+import { NextResponse } from "next/server";
+import { getCurrentSession } from "@/lib/auth/session";
+import { getAttachmentContext, getCustomerByPortalToken } from "@/lib/tickets/service";
+import { readAttachmentBuffer } from "@/lib/attachments/storage";
+
+function contentDisposition(type: "inline" | "attachment", filename: string): string {
+  const asciiFallback = filename.replace(/[^\x20-\x7E]/g, "_");
+  return `${type}; filename="${asciiFallback}"; filename*=UTF-8''${encodeURIComponent(filename)}`;
+}
+
+export async function GET(request: Request, { params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  const context = await getAttachmentContext(id);
+  if (!context) {
+    return NextResponse.json({ error: "Not found" }, { status: 404 });
+  }
+
+  const session = await getCurrentSession();
+  let authorized = Boolean(session);
+
+  // Internal-note attachments are never servable via a customer token, only
+  // an agent session — same rule getTicketForCustomer applies to messages.
+  if (!authorized && context.message.visibility === "public") {
+    const token = new URL(request.url).searchParams.get("token");
+    if (token) {
+      const customer = await getCustomerByPortalToken(token);
+      authorized = Boolean(customer && customer.id === context.ticket.customerId);
+    }
+  }
+
+  if (!authorized) {
+    return NextResponse.json({ error: "Not found" }, { status: 404 });
+  }
+
+  const buffer = await readAttachmentBuffer(context.attachment.storageKey);
+  const isImage = context.attachment.mimeType.startsWith("image/");
+
+  return new Response(new Uint8Array(buffer), {
+    headers: {
+      "Content-Type": context.attachment.mimeType,
+      "Content-Disposition": contentDisposition(isImage ? "inline" : "attachment", context.attachment.filename),
+      "Content-Length": String(context.attachment.sizeBytes),
+      "Cache-Control": "private, max-age=31536000, immutable",
+    },
+  });
+}
@@ -0,0 +1,40 @@
+export const runtime = "nodejs";
+
+import { NextResponse } from "next/server";
+import { z } from "zod";
+import { eq } from "drizzle-orm";
+import { requireSession } from "@/lib/auth/require";
+import { verifyPassword, hashPassword } from "@/lib/auth/password";
+import { db } from "@/lib/db/client";
+import { users } from "@/lib/db/schema";
+
+const schema = z.object({
+  currentPassword: z.string().min(1),
+  newPassword: z.string().min(8, "Пароль должен быть не короче 8 символов"),
+});
+
+export async function POST(request: Request) {
+  const { session, response } = await requireSession();
+  if (!session) return response;
+
+  const body = await request.json().catch(() => null);
+  const parsed = schema.safeParse(body);
+  if (!parsed.success) {
+    return NextResponse.json({ error: parsed.error.issues[0]?.message ?? "Invalid input" }, { status: 400 });
+  }
+
+  const user = await db.query.users.findFirst({ where: eq(users.id, session.user.id) });
+  if (!user) {
+    return NextResponse.json({ error: "User not found" }, { status: 404 });
+  }
+
+  const ok = await verifyPassword(user.passwordHash, parsed.data.currentPassword);
+  if (!ok) {
+    return NextResponse.json({ error: "Текущий пароль неверен" }, { status: 401 });
+  }
+
+  const newHash = await hashPassword(parsed.data.newPassword);
+  await db.update(users).set({ passwordHash: newHash }).where(eq(users.id, user.id));
+
+  return NextResponse.json({ ok: true });
+}
@@ -0,0 +1,35 @@
+export const runtime = "nodejs";
+
+import { NextResponse } from "next/server";
+import { z } from "zod";
+import { requireSession } from "@/lib/auth/require";
+import { updateCannedResponse, deleteCannedResponse } from "@/lib/tickets/service";
+
+const updateSchema = z.object({
+  title: z.string().min(1).max(100),
+  body: z.string().min(1).max(5_000),
+});
+
+export async function PATCH(request: Request, { params }: { params: Promise<{ id: string }> }) {
+  const { session, response } = await requireSession();
+  if (!session) return response;
+
+  const { id } = await params;
+  const body = await request.json().catch(() => null);
+  const parsed = updateSchema.safeParse(body);
+  if (!parsed.success) {
+    return NextResponse.json({ error: "Invalid input" }, { status: 400 });
+  }
+
+  const canned = await updateCannedResponse(id, parsed.data.title, parsed.data.body);
+  return NextResponse.json({ response: canned });
+}
+
+export async function DELETE(_request: Request, { params }: { params: Promise<{ id: string }> }) {
+  const { session, response } = await requireSession();
+  if (!session) return response;
+
+  const { id } = await params;
+  await deleteCannedResponse(id);
+  return NextResponse.json({ ok: true });
+}
@@ -0,0 +1,32 @@
+export const runtime = "nodejs";
+
+import { NextResponse } from "next/server";
+import { z } from "zod";
+import { requireSession } from "@/lib/auth/require";
+import { listCannedResponses, createCannedResponse } from "@/lib/tickets/service";
+
+export async function GET() {
+  const { session, response } = await requireSession();
+  if (!session) return response;
+
+  return NextResponse.json({ responses: await listCannedResponses() });
+}
+
+const createSchema = z.object({
+  title: z.string().min(1).max(100),
+  body: z.string().min(1).max(5_000),
+});
+
+export async function POST(request: Request) {
+  const { session, response } = await requireSession();
+  if (!session) return response;
+
+  const body = await request.json().catch(() => null);
+  const parsed = createSchema.safeParse(body);
+  if (!parsed.success) {
+    return NextResponse.json({ error: "Invalid input" }, { status: 400 });
+  }
+
+  const canned = await createCannedResponse(parsed.data.title, parsed.data.body);
+  return NextResponse.json({ response: canned }, { status: 201 });
+}
@@ -0,0 +1,65 @@
+export const runtime = "nodejs";
+
+import { NextResponse } from "next/server";
+import { getCustomerByPortalToken, appendCustomerReply } from "@/lib/tickets/service";
+import { saveAttachment, AttachmentTooLargeError, MAX_ATTACHMENT_BYTES } from "@/lib/attachments/storage";
+
+export async function POST(
+  request: Request,
+  { params }: { params: Promise<{ ticketId: string }> },
+) {
+  const { ticketId } = await params;
+  const formData = await request.formData().catch(() => null);
+
+  const token = formData?.get("token");
+  if (typeof token !== "string" || !token) {
+    return NextResponse.json({ error: "Missing token" }, { status: 400 });
+  }
+
+  const file = formData?.get("file");
+  if (!(file instanceof File)) {
+    return NextResponse.json({ error: "Missing file" }, { status: 400 });
+  }
+  if (file.size > MAX_ATTACHMENT_BYTES) {
+    return NextResponse.json({ error: "File too large" }, { status: 413 });
+  }
+
+  const customer = await getCustomerByPortalToken(token);
+  if (!customer) {
+    return NextResponse.json({ error: "Invalid token" }, { status: 404 });
+  }
+
+  const captionRaw = formData?.get("caption");
+  const caption = typeof captionRaw === "string" ? captionRaw.trim() : "";
+
+  const buffer = Buffer.from(await file.arrayBuffer());
+  let saved;
+  try {
+    saved = await saveAttachment(buffer);
+  } catch (err) {
+    if (err instanceof AttachmentTooLargeError) {
+      return NextResponse.json({ error: "File too large" }, { status: 413 });
+    }
+    throw err;
+  }
+
+  try {
+    const result = await appendCustomerReply({
+      ticketId,
+      customerId: customer.id,
+      authorName: customer.displayName,
+      body: caption || file.name || "Вложение",
+      attachments: [
+        {
+          filename: file.name || "file",
+          mimeType: file.type || "application/octet-stream",
+          sizeBytes: saved.sizeBytes,
+          storageKey: saved.storageKey,
+        },
+      ],
+    });
+    return NextResponse.json(result, { status: 201 });
+  } catch {
+    return NextResponse.json({ error: "Ticket not found" }, { status: 404 });
+  }
+}
@@ -0,0 +1,14 @@
+export const runtime = "nodejs";
+
+import { NextResponse } from "next/server";
+import { requireSession } from "@/lib/auth/require";
+import { deleteTag } from "@/lib/tickets/service";
+
+export async function DELETE(_request: Request, { params }: { params: Promise<{ id: string }> }) {
+  const { session, response } = await requireSession();
+  if (!session) return response;
+
+  const { id } = await params;
+  await deleteTag(id);
+  return NextResponse.json({ ok: true });
+}
@@ -0,0 +1,32 @@
+export const runtime = "nodejs";
+
+import { NextResponse } from "next/server";
+import { z } from "zod";
+import { requireSession } from "@/lib/auth/require";
+import { listTags, createTag } from "@/lib/tickets/service";
+
+export async function GET() {
+  const { session, response } = await requireSession();
+  if (!session) return response;
+
+  return NextResponse.json({ tags: await listTags() });
+}
+
+const createSchema = z.object({
+  name: z.string().min(1).max(50),
+  color: z.enum(["accent", "success", "warning", "info", "rose", "danger"]),
+});
+
+export async function POST(request: Request) {
+  const { session, response } = await requireSession();
+  if (!session) return response;
+
+  const body = await request.json().catch(() => null);
+  const parsed = createSchema.safeParse(body);
+  if (!parsed.success) {
+    return NextResponse.json({ error: "Invalid input" }, { status: 400 });
+  }
+
+  const tag = await createTag(parsed.data.name, parsed.data.color);
+  return NextResponse.json({ tag }, { status: 201 });
+}
@@ -0,0 +1,56 @@
+export const runtime = "nodejs";
+
+import { NextResponse } from "next/server";
+import { requireSession } from "@/lib/auth/require";
+import { deliverAgentMessage } from "@/lib/tickets/delivery";
+import { saveAttachment, AttachmentTooLargeError, MAX_ATTACHMENT_BYTES } from "@/lib/attachments/storage";
+
+export async function POST(request: Request, { params }: { params: Promise<{ id: string }> }) {
+  const { session, response } = await requireSession();
+  if (!session) return response;
+
+  const { id } = await params;
+  const formData = await request.formData().catch(() => null);
+  const file = formData?.get("file");
+  if (!(file instanceof File)) {
+    return NextResponse.json({ error: "Missing file" }, { status: 400 });
+  }
+  if (file.size > MAX_ATTACHMENT_BYTES) {
+    return NextResponse.json({ error: "File too large" }, { status: 413 });
+  }
+
+  const captionRaw = formData?.get("caption");
+  const caption = typeof captionRaw === "string" ? captionRaw.trim() : "";
+  const visibility = formData?.get("visibility") === "internal" ? "internal" : "public";
+
+  const buffer = Buffer.from(await file.arrayBuffer());
+  let saved;
+  try {
+    saved = await saveAttachment(buffer);
+  } catch (err) {
+    if (err instanceof AttachmentTooLargeError) {
+      return NextResponse.json({ error: "File too large" }, { status: 413 });
+    }
+    throw err;
+  }
+
+  try {
+    const result = await deliverAgentMessage({
+      ticketId: id,
+      agentId: session.user.id,
+      agentName: session.user.name,
+      body: caption || file.name || "Вложение",
+      visibility,
+      attachment: {
+        filename: file.name || "file",
+        mimeType: file.type || "application/octet-stream",
+        sizeBytes: saved.sizeBytes,
+        storageKey: saved.storageKey,
+        buffer,
+      },
+    });
+    return NextResponse.json(result, { status: 201 });
+  } catch {
+    return NextResponse.json({ error: "Ticket not found" }, { status: 404 });
+  }
+}
@@ -3,12 +3,7 @@ export const runtime = "nodejs";
 import { NextResponse } from "next/server";
 import { z } from "zod";
 import { requireSession } from "@/lib/auth/require";
-import { recordAgentReply, recordInternalNote, getEmailThreadContext } from "@/lib/tickets/service";
-import { sendTelegramMessage } from "@/lib/telegram/bot";
-import { sendTicketReplyEmail } from "@/lib/mail/smtp";
-import { db } from "@/lib/db/client";
-import { customers } from "@/lib/db/schema";
-import { eq } from "drizzle-orm";
+import { deliverAgentMessage } from "@/lib/tickets/delivery";

 const messageSchema = z.object({
  body: z.string().min(1).max(10_000),
@@ -26,50 +21,16 @@ export async function POST(request: Request, { params }: { params: Promise<{ id:
    return NextResponse.json({ error: "Invalid input" }, { status: 400 });
  }

-  const ticket = await db.query.tickets.findFirst({ where: (t, { eq: eqOp }) => eqOp(t.id, id) });
-  if (!ticket) {
-    return NextResponse.json({ error: "Ticket not found" }, { status: 404 });
-  }
-
-  if (parsed.data.visibility === "internal") {
-    const result = await recordInternalNote({
+  try {
+    const result = await deliverAgentMessage({
      ticketId: id,
      agentId: session.user.id,
      agentName: session.user.name,
      body: parsed.data.body,
+      visibility: parsed.data.visibility,
    });
    return NextResponse.json(result, { status: 201 });
+  } catch {
+    return NextResponse.json({ error: "Ticket not found" }, { status: 404 });
  }
-
-  let emailMessageId: string | undefined;
-  if (ticket.channel === "email") {
-    const context = await getEmailThreadContext(id);
-    if (context) {
-      emailMessageId = await sendTicketReplyEmail({
-        to: context.customerEmail,
-        subject: context.subject,
-        body: parsed.data.body,
-        inReplyTo: context.inReplyTo,
-      });
-    }
-  }
-
-  const result = await recordAgentReply({
-    ticketId: id,
-    agentId: session.user.id,
-    agentName: session.user.name,
-    body: parsed.data.body,
-    emailMessageId,
-  });
-
-  if (result.ticket.channel === "telegram") {
-    const customer = await db.query.customers.findFirst({
-      where: eq(customers.id, result.ticket.customerId),
-    });
-    if (customer?.telegramChatId) {
-      await sendTelegramMessage(customer.telegramChatId, parsed.data.body);
-    }
-  }
-
-  return NextResponse.json(result, { status: 201 });
 }
@@ -0,0 +1,23 @@
+export const runtime = "nodejs";
+
+import { NextResponse } from "next/server";
+import { z } from "zod";
+import { requireSession } from "@/lib/auth/require";
+import { setTicketTags } from "@/lib/tickets/service";
+
+const schema = z.object({ tagIds: z.array(z.string()) });
+
+export async function PUT(request: Request, { params }: { params: Promise<{ id: string }> }) {
+  const { session, response } = await requireSession();
+  if (!session) return response;
+
+  const { id } = await params;
+  const body = await request.json().catch(() => null);
+  const parsed = schema.safeParse(body);
+  if (!parsed.success) {
+    return NextResponse.json({ error: "Invalid input" }, { status: 400 });
+  }
+
+  const tags = await setTicketTags(id, parsed.data.tagIds);
+  return NextResponse.json({ tags });
+}
@@ -5,11 +5,12 @@ import { z } from "zod";
 import { requireSession } from "@/lib/auth/require";
 import { listTickets, createManualTicket } from "@/lib/tickets/service";

-export async function GET() {
+export async function GET(request: Request) {
  const { session, response } = await requireSession();
  if (!session) return response;

-  const tickets = await listTickets();
+  const query = new URL(request.url).searchParams.get("q") ?? undefined;
+  const tickets = await listTickets(query);
  return NextResponse.json({ tickets });
 }

@@ -0,0 +1,98 @@
+export const runtime = "nodejs";
+
+import { NextResponse } from "next/server";
+import {
+  getWidgetSiteByKey,
+  getCustomerByPortalToken,
+  renameCustomerIfGuest,
+  recordChatInboundMessage,
+} from "@/lib/tickets/service";
+import { saveAttachment, AttachmentTooLargeError, MAX_ATTACHMENT_BYTES } from "@/lib/attachments/storage";
+
+// Same shape as /api/widget/messages' limiter — kept separate rather than
+// shared since each route's rate budget is independent.
+const attempts = new Map<string, { count: number; resetAt: number }>();
+const MAX_ATTEMPTS = 10;
+const WINDOW_MS = 5 * 60 * 1000;
+
+function isRateLimited(key: string): boolean {
+  const now = Date.now();
+  const entry = attempts.get(key);
+  if (!entry || entry.resetAt < now) {
+    attempts.set(key, { count: 1, resetAt: now + WINDOW_MS });
+    return false;
+  }
+  entry.count += 1;
+  return entry.count > MAX_ATTEMPTS;
+}
+
+export async function POST(request: Request) {
+  const formData = await request.formData().catch(() => null);
+
+  const siteKey = formData?.get("siteKey");
+  const token = formData?.get("token");
+  if (typeof siteKey !== "string" || !siteKey || typeof token !== "string" || !token) {
+    return NextResponse.json({ error: "Invalid input" }, { status: 400 });
+  }
+
+  if (isRateLimited(token)) {
+    return NextResponse.json({ error: "Слишком много сообщений — подождите немного" }, { status: 429 });
+  }
+
+  const file = formData?.get("file");
+  if (!(file instanceof File)) {
+    return NextResponse.json({ error: "Missing file" }, { status: 400 });
+  }
+  if (file.size > MAX_ATTACHMENT_BYTES) {
+    return NextResponse.json({ error: "File too large" }, { status: 413 });
+  }
+
+  const site = await getWidgetSiteByKey(siteKey);
+  if (!site || !site.enabled) {
+    return NextResponse.json({ error: "Unknown or disabled widget" }, { status: 404 });
+  }
+
+  const customer = await getCustomerByPortalToken(token);
+  if (!customer) {
+    return NextResponse.json({ error: "Invalid token" }, { status: 404 });
+  }
+
+  const nameRaw = formData?.get("name");
+  const name = typeof nameRaw === "string" ? nameRaw.trim() : "";
+  if (name) {
+    await renameCustomerIfGuest(customer.id, name);
+  }
+
+  const captionRaw = formData?.get("caption");
+  const caption = typeof captionRaw === "string" ? captionRaw.trim() : "";
+
+  const buffer = Buffer.from(await file.arrayBuffer());
+  let saved;
+  try {
+    saved = await saveAttachment(buffer);
+  } catch (err) {
+    if (err instanceof AttachmentTooLargeError) {
+      return NextResponse.json({ error: "File too large" }, { status: 413 });
+    }
+    throw err;
+  }
+
+  const body = caption || file.name || "Вложение";
+  const result = await recordChatInboundMessage({
+    customerId: customer.id,
+    channel: "widget",
+    body,
+    authorName: name || customer.displayName,
+    subjectForNewTicket: `Чат (${site.name}): ${body.slice(0, 60)}`,
+    attachments: [
+      {
+        filename: file.name || "file",
+        mimeType: file.type || "application/octet-stream",
+        sizeBytes: saved.sizeBytes,
+        storageKey: saved.storageKey,
+      },
+    ],
+  });
+
+  return NextResponse.json(result, { status: 201 });
+}
@@ -3,9 +3,10 @@
 import { useEffect, useRef, useState } from "react";
 import { useSearchParams } from "next/navigation";
 import { AnimatePresence, motion } from "framer-motion";
-import { Send } from "lucide-react";
+import { Send, Paperclip, X } from "lucide-react";
 import { useTicketEvents } from "@/lib/events/use-ticket-events";
 import { formatRelativeTime } from "@/lib/format";
+import { AttachmentChip } from "@/components/attachment-chip";
 import type { MessageDTO } from "@/lib/tickets/types";

 const STORAGE_KEY = "top-tickets-widget-token";
@@ -17,9 +18,11 @@ export function WidgetChat() {
  const [messages, setMessages] = useState<MessageDTO[]>([]);
  const [name, setName] = useState("");
  const [draft, setDraft] = useState("");
+  const [pendingFile, setPendingFile] = useState<File | null>(null);
  const [ready, setReady] = useState(false);
  const [sending, setSending] = useState(false);
  const bottomRef = useRef<HTMLDivElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    const stored = localStorage.getItem(STORAGE_KEY) ?? undefined;
@@ -50,16 +53,31 @@ export function WidgetChat() {
  }, [messages.length]);

  async function sendMessage() {
-    if (!draft.trim() || !token) return;
+    if ((!draft.trim() && !pendingFile) || !token) return;
    setSending(true);
-    const res = await fetch("/api/widget/messages", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ siteKey, token, body: draft, name: name.trim() || undefined }),
-    });
+
+    let res: Response;
+    if (pendingFile) {
+      const formData = new FormData();
+      formData.append("siteKey", siteKey);
+      formData.append("token", token);
+      formData.append("file", pendingFile);
+      formData.append("caption", draft);
+      if (name.trim()) formData.append("name", name.trim());
+      res = await fetch("/api/widget/attachments", { method: "POST", body: formData });
+    } else {
+      res = await fetch("/api/widget/messages", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ siteKey, token, body: draft, name: name.trim() || undefined }),
+      });
+    }
+
    setSending(false);
    if (res.ok) {
      setDraft("");
+      setPendingFile(null);
+      if (fileInputRef.current) fileInputRef.current.value = "";
    }
  }

@@ -86,7 +104,7 @@ export function WidgetChat() {
      <div className="flex-1 overflow-y-auto">
        <AnimatePresence initial={false}>
          {messages.map((message) => (
-            <MessageBubble key={message.id} message={message} />
+            <MessageBubble key={message.id} message={message} token={token ?? ""} />
          ))}
        </AnimatePresence>
        {isFirstMessage && (
@@ -95,7 +113,23 @@ export function WidgetChat() {
        <div ref={bottomRef} />
      </div>

+      {pendingFile && (
+        <div className="mt-2 flex items-center gap-2 rounded-md border border-border bg-surface-hover px-2.5 py-1.5 text-xs">
+          <Paperclip size={12} />
+          <span className="flex-1 truncate">{pendingFile.name}</span>
+          <button type="button" onClick={() => setPendingFile(null)} className="text-text-muted hover:text-text">
+            <X size={13} />
+          </button>
+        </div>
+      )}
+
      <div className="mt-2 flex gap-2">
+        <input
+          ref={fileInputRef}
+          type="file"
+          className="hidden"
+          onChange={(e) => setPendingFile(e.target.files?.[0] ?? null)}
+        />
        <textarea
          rows={1}
          value={draft}
@@ -109,7 +143,15 @@ export function WidgetChat() {
          placeholder="Напишите сообщение…"
          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={sendMessage} disabled={sending || !draft.trim()} className="btn btn-primary">
+        <button
+          type="button"
+          onClick={() => fileInputRef.current?.click()}
+          className="btn btn-ghost"
+          title="Прикрепить файл"
+        >
+          <Paperclip size={15} />
+        </button>
+        <button onClick={sendMessage} disabled={sending || (!draft.trim() && !pendingFile)} className="btn btn-primary">
          <Send size={15} />
        </button>
      </div>
@@ -117,7 +159,7 @@ export function WidgetChat() {
  );
 }

-function MessageBubble({ message }: { message: MessageDTO }) {
+function MessageBubble({ message, token }: { message: MessageDTO; token: string }) {
  const isMine = message.authorType === "customer";

  if (message.authorType === "system") {
@@ -134,6 +176,9 @@ function MessageBubble({ message }: { message: MessageDTO }) {
    >
      <div className={`max-w-[85%] 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>
+        {message.attachments.map((a) => (
+          <AttachmentChip key={a.id} attachment={a} token={token} />
+        ))}
        <p className={`text-[11px] ${isMine ? "text-white/70" : "text-text-faint"}`}>
          {formatRelativeTime(message.createdAt)}
        </p>
@@ -0,0 +1,40 @@
+import { Paperclip } from "lucide-react";
+import type { AttachmentDTO } from "@/lib/tickets/types";
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
+
+export function AttachmentChip({ attachment, token }: { attachment: AttachmentDTO; token?: string }) {
+  const url = `/api/attachments/${attachment.id}${token ? `?token=${encodeURIComponent(token)}` : ""}`;
+  const isImage = attachment.mimeType.startsWith("image/");
+
+  if (isImage) {
+    return (
+      <a
+        href={url}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="mt-1.5 block max-w-[220px] overflow-hidden rounded-md border border-border"
+      >
+        {/* eslint-disable-next-line @next/next/no-img-element -- serves from our own auth-gated API route, not next/image-optimizable */}
+        <img src={url} alt={attachment.filename} className="block max-h-48 w-full object-cover" />
+      </a>
+    );
+  }
+
+  return (
+    <a
+      href={url}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="mt-1.5 flex max-w-[220px] items-center gap-2 rounded-md border border-border bg-surface px-2.5 py-1.5 text-xs hover:bg-surface-hover"
+    >
+      <Paperclip size={13} className="shrink-0" />
+      <span className="truncate">{attachment.filename}</span>
+      <span className="shrink-0 text-text-faint">{formatSize(attachment.sizeBytes)}</span>
+    </a>
+  );
+}
@@ -0,0 +1,28 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+import crypto from "node:crypto";
+
+export const MAX_ATTACHMENT_BYTES = 15 * 1024 * 1024;
+
+export class AttachmentTooLargeError extends Error {}
+
+function attachmentsDir(): string {
+  const dataDir = process.env.DATA_DIR ?? path.join(process.cwd(), "data");
+  return path.join(dataDir, "attachments");
+}
+
+/** storageKey is always a freshly generated UUID here — never derived from user input, so no path-traversal risk. */
+export async function saveAttachment(buffer: Buffer): Promise<{ storageKey: string; sizeBytes: number }> {
+  if (buffer.byteLength > MAX_ATTACHMENT_BYTES) {
+    throw new AttachmentTooLargeError(`File exceeds ${MAX_ATTACHMENT_BYTES} bytes`);
+  }
+  const dir = attachmentsDir();
+  await fs.mkdir(dir, { recursive: true });
+  const storageKey = crypto.randomUUID();
+  await fs.writeFile(path.join(dir, storageKey), buffer);
+  return { storageKey, sizeBytes: buffer.byteLength };
+}
+
+export async function readAttachmentBuffer(storageKey: string): Promise<Buffer> {
+  return fs.readFile(path.join(attachmentsDir(), storageKey));
+}
@@ -0,0 +1,33 @@
+CREATE TABLE `attachments` (
+	`id` text PRIMARY KEY NOT NULL,
+	`message_id` text NOT NULL,
+	`filename` text NOT NULL,
+	`mime_type` text NOT NULL,
+	`size_bytes` integer NOT NULL,
+	`storage_key` text NOT NULL,
+	`created_at` integer DEFAULT (unixepoch('subsec') * 1000) NOT NULL,
+	FOREIGN KEY (`message_id`) REFERENCES `messages`(`id`) ON UPDATE no action ON DELETE cascade
+);
+--> statement-breakpoint
+CREATE TABLE `canned_responses` (
+	`id` text PRIMARY KEY NOT NULL,
+	`title` text NOT NULL,
+	`body` text NOT NULL,
+	`created_at` integer DEFAULT (unixepoch('subsec') * 1000) NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE `tags` (
+	`id` text PRIMARY KEY NOT NULL,
+	`name` text NOT NULL,
+	`color` text DEFAULT 'accent' NOT NULL,
+	`created_at` integer DEFAULT (unixepoch('subsec') * 1000) NOT NULL
+);
+--> statement-breakpoint
+CREATE UNIQUE INDEX `tags_name_unique` ON `tags` (`name`);--> statement-breakpoint
+CREATE TABLE `ticket_tags` (
+	`ticket_id` text NOT NULL,
+	`tag_id` text NOT NULL,
+	PRIMARY KEY(`ticket_id`, `tag_id`),
+	FOREIGN KEY (`ticket_id`) REFERENCES `tickets`(`id`) ON UPDATE no action ON DELETE cascade,
+	FOREIGN KEY (`tag_id`) REFERENCES `tags`(`id`) ON UPDATE no action ON DELETE cascade
+);
@@ -0,0 +1,837 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "c974991b-5c77-4525-a20c-91b3b31a7a70",
+  "prevId": "727e15bd-5319-45d7-9cc5-52683fe1dc2e",
+  "tables": {
+    "attachments": {
+      "name": "attachments",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "message_id": {
+          "name": "message_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "filename": {
+          "name": "filename",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "mime_type": {
+          "name": "mime_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "size_bytes": {
+          "name": "size_bytes",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "storage_key": {
+          "name": "storage_key",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch('subsec') * 1000)"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "attachments_message_id_messages_id_fk": {
+          "name": "attachments_message_id_messages_id_fk",
+          "tableFrom": "attachments",
+          "tableTo": "messages",
+          "columnsFrom": [
+            "message_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "canned_responses": {
+      "name": "canned_responses",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "title": {
+          "name": "title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "body": {
+          "name": "body",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch('subsec') * 1000)"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "customers": {
+      "name": "customers",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "display_name": {
+          "name": "display_name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "telegram_chat_id": {
+          "name": "telegram_chat_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "portal_token": {
+          "name": "portal_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch('subsec') * 1000)"
+        }
+      },
+      "indexes": {
+        "customers_telegram_chat_id_unique": {
+          "name": "customers_telegram_chat_id_unique",
+          "columns": [
+            "telegram_chat_id"
+          ],
+          "isUnique": true
+        },
+        "customers_portal_token_unique": {
+          "name": "customers_portal_token_unique",
+          "columns": [
+            "portal_token"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "mailbox_config": {
+      "name": "mailbox_config",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "imap_host": {
+          "name": "imap_host",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "imap_port": {
+          "name": "imap_port",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 993
+        },
+        "smtp_host": {
+          "name": "smtp_host",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "smtp_port": {
+          "name": "smtp_port",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 587
+        },
+        "user": {
+          "name": "user",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "password_enc": {
+          "name": "password_enc",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "allow_insecure_tls": {
+          "name": "allow_insecure_tls",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "enabled": {
+          "name": "enabled",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "verified_at": {
+          "name": "verified_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch('subsec') * 1000)"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "messages": {
+      "name": "messages",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "ticket_id": {
+          "name": "ticket_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "author_type": {
+          "name": "author_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "author_id": {
+          "name": "author_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "author_name": {
+          "name": "author_name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "body": {
+          "name": "body",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "direction": {
+          "name": "direction",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "visibility": {
+          "name": "visibility",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'public'"
+        },
+        "email_message_id": {
+          "name": "email_message_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch('subsec') * 1000)"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "messages_ticket_id_tickets_id_fk": {
+          "name": "messages_ticket_id_tickets_id_fk",
+          "tableFrom": "messages",
+          "tableTo": "tickets",
+          "columnsFrom": [
+            "ticket_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "sessions": {
+      "name": "sessions",
+      "columns": {
+        "token_hash": {
+          "name": "token_hash",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch('subsec') * 1000)"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "sessions_user_id_users_id_fk": {
+          "name": "sessions_user_id_users_id_fk",
+          "tableFrom": "sessions",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "tags": {
+      "name": "tags",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "color": {
+          "name": "color",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'accent'"
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch('subsec') * 1000)"
+        }
+      },
+      "indexes": {
+        "tags_name_unique": {
+          "name": "tags_name_unique",
+          "columns": [
+            "name"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "telegram_config": {
+      "name": "telegram_config",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "bot_token_enc": {
+          "name": "bot_token_enc",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "bot_username": {
+          "name": "bot_username",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "enabled": {
+          "name": "enabled",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "verified_at": {
+          "name": "verified_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch('subsec') * 1000)"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "ticket_tags": {
+      "name": "ticket_tags",
+      "columns": {
+        "ticket_id": {
+          "name": "ticket_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "tag_id": {
+          "name": "tag_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "ticket_tags_ticket_id_tickets_id_fk": {
+          "name": "ticket_tags_ticket_id_tickets_id_fk",
+          "tableFrom": "ticket_tags",
+          "tableTo": "tickets",
+          "columnsFrom": [
+            "ticket_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "ticket_tags_tag_id_tags_id_fk": {
+          "name": "ticket_tags_tag_id_tags_id_fk",
+          "tableFrom": "ticket_tags",
+          "tableTo": "tags",
+          "columnsFrom": [
+            "tag_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "ticket_tags_ticket_id_tag_id_pk": {
+          "columns": [
+            "ticket_id",
+            "tag_id"
+          ],
+          "name": "ticket_tags_ticket_id_tag_id_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "tickets": {
+      "name": "tickets",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "subject": {
+          "name": "subject",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "status": {
+          "name": "status",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'new'"
+        },
+        "priority": {
+          "name": "priority",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'normal'"
+        },
+        "channel": {
+          "name": "channel",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "customer_id": {
+          "name": "customer_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "assignee_id": {
+          "name": "assignee_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "last_message_at": {
+          "name": "last_message_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch('subsec') * 1000)"
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch('subsec') * 1000)"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch('subsec') * 1000)"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "tickets_customer_id_customers_id_fk": {
+          "name": "tickets_customer_id_customers_id_fk",
+          "tableFrom": "tickets",
+          "tableTo": "customers",
+          "columnsFrom": [
+            "customer_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "tickets_assignee_id_users_id_fk": {
+          "name": "tickets_assignee_id_users_id_fk",
+          "tableFrom": "tickets",
+          "tableTo": "users",
+          "columnsFrom": [
+            "assignee_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "users": {
+      "name": "users",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "password_hash": {
+          "name": "password_hash",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "role": {
+          "name": "role",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'agent'"
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch('subsec') * 1000)"
+        }
+      },
+      "indexes": {
+        "users_email_unique": {
+          "name": "users_email_unique",
+          "columns": [
+            "email"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "widget_sites": {
+      "name": "widget_sites",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "site_key": {
+          "name": "site_key",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "allowed_origin": {
+          "name": "allowed_origin",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "enabled": {
+          "name": "enabled",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch('subsec') * 1000)"
+        }
+      },
+      "indexes": {
+        "widget_sites_site_key_unique": {
+          "name": "widget_sites_site_key_unique",
+          "columns": [
+            "site_key"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    }
+  },
+  "views": {},
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "indexes": {}
+  }
+}
@@ -29,6 +29,13 @@
      "when": 1785076018169,
      "tag": "0003_absurd_zemo",
      "breakpoints": true
+    },
+    {
+      "idx": 4,
+      "version": "6",
+      "when": 1785085538509,
+      "tag": "0004_familiar_kronos",
+      "breakpoints": true
    }
  ]
 }
@@ -1,5 +1,5 @@
 import { sql } from "drizzle-orm";
-import { sqliteTable, text, integer } from "drizzle-orm/sqlite-core";
+import { sqliteTable, text, integer, primaryKey } from "drizzle-orm/sqlite-core";
 import crypto from "node:crypto";

 const id = () =>
@@ -139,3 +139,48 @@ export const widgetSites = sqliteTable("widget_sites", {
  enabled: integer("enabled", { mode: "boolean" }).notNull().default(true),
  createdAt: timestamps.createdAt,
 });
+
+/** A file attached to a message — inbound (email/Telegram) or outbound (agent/customer upload). */
+export const attachments = sqliteTable("attachments", {
+  id: id(),
+  messageId: text("message_id")
+    .notNull()
+    .references(() => messages.id, { onDelete: "cascade" }),
+  filename: text("filename").notNull(),
+  mimeType: text("mime_type").notNull(),
+  sizeBytes: integer("size_bytes").notNull(),
+  // Relative path under DATA_DIR/attachments/ — see src/lib/attachments/storage.ts.
+  storageKey: text("storage_key").notNull(),
+  createdAt: timestamps.createdAt,
+});
+
+/** Saved reply templates agents can insert into the reply box. */
+export const cannedResponses = sqliteTable("canned_responses", {
+  id: id(),
+  title: text("title").notNull(),
+  body: text("body").notNull(),
+  createdAt: timestamps.createdAt,
+});
+
+/** Fixed small palette (reuses the existing soft-badge tokens) so tag chips never need arbitrary colors. */
+export const tags = sqliteTable("tags", {
+  id: id(),
+  name: text("name").notNull().unique(),
+  color: text("color", { enum: ["accent", "success", "warning", "info", "rose", "danger"] })
+    .notNull()
+    .default("accent"),
+  createdAt: timestamps.createdAt,
+});
+
+export const ticketTags = sqliteTable(
+  "ticket_tags",
+  {
+    ticketId: text("ticket_id")
+      .notNull()
+      .references(() => tickets.id, { onDelete: "cascade" }),
+    tagId: text("tag_id")
+      .notNull()
+      .references(() => tags.id, { onDelete: "cascade" }),
+  },
+  (table) => [primaryKey({ columns: [table.ticketId, table.tagId] })],
+);
@@ -2,6 +2,7 @@ import { ImapFlow } from "imapflow";
 import { simpleParser, type ParsedMail } from "mailparser";
 import { getMailboxSettings, saveMailboxSettings, disableMailboxConfig, type MailboxSettings } from "@/lib/mail/config";
 import { recordEmailInboundMessage } from "@/lib/tickets/service";
+import { saveAttachment } from "@/lib/attachments/storage";

 interface ListenerState {
  client: ImapFlow | null;
@@ -46,6 +47,21 @@ async function handleRawMessage(source: Buffer): Promise<void> {
    ...(Array.isArray(parsed.references) ? parsed.references : parsed.references ? [parsed.references] : []),
  ];

+  const attachmentInputs = [];
+  for (const [i, part] of (parsed.attachments ?? []).entries()) {
+    try {
+      const { storageKey, sizeBytes } = await saveAttachment(part.content);
+      attachmentInputs.push({
+        filename: part.filename || `attachment-${i + 1}`,
+        mimeType: part.contentType || "application/octet-stream",
+        sizeBytes,
+        storageKey,
+      });
+    } catch (err) {
+      console.error("[mail] failed to save attachment:", err);
+    }
+  }
+
  await recordEmailInboundMessage({
    fromEmail: from.address,
    fromName: from.name || from.address,
@@ -53,6 +69,7 @@ async function handleRawMessage(source: Buffer): Promise<void> {
    body: extractBody(parsed),
    messageId: parsed.messageId ?? null,
    referencedMessageIds: referencedIds,
+    attachments: attachmentInputs,
  });
 }

@@ -27,6 +27,7 @@ export async function sendTicketReplyEmail(params: {
  subject: string;
  body: string;
  inReplyTo: string | null;
+  attachment?: { filename: string; content: Buffer };
 }): Promise<string> {
  const settings = await getMailboxSettings();
  if (!settings) throw new Error("Email channel is not configured");
@@ -43,6 +44,7 @@ export async function sendTicketReplyEmail(params: {
    ...(params.inReplyTo
      ? { inReplyTo: params.inReplyTo, references: params.inReplyTo }
      : {}),
+    ...(params.attachment ? { attachments: [params.attachment] } : {}),
  });

  return messageId;
@@ -0,0 +1,23 @@
+import type { TagColor } from "@/lib/tickets/types";
+
+// Full literal class strings — Tailwind scans source text, not runtime-
+// interpolated names (see components/avatar.tsx for the same constraint).
+export const TAG_COLOR_CLASSES: Record<TagColor, string> = {
+  accent: "bg-accent-soft text-accent-soft-text",
+  success: "bg-success-soft text-success-soft-text",
+  warning: "bg-warning-soft text-warning-soft-text",
+  info: "bg-info-soft text-info-soft-text",
+  rose: "bg-rose-soft text-rose-soft-text",
+  danger: "bg-danger-soft text-danger-soft-text",
+};
+
+export const TAG_COLORS: TagColor[] = ["accent", "success", "warning", "info", "rose", "danger"];
+
+export const TAG_COLOR_LABELS: Record<TagColor, string> = {
+  accent: "Фиолетовый",
+  success: "Зелёный",
+  warning: "Жёлтый",
+  info: "Синий",
+  rose: "Розовый",
+  danger: "Красный",
+};
@@ -7,6 +7,7 @@ import {
  findOrCreateCustomerByTelegramChatId,
  recordChatInboundMessage,
 } from "@/lib/tickets/service";
+import { saveAttachment } from "@/lib/attachments/storage";

 interface BotState {
  bot: Telegraf | null;
@@ -29,6 +30,12 @@ function displayNameFromContext(ctx: Context): string {
  return ctx.chat && "title" in ctx.chat ? ctx.chat.title : "Telegram group";
 }

+async function downloadTelegramFile(bot: Telegraf, fileId: string): Promise<Buffer> {
+  const link = await bot.telegram.getFileLink(fileId);
+  const res = await fetch(link.href);
+  return Buffer.from(await res.arrayBuffer());
+}
+
 function attachHandlers(bot: Telegraf) {
  bot.on("text", async (ctx) => {
    const chatId = String(ctx.chat.id);
@@ -44,6 +51,55 @@ function attachHandlers(bot: Telegraf) {
      subjectForNewTicket: text.slice(0, 80),
    });
  });
+
+  bot.on("photo", async (ctx) => {
+    const chatId = String(ctx.chat.id);
+    const displayName = displayNameFromContext(ctx);
+    const customer = await findOrCreateCustomerByTelegramChatId(chatId, displayName);
+
+    const photo = ctx.message.photo[ctx.message.photo.length - 1];
+    const caption = ctx.message.caption || "[Фото]";
+    try {
+      const buffer = await downloadTelegramFile(bot, photo.file_id);
+      const { storageKey, sizeBytes } = await saveAttachment(buffer);
+      await recordChatInboundMessage({
+        customerId: customer.id,
+        channel: "telegram",
+        body: caption,
+        authorName: displayName,
+        subjectForNewTicket: caption.slice(0, 80),
+        attachments: [{ filename: `${photo.file_unique_id}.jpg`, mimeType: "image/jpeg", sizeBytes, storageKey }],
+      });
+    } catch (err) {
+      console.error("[telegram] failed to download photo:", err);
+    }
+  });
+
+  bot.on("document", async (ctx) => {
+    const chatId = String(ctx.chat.id);
+    const displayName = displayNameFromContext(ctx);
+    const customer = await findOrCreateCustomerByTelegramChatId(chatId, displayName);
+
+    const doc = ctx.message.document;
+    const filename = doc.file_name ?? doc.file_unique_id;
+    const caption = ctx.message.caption || `[Файл: ${filename}]`;
+    try {
+      const buffer = await downloadTelegramFile(bot, doc.file_id);
+      const { storageKey, sizeBytes } = await saveAttachment(buffer);
+      await recordChatInboundMessage({
+        customerId: customer.id,
+        channel: "telegram",
+        body: caption,
+        authorName: displayName,
+        subjectForNewTicket: caption.slice(0, 80),
+        attachments: [
+          { filename, mimeType: doc.mime_type ?? "application/octet-stream", sizeBytes, storageKey },
+        ],
+      });
+    } catch (err) {
+      console.error("[telegram] failed to download document:", err);
+    }
+  });
 }

 async function stopCurrentBot(): Promise<void> {
@@ -134,16 +190,33 @@ export async function getTelegramStatus() {
  };
 }

+/** The running bot if there is one, else a one-off client from stored config (e.g. right after a restart, before startup has resumed polling). */
+async function getActiveBotOrFallback(): Promise<Telegraf | null> {
+  if (state.bot) return state.bot;
+  const config = await db.query.telegramConfig.findFirst();
+  if (!config?.enabled) return null;
+  return new Telegraf(decryptCredential(config.botTokenEnc));
+}
+
 /** Sends an agent's reply back to the customer's Telegram chat. */
 export async function sendTelegramMessage(chatId: string, text: string): Promise<void> {
-  if (state.bot) {
-    await state.bot.telegram.sendMessage(chatId, text);
-    return;
+  const bot = await getActiveBotOrFallback();
+  await bot?.telegram.sendMessage(chatId, text);
+}
+
+/** Sends a file as a Telegram document (or photo, for images) with an optional caption. */
+export async function sendTelegramFile(
+  chatId: string,
+  file: { buffer: Buffer; filename: string; mimeType: string },
+  caption?: string,
+): Promise<void> {
+  const bot = await getActiveBotOrFallback();
+  if (!bot) return;
+
+  const source = { source: file.buffer, filename: file.filename };
+  if (file.mimeType.startsWith("image/")) {
+    await bot.telegram.sendPhoto(chatId, source, caption ? { caption } : undefined);
+  } else {
+    await bot.telegram.sendDocument(chatId, source, caption ? { caption } : undefined);
  }
-  // Bot isn't running in this process (e.g. right after a restart, before
-  // startup has resumed it) — fall back to a one-off client.
-  const config = await db.query.telegramConfig.findFirst();
-  if (!config?.enabled) return;
-  const bot = new Telegraf(decryptCredential(config.botTokenEnc));
-  await bot.telegram.sendMessage(chatId, text);
 }
@@ -0,0 +1,95 @@
+import { eq } from "drizzle-orm";
+import { db } from "@/lib/db/client";
+import { customers, tickets } from "@/lib/db/schema";
+import { recordAgentReply, recordInternalNote, getEmailThreadContext } from "@/lib/tickets/service";
+import { sendTelegramMessage, sendTelegramFile } from "@/lib/telegram/bot";
+import { sendTicketReplyEmail } from "@/lib/mail/smtp";
+
+interface AttachmentPayload {
+  filename: string;
+  mimeType: string;
+  sizeBytes: number;
+  storageKey: string;
+  buffer: Buffer;
+}
+
+/**
+ * Shared by the text-reply and attachment-upload admin routes: creates the
+ * message (public reply or internal note) and, for public replies, delivers
+ * it over the ticket's channel (email/Telegram). Not used for portal/widget
+ * replies — those never need outbound channel delivery.
+ */
+export async function deliverAgentMessage(params: {
+  ticketId: string;
+  agentId: string;
+  agentName: string;
+  body: string;
+  visibility: "public" | "internal";
+  attachment?: AttachmentPayload;
+}) {
+  const ticket = await db.query.tickets.findFirst({ where: eq(tickets.id, params.ticketId) });
+  if (!ticket) throw new Error("Ticket not found");
+
+  const attachmentInput = params.attachment
+    ? {
+        filename: params.attachment.filename,
+        mimeType: params.attachment.mimeType,
+        sizeBytes: params.attachment.sizeBytes,
+        storageKey: params.attachment.storageKey,
+      }
+    : undefined;
+
+  if (params.visibility === "internal") {
+    return recordInternalNote({
+      ticketId: params.ticketId,
+      agentId: params.agentId,
+      agentName: params.agentName,
+      body: params.body,
+      attachments: attachmentInput ? [attachmentInput] : undefined,
+    });
+  }
+
+  let emailMessageId: string | undefined;
+  if (ticket.channel === "email") {
+    const context = await getEmailThreadContext(params.ticketId);
+    if (context) {
+      emailMessageId = await sendTicketReplyEmail({
+        to: context.customerEmail,
+        subject: context.subject,
+        body: params.body,
+        inReplyTo: context.inReplyTo,
+        attachment: params.attachment
+          ? { filename: params.attachment.filename, content: params.attachment.buffer }
+          : undefined,
+      });
+    }
+  }
+
+  const result = await recordAgentReply({
+    ticketId: params.ticketId,
+    agentId: params.agentId,
+    agentName: params.agentName,
+    body: params.body,
+    emailMessageId,
+    attachments: attachmentInput ? [attachmentInput] : undefined,
+  });
+
+  if (result.ticket.channel === "telegram") {
+    const customer = await db.query.customers.findFirst({
+      where: eq(customers.id, result.ticket.customerId),
+    });
+    if (customer?.telegramChatId) {
+      if (params.attachment) {
+        await sendTelegramFile(
+          customer.telegramChatId,
+          { buffer: params.attachment.buffer, filename: params.attachment.filename, mimeType: params.attachment.mimeType },
+          params.body,
+        );
+      } else {
+        await sendTelegramMessage(customer.telegramChatId, params.body);
+      }
+    }
+  }
+
+  return result;
+}
@@ -1,10 +1,29 @@
-import { eq, and, ne, desc } from "drizzle-orm";
+import { eq, and, ne, or, like, desc, inArray } from "drizzle-orm";
 import { db } from "@/lib/db/client";
-import { customers, tickets, messages, users, widgetSites } from "@/lib/db/schema";
+import {
+  customers,
+  tickets,
+  messages,
+  users,
+  widgetSites,
+  attachments as attachmentsTable,
+  cannedResponses,
+  tags as tagsTable,
+  ticketTags,
+} from "@/lib/db/schema";
 import { publishTicketEvent } from "@/lib/events/bus";
-import type { TicketDTO, MessageDTO, TicketChannel, TicketStatus } from "@/lib/tickets/types";
+import type {
+  TicketDTO,
+  MessageDTO,
+  TicketChannel,
+  TicketStatus,
+  TagDTO,
+  AttachmentDTO,
+} from "@/lib/tickets/types";

-function toTicketDTO(ticket: typeof tickets.$inferSelect, customerName: string): TicketDTO {
+type AttachmentInput = { filename: string; mimeType: string; sizeBytes: number; storageKey: string };
+
+function toTicketDTO(ticket: typeof tickets.$inferSelect, customerName: string, tags: TagDTO[]): TicketDTO {
  return {
    id: ticket.id,
    subject: ticket.subject,
@@ -14,13 +33,14 @@ function toTicketDTO(ticket: typeof tickets.$inferSelect, customerName: string):
    customerId: ticket.customerId,
    customerName,
    assigneeId: ticket.assigneeId,
+    tags,
    createdAt: ticket.createdAt.getTime(),
    updatedAt: ticket.updatedAt.getTime(),
    lastMessageAt: ticket.lastMessageAt.getTime(),
  };
 }

-function toMessageDTO(message: typeof messages.$inferSelect): MessageDTO {
+function toMessageDTO(message: typeof messages.$inferSelect, attachments: AttachmentDTO[] = []): MessageDTO {
  return {
    id: message.id,
    ticketId: message.ticketId,
@@ -29,6 +49,7 @@ function toMessageDTO(message: typeof messages.$inferSelect): MessageDTO {
    body: message.body,
    direction: message.direction,
    visibility: message.visibility,
+    attachments,
    createdAt: message.createdAt.getTime(),
  };
 }
@@ -47,7 +68,45 @@ async function touchTicket(ticketId: string, patch: Partial<typeof tickets.$infe
  return ticket;
 }

-/** Inserts a message, bumps the ticket's lastMessageAt, and publishes both realtime events. */
+async function getTagsForTickets(ticketIds: string[]): Promise<Map<string, TagDTO[]>> {
+  const map = new Map<string, TagDTO[]>();
+  if (ticketIds.length === 0) return map;
+
+  const rows = await db
+    .select({ ticketId: ticketTags.ticketId, tag: tagsTable })
+    .from(ticketTags)
+    .innerJoin(tagsTable, eq(ticketTags.tagId, tagsTable.id))
+    .where(inArray(ticketTags.ticketId, ticketIds));
+
+  for (const row of rows) {
+    const list = map.get(row.ticketId) ?? [];
+    list.push({ id: row.tag.id, name: row.tag.name, color: row.tag.color });
+    map.set(row.ticketId, list);
+  }
+  return map;
+}
+
+async function getTagsForTicket(ticketId: string): Promise<TagDTO[]> {
+  const map = await getTagsForTickets([ticketId]);
+  return map.get(ticketId) ?? [];
+}
+
+async function getAttachmentsForMessages(messageIds: string[]): Promise<Map<string, AttachmentDTO[]>> {
+  const map = new Map<string, AttachmentDTO[]>();
+  if (messageIds.length === 0) return map;
+
+  const rows = await db.query.attachments.findMany({
+    where: inArray(attachmentsTable.messageId, messageIds),
+  });
+  for (const row of rows) {
+    const list = map.get(row.messageId) ?? [];
+    list.push({ id: row.id, filename: row.filename, mimeType: row.mimeType, sizeBytes: row.sizeBytes });
+    map.set(row.messageId, list);
+  }
+  return map;
+}
+
+/** Inserts a message (+ any attachments), bumps the ticket's lastMessageAt, and publishes both realtime events. */
 async function appendMessage(params: {
  ticket: typeof tickets.$inferSelect;
  ticketIsNew: boolean;
@@ -58,6 +117,7 @@ async function appendMessage(params: {
  direction: "in" | "out";
  visibility?: "public" | "internal";
  emailMessageId?: string;
+  attachments?: AttachmentInput[];
 }) {
  const [message] = await db
    .insert(messages)
@@ -73,9 +133,25 @@ async function appendMessage(params: {
    })
    .returning();

+  let attachmentDTOs: AttachmentDTO[] = [];
+  if (params.attachments && params.attachments.length > 0) {
+    const inserted = await db
+      .insert(attachmentsTable)
+      .values(params.attachments.map((a) => ({ messageId: message.id, ...a })))
+      .returning();
+    attachmentDTOs = inserted.map((a) => ({
+      id: a.id,
+      filename: a.filename,
+      mimeType: a.mimeType,
+      sizeBytes: a.sizeBytes,
+    }));
+  }
+
  const ticket = await touchTicket(params.ticket.id, { lastMessageAt: new Date() });
  const name = await customerName(ticket.customerId);
-  const dto = toTicketDTO(ticket, name);
+  const ticketTagsList = await getTagsForTicket(ticket.id);
+  const dto = toTicketDTO(ticket, name, ticketTagsList);
+  const messageDto = toMessageDTO(message, attachmentDTOs);

  publishTicketEvent({
    type: params.ticketIsNew ? "ticket.created" : "ticket.updated",
@@ -85,10 +161,10 @@ async function appendMessage(params: {
    type: "message.created",
    ticketId: ticket.id,
    customerId: ticket.customerId,
-    message: toMessageDTO(message),
+    message: messageDto,
  });

-  return { ticket: dto, message: toMessageDTO(message) };
+  return { ticket: dto, message: messageDto };
 }

 export async function findOrCreateCustomerByTelegramChatId(chatId: string, displayName: string) {
@@ -128,7 +204,7 @@ async function findTicketIdByEmailReferences(candidateMessageIds: string[]): Pro
  if (candidateMessageIds.length === 0) return null;

  const match = await db.query.messages.findFirst({
-    where: (m, { inArray }) => inArray(m.emailMessageId, candidateMessageIds),
+    where: (m, { inArray: inArrayOp }) => inArrayOp(m.emailMessageId, candidateMessageIds),
  });
  return match?.ticketId ?? null;
 }
@@ -153,6 +229,7 @@ export async function recordChatInboundMessage(params: {
  body: string;
  authorName: string;
  subjectForNewTicket: string;
+  attachments?: AttachmentInput[];
 }) {
  let ticket = await findOpenTicketForCustomer(params.customerId);
  let ticketIsNew = false;
@@ -179,6 +256,7 @@ export async function recordChatInboundMessage(params: {
    authorName: params.authorName,
    body: params.body,
    direction: "in",
+    attachments: params.attachments,
  });
 }

@@ -195,6 +273,7 @@ export async function recordEmailInboundMessage(params: {
  body: string;
  messageId: string | null;
  referencedMessageIds: string[];
+  attachments?: AttachmentInput[];
 }) {
  const customer = await findOrCreateCustomerByEmail(params.fromEmail, params.fromName);

@@ -227,6 +306,7 @@ export async function recordEmailInboundMessage(params: {
    body: params.body,
    direction: "in",
    emailMessageId: params.messageId ?? undefined,
+    attachments: params.attachments,
  });
 }

@@ -236,6 +316,7 @@ export async function appendCustomerReply(params: {
  customerId: string;
  authorName: string;
  body: string;
+  attachments?: AttachmentInput[];
 }) {
  const ticket = await db.query.tickets.findFirst({ where: eq(tickets.id, params.ticketId) });
  if (!ticket || ticket.customerId !== params.customerId) {
@@ -252,6 +333,7 @@ export async function appendCustomerReply(params: {
    authorName: params.authorName,
    body: params.body,
    direction: "in",
+    attachments: params.attachments,
  });
 }

@@ -262,6 +344,7 @@ export async function recordAgentReply(params: {
  agentName: string;
  body: string;
  emailMessageId?: string;
+  attachments?: AttachmentInput[];
 }) {
  const existing = await db.query.tickets.findFirst({ where: eq(tickets.id, params.ticketId) });
  if (!existing) throw new Error("Ticket not found");
@@ -278,6 +361,7 @@ export async function recordAgentReply(params: {
    body: params.body,
    direction: "out",
    emailMessageId: params.emailMessageId,
+    attachments: params.attachments,
  });
 }

@@ -292,6 +376,7 @@ export async function recordInternalNote(params: {
  agentId: string;
  agentName: string;
  body: string;
+  attachments?: AttachmentInput[];
 }) {
  const ticket = await db.query.tickets.findFirst({ where: eq(tickets.id, params.ticketId) });
  if (!ticket) throw new Error("Ticket not found");
@@ -305,6 +390,7 @@ export async function recordInternalNote(params: {
    body: params.body,
    direction: "out",
    visibility: "internal",
+    attachments: params.attachments,
  });
 }

@@ -313,26 +399,57 @@ export async function setTicketStatus(
  status: (typeof tickets.$inferSelect)["status"],
 ) {
  const ticket = await touchTicket(ticketId, { status });
-  const dto = toTicketDTO(ticket, await customerName(ticket.customerId));
+  const dto = toTicketDTO(ticket, await customerName(ticket.customerId), await getTagsForTicket(ticket.id));
  publishTicketEvent({ type: "ticket.updated", ticket: dto });
  return dto;
 }

 export async function assignTicket(ticketId: string, assigneeId: string | null) {
  const ticket = await touchTicket(ticketId, { assigneeId });
-  const dto = toTicketDTO(ticket, await customerName(ticket.customerId));
+  const dto = toTicketDTO(ticket, await customerName(ticket.customerId), await getTagsForTicket(ticket.id));
  publishTicketEvent({ type: "ticket.updated", ticket: dto });
  return dto;
 }

-export async function listTickets(): Promise<TicketDTO[]> {
+/**
+ * Optional `query` filters by ticket subject, customer name, or any message
+ * body in the thread — a plain LIKE search, not FTS5 (simpler and
+ * sufficient at this ticket volume; revisit if it gets slow).
+ */
+export async function listTickets(query?: string): Promise<TicketDTO[]> {
+  let matchingTicketIds: Set<string> | null = null;
+
+  const trimmed = query?.trim();
+  if (trimmed) {
+    const pattern = `%${trimmed}%`;
+    const bySubjectOrCustomer = await db
+      .select({ id: tickets.id })
+      .from(tickets)
+      .innerJoin(customers, eq(tickets.customerId, customers.id))
+      .where(or(like(tickets.subject, pattern), like(customers.displayName, pattern)));
+
+    const byMessageBody = await db
+      .selectDistinct({ ticketId: messages.ticketId })
+      .from(messages)
+      .where(like(messages.body, pattern));
+
+    matchingTicketIds = new Set([
+      ...bySubjectOrCustomer.map((r) => r.id),
+      ...byMessageBody.map((r) => r.ticketId),
+    ]);
+  }
+
  const rows = await db
    .select({ ticket: tickets, customerName: customers.displayName })
    .from(tickets)
    .innerJoin(customers, eq(tickets.customerId, customers.id))
    .orderBy(desc(tickets.lastMessageAt));

-  return rows.map((row) => toTicketDTO(row.ticket, row.customerName));
+  const idsToKeep = matchingTicketIds;
+  const filteredRows = idsToKeep ? rows.filter((r) => idsToKeep.has(r.ticket.id)) : rows;
+
+  const tagsMap = await getTagsForTickets(filteredRows.map((r) => r.ticket.id));
+  return filteredRows.map((row) => toTicketDTO(row.ticket, row.customerName, tagsMap.get(row.ticket.id) ?? []));
 }

 export async function getTicketWithMessages(ticketId: string) {
@@ -349,10 +466,12 @@ export async function getTicketWithMessages(ticketId: string) {
    where: eq(messages.ticketId, ticketId),
    orderBy: messages.createdAt,
  });
+  const attachmentsMap = await getAttachmentsForMessages(ticketMessages.map((m) => m.id));
+  const ticketTagsList = await getTagsForTicket(ticketId);

  return {
-    ticket: toTicketDTO(row[0].ticket, row[0].customerName),
-    messages: ticketMessages.map(toMessageDTO),
+    ticket: toTicketDTO(row[0].ticket, row[0].customerName, ticketTagsList),
+    messages: ticketMessages.map((m) => toMessageDTO(m, attachmentsMap.get(m.id) ?? [])),
  };
 }

@@ -393,7 +512,8 @@ export async function listTicketsForCustomer(customerId: string): Promise<Ticket
    .where(eq(tickets.customerId, customerId))
    .orderBy(desc(tickets.lastMessageAt));

-  return rows.map((row) => toTicketDTO(row.ticket, row.customerName));
+  const tagsMap = await getTagsForTickets(rows.map((r) => r.ticket.id));
+  return rows.map((row) => toTicketDTO(row.ticket, row.customerName, tagsMap.get(row.ticket.id) ?? []));
 }

 /**
@@ -485,6 +605,71 @@ export async function createManualTicket(params: {
  });
 }

+/** Auth context for serving a stored file — null if the attachment/message/ticket chain is broken. */
+export async function getAttachmentContext(attachmentId: string) {
+  const attachment = await db.query.attachments.findFirst({ where: eq(attachmentsTable.id, attachmentId) });
+  if (!attachment) return null;
+
+  const message = await db.query.messages.findFirst({ where: eq(messages.id, attachment.messageId) });
+  if (!message) return null;
+
+  const ticket = await db.query.tickets.findFirst({ where: eq(tickets.id, message.ticketId) });
+  if (!ticket) return null;
+
+  return { attachment, message, ticket };
+}
+
+export async function listCannedResponses() {
+  return db.query.cannedResponses.findMany({ orderBy: cannedResponses.title });
+}
+
+export async function createCannedResponse(title: string, body: string) {
+  const [response] = await db.insert(cannedResponses).values({ title, body }).returning();
+  return response;
+}
+
+export async function updateCannedResponse(id: string, title: string, body: string) {
+  const [response] = await db
+    .update(cannedResponses)
+    .set({ title, body })
+    .where(eq(cannedResponses.id, id))
+    .returning();
+  return response;
+}
+
+export async function deleteCannedResponse(id: string) {
+  await db.delete(cannedResponses).where(eq(cannedResponses.id, id));
+}
+
+export async function listTags(): Promise<TagDTO[]> {
+  const rows = await db.query.tags.findMany({ orderBy: tagsTable.name });
+  return rows.map((r) => ({ id: r.id, name: r.name, color: r.color }));
+}
+
+export async function createTag(name: string, color: TagDTO["color"]) {
+  const [tag] = await db.insert(tagsTable).values({ name, color }).returning();
+  return tag;
+}
+
+export async function deleteTag(id: string) {
+  await db.delete(tagsTable).where(eq(tagsTable.id, id));
+}
+
+/** Full replace — the ticket ends up tagged with exactly this set. */
+export async function setTicketTags(ticketId: string, tagIds: string[]): Promise<TagDTO[]> {
+  await db.delete(ticketTags).where(eq(ticketTags.ticketId, ticketId));
+  if (tagIds.length > 0) {
+    await db.insert(ticketTags).values(tagIds.map((tagId) => ({ ticketId, tagId })));
+  }
+
+  const ticket = await db.query.tickets.findFirst({ where: eq(tickets.id, ticketId) });
+  if (ticket) {
+    const dto = toTicketDTO(ticket, await customerName(ticket.customerId), await getTagsForTicket(ticketId));
+    publishTicketEvent({ type: "ticket.updated", ticket: dto });
+  }
+  return getTagsForTicket(ticketId);
+}
+
 export interface StatsOverview {
  totalTickets: number;
  openTickets: number;
@@ -4,6 +4,13 @@ export type TicketChannel = "telegram" | "portal" | "manual" | "email" | "widget
 export type MessageAuthorType = "customer" | "agent" | "system";
 export type MessageDirection = "in" | "out";
 export type MessageVisibility = "public" | "internal";
+export type TagColor = "accent" | "success" | "warning" | "info" | "rose" | "danger";
+
+export interface TagDTO {
+  id: string;
+  name: string;
+  color: TagColor;
+}

 export interface TicketDTO {
  id: string;
@@ -14,11 +21,19 @@ export interface TicketDTO {
  customerId: string;
  customerName: string;
  assigneeId: string | null;
+  tags: TagDTO[];
  createdAt: number;
  updatedAt: number;
  lastMessageAt: number;
 }

+export interface AttachmentDTO {
+  id: string;
+  filename: string;
+  mimeType: string;
+  sizeBytes: number;
+}
+
 export interface MessageDTO {
  id: string;
  ticketId: string;
@@ -27,5 +42,6 @@ export interface MessageDTO {
  body: string;
  direction: MessageDirection;
  visibility: MessageVisibility;
+  attachments: AttachmentDTO[];
  createdAt: number;
 }