Design overhaul, stats page, internal notes

Design: Onest+Unbounded font pairing (Cyrillic-verified, replacing plain
Golos Text), manual light/dark toggle wired to the data-theme cascade
already built in MVP-1, refreshed palette + new chart-mark tokens
(CVD-validated via the dataviz skill's validator), colored avatar
initials, per-channel colored badges, favicon, nicer empty states.

Stats: /stats page — status/channel breakdown, 14-day ticket volume,
avg first-response time, per-agent open-ticket workload. Colors and
chart forms follow the dataviz skill's procedure (categorical order
re-stepped to clear the CVD adjacency check in both themes).

Internal notes: messages.visibility ("public"/"internal") column.
Agent-only notes never reach customer-facing reads (getTicketForCustomer)
or the customer SSE stream (/api/portal/events, reused by the widget) —
fixed at both the initial-fetch and live-delivery layers.

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

src/app/(admin)/tickets/[id]/ticket-thread.tsx

@@ -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, StickyNote } from "lucide-react";
 import { useTicketEvents } from "@/lib/events/use-ticket-events";
 import { formatRelativeTime } from "@/lib/format";
+import { Avatar } from "@/components/avatar";
 import type { TicketDTO, MessageDTO, TicketStatus } from "@/lib/tickets/types";
 
 const STATUS_LABEL: Record<TicketStatus, string> = {
@@ -27,6 +28,7 @@ export function TicketThread({
   const [ticket, setTicket] = useState(initialTicket);
   const [messages, setMessages] = useState(initialMessages);
   const [draft, setDraft] = useState("");
+  const [visibility, setVisibility] = useState<"public" | "internal">("public");
   const [sending, setSending] = useState(false);
   const bottomRef = useRef<HTMLDivElement>(null);
 
@@ -49,7 +51,7 @@ export function TicketThread({
     const res = await fetch(`/api/tickets/${ticket.id}/messages`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ body: draft }),
+      body: JSON.stringify({ body: draft, visibility }),
     });
     setSending(false);
     if (res.ok) setDraft("");
@@ -87,8 +89,11 @@ export function TicketThread({
             <ArrowLeft size={13} />
             Дашборд
           </Link>
-          <h1 className="truncate text-lg font-bold">{ticket.subject}</h1>
-          <p className="text-sm text-text-muted">{ticket.customerName}</p>
+          <h1 className="truncate font-display text-lg font-bold">{ticket.subject}</h1>
+          <span className="flex items-center gap-1.5">
+            <Avatar name={ticket.customerName} size={18} />
+            <span className="text-sm text-text-muted">{ticket.customerName}</span>
+          </span>
         </div>
 
         <div className="flex shrink-0 items-center gap-2">
@@ -127,23 +132,53 @@ export function TicketThread({
         <div ref={bottomRef} />
       </div>
 
-      <div className="mt-3 flex gap-2">
-        <textarea
-          value={draft}
-          onChange={(e) => setDraft(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === "Enter" && !e.shiftKey) {
-              e.preventDefault();
-              sendReply();
-            }
-          }}
-          rows={2}
-          placeholder="Ответить клиенту…"
-          className="flex-1 resize-none rounded-md border border-border bg-surface px-3 py-2 text-sm outline-none focus:border-accent"
-        />
-        <button onClick={sendReply} disabled={sending || !draft.trim()} className="btn btn-primary self-end">
-          <Send size={15} />
-        </button>
+      <div className="mt-3">
+        <div className="mb-1.5 flex gap-1">
+          <button
+            type="button"
+            onClick={() => setVisibility("public")}
+            className={`rounded-full px-2.5 py-1 text-xs font-medium transition-colors ${
+              visibility === "public" ? "bg-accent-soft text-accent-soft-text" : "text-text-faint hover:text-text-muted"
+            }`}
+          >
+            Ответ клиенту
+          </button>
+          <button
+            type="button"
+            onClick={() => setVisibility("internal")}
+            className={`rounded-full px-2.5 py-1 text-xs font-medium transition-colors ${
+              visibility === "internal" ? "bg-warning-soft text-warning-soft-text" : "text-text-faint hover:text-text-muted"
+            }`}
+          >
+            Заметка для команды
+          </button>
+        </div>
+        <div className="flex gap-2">
+          <textarea
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault();
+                sendReply();
+              }
+            }}
+            rows={2}
+            placeholder={visibility === "internal" ? "Заметка — клиент её не увидит…" : "Ответить клиенту…"}
+            className={`flex-1 resize-none rounded-md border px-3 py-2 text-sm outline-none ${
+              visibility === "internal"
+                ? "border-warning-soft-text/30 bg-warning-soft focus:border-warning"
+                : "border-border bg-surface focus:border-accent"
+            }`}
+          />
+          <button
+            onClick={sendReply}
+            disabled={sending || !draft.trim()}
+            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} />}
+          </button>
+        </div>
       </div>
     </div>
   );
@@ -159,6 +194,27 @@ function MessageBubble({ message }: { message: MessageDTO }) {
     );
   }
 
+  if (message.visibility === "internal") {
+    return (
+      <motion.div
+        layout
+        initial={{ opacity: 0, y: 8 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.18 }}
+        className="mb-3 rounded-lg border border-dashed border-warning-soft-text/40 bg-warning-soft px-3 py-2"
+      >
+        <p className="mb-1 flex items-center gap-1.5 text-[11px] font-semibold text-warning-soft-text">
+          <StickyNote size={11} />
+          Внутренняя заметка
+        </p>
+        <p className="mb-1 whitespace-pre-wrap text-sm">{message.body}</p>
+        <p className="text-[11px] text-warning-soft-text/80">
+          {message.authorName} · {formatRelativeTime(message.createdAt)}
+        </p>
+      </motion.div>
+    );
+  }
+
   return (
     <motion.div
       layout