cmd/creator-web/static/assets/chat.css

@@ -29,13 +29,13 @@ textarea { resize: vertical; min-height: 84px; max-height: 240px; padding: 14px;
 .login-form button, .composer button { border: 0; color: #11150f; background: var(--signal); font-weight: 700; }
 .login-form button { width: 100%; height: 50px; margin-top: 18px; }
 #login-error { min-height: 20px; color: var(--bad); font-size: 13px; }
-.chat-view { min-height: 100vh; display: grid; grid-template-rows: 64px minmax(0, 1fr); }
-.chat-header { display: flex; align-items: center; gap: 18px; padding: 0 22px; border-bottom: 1px solid var(--line); background: rgba(16, 23, 20, .96); }
+.chat-view { height: 100vh; min-height: 0; display: grid; grid-template-rows: 64px minmax(0, 1fr); overflow: hidden; }
+.chat-header { min-width: 0; display: flex; align-items: center; gap: 14px; padding: 0 22px; border-bottom: 1px solid var(--line); background: rgba(16, 23, 20, .98); }
 .chat-header a { color: var(--ink); text-decoration: none; font: 400 24px/1 var(--serif); }
-.chat-header span { color: var(--muted); font: 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
-#active-focus { margin-left: auto; color: var(--good); }
+#active-focus { color: var(--good); }
 .cognitive-status { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
 .chat-header .cognitive-status { width: auto; height: auto; padding: 0; border: 0; background: transparent; color: var(--muted); font: 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
+.chat-header .cognitive-status { max-width: min(30vw, 320px); overflow: hidden; text-overflow: ellipsis; }
 .cognitive-status::before { content: ""; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--signal); }
 .cognitive-status[data-state="available"] { color: var(--good); }
 .cognitive-status[data-state="available"]::before { background: var(--good); }
@@ -43,23 +43,43 @@ textarea { resize: vertical; min-height: 84px; max-height: 240px; padding: 14px;
 .cognitive-status[data-state="unavailable"]::before { background: var(--bad); }
 .cognitive-console-link { color: var(--signal); font: 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
 .chat-header button { width: 38px; height: 38px; border: 1px solid var(--line); background: transparent; }
-.human-nav { display: flex; align-items: center; gap: 8px; }
+.human-nav { display: grid; gap: 8px; }
 .nav-tab, .operator-link { height: 34px; padding: 0 12px; display: inline-flex; align-items: center; border: 1px solid var(--line); color: var(--muted); background: #0b110e; text-decoration: none; font: 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
+.chat-left .nav-tab { height: auto; min-height: 58px; padding: 10px 12px; display: grid; grid-template-columns: 28px 1fr; gap: 2px 8px; align-items: center; text-align: left; }
+.chat-left .nav-tab b { grid-row: span 2; color: var(--signal); font: 11px/1 var(--mono); }
+.chat-left .nav-tab span { color: var(--ink); font: 600 13px/1 var(--sans); text-transform: none; letter-spacing: 0; }
+.chat-left .nav-tab small { color: var(--muted); font: 10px/1 var(--mono); text-transform: none; letter-spacing: 0; }
 .nav-tab.active { color: #11150f; border-color: var(--signal); background: var(--signal); }
 .operator-link { color: var(--good); }
-.surface-panel { min-height: 0; position: relative; }
-.active-panel { display: grid; min-height: 0; }
-.messages { width: min(100%, 920px); margin: 0 auto; padding: 28px 18px 120px; display: flex; flex-direction: column; gap: 14px; overflow: auto; }
+.chat-header > .operator-link { flex: 0 0 auto; }
+.chat-layout { min-height: 0; height: 100%; display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(250px, 320px); }
+.chat-side { min-width: 0; min-height: 0; padding: 28px 20px; overflow-y: auto; background: #0e1512; }
+.chat-left { border-right: 1px solid var(--line); }
+.chat-right { border-left: 1px solid var(--line); }
+.side-intro h1, .side-intro h2 { margin: 12px 0; font: 400 clamp(28px, 2.5vw, 40px)/.95 var(--serif); letter-spacing: -.03em; }
+.side-intro p:not(.side-index) { color: var(--muted); line-height: 1.5; }
+.side-index, .side-focus span, .side-note span, .ai-info-card span { color: var(--signal); font: 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
+.side-focus, .side-note, .ai-info-card { margin-top: 28px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
+.side-focus strong, .side-note strong, .ai-info-card strong { display: block; margin-top: 9px; color: var(--ink); font: 600 14px/1.3 var(--sans); }
+.side-note small, .ai-info-card p, .ai-data-form small { display: block; margin-top: 9px; color: var(--muted); line-height: 1.45; }
+.chat-main { min-width: 0; min-height: 0; overflow: hidden; display: grid; }
+.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; }
+.messages { width: min(100%, 920px); min-height: 0; margin: 0 auto; padding: 28px 18px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
 .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.user { align-self: flex-end; background: #151e1a; }
 .message.assistant { align-self: flex-start; background: #0f1613; }
 .message small { display: block; margin-top: 8px; color: var(--muted); font: 10px/1 var(--mono); text-transform: uppercase; }
-.composer { position: sticky; bottom: 0; width: min(100%, 920px); margin: 0 auto; padding: 16px 18px 20px; display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 12px; background: linear-gradient(transparent, var(--base) 20%); }
+.composer { width: min(100%, 920px); margin: 0 auto; padding: 16px 18px 10px; display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 12px; background: linear-gradient(transparent, var(--base) 20%); }
 .composer button { height: 48px; align-self: end; }
 .composer button:disabled { cursor: wait; filter: saturate(.3); }
 .conversation-starters { width: min(100%, 920px); margin: -4px auto 0; padding: 0 18px 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font: 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
 .conversation-starters button { min-height: 32px; padding: 0 10px; border: 1px solid var(--line); color: var(--ink); background: #101814; font: 10px/1 var(--mono); }
 .conversation-starters button:hover, .conversation-starters button:focus-visible { border-color: var(--signal); color: var(--signal); outline: none; }
+.ai-data-form { margin-top: 24px; }
+.ai-data-form textarea { min-height: 150px; resize: vertical; }
+.ai-data-form button { width: 100%; min-height: 42px; margin-top: 12px; border: 0; color: #11150f; background: var(--signal); font-weight: 700; }
+.side-console-link { display: flex; justify-content: space-between; margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--signal) !important; font: 11px/1.3 var(--mono) !important; text-transform: uppercase; letter-spacing: .06em; }
 .attention-surface, .history-surface { width: min(100%, 920px); margin: 0 auto; padding: 34px 18px; align-content: start; gap: 18px; }
 .surface-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); padding-bottom: 16px; }
 .surface-heading p { margin: 0; font: 400 36px/.95 var(--serif); }
@@ -78,13 +98,23 @@ textarea { resize: vertical; min-height: 84px; max-height: 240px; padding: 14px;
 .empty-state { margin: 24px 0 0; color: var(--muted); }
 .empty-state.error { color: var(--bad); }
 @media (max-width: 640px) {
+  .chat-view { height: auto; min-height: 100vh; overflow: visible; display: block; }
   .composer { grid-template-columns: 1fr; }
   .composer button { width: 100%; }
   .conversation-starters { align-items: stretch; }
   .conversation-starters span { width: 100%; }
   .chat-header { gap: 10px; padding: 0 12px; }
-  .chat-header span { display: none; }
-  .chat-header .cognitive-status { display: inline-flex; }
-  .human-nav { overflow-x: auto; }
+  .chat-header .cognitive-status { display: inline-flex; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
+  .chat-layout { height: auto; display: block; }
+  .chat-side, .chat-main { min-height: auto; max-height: none; overflow: visible; }
+  .chat-left, .chat-right { border: 0; border-bottom: 1px solid var(--line); }
+  .chat-main { height: 70vh; min-height: 520px; }
+  .chat-left { padding-bottom: 20px; }
+  .chat-right { padding-top: 20px; }
   .operator-link, .nav-tab { padding: 0 9px; }
 }
+@media (min-width: 641px) and (max-width: 1100px) {
+  .chat-layout { grid-template-columns: 210px minmax(0, 1fr) 245px; }
+  .chat-side { padding-inline: 14px; }
+  .side-intro h1, .side-intro h2 { font-size: 30px; }
+}

cmd/creator-web/static/assets/chat.js

@@ -15,6 +15,8 @@ const refreshToday = document.querySelector("#refresh-today");
 const historyList = document.querySelector("#history-list");
 const navTabs = Array.from(document.querySelectorAll(".nav-tab"));
 const conversationStarters = Array.from(document.querySelectorAll("[data-starter]"));
+const aiDataForm = document.querySelector("#ai-data-form");
+const aiDataInput = document.querySelector("#ai-data");
 
 let token = sessionStorage.getItem("domovoy.chat.token") || "";
 let conversationID = sessionStorage.getItem("domovoy.chat.conversation") || "";
@@ -293,6 +295,15 @@ for (const starter of conversationStarters) {
 
 if (refreshToday) refreshToday.addEventListener("click", loadToday);
 if (cognitiveStatus) cognitiveStatus.addEventListener("click", loadCognitiveStatus);
+if (aiDataForm) {
+  aiDataForm.addEventListener("submit", async (event) => {
+    event.preventDefault();
+    const details = aiDataInput.value.trim();
+    if (!details || sendButton.disabled) return;
+    aiDataInput.value = "";
+    await sendChatMessage(`Передаю сведения о локальном ИИ для текущего разговора:\n${details}`);
+  });
+}
 
 logoutButton.addEventListener("click", () => {
   token = "";

cmd/creator-web/static/assets/console.css

@@ -65,6 +65,7 @@ button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-
 .wordmark strong { font: 400 20px/1 var(--serif); }
 .wordmark small { margin-top: 4px; color: var(--muted); font: 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
 .topbar-actions { display: flex; align-items: center; gap: 10px; }
+.chat-return-link { color: var(--signal); text-decoration: none; font: 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
 .topbar-nav { display: flex; align-items: center; gap: 4px; margin-right: 8px; }
 .topbar-nav a { padding: 9px 10px; color: var(--muted); text-decoration: none; font: 600 9px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
 .topbar-nav a:hover, .topbar-nav a:focus-visible { color: var(--ink); background: var(--panel-high); outline: 0; }
@@ -371,6 +372,7 @@ html[data-reduced-motion="true"] *, html[data-reduced-motion="true"] *::before,
   .console { display: block; }
   .topbar { height: 66px; padding: 0 14px; }
   .wordmark small, .connection, .text-button { display: none; }
+  .chat-return-link { display: inline-block; }
   .topbar-nav { display: none; }
   .context-rail { padding: 24px 18px; border-right: 0; border-bottom: 1px solid var(--line); }
   .rail-copy { max-width: 48ch; }

cmd/creator-web/static/chat.html

@@ -26,45 +26,64 @@
     <section id="chat-view" class="chat-view" hidden>
       <header class="chat-header">
         <a href="/" aria-label="Домовой">Домовой</a>
-        <nav class="human-nav" aria-label="Разделы Домового">
-          <button class="nav-tab active" data-tab="chat-panel" type="button">Чат</button>
-          <button class="nav-tab" data-tab="today-panel" type="button">Сегодня</button>
-          <button class="nav-tab" data-tab="history-panel" type="button">История</button>
-          <a href="/admin" class="operator-link">Консоль</a>
-        </nav>
-        <span id="active-focus">фокус: не выбран</span>
         <button id="cognitive-status" class="cognitive-status" data-state="checking" type="button" role="status" aria-live="polite" title="Проверить канал ещё раз">проверяю канал мышления</button>
         <a id="cognitive-console-link" class="cognitive-console-link" href="/admin" hidden>настроить в консоли</a>
-        <span id="session-state">сессия активна</span>
+        <a href="/admin" class="operator-link">Консоль</a>
         <button id="logout" type="button" aria-label="Выйти">↗</button>
       </header>
-      <section id="chat-panel" class="surface-panel active-panel">
-        <div id="messages" class="messages" aria-live="polite"></div>
-        <form id="chat-form" class="composer">
-          <textarea id="message" rows="3" maxlength="16384" placeholder="Напишите Домовому обычное сообщение..." required></textarea>
-          <button id="send" type="submit">Отправить</button>
-        </form>
-        <div class="conversation-starters" aria-label="Частые вопросы">
-          <span>Можно начать так:</span>
-          <button type="button" data-starter="Проверь локальный канал мышления">Проверь канал</button>
-          <button type="button" data-starter="Что сейчас доступно?">Что доступно?</button>
-          <button type="button" data-starter="Хочу изменить настройку локальной модели">Изменить настройку</button>
-        </div>
-      </section>
-      <section id="today-panel" class="surface-panel attention-surface" hidden>
-        <div class="surface-heading">
-          <p>Сегодня / внимание</p>
-          <button id="refresh-today" type="button">Обновить</button>
-        </div>
-        <div id="today-list" class="attention-list"></div>
-      </section>
-      <section id="history-panel" class="surface-panel history-surface" hidden>
-        <div class="surface-heading">
-          <p>История</p>
-          <span>Последние сообщения текущего окна</span>
-        </div>
-        <div id="history-list" class="history-list"></div>
-      </section>
+      <div class="chat-layout">
+        <aside class="chat-side chat-left" aria-label="Навигация и текущий фокус">
+          <div class="side-intro">
+            <p class="side-index">01 / РАЗГОВОР</p>
+            <h1>Домовой рядом</h1>
+            <p>Пишите обычными словами. Настройки и сведения можно передать прямо в текущий разговор.</p>
+          </div>
+          <div class="side-focus">
+            <span>ТЕКУЩИЙ ФОКУС</span>
+            <strong id="active-focus">не выбран</strong>
+          </div>
+          <nav class="human-nav" aria-label="Разделы Домового">
+            <button class="nav-tab active" data-tab="chat-panel" type="button"><b>01</b><span>Чат</span><small>живой разговор</small></button>
+            <button class="nav-tab" data-tab="today-panel" type="button"><b>02</b><span>Сегодня</span><small>что требует внимания</small></button>
+            <button class="nav-tab" data-tab="history-panel" type="button"><b>03</b><span>История</span><small>это окно разговора</small></button>
+          </nav>
+          <div class="side-note"><span>СЕССИЯ</span><strong id="session-state">активна</strong><small>Сведения сохраняются в текущем разговоре.</small></div>
+        </aside>
+        <main class="chat-main">
+          <section id="chat-panel" class="surface-panel active-panel">
+            <div id="messages" class="messages" aria-live="polite"></div>
+            <form id="chat-form" class="composer">
+              <textarea id="message" rows="3" maxlength="16384" placeholder="Напишите Домовому обычное сообщение..." required></textarea>
+              <button id="send" type="submit">Отправить</button>
+            </form>
+            <div class="conversation-starters" aria-label="Частые вопросы">
+              <span>Можно начать так:</span>
+              <button type="button" data-starter="Проверь локальный канал мышления">Проверь канал</button>
+              <button type="button" data-starter="Что сейчас доступно?">Что доступно?</button>
+              <button type="button" data-starter="Хочу изменить настройку локальной модели">Изменить настройку</button>
+            </div>
+          </section>
+          <section id="today-panel" class="surface-panel attention-surface" hidden>
+            <div class="surface-heading"><p>Сегодня / внимание</p><button id="refresh-today" type="button">Обновить</button></div>
+            <div id="today-list" class="attention-list"></div>
+          </section>
+          <section id="history-panel" class="surface-panel history-surface" hidden>
+            <div class="surface-heading"><p>История</p><span>Последние сообщения текущего окна</span></div>
+            <div id="history-list" class="history-list"></div>
+          </section>
+        </main>
+        <aside class="chat-side chat-right" aria-label="Состояние и сведения об ИИ">
+          <div class="side-intro"><p class="side-index">02 / ИНФОРМАЦИЯ</p><h2>Канал мышления</h2><p>Домовой видит только подтверждённое состояние канала. Саму модель он не угадывает.</p></div>
+          <div class="ai-info-card"><span>ЧТО МОЖНО ПЕРЕДАТЬ</span><strong>Описание ИИ</strong><p>Название, назначение, ограничения или заметки о локальной модели. Не вставляйте пароли, токены и ключи.</p></div>
+          <form id="ai-data-form" class="ai-data-form">
+            <label for="ai-data">Данные для текущего разговора</label>
+            <textarea id="ai-data" rows="8" maxlength="12000" placeholder="Например: локальная модель нужна для коротких ответов на русском; контекст ограничен; внешняя сеть запрещена."></textarea>
+            <button type="submit">Передать Домовому</button>
+            <small>Это отправится как обычное сообщение в чат.</small>
+          </form>
+          <a class="side-console-link" href="/admin">Открыть консоль настройки <span>→</span></a>
+        </aside>
+      </div>
     </section>
   </main>
   <script src="/assets/chat.js"></script>

cmd/creator-web/static/index.html

@@ -44,6 +44,7 @@
         <span><strong>Домовой</strong><small>консоль создателя</small></span>
       </a>
       <div class="topbar-actions">
+        <a class="chat-return-link" href="/">← Чат с Домовым</a>
         <span id="connection-state" class="connection"><i></i>система доступна</span>
         <nav class="topbar-nav" aria-label="Разделы кабинета">
           <a href="#overview">Обзор</a>

dev/ACTIVE_TASK.json

@@ -1,5 +1,5 @@
 {
-  "task_file": "dev/tasks/DEV-000079-chat-conversation-starters.json",
-  "task_id": "DEV-000079",
+  "task_file": "dev/tasks/DEV-000080-chat-three-column-layout.json",
+  "task_id": "DEV-000080",
   "task_revision": 1
 }

dev/tasks/DEV-000080-chat-three-column-layout.json

@@ -0,0 +1,41 @@
+{
+  "task_id": "DEV-000080",
+  "task_revision": 1,
+  "architecture_revision": "DEV-000073-baseline",
+  "base_repo_revision": "47fd0c4b027ff5ab2781b26c5bc4f7ddc45d961f",
+  "risk_tier": "E",
+  "intent": "Replace the unstable single-column chat presentation with a fixed three-column layout, explicit console return, and a safe human path for passing AI information into the current conversation.",
+  "requirement_ids": [
+    "Header controls keep stable dimensions",
+    "Desktop chat has independently scrolling left, center and right regions",
+    "Console has an explicit return-to-chat action",
+    "User can pass non-secret AI notes as an ordinary chat message",
+    "Mobile layout remains usable"
+  ],
+  "allowed_change_scope": {
+    "modules": ["cmd/creator-web"],
+    "paths": [
+      "cmd/creator-web/chat_test.go",
+      "cmd/creator-web/static/index.html",
+      "cmd/creator-web/static/chat.html",
+      "cmd/creator-web/static/assets/chat.css",
+      "cmd/creator-web/static/assets/chat.js",
+      "cmd/creator-web/static/assets/console.css",
+      "dev/ACTIVE_TASK.json",
+      "dev/tasks/DEV-000080-chat-three-column-layout.json"
+    ]
+  },
+  "forbidden_change_scope": {"paths": ["architecture/**", "security/**", "database/**", "modules/**", "contracts/**", "adapters/**", "deploy/**"]},
+  "allowed_architecture_delta": {"new_cross_module_dependencies": 0, "new_canonical_owners": 0, "new_privileges": 0, "new_third_party_dependencies": 0, "new_provider_adapters": 0, "new_database_owner_roles": 0},
+  "contracts": {"consume": ["existing chat message endpoint", "existing /admin route"], "may_change": []},
+  "semantic_owner": "none-interface-adapter",
+  "canonical_state": ["AI notes are submitted through the existing conversation; no new AI registry state is created"],
+  "state_transitions": ["User submits non-secret AI notes as a normal chat message", "User navigates between chat and console using explicit links"],
+  "side_effects_and_privileges": ["Existing chat persistence only", "No direct model/provider mutation", "No new privilege"],
+  "persistence_and_migrations": ["No migration"],
+  "failure_retry_restart": ["AI notes use existing chat failure handling", "Layout has no new runtime dependency"],
+  "assumptions": ["The current conversation is the correct first destination for AI notes", "Sensitive credentials must never be pasted into chat"],
+  "acceptance_scenarios": ["Desktop regions scroll independently", "Header status and actions do not resize when text changes", "Console visibly links back to chat", "AI notes form sends a clear message into chat", "Chat remains usable below 900px viewport width"],
+  "required_tests": ["go test ./cmd/creator-web", "go test ./...", "go vet ./...", "devctl preflight", "devctl check-diff", "devctl check-architecture", "git diff --check", "node --check cmd/creator-web/static/assets/chat.js"],
+  "terminal_gap_states": ["BLOCKED_BY_ARCHITECTURE_GAP", "BLOCKED_BY_SPEC_GAP", "BLOCKED_BY_CONFLICT"]
+}