@biunow/agent-biuart 0.0.0-stage → 0.1.0

package/studio/optimize-prompt.test.mjs

@@ -0,0 +1,47 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { optimizePrompt } from './optimize-prompt.mjs';
+
+const skeleton = '用灯火史话讲「古代驿站为什么能把一封信送到这么远」。火光里先给结论，再给一个能记住的细节，没有口播。';
+
+test('空内容要求先写要讲的事', () => {
+  assert.throws(() => optimizePrompt({ text: '  ', templatePrompt: skeleton }), /先写下要讲的事/);
+});
+
+test('没改模板例句时要求换成自己的事', () => {
+  assert.throws(() => optimizePrompt({ text: skeleton, templatePrompt: skeleton }), /先把引号里换成你要讲的事/);
+});
+
+test('自由输入收进当前模板，并保留模板后半句', () => {
+  const got = optimizePrompt({ text: '古代人都想当皇帝', templatePrompt: skeleton });
+  assert.equal(
+    got.prompt,
+    '用灯火史话讲「古代人都想当皇帝」。火光里先给结论，再给一个能记住的细节，没有口播。',
+  );
+});
+
+test('改过引号后仍锁回模板句式', () => {
+  const got = optimizePrompt({
+    text: '用灯火史话讲「古代人都想当皇帝」。另外再讲科举和驿站。',
+    templatePrompt: skeleton,
+  });
+  assert.equal(got.prompt.includes('古代人都想当皇帝'), true);
+  assert.equal(got.prompt.includes('没有口播'), true);
+  assert.equal(got.prompt.includes('科举'), false);
+});
+
+test('没选模板时保留原文，不压成套话', () => {
+  const text = '飞机上为什么要开飞行模式。先讲信号会干扰导航，再说规定，最后说实际影响。';
+  const got = optimizePrompt({ text, narration: 'required' });
+  assert.equal(got.prompt, text);
+  assert.equal(got.kept, true);
+});
+
+test('模板句后面留下用户写的那一个细节', () => {
+  const got = optimizePrompt({
+    text: '用灯火史话讲「古代人都想当皇帝」。嘴里说一句想反，唐律也要流二千里。',
+    templatePrompt: skeleton,
+  });
+  assert.equal(got.prompt.includes('没有口播'), true);
+  assert.equal(got.prompt.includes('嘴里说一句想反，唐律也要流二千里'), true);
+});

package/studio/recipes.mjs

@@ -0,0 +1,87 @@
+import fs from 'node:fs';
+
+/** 从《风格提示词.md》读出每条模板的起步提示词。标题用 ## 或 ###。 */
+export function loadRecipes(file) {
+  if (!file || !fs.existsSync(file)) return [];
+  const lines = fs.readFileSync(file, 'utf8').split(/\r?\n/);
+  const recipes = [];
+  let section = '';
+  let title = '';
+  let blurb = [];
+  let buf = [];
+  let inCode = false;
+
+  const flush = () => {
+    const prompt = buf.join('\n').trim();
+    if (title && prompt) {
+      recipes.push({
+        section,
+        title: title.trim(),
+        blurb: blurb.join(' ').replace(/\s+/g, ' ').trim(),
+        prompt,
+      });
+    }
+    buf = [];
+    blurb = [];
+  };
+
+  for (const line of lines) {
+    if (line.startsWith('```')) {
+      if (inCode) {
+        inCode = false;
+        flush();
+        title = '';
+      } else {
+        inCode = true;
+      }
+      continue;
+    }
+    if (inCode) {
+      buf.push(line);
+      continue;
+    }
+    if (line.startsWith('### ')) {
+      title = line.slice(4).trim();
+      blurb = [];
+      continue;
+    }
+    if (line.startsWith('## ')) {
+      section = line.slice(3).trim();
+      title = section;
+      blurb = [];
+      continue;
+    }
+    if (line.startsWith('# ')) continue;
+    if (title && line.trim()) blurb.push(line.trim());
+  }
+  return recipes;
+}
+
+function norm(value) {
+  return String(value || '').trim().toLowerCase().replace(/\s+/g, '');
+}
+
+export function findRecipe(recipes, keys) {
+  const wants = [...new Set((keys || []).map(norm).filter(Boolean))];
+  for (const want of wants) {
+    const hit = (recipes || []).find((recipe) => {
+      const title = norm(recipe.title);
+      const head = norm(String(recipe.title).split('·')[0]);
+      return title === want || head === want;
+    });
+    if (hit) return hit;
+  }
+  return null;
+}
+
+export function recipeView(recipe, extras = {}) {
+  const prompt = String(recipe?.prompt || extras.prompt || '').trim();
+  return {
+    prompt,
+    blurb: recipe?.blurb || '',
+    narration: extras.narration || 'optional',
+    attachment: extras.attachment || 'optional',
+    audio: extras.audio || '',
+    hint: extras.hint || recipe?.blurb || '',
+  };
+}

