Дерево истории, удаление версий, мультизагрузка, редактирование с референсом и областью, подсказки промптов

public/index.html

@@ -15,7 +15,7 @@
     rel="icon"
     href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='16' fill='%23202321'/%3E%3Ctext x='32' y='45' font-size='38' font-weight='bold' text-anchor='middle' fill='%23ffffff' font-family='sans-serif'%3E%D0%9A%3C/text%3E%3C/svg%3E"
   >
-  <link rel="stylesheet" href="/style.css?v=10">
+  <link rel="stylesheet" href="/style.css?v=11">
 </head>
 <body>
   <header class="topbar">
@@ -66,6 +66,7 @@
               id="photo-input"
               type="file"
               accept="image/jpeg,image/png,image/webp,image/heic,image/heif,.heic,.heif"
+              multiple
               hidden
             >
 
@@ -82,6 +83,26 @@
           </div>
         </div>
 
+        <div class="field-group">
+          <span class="field-label">Референс <span class="field-label-hint">(необязательно)</span></span>
+          <div class="reference-actions">
+            <button id="reference-upload-button" class="button button-secondary button-small" type="button">Загрузить файл</button>
+            <select id="reference-history-select" class="reference-select" aria-label="Выбрать референс из истории">
+              <option value="">— из истории —</option>
+            </select>
+            <button id="reference-clear-button" class="button button-secondary button-small" type="button">Очистить</button>
+          </div>
+          <input id="reference-file-input" type="file" accept="image/jpeg,image/png,image/webp" hidden>
+          <div id="reference-preview" class="reference-preview" hidden>
+            <canvas id="reference-canvas" class="reference-canvas"></canvas>
+            <div class="reference-preview-foot">
+              <span id="reference-region-info">Область не выбрана — потяните по превью</span>
+              <button id="reference-region-reset" class="button button-secondary button-small" type="button">Сбросить область</button>
+            </div>
+          </div>
+          <p id="reference-note" class="reference-note" hidden></p>
+        </div>
+
         <div class="field-group">
           <label class="field-label" for="prompt">Промпт</label>
           <textarea
@@ -96,6 +117,18 @@
           </div>
         </div>
 
+        <button id="suggest-button" class="button button-secondary button-suggest" type="button" disabled>💡 Предложить промпт</button>
+        <div id="suggest-panel" class="suggest-panel" hidden>
+          <p class="suggest-section-title">Из истории</p>
+          <div id="suggest-history-chips" class="suggest-chips"></div>
+          <div class="suggest-actions">
+            <button id="suggest-codex-button" class="button button-secondary button-small" type="button" disabled>Спросить Codex</button>
+            <span id="suggest-codex-status" class="suggest-status" role="status" aria-live="polite"></span>
+          </div>
+          <p class="suggest-section-title">Варианты от Codex</p>
+          <div id="suggest-codex-chips" class="suggest-chips"></div>
+        </div>
+
         <div class="actions">
           <button
             id="edit-button"
@@ -261,6 +294,6 @@
     </div>
   </noscript>
 
-  <script src="/app.js?v=10" defer></script>
+  <script src="/app.js?v=11" defer></script>
 </body>
 </html>