From f0d45ca9f1bfe7a9a249b28b63f2728cc76c5f14 Mon Sep 17 00:00:00 2001
From: Mikhail <misha_mst@mail.ru>
Date: Sat, 29 Aug 2026 14:29:39 +0300
Subject: [PATCH] Clarify chat message roles and timing

---
 cmd/creator-web/static/assets/chat.css |  7 ++++++-
 cmd/creator-web/static/assets/chat.js  | 17 ++++++++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/cmd/creator-web/static/assets/chat.css b/cmd/creator-web/static/assets/chat.css
index c2b3f7c..0fe6483 100644
--- a/cmd/creator-web/static/assets/chat.css
+++ b/cmd/creator-web/static/assets/chat.css
@@ -69,9 +69,14 @@ textarea { resize: vertical; min-height: 84px; max-height: 240px; padding: 14px;
 .surface-panel { min-height: 0; position: relative; overflow-y: auto; }
 .active-panel { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; min-height: 0; background: radial-gradient(circle at 50% 0%, rgba(201, 168, 95, .045), transparent 42%); }
 .messages { width: min(100%, 920px); min-height: 0; margin: 0 auto; padding: clamp(28px, 5vh, 56px) 18px 24px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; scrollbar-color: #39483f transparent; }
-.message { max-width: min(720px, 92%); padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); line-height: 1.45; white-space: pre-wrap; }
+.message { max-width: min(720px, 92%); padding: 13px 16px 14px; border: 1px solid var(--line); border-radius: var(--radius); line-height: 1.45; }
 .message.user { align-self: flex-end; background: #18221c; border-color: #3a493d; }
 .message.assistant { align-self: flex-start; background: #111a15; box-shadow: 0 8px 20px rgba(0, 0, 0, .12); }
+.message-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 8px; }
+.message-role { color: var(--signal); font: 600 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
+.message.user .message-role { color: var(--good); }
+.message-time { color: #68776d; font: 9px/1 var(--mono); }
+.message-content { white-space: pre-wrap; overflow-wrap: anywhere; }
 .message small { display: block; margin-top: 8px; color: var(--muted); font: 10px/1 var(--mono); text-transform: uppercase; }
 .composer { width: min(100%, 920px); margin: 0 auto; padding: 10px 18px 8px; display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 12px; border-top: 1px solid rgba(42, 53, 47, .85); background: linear-gradient(var(--base), rgba(11, 16, 14, .98)); }
 .composer-input-wrap { min-width: 0; border: 1px solid #3a493f; border-radius: 5px; background: #101813; transition: border-color .15s ease, box-shadow .15s ease; }
diff --git a/cmd/creator-web/static/assets/chat.js b/cmd/creator-web/static/assets/chat.js
index cb5e35c..6917f30 100644
--- a/cmd/creator-web/static/assets/chat.js
+++ b/cmd/creator-web/static/assets/chat.js
@@ -115,7 +115,22 @@ function showLogin() {
 function appendMessage(kind, text, meta = "", media = null) {
   const node = document.createElement("div");
   node.className = `message ${kind}`;
-  node.textContent = text;
+  const head = document.createElement("div");
+  head.className = "message-head";
+  const role = document.createElement("strong");
+  role.className = "message-role";
+  role.textContent = kind === "user" ? "Вы" : "Домовой";
+  const time = document.createElement("time");
+  time.className = "message-time";
+  const now = new Date();
+  time.dateTime = now.toISOString();
+  time.textContent = now.toLocaleTimeString("ru-RU", {hour: "2-digit", minute: "2-digit"});
+  head.append(role, time);
+  node.appendChild(head);
+  const content = document.createElement("div");
+  content.className = "message-content";
+  content.textContent = text;
+  node.appendChild(content);
   if (meta) {
     const small = document.createElement("small");
     small.textContent = meta;