package/studio/select-menu.js

@@ -0,0 +1,450 @@
+/**
+ * Vanilla SelectMenu — Biunow CreateDesk SelectMenu 移植（缩略图网格 + 悬浮预览）
+ * usage: const sm = SelectMenu.mount(el, { value, options, size, onChange })
+ */
+(function (global) {
+  const PREVIEW_W = 340;
+  const PREVIEW_H = 320;
+
+  function esc(s) {
+    return String(s || '')
+      .replace(/&/g, '&')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;');
+  }
+
+  function SelectMenu(opts) {
+    this.opts = opts || {};
+    this.value = this.opts.value || '';
+    this.options = this.opts.options || [];
+    this.size = this.opts.size || 'sm';
+    this.placeholder = this.opts.placeholder || '请选择';
+    this.open = false;
+    this.activeIndex = 0;
+    this.dropUp = false;
+    this.pos = { left: 0, top: 0, bottom: 0, width: 0 };
+    this.previewIndex = -1;
+    this.hoverTop = 0;
+    this.cat = '';
+    this.entryLabel = '';
+    this.entrySeconds = null;
+    this.entryOpen = false;
+    this.entryDraft = '';
+    this.entryError = false;
+    this.valueBeforeEntry = '';
+    this._previewTimer = null;
+    this.root = null;
+    this.trigger = null;
+    this.panel = null;
+    this.previewEl = null;
+  }
+
+  SelectMenu.mount = function (host, opts) {
+    const sm = new SelectMenu(opts);
+    sm.mount(host);
+    return sm;
+  };
+
+  SelectMenu.prototype.gridMode = function () {
+    return this.options.some((o) => !!o.thumb);
+  };
+
+  SelectMenu.prototype.hasGroups = function () {
+    return this.options.some((o) => !!o.group);
+  };
+
+  SelectMenu.prototype.groups = function () {
+    const seen = [];
+    this.options.forEach((o) => {
+      if (o.group && !seen.includes(o.group)) seen.push(o.group);
+    });
+    return seen;
+  };
+
+  SelectMenu.prototype.visibleOptions = function () {
+    if (!this.hasGroups() || !this.cat) return this.options;
+    return this.options.filter((o) => o.group === this.cat);
+  };
+
+  SelectMenu.prototype.selected = function () {
+    return this.options.find((o) => o.value === this.value) || null;
+  };
+
+  SelectMenu.prototype.mount = function (host) {
+    this.root = typeof host === 'string' ? document.querySelector(host) : host;
+    if (!this.root) throw new Error('SelectMenu host missing');
+    this.root.classList.add('sm');
+    this.root.innerHTML = '';
+    this.trigger = document.createElement('button');
+    this.trigger.type = 'button';
+    this.trigger.className = `sm-trigger sm-${this.size}`;
+    this.trigger.setAttribute('aria-haspopup', 'listbox');
+    this.trigger.addEventListener('click', (e) => {
+      e.stopPropagation();
+      this.toggle();
+    });
+    this.root.appendChild(this.trigger);
+    this.renderTrigger();
+    this._onDoc = (e) => {
+      if (!this.open) return;
+      const t = e.target;
+      if (this.root.contains(t) || this.panel?.contains(t)) return;
+      this.close();
+    };
+    this._onRepo = () => {
+      if (this.open) this.measure();
+    };
+  };
+
+  SelectMenu.prototype.setOptions = function (options, value) {
+    this.options = options || [];
+    if (value !== undefined) this.value = value;
+    if (!this.options.some((o) => o.value === this.value) && this.options[0]) {
+      this.value = this.options[0].value;
+    }
+    this.renderTrigger();
+    if (this.open) this.renderPanel();
+  };
+
+  SelectMenu.prototype.setValue = function (value, silent, extra) {
+    this.value = value;
+    this.renderTrigger();
+    if (!silent && typeof this.opts.onChange === 'function') this.opts.onChange(this.value, extra);
+  };
+
+  SelectMenu.prototype.renderTrigger = function () {
+    const sel = this.selected();
+    const thumb = sel?.thumb
+      ? `<span class="sm-thumb sm-thumb-trigger"><img src="${esc(sel.thumb)}" alt=""/></span>`
+      : '';
+    const customLabel = sel?.entry && this.entryLabel;
+    const hint = sel?.hint && !this.gridMode() && !customLabel
+      ? `<span class="sm-hint">${esc(sel.hint)}</span>`
+      : '';
+    const label = sel ? (customLabel || sel.label) : this.placeholder;
+    this.trigger.classList.toggle('on', this.open);
+    this.trigger.innerHTML = `${thumb}<span class="sm-value${sel ? '' : ' placeholder'}">${esc(
+      label,
+    )}</span>${hint}<svg class="sm-chevron${this.open ? ' on' : ''}" viewBox="0 0 16 16" fill="none"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+  };
+
+  SelectMenu.prototype.measure = function () {
+    const r = this.trigger.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const grid = this.gridMode();
+    const visible = this.visibleOptions();
+    const minWidth = grid ? 404 : 210;
+    const width = Math.min(Math.max(r.width, minWidth), vw - 24);
+    const left = Math.min(Math.max(12, r.left), Math.max(12, vw - width - 12));
+    const gap = 6;
+    const margin = 12;
+    const below = Math.max(0, vh - r.bottom - gap - margin);
+    const above = Math.max(0, r.top - gap - margin);
+    let chrome = 0;
+    if (this.panel) {
+      this.panel.style.left = `${left}px`;
+      this.panel.style.width = `${width}px`;
+      const cats = this.panel.querySelector('.sm-cats');
+      const entry = this.panel.querySelector('.sm-entry');
+      chrome = (cats ? cats.offsetHeight : 0) + (entry ? entry.offsetHeight : 0);
+    }
+    const scrollCap = grid ? 430 : 292;
+    const naturalScroll = grid
+      ? Math.min(scrollCap, Math.ceil(Math.max(visible.length, 1) / 3) * 96 + 14)
+      : Math.min(scrollCap, visible.length * 38 + 12);
+    const want = Math.min(chrome + naturalScroll, 240);
+    this.dropUp = below < want && above > below;
+    const available = Math.max(0, this.dropUp ? above : below);
+    const room = Math.min(available, chrome + naturalScroll);
+    const scrollMax = Math.max(0, Math.min(scrollCap, room - chrome));
+    this.pos = { left, width, top: r.bottom + gap, bottom: vh - r.top + gap };
+    if (this.panel) {
+      this.panel.style.maxHeight = `${room}px`;
+      this.panel.style.overflow = scrollMax > 0 ? 'hidden' : 'auto';
+      const scroll = this.panel.querySelector('.sm-scroll');
+      if (scroll) scroll.style.maxHeight = `${scrollMax}px`;
+      if (this.dropUp) {
+        this.panel.style.bottom = `${this.pos.bottom}px`;
+        this.panel.style.top = 'auto';
+      } else {
+        this.panel.style.top = `${this.pos.top}px`;
+        this.panel.style.bottom = 'auto';
+      }
+    }
+  };
+
+  SelectMenu.prototype.toggle = function () {
+    if (this.open) this.close();
+    else {
+      const visible = this.visibleOptions();
+      const idx = visible.findIndex((o) => o.value === this.value);
+      this.openAt(idx >= 0 ? idx : 0);
+    }
+  };
+
+  SelectMenu.prototype.openAt = function (index) {
+    this.activeIndex = index;
+    this.open = true;
+    this.renderTrigger();
+    this.renderPanel();
+    this.measure();
+    document.addEventListener('pointerdown', this._onDoc, true);
+    window.addEventListener('resize', this._onRepo);
+    window.addEventListener('scroll', this._onRepo, true);
+  };
+
+  SelectMenu.prototype.close = function () {
+    if (this.entryOpen) {
+      this.value = this.valueBeforeEntry;
+      this.entryOpen = false;
+      this.entryError = false;
+    }
+    this.open = false;
+    this.hidePreview();
+    this.renderTrigger();
+    if (this.panel) {
+      this.panel.remove();
+      this.panel = null;
+    }
+    if (this.previewEl) {
+      this.previewEl.remove();
+      this.previewEl = null;
+    }
+    document.removeEventListener('pointerdown', this._onDoc, true);
+    window.removeEventListener('resize', this._onRepo);
+    window.removeEventListener('scroll', this._onRepo, true);
+  };
+
+  SelectMenu.prototype.hidePreview = function () {
+    if (this._previewTimer) clearTimeout(this._previewTimer);
+    this._previewTimer = null;
+    this.previewIndex = -1;
+    if (this.previewEl) {
+      this.previewEl.remove();
+      this.previewEl = null;
+    }
+  };
+
+  SelectMenu.prototype.schedulePreview = function (index, top) {
+    this.hoverTop = top;
+    if (this._previewTimer) clearTimeout(this._previewTimer);
+    this._previewTimer = setTimeout(() => {
+      this.previewIndex = index;
+      this.renderPreview();
+    }, 250);
+  };
+
+  SelectMenu.prototype.renderPreview = function () {
+    if (!this.open || !this.gridMode() || this.previewIndex < 0) {
+      if (this.previewEl) {
+        this.previewEl.remove();
+        this.previewEl = null;
+      }
+      return;
+    }
+    const opt = this.visibleOptions()[this.previewIndex];
+    if (!opt) return;
+    if (!this.previewEl) {
+      this.previewEl = document.createElement('div');
+      this.previewEl.className = 'sm-preview';
+      document.body.appendChild(this.previewEl);
+    }
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    let left = this.pos.left - PREVIEW_W - 10;
+    if (left < 12) left = this.pos.left + this.pos.width + 10;
+    const top = Math.min(Math.max(12, this.hoverTop - 46), Math.max(12, vh - PREVIEW_H - 12));
+    this.previewEl.style.left = `${left}px`;
+    this.previewEl.style.top = `${top}px`;
+    this.previewEl.style.width = `${PREVIEW_W}px`;
+    const img = opt.thumb
+      ? `<img src="${esc(opt.thumb)}" alt=""/>`
+      : `<span class="sm-thumb-ph">${esc((opt.label || '?').slice(0, 1))}</span>`;
+    this.previewEl.innerHTML = `<div class="sm-preview-img">${img}</div><div class="sm-preview-body"><div class="sm-preview-title"><strong>${esc(
+      opt.label,
+    )}</strong>${opt.hint ? `<span class="sm-preview-hint">${esc(opt.hint)}</span>` : ''}</div>${
+      opt.desc ? `<p class="sm-preview-desc">${esc(opt.desc)}</p>` : ''
+    }</div>`;
+  };
+
+  SelectMenu.prototype.renderPanel = function () {
+    if (!this.panel) {
+      this.panel = document.createElement('div');
+      this.panel.className = 'sm-panel';
+      this.panel.setAttribute('role', 'listbox');
+      this.panel.tabIndex = -1;
+      document.body.appendChild(this.panel);
+    }
+    const grid = this.gridMode();
+    const grouped = this.hasGroups();
+    const visible = this.visibleOptions();
+    this.panel.classList.toggle('has-cats', grouped);
+    const scroll = document.createElement('div');
+    scroll.className = 'sm-scroll' + (grid ? ' grid' : '');
+    if (grid && grouped) {
+      const room = Math.max(168, window.innerHeight - 24 - 92);
+      scroll.style.maxHeight = `${Math.min(430, room)}px`;
+    }
+    visible.forEach((opt, i) => {
+      const btn = document.createElement('button');
+      btn.type = 'button';
+      btn.className =
+        'sm-option' +
+        (i === this.activeIndex ? ' on' : '') +
+        (opt.value === this.value ? ' picked' : '') +
+        (grid ? ' tile' : '');
+      btn.setAttribute('role', 'option');
+      let html = '';
+      if (grid) {
+        html += opt.thumb
+          ? `<span class="sm-thumb"><img src="${esc(opt.thumb)}" alt="" loading="lazy"/></span>`
+          : `<span class="sm-thumb"><span class="sm-thumb-ph">${esc((opt.label || '?').slice(0, 1))}</span></span>`;
+      }
+      html += `<span class="sm-opt-label">${esc(opt.label)}</span>`;
+      if (opt.hint && !grid) html += `<span class="sm-opt-hint">${esc(opt.hint)}</span>`;
+      if (opt.value === this.value) html += `<span class="sm-check">✓</span>`;
+      btn.innerHTML = html;
+      btn.addEventListener('mouseenter', (e) => {
+        this.activeIndex = i;
+        scroll.querySelectorAll('.sm-option').forEach((el, idx) => {
+          el.classList.toggle('on', idx === i);
+        });
+        if (grid) this.schedulePreview(i, e.currentTarget.getBoundingClientRect().top);
+      });
+      btn.addEventListener('click', () => this.pick(opt.value));
+      scroll.appendChild(btn);
+    });
+    scroll.addEventListener('mouseleave', () => this.hidePreview());
+    this.panel.innerHTML = '';
+    if (grouped) this.panel.appendChild(this.renderCats());
+    this.panel.appendChild(scroll);
+    if (this.entryOpen) {
+      this.panel.appendChild(this.renderEntry());
+      const input = this.panel.querySelector('.sm-entry input');
+      setTimeout(() => input && input.focus(), 0);
+    }
+  };
+
+  SelectMenu.prototype.renderCats = function () {
+    const bar = document.createElement('div');
+    bar.className = 'sm-cats';
+    const items = [{ id: '', label: '全部' }].concat(
+      this.groups().map((name) => ({ id: name, label: name })),
+    );
+    items.forEach((item) => {
+      const btn = document.createElement('button');
+      btn.type = 'button';
+      btn.className = 'sm-cat' + (this.cat === item.id ? ' on' : '');
+      btn.textContent = item.label;
+      btn.setAttribute('aria-pressed', this.cat === item.id ? 'true' : 'false');
+      btn.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (this.cat === item.id) return;
+        this.cat = item.id;
+        this.hidePreview();
+        const visible = this.visibleOptions();
+        const picked = visible.findIndex((o) => o.value === this.value);
+        this.activeIndex = picked >= 0 ? picked : 0;
+        this.renderPanel();
+        this.measure();
+      });
+      bar.appendChild(btn);
+    });
+    return bar;
+  };
+
+  SelectMenu.prototype.renderEntry = function () {
+    const box = document.createElement('div');
+    box.className = 'sm-entry';
+    const input = document.createElement('input');
+    input.setAttribute('inputmode', 'numeric');
+    input.setAttribute('maxlength', '3');
+    input.setAttribute('aria-label', '自定义秒数');
+    input.placeholder = '15–180';
+    input.value = this.entryDraft;
+    if (this.entryError) input.classList.add('bad');
+    const unit = document.createElement('span');
+    unit.className = 'unit';
+    unit.textContent = '秒';
+    const ok = document.createElement('button');
+    ok.type = 'button';
+    ok.textContent = '确定';
+    input.addEventListener('input', () => {
+      const next = input.value.replace(/[^\d]/g, '').slice(0, 3);
+      if (input.value !== next) input.value = next;
+      this.entryDraft = next;
+      this.entryError = false;
+      input.classList.remove('bad');
+      const err = box.querySelector('.sm-entry-err');
+      if (err) err.remove();
+    });
+    input.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        this.commitEntry();
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        this.close();
+      }
+    });
+    ok.addEventListener('click', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      this.commitEntry();
+    });
+    box.appendChild(input);
+    box.appendChild(unit);
+    box.appendChild(ok);
+    if (this.entryError) {
+      const err = document.createElement('p');
+      err.className = 'sm-entry-err';
+      err.textContent = '请输入秒数';
+      box.appendChild(err);
+    }
+    return box;
+  };
+
+  SelectMenu.prototype.commitEntry = function () {
+    const input = this.panel?.querySelector('.sm-entry input');
+    if (input) this.entryDraft = input.value;
+    const parse = this.opts.parseEntry;
+    const n = typeof parse === 'function' ? parse(this.entryDraft) : null;
+    if (n == null) {
+      this.entryError = true;
+      this.renderPanel();
+      this.measure();
+      return;
+    }
+    this.entrySeconds = n;
+    this.entryLabel = this.opts.formatEntry ? this.opts.formatEntry(n) : String(n);
+    this.entryOpen = false;
+    this.entryError = false;
+    this.setValue(this.value, false, n);
+    this.close();
+  };
+
+  SelectMenu.prototype.pick = function (value) {
+    const opt = this.options.find((o) => o.value === value);
+    if (opt && opt.entry) {
+      if (!this.entryOpen) this.valueBeforeEntry = this.value;
+      this.entryOpen = true;
+      this.entryError = false;
+      this.entryDraft = this.entrySeconds != null ? String(this.entrySeconds) : '';
+      this.value = value;
+      this.renderTrigger();
+      this.renderPanel();
+      this.measure();
+      return;
+    }
+    this.entryOpen = false;
+    this.entryLabel = '';
+    this.entrySeconds = null;
+    this.setValue(value);
+    this.close();
+  };
+
+  global.SelectMenu = SelectMenu;
+})(window);

package/studio/styles.css

@@ -0,0 +1,71 @@
+/* BiuArt Studio · 在共享 CreateDesk 样式上补齐动画工作台 */
+.char-sub { position: fixed; bottom: auto; width: 300px; z-index: 60; }
+.composer { padding-bottom: 4px; }
+.composer-head {
+  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
+  padding: 18px 22px 10px;
+}
+.composer-head h2 { margin: 0 0 4px; font-size: 16px; letter-spacing: -.01em; }
+.composer-head p { margin: 0; color: var(--muted); font-size: 12px; }
+.field { padding: 10px 22px 0; }
+.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
+.field > label { display: block; font-size: 11px; font-weight: 650; letter-spacing: .04em; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; }
+.field select,
+.field input[type="text"] {
+  width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px;
+  font-size: 12.5px; background: #fafaf7; color: var(--ink); outline: 0;
+}
+.field select:focus { border-color: var(--accent-deep); background: #fff; }
+.switch-row {
+  display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-soft);
+  padding: 8px 0; cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 500;
+}
+.switch-row input { width: 15px; height: 15px; accent-color: var(--ink); }
+.composer-foot { padding: 14px 22px 16px; }
+.ghost {
+  border: 1px solid var(--line-strong); background: #fff; color: var(--ink);
+  border-radius: 99px; padding: 9px 15px; font-size: 12px; font-weight: 600;
+}
+.ghost:hover { background: var(--accent-soft); border-color: var(--accent-deep); }
+.form-error {
+  margin: 0 22px 16px; padding: 9px 12px; border-radius: 10px;
+  background: #f7dcd7; color: var(--danger); font-size: 12px;
+}
+
+.side { display: flex; flex-direction: column; gap: 16px; }
+.panel {
+  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
+  box-shadow: var(--shadow); padding: 16px 18px;
+}
+.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
+.panel-head h2 { margin: 0; font-size: 14px; }
+.panel-note { font-size: 10.5px; color: var(--muted-2); letter-spacing: .04em; }
+.style-summary { font-size: 12px; line-height: 1.65; color: var(--ink-soft); min-height: 38px; }
+.preview-video { width: 100%; border-radius: 12px; margin-top: 10px; background: #111; }
+.preview-status { margin-top: 8px; font-size: 11px; color: var(--muted); min-height: 16px; }
+.link-btn { border: 0; background: none; color: var(--muted); font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
+
+.jobs { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow: auto; }
+.job {
+  border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: #fdfdfb;
+}
+.job-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.job-title { font-size: 12px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.job-state { font-size: 10px; border-radius: 99px; padding: 2px 7px; background: #f1f1ec; color: var(--muted); flex: none; }
+.job-state.running { background: var(--accent-soft); color: #4d5c16; }
+.job-state.done { background: #dff0e6; color: var(--success); }
+.job-state.failed { background: #f7dcd7; color: var(--danger); }
+.job-msg { margin-top: 5px; font-size: 11px; color: var(--muted); line-height: 1.5; word-break: break-all; }
+.job-bar { height: 4px; border-radius: 99px; background: #ededE7; margin-top: 8px; overflow: hidden; }
+.job-bar > span { display: block; height: 100%; background: var(--accent-deep); transition: width .3s ease; }
+.job-video { width: 100%; border-radius: 8px; margin-top: 8px; background: #111; }
+.job-actions { display: flex; gap: 8px; margin-top: 7px; flex-wrap: wrap; }
+.job-actions a { font-size: 11px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
+.empty { color: var(--muted-2); font-size: 12px; padding: 8px 0; }
+
+@media (max-width: 920px) {
+  .field-row { grid-template-columns: 1fr; }
+  .desk { padding: 18px 14px 36px; }
+  .hero { flex-direction: column; align-items: flex-start; }
+  .hero-aside { align-items: flex-start; }
+}