@lumenkey/cli 0.3.1 → 0.4.0-rc.1

package/dist/studio/web/app.js

@@ -0,0 +1,662 @@
+import { createStudioController, createLocalApi, uiError } from './controller.js';
+import { describeFields, modelsFor, runLabel, runDiagnosticText, runRecoveryText, safeOutputUrl, compactLocation, fieldDisplayLabel, fieldPlacement } from './model.js';
+import { outputPresentation, canQueryRun } from './save-view.js';
+import { messageForCode } from './messages.js';
+import { receiptPresentation } from './save-model.js';
+import { assetPresentation, assetFileLink } from './asset-model.js';
+const el = (id) => document.getElementById(id);
+const button = (id) => el(id);
+function text(id, value) { el(id).textContent = value; }
+function show(id, visible) { el(id).hidden = !visible; }
+function node(tag, content, className) {
+    const n = document.createElement(tag);
+    if (content !== undefined)
+        n.textContent = content;
+    if (className)
+        n.className = className;
+    return n;
+}
+function errorText(error) { return error ? `${messageForCode(error.code, error.message)} (${error.code})` : ''; }
+function disabled(id, value, reason) {
+    const control = el(id);
+    control.disabled = value;
+    let hint = document.getElementById(id + '-reason');
+    if (!hint) {
+        hint = node('small', undefined, 'disabled-reason');
+        hint.id = id + '-reason';
+        control.after(hint);
+    }
+    hint.hidden = !value;
+    hint.textContent = value ? reason : '';
+    if (value) {
+        control.title = reason;
+        control.setAttribute('aria-describedby', hint.id);
+    }
+    else {
+        control.removeAttribute('title');
+        control.removeAttribute('aria-describedby');
+    }
+}
+const api = createLocalApi(fetch, () => controller.expireSession());
+let view = 'create', fieldSignature = '', selectSignature = '', runSignature = '', assetsSignature = '', currentSignature = '', uploading = false;
+let canvasDirty = false, canvasLoading = false;
+let previousAssetsStatus = 'idle';
+let canvasHost;
+function canvasEnvironment(state) {
+    return { api, onOpenRuns: () => {
+            const navigate = () => { view = 'tasks'; void controller.refreshCloud(); render(controller.state); };
+            if (canvasHost)
+                canvasHost.requestLeave(navigate);
+            else
+                navigate();
+        }, onDirty: (value) => { canvasDirty = value; }, active: view === 'canvas' && !state.sessionExpired, configured: !!state.local.value?.storage.configured && !state.sessionExpired, connected: state.connected,
+        models: state.catalog.status === 'ready' ? state.catalog.value ?? [] : [], assets: (state.assets.value?.assets ?? []).map(a => ({ id: a.assetId, name: a.displayName, mediaType: a.mediaType.startsWith('image/') ? 'image' : 'video' })), assetError: state.assets.status === 'error' ? errorText(state.assets.error) : undefined,
+        theme: document.documentElement.dataset.theme === 'light' ? 'light' : 'dark', nonce: document.querySelector('meta[name="studio-style-nonce"]')?.content ?? '' };
+}
+function renderCanvas(state) {
+    document.querySelector('.workspace')?.classList.toggle('canvas-mode', view === 'canvas');
+    if (canvasHost) {
+        canvasHost.update(canvasEnvironment(state));
+        return;
+    }
+    if (view !== 'canvas' || canvasLoading || state.sessionExpired)
+        return;
+    canvasLoading = true;
+    const modulePath = '/studio/canvas/editor.js';
+    void import(modulePath).then(module => { canvasHost = module.mountStudioCanvas(el('canvas-view'), canvasEnvironment(controller.state)); }).catch(error => { canvasLoading = false; controller.reportError(error); });
+}
+const dialog = el('confirm-dialog');
+let dialogRunId;
+const controller = createStudioController({ api, onChange: render });
+const observed = new Set();
+const outputObserver = new IntersectionObserver(entries => {
+    for (const entry of entries) {
+        const id = entry.target.dataset.saveOperation;
+        const bounds = entry.target.getBoundingClientRect(), header = document.querySelector('.runtime-header').getBoundingClientRect();
+        if (id)
+            controller.markSaveVisible(id, entry.target.isConnected && entry.isIntersecting && entry.intersectionRatio > 0 && bounds.height > 0 && bounds.bottom > header.bottom && bounds.top < innerHeight);
+    }
+});
+function observeOutputs() {
+    outputObserver.disconnect();
+    const next = new Set();
+    for (const row of document.querySelectorAll('[data-save-operation]')) {
+        const bounds = row.getBoundingClientRect(), id = row.dataset.saveOperation;
+        if (bounds.height > 0) {
+            next.add(id);
+            outputObserver.observe(row);
+            if (bounds.bottom <= 0 || bounds.top >= innerHeight)
+                controller.markSaveVisible(id, false);
+        }
+    }
+    // Replacing a row to show "checking" must not itself turn that same visible
+    // row off-screen, cancel its queued lazy read, and trigger a render/read loop.
+    for (const id of observed)
+        if (!next.has(id))
+            controller.markSaveVisible(id, false);
+    observed.clear();
+    for (const id of next)
+        observed.add(id);
+}
+const observedAssets = new Set();
+const assetObserver = new IntersectionObserver(entries => {
+    for (const entry of entries) {
+        const row = entry.target, bounds = row.getBoundingClientRect(), header = document.querySelector('.runtime-header').getBoundingClientRect();
+        if (row.dataset.assetId)
+            controller.markAssetVisible(row.dataset.assetId, row.isConnected && entry.isIntersecting && entry.intersectionRatio > 0 && bounds.height > 0 && bounds.bottom > header.bottom && bounds.top < innerHeight);
+    }
+});
+function observeAssets() {
+    assetObserver.disconnect();
+    const next = new Set();
+    for (const row of document.querySelectorAll('.asset-card[data-asset-id]')) {
+        const bounds = row.getBoundingClientRect(), id = row.dataset.assetId;
+        if (bounds.height > 0) {
+            next.add(id);
+            assetObserver.observe(row);
+            if (bounds.bottom <= 0 || bounds.top >= innerHeight)
+                controller.markAssetVisible(id, false);
+        }
+    }
+    for (const id of observedAssets)
+        if (!next.has(id))
+            controller.markAssetVisible(id, false);
+    observedAssets.clear();
+    for (const id of next)
+        observedAssets.add(id);
+}
+function renderFields(state) {
+    const draft = state.edits[state.mode], models = modelsFor(state.catalog.value ?? [], state.mode);
+    const model = models.find(m => m.id === draft.modelId);
+    const signature = JSON.stringify([state.mode, state.catalog.status, models.map(m => [m.id, m.displayName, m.name]), draft.modelId]);
+    const select = el('model');
+    if (selectSignature !== signature) {
+        selectSignature = signature;
+        select.replaceChildren();
+        const empty = node('option', models.length ? '请选择模型' : state.connected ? '没有可用模型或目录尚未就绪' : '连接云端后加载目录');
+        empty.value = '';
+        select.append(empty);
+        for (const m of models) {
+            const option = node('option', `${m.displayName ?? m.name ?? m.id} · ${m.id}`);
+            option.value = m.id;
+            select.append(option);
+        }
+        if (draft.modelId && !model) {
+            const unavailable = node('option', `${draft.modelId}（当前目录不可用）`);
+            unavailable.value = draft.modelId;
+            select.append(unavailable);
+        }
+        select.value = draft.modelId;
+    }
+    disabled('model', state.catalog.status !== 'ready' || state.submitBusy, state.submitBusy ? '正在提交，请等待结果。' : !state.connected ? '先连接云端，再选择模型；当前输入会保留。' : state.catalog.status === 'loading' ? '目录读取中；保留上次模型和输入。' : '目录未就绪，请刷新目录后再选择。');
+    const fields = model ? describeFields(model) : [{ key: 'prompt', title: '描述你的想法', kind: 'text', spec: { type: 'string' }, required: false }];
+    for (const key of Object.keys(draft.fields))
+        if (!fields.some(f => f.key === key))
+            fields.push({ key, title: key + '（目录未声明，清空后才能报价）', kind: 'text', spec: {}, required: false });
+    const unmatched = fields.filter(f => (f.kind === 'enum' || f.kind === 'boolean') && draft.fields[f.key] && !(f.options ?? [{ value: 'true' }, { value: 'false' }]).some(o => o.value === draft.fields[f.key])).map(f => [f.key, draft.fields[f.key]]);
+    const shape = JSON.stringify([state.mode, draft.modelId, fields, unmatched]);
+    if (fieldSignature !== shape) {
+        fieldSignature = shape;
+        el('prompt-fields').replaceChildren();
+        el('parameter-fields').replaceChildren();
+        el('advanced-fields').replaceChildren();
+        for (const [index, field] of fields.entries()) {
+            const wrapper = node('div', undefined, 'field'), label = node('label', fieldDisplayLabel(field));
+            const id = 'field-' + index;
+            label.htmlFor = id;
+            let control;
+            if (field.kind === 'enum' || field.kind === 'boolean') {
+                control = node('select');
+                const empty = node('option', '留空 · 由服务按目录处理');
+                empty.value = '';
+                control.append(empty);
+                for (const option of field.options ?? [{ value: 'true', label: '是' }, { value: 'false', label: '否' }]) {
+                    const item = node('option', option.label);
+                    item.value = option.value;
+                    control.append(item);
+                }
+                if (unmatched.some(([key]) => key === field.key)) {
+                    const item = node('option', '已保存值 ' + draft.fields[field.key] + '（需重新选择）');
+                    item.value = draft.fields[field.key];
+                    control.append(item);
+                }
+            }
+            else if (field.kind === 'json' || field.kind === 'text')
+                control = node('textarea');
+            else {
+                control = node('input');
+                control.type = 'text';
+                if (field.kind === 'number')
+                    control.inputMode = 'decimal';
+            }
+            control.id = id;
+            control.dataset.field = field.key;
+            control.autocomplete = 'off';
+            if (control instanceof HTMLInputElement || control instanceof HTMLTextAreaElement) {
+                control.maxLength = 128 * 1024;
+                control.placeholder = field.kind === 'json' ? '按目录填写 JSON，或留空' : field.kind === 'text' ? '按目录说明填写内容' : '留空，由服务按目录处理';
+            }
+            control.addEventListener(control instanceof HTMLSelectElement ? 'change' : 'input', () => controller.setField(field.key, control.value));
+            wrapper.append(label, control);
+            if (field.defaultHint !== undefined)
+                wrapper.append(node('small', `目录默认：${field.defaultHint}（未填写时由服务按目录默认值写入报价）`));
+            if (field.kind === 'json')
+                wrapper.append(node('small', 'JSON 参数；只按目录契约使用公开 URL，不填写本机路径。'));
+            if (model && !field.labelKnown)
+                wrapper.append(node('small', '目录未提供中文名；保留原参数键，不推测含义。'));
+            if (!Object.hasOwn(model?.inputSchema.properties ?? { prompt: {} }, field.key))
+                wrapper.append(node('small', `当前目录未声明键“${field.key}”；清空后才能报价。`));
+            const placement = fieldPlacement(field);
+            el(placement === 'advanced' ? 'advanced-fields' : placement === 'input' ? 'prompt-fields' : 'parameter-fields').append(wrapper);
+        }
+        show('advanced-parameters', fields.some(f => fieldPlacement(f) === 'advanced'));
+    }
+    for (const input of document.querySelectorAll('[data-field]')) {
+        const value = draft.fields[input.dataset.field] ?? '';
+        if (input.value !== value)
+            input.value = value;
+        input.disabled = state.submitBusy;
+    }
+}
+function renderRun(run, allowRefresh) {
+    const card = node('article', undefined, 'run-card');
+    card.append(node('strong', run.modelId), node('p', runLabel(run)));
+    card.append(node('p', `报价 ${run.quote.credits} 算力 · 有效至 ${new Date(run.quote.expiresAt).toLocaleString()} · ${run.runId}`, 'run-meta'));
+    if (run.job)
+        card.append(node('p', '任务 ID：' + run.job.jobId, 'run-meta'));
+    const diagnostic = runDiagnosticText(run), recovery = runRecoveryText(run);
+    if (diagnostic)
+        card.append(node('p', diagnostic, 'error'));
+    if (recovery)
+        card.append(node('p', recovery, 'hint'));
+    const links = node('div', undefined, 'run-links');
+    for (const [index, output] of (run.job?.outputs ?? []).entries()) {
+        const url = safeOutputUrl(output.url);
+        if (!url)
+            continue;
+        const a = node('a', `在新窗口查看云端输出 ${index + 1}（云端链接）`);
+        a.href = url;
+        a.target = '_blank';
+        a.rel = 'noopener noreferrer';
+        links.append(a);
+    }
+    card.append(links);
+    if (run.job) {
+        const list = controller.state.saves.outputs[run.runId];
+        const area = node('section', undefined, 'output-list');
+        area.dataset.run = run.runId;
+        const status = node('p', list?.status === 'loading' ? '正在读取本机输出记录…' : list?.status === 'error' ? errorText(list.error) : list?.status === 'ready' ? '' : '输出记录尚未读取；云端链接不代表已保存到本机。', list?.status === 'error' ? 'error' : 'hint');
+        status.setAttribute('role', list?.status === 'error' ? 'alert' : 'status');
+        area.append(status);
+        if (list?.value && list.status !== 'ready')
+            area.append(node('p', '以下保留上次读取的记录，当前结果尚未更新。', 'hint'));
+        for (const output of list?.value?.items ?? []) {
+            const presentation = outputPresentation(output, controller.state.connected);
+            const targetId = output.localOutputId ?? output.save?.localOutputId;
+            const target = targetId ? controller.state.saves.targets[targetId] : undefined;
+            const operationId = target?.operationId ?? output.saveOperationId;
+            const observation = operationId ? controller.state.saves.operations[operationId] : undefined;
+            const save = observation?.value ?? output.save;
+            const receiptView = save ? receiptPresentation(save, observation?.status === 'error') : undefined;
+            const row = node('article', undefined, 'output-record');
+            row.dataset.outputId = output.localOutputId ?? '';
+            row.dataset.identityReason = output.identity.reason ?? '';
+            if (operationId)
+                row.dataset.saveOperation = operationId;
+            if (save)
+                row.dataset.saveState = save.state;
+            row.append(node('strong', `输出 ${output.displayOrdinal}`), node('p', receiptView?.status ?? (target?.status === 'submitting' ? '正在确认保存请求' : target?.status === 'unknown' ? '保存结果尚未确认' : presentation.status), 'save-status'));
+            if (save && receiptView) {
+                row.append(node('p', receiptView.stage, 'hint'));
+                if (receiptView.progress)
+                    row.append(node('p', receiptView.progress, 'save-progress'));
+                if (receiptView.error)
+                    row.append(node('p', receiptView.error, 'error'));
+                if (save.checkedAt)
+                    row.append(node('p', '上次核验：' + new Date(save.checkedAt).toLocaleString(), 'hint'));
+                if (save.asset) {
+                    const details = node('details'), summary = node('summary', save.asset.relativePath + ' · 展开完整路径');
+                    const path = node('code', save.asset.absolutePath, 'saved-path'), copy = node('button', '复制路径', 'quiet'), copyStatus = node('small', '', 'hint');
+                    copy.onclick = () => { void navigator.clipboard.writeText(save.asset.absolutePath).then(() => { copyStatus.textContent = '已复制路径'; }).catch(() => { copyStatus.textContent = '浏览器未允许复制，请展开后手动复制。'; }); };
+                    details.append(summary, path, copy, copyStatus);
+                    row.append(details);
+                    row.append(node('p', '保存根：' + (controller.state.saves.binding.value?.root?.absolutePath ?? '尚未确认'), 'saved-path hint'));
+                }
+                if (observation?.notice)
+                    row.append(node('p', observation.notice, 'hint'));
+                if (observation?.error)
+                    row.append(node('p', errorText(observation.error), 'error'));
+                const check = node('button', '核对保存状态', 'quiet');
+                check.disabled = observation?.status === 'loading';
+                check.onclick = () => { void controller.readSave(save.operationId, { manual: true }); };
+                row.append(check);
+                if (check.disabled)
+                    row.append(node('small', '正在核对原保存记录，请稍候。', 'disabled-reason'));
+                if (receiptView.canRetry && observation?.status === 'ready') {
+                    const retry = node('button', '重试原保存', 'quiet');
+                    retry.onclick = () => { void controller.retrySave(save.operationId); };
+                    row.append(retry, node('p', '沿用原保存，不会重新生成或扣费', 'hint'));
+                }
+            }
+            else if (targetId) {
+                if (target?.error)
+                    row.append(node('p', errorText(target.error), 'error'));
+                if (target?.status === 'unknown' || target?.checking) {
+                    const check = node('button', '核对保存状态', 'quiet');
+                    check.disabled = !!target.checking;
+                    check.onclick = () => { void controller.checkOutput(run.runId, targetId); };
+                    row.append(check);
+                    if (check.disabled)
+                        row.append(node('small', '正在核对原输出是否已受理，请稍候。', 'disabled-reason'));
+                }
+                else if ((!target || target.status === 'idle') && output.acceptance === 'NEVER_ACCEPTED' && output.saveAllowed) {
+                    const saveButton = node('button', '保存到本机', 'primary');
+                    saveButton.onclick = () => { void controller.saveOutput(run.runId, targetId); };
+                    row.append(saveButton);
+                }
+            }
+            if (presentation.explanation)
+                row.append(node('p', presentation.explanation, 'hint'));
+            if (presentation.blocker && (!save || output.saveBlockedCode !== 'SAVE_OPERATION_EXISTS'))
+                row.append(node('p', presentation.blocker, 'hint'));
+            if (output.identity.reason === 'LEGACY_AWAITING_FRESH_GET') {
+                const refresh = node('button', '刷新任务以核实输出', 'quiet');
+                refresh.disabled = !presentation.canRefresh || controller.state.refreshing;
+                refresh.onclick = () => { void controller.refreshRun(run.runId); };
+                row.append(refresh);
+                if (refresh.disabled)
+                    row.append(node('small', controller.state.refreshing ? '正在查询，请稍候。' : '先连接云端，才能从原连接核实输出身份。', 'disabled-reason'));
+            }
+            area.append(row);
+        }
+        if (list?.status === 'ready' && !list.value?.items.length)
+            area.append(node('p', '本次快照没有输出记录。', 'hint'));
+        const read = node('button', list?.status === 'ready' ? '重读输出列表' : '读取输出列表', 'quiet');
+        read.disabled = list?.status === 'loading' || controller.state.saves.binding.status === 'loading';
+        read.onclick = () => { void controller.readOutputs(run.runId); };
+        area.append(read);
+        if (read.disabled)
+            area.append(node('small', '本机记录读取中，请稍候。', 'disabled-reason'));
+        card.append(area);
+    }
+    if (allowRefresh && run.job && canQueryRun(controller.state.saves.outputs[run.runId]?.value?.items)) {
+        const b = node('button', '查询最新状态', 'quiet');
+        b.type = 'button';
+        b.disabled = controller.state.refreshing || !controller.state.connected;
+        b.onclick = () => { void controller.refreshRun(run.runId); };
+        card.append(b);
+        if (b.disabled) {
+            const reason = controller.state.refreshing ? '正在查询，请稍候。' : '先连接云端，再查询该任务。';
+            b.title = reason;
+            card.append(node('small', reason, 'disabled-reason'));
+        }
+    }
+    return card;
+}
+function resourceMessage(resource, empty) { return resource.status === 'loading' ? '正在读取…' : resource.status === 'error' ? errorText(resource.error) : empty; }
+function createAssetCard(asset) {
+    const card = node('article', undefined, 'asset-card'), src = '/studio/api/assets/' + encodeURIComponent(asset.assetId) + '/content';
+    card.dataset.assetId = asset.assetId;
+    const preview = asset.mediaType.startsWith('image/') ? node('img') : node('video');
+    preview.src = src;
+    if (preview instanceof HTMLImageElement) {
+        preview.alt = asset.displayName;
+        preview.loading = 'lazy';
+    }
+    else {
+        preview.controls = true;
+        preview.preload = 'metadata';
+    }
+    const previewError = node('p', '预览暂不可用，文件状态以下方核对结果为准。', 'asset-preview-error hint');
+    previewError.hidden = true;
+    preview.onerror = () => {
+        preview.hidden = true;
+        previewError.hidden = false;
+    };
+    const name = node('p', asset.displayName), bytes = node('p', `${asset.byteLength.toLocaleString()} 字节`, 'muted'), status = node('p', '', 'asset-integrity-status'), date = node('p', '', 'hint'), notice = node('p', '', 'hint'), error = node('p', '', 'error');
+    status.setAttribute('role', 'status');
+    error.setAttribute('role', 'alert');
+    const check = node('button', '核对文件状态', 'quiet'), reason = node('small', '正在核对该文件，请稍候。', 'disabled-reason');
+    // Keep the keyboard target while loading: aria-disabled plus the controller's
+    // in-flight guard prevents duplicate work without detaching or blurring it.
+    check.onclick = () => {
+        if (controller.state.assetChecks[asset.assetId]?.status !== 'loading')
+            void controller.readAsset(asset.assetId, { manual: true });
+    };
+    const link = node('a', '打开本机文件');
+    link.href = src;
+    link.target = '_blank';
+    link.rel = 'noopener';
+    const linkReason = node('p', '', 'asset-file-link-reason hint');
+    card.append(preview, previewError, name, bytes, status, date, notice, error, check, reason, link, linkReason);
+    return { card, status, date, notice, error, check, reason, link, linkReason };
+}
+const assetCards = new Map();
+function renderAssets(assets) {
+    const container = el('assets'), ids = new Set(assets.map(a => a.assetId));
+    for (const [id, entry] of assetCards)
+        if (!ids.has(id)) {
+            entry.card.remove();
+            assetCards.delete(id);
+        }
+    for (const child of [...container.children])
+        if (!(child instanceof HTMLElement) || !child.dataset.assetId)
+            child.remove();
+    let cursor = container.firstElementChild;
+    for (const asset of assets) {
+        let entry = assetCards.get(asset.assetId);
+        if (!entry) {
+            entry = createAssetCard(asset);
+            assetCards.set(asset.assetId, entry);
+        }
+        const observation = controller.state.assetChecks[asset.assetId], current = observation?.value ?? asset;
+        entry.card.dataset.file = current.integrity?.file ?? '';
+        entry.card.dataset.integrityCheck = current.integrity?.integrityCheck ?? '';
+        entry.status.textContent = assetPresentation(current, observation?.status === 'error' || controller.state.assets.status === 'error').status;
+        const fileLink = assetFileLink(current);
+        entry.link.hidden = !fileLink.canOpen;
+        if (fileLink.canOpen)
+            entry.link.href = '/studio/api/assets/' + encodeURIComponent(asset.assetId) + '/content';
+        else
+            entry.link.removeAttribute('href');
+        entry.linkReason.textContent = fileLink.reason;
+        entry.linkReason.hidden = !fileLink.reason;
+        entry.date.textContent = current.integrity?.checkedAt ? '上次核验：' + new Date(current.integrity.checkedAt).toLocaleString() : '';
+        entry.date.hidden = !entry.date.textContent;
+        entry.notice.textContent = observation?.notice ?? '';
+        entry.notice.hidden = !entry.notice.textContent;
+        entry.error.textContent = observation?.error ? errorText(observation.error) : '';
+        entry.error.hidden = !entry.error.textContent;
+        const loading = observation?.status === 'loading';
+        entry.check.setAttribute('aria-disabled', String(loading));
+        entry.reason.hidden = !loading;
+        if (entry.card === cursor)
+            cursor = cursor.nextElementSibling;
+        else
+            container.insertBefore(entry.card, cursor);
+    }
+}
+function render(state) {
+    const storage = state.local.value?.storage, path = storage?.outputDir;
+    text('local-status', state.local.status === 'ready' ? '本机已授权' : state.local.status === 'error' ? '本机授权状态不可用' : '正在核对本机授权…');
+    show('storage-location', !!storage?.configured && !!path);
+    text('location-short', path ? compactLocation(path) : '');
+    text('location', path ?? '');
+    const storageNotice = state.local.status === 'loading' || state.local.status === 'idle' ? '正在读取保存位置…' : state.local.status === 'error' ? '保存位置未确认；当前编辑保留。' : '临时编辑 · 不能落盘';
+    show('storage-warning', !storage?.configured || !path);
+    text('storage-warning', storageNotice);
+    text('gateway', state.connecting ? '正在连接云端…' : state.connected ? '云端已连接' : state.error ? '云端未连接 · 请检查连接状态' : '云端未连接');
+    text('gateway-detail', state.connected ? state.gateway ?? '' : '离线可编辑；云端生成需要连接。');
+    el('gateway').title = state.connected ? state.gateway ?? '' : '离线可编辑；云端生成需要连接。';
+    el('storage-warning').title = state.local.status === 'ready' ? '临时编辑 · 不能落盘。请用 studio --output-dir <绝对目录> 重新启动。' : storageNotice;
+    const error = state.error ?? state.local.error;
+    show('error', !!error);
+    text('error', errorText(error));
+    show('notice', view === 'create' && !!state.notice);
+    text('notice', state.notice);
+    const balance = state.balance.value;
+    text('balance', state.balance.status === 'ready' && balance ? `可用 ${balance.availableCredits.toLocaleString()} · 预占 ${balance.reservedCredits.toLocaleString()}` : state.balance.status === 'error' ? '算力读取失败 · ' + state.balance.error?.code : state.balance.status === 'loading' ? '正在读取算力…' : '算力未知');
+    show('connect', !state.connected);
+    if (state.connected) {
+        if (document.getElementById('connect-reason'))
+            show('connect-reason', false);
+    }
+    else {
+        disabled('connect', state.connecting || state.submitBusy || state.local.status !== 'ready', state.connecting ? '连接进行中，请稍候。' : state.submitBusy ? '正在提交，请等待结果。' : '先完成本机授权；必要时重新打开启动链接。');
+        text('connect', state.connecting ? '连接中…' : '连接云端');
+    }
+    show('disconnect', state.connected);
+    disabled('disconnect', state.submitBusy, '正在提交，请等待结果再断开。');
+    text('title', state.mode === 'image' ? '图像创作' : '视频创作');
+    text('crumb', view === 'create' ? state.mode === 'image' ? '图像创作' : '视频创作' : view === 'tasks' ? '生成任务' : view === 'canvas' ? '本机画布' : '本机素材');
+    for (const b of document.querySelectorAll('[data-view]')) {
+        const selected = b.dataset.view === view && (view !== 'create' || b.dataset.mode === state.mode);
+        b.classList.toggle('selected', selected);
+        if (selected)
+            b.setAttribute('aria-current', 'page');
+        else
+            b.removeAttribute('aria-current');
+    }
+    for (const section of ['create', 'tasks', 'assets', 'canvas'])
+        show(section + '-view', view === section);
+    renderCanvas(state);
+    renderFields(state);
+    text('catalog-status', state.catalog.status === 'ready' ? `${modelsFor(state.catalog.value, state.mode).length} 个可用模型 · 参数按目录` : resourceMessage(state.catalog, '尚未连接云端目录'));
+    disabled('reload-cloud', !state.connected || state.refreshing, state.refreshing ? '正在刷新，请稍候；当前输入保留。' : '先连接云端。');
+    disabled('refresh-tasks', !state.connected || state.refreshing, state.refreshing ? '正在读取任务，请稍候。' : '连接云端后才能读取该连接的任务记录。');
+    text('draft-status', !storage?.configured ? '临时编辑 · 未落盘' : state.dirty[state.mode] ? '有未保存编辑' : state.drafts.status === 'loading' ? '正在读取本机草稿…' : state.drafts.status === 'error' ? '草稿读取失败 · 当前编辑保留' : state.drafts.value?.drafts[state.mode] ? '草稿已保存' : '尚无本机草稿');
+    disabled('save-draft', state.saving || state.drafts.status !== 'ready', state.saving ? '草稿正在保存，请稍候。' : !storage?.configured ? '未设置保存目录，临时编辑不能落盘。' : state.drafts.status === 'loading' ? '正在读取草稿版本，完成后可保存。' : '请先读取最新草稿版本，再保存当前编辑。');
+    text('save-draft', state.saving ? '保存中…' : '保存草稿');
+    const draftError = state.drafts.error;
+    show('draft-error', !!draftError);
+    text('draft-error', errorText(draftError));
+    show('reload-draft', !!draftError || state.error?.code === 'STUDIO_DRAFT_CONFLICT');
+    const currentModel = modelsFor(state.catalog.value ?? [], state.mode).some(m => m.id === state.edits[state.mode].modelId);
+    disabled('quote', !state.connected || !storage?.configured || state.catalog.status !== 'ready' || !currentModel || state.quoteBusy || state.submitBusy, state.submitBusy ? '正在提交，请等待结果。' : state.quoteBusy ? '正在报价，请稍候。' : !storage?.configured ? '先通过 studio --output-dir 设置保存目录；页面不能代选目录。' : !state.connected ? '先连接云端，当前草稿不会丢失。' : state.catalog.status !== 'ready' ? '目录尚未就绪，请先刷新目录。' : '请选择当前目录中的模型。');
+    text('quote', state.quoteBusy ? '正在报价…' : '查看报价');
+    const current = JSON.stringify([state.quote, state.refreshing, state.connected, state.saves]);
+    if (currentSignature !== current) {
+        currentSignature = current;
+        const target = el('current-run');
+        target.replaceChildren();
+        target.className = state.quote ? '' : 'empty';
+        if (state.quote)
+            target.append(renderRun(state.quote, true));
+        else
+            target.textContent = '填写输入并选择模型后查看报价。';
+    }
+    const quoted = state.quote?.state === 'QUOTED';
+    show('review-quote', quoted);
+    disabled('review-quote', state.submitBusy || !state.connected, state.submitBusy ? '正在提交，请等待结果。' : '当前云连接不可用，请先核对连接状态。');
+    show('review-quote-reason', quoted && (state.submitBusy || !state.connected));
+    if (dialog.open && (!quoted || state.quote?.runId !== dialogRunId))
+        dialog.close();
+    const runsKey = JSON.stringify([state.runs, state.refreshing, state.connected, state.saves]);
+    const binding = state.saves.binding;
+    text('save-binding-status', binding.status === 'ready' ? binding.value?.root ? '输出保存根（服务已确认）' : messageForCode('SAVE_OUTPUT_ROOT_REQUIRED', '') : binding.status === 'error' ? errorText(binding.error) : binding.status === 'loading' ? '正在核对本机保存连接…' : '保存连接尚未核对');
+    el('save-binding-status').dataset.status = binding.status;
+    el('save-binding-status').setAttribute('role', binding.status === 'error' ? 'alert' : 'status');
+    text('save-binding-path', binding.status === 'ready' ? binding.value?.root?.absolutePath ?? '' : '');
+    show('save-binding-path', !!binding.value?.root && binding.status === 'ready');
+    disabled('rebind-saves', binding.status === 'loading' || state.local.status !== 'ready', state.local.status !== 'ready' ? '先完成本机授权；必要时请从 CLI 重新打开 Studio。' : '保存连接核对中，请稍候。');
+    const tasksNotice = state.runs.status === 'loading' ? '正在读取任务记录；已有记录保留。' : state.runs.status === 'error' ? errorText(state.runs.error) : '';
+    text('tasks-status', tasksNotice);
+    show('tasks-status', !!tasksNotice);
+    el('tasks-status').dataset.status = state.runs.status;
+    if (runSignature !== runsKey) {
+        runSignature = runsKey;
+        const target = el('tasks');
+        target.replaceChildren();
+        if (state.runs.value?.length)
+            for (const run of state.runs.value.slice().reverse())
+                target.append(renderRun(run, true));
+        else
+            target.append(node('p', state.runs.status === 'ready' ? '当前连接还没有本机任务记录。' : !state.connected ? '连接云端后读取当前连接的任务记录。' : '列表尚未就绪，请等待或重试读取。', 'empty'));
+    }
+    const assetsKey = JSON.stringify([state.assets, state.assetChecks]);
+    if (state.assets.status === 'loading' && previousAssetsStatus !== 'loading')
+        text('asset-message', '');
+    previousAssetsStatus = state.assets.status;
+    const assetsNotice = state.assets.status === 'loading' ? state.assets.value ? '正在更新素材列表，以下为上次读取的素材。' : '正在读取素材列表…' : state.assets.status === 'error' ? '素材读取失败；' + (state.assets.value ? '以下保留上次读取的数据。' : '尚未取得列表，不能确定是否有素材。') + ' ' + errorText(state.assets.error) : '';
+    text('assets-status', assetsNotice);
+    show('assets-status', !!assetsNotice);
+    el('assets-status').dataset.status = state.assets.status;
+    el('assets-status').setAttribute('role', state.assets.status === 'error' ? 'alert' : 'status');
+    if (assetsSignature !== assetsKey) {
+        assetsSignature = assetsKey;
+        if (state.assets.value?.assets.length)
+            renderAssets(state.assets.value.assets);
+        else {
+            el('assets').replaceChildren(node('p', state.assets.status === 'ready' ? '还没有本机素材。可导入已有文件；云端结果不会自动保存。' : state.assets.value ? '上次读取没有素材；当前列表尚未更新。' : '列表未就绪，请等待或重试读取。', 'empty'));
+        }
+    }
+    const issues = state.assets.value?.recoveryIssues.length ?? 0;
+    show('issues', issues > 0);
+    text('issues', `${issues} 项素材需要恢复检查，原文件已保留。`);
+    disabled('save-asset-button', uploading || !storage?.configured, uploading ? '本机文件正在保存，请稍候。' : '先设置保存目录，才能导入文件。');
+    disabled('refresh-assets', state.assets.status === 'loading', '素材列表正在读取，重复读取已合并。');
+    if (state.sessionExpired) {
+        text('asset-message', '');
+        text('local-status', '本机会话已失效');
+        text('error', '请从 CLI 重新打开 Studio');
+        show('error', true);
+        for (const control of document.querySelectorAll('button,input,select,textarea')) {
+            if (control.id === 'theme' || control.dataset.view)
+                continue;
+            control.disabled = true;
+            control.title = '请从 CLI 重新打开 Studio';
+        }
+        for (const media of document.querySelectorAll('[src^="/studio/api/"]'))
+            media.removeAttribute('src');
+        for (const link of document.querySelectorAll('a[href^="/studio/api/"]'))
+            link.removeAttribute('href');
+        for (const reason of document.querySelectorAll('[id$="-reason"],.disabled-reason'))
+            reason.textContent = '请从 CLI 重新打开 Studio';
+    }
+    observeOutputs();
+    observeAssets();
+}
+for (const b of document.querySelectorAll('[data-view]'))
+    b.onclick = () => {
+        const navigate = () => { if (view === 'assets' && b.dataset.view !== 'assets')
+            text('asset-message', ''); view = b.dataset.view; if (b.dataset.mode === 'image' || b.dataset.mode === 'video')
+            controller.setMode(b.dataset.mode); if (view === 'assets')
+            void controller.refreshAssets(); render(controller.state); };
+        if (view === 'canvas' && b.dataset.view !== 'canvas' && canvasHost)
+            canvasHost.requestLeave(navigate);
+        else
+            navigate();
+    };
+button('theme').onclick = () => { document.documentElement.dataset.theme = document.documentElement.dataset.theme === 'light' ? 'dark' : 'light'; renderCanvas(controller.state); };
+button('connect').onclick = () => { void controller.connect(); };
+button('disconnect').onclick = () => { void controller.disconnect(); };
+el('model').onchange = e => controller.selectModel(e.target.value);
+button('save-draft').onclick = () => { void controller.saveDraft(); };
+button('reload-draft').onclick = () => { void controller.rereadDrafts(); };
+button('quote').onclick = () => { void controller.quote(); };
+button('reload-cloud').onclick = button('refresh-tasks').onclick = () => { void controller.refreshCloud(); };
+button('refresh-assets').onclick = () => { void controller.refreshAssets(); };
+button('rebind-saves').onclick = () => { void controller.bindSaves(); };
+button('review-quote').onclick = () => {
+    const run = controller.state.quote;
+    if (!run || run.state !== 'QUOTED')
+        return;
+    if (Date.parse(run.quote.expiresAt) <= Date.now()) {
+        controller.reportError({ code: 'STUDIO_QUOTE_EXPIRED', message: '报价已过期，请重新报价。' });
+        return;
+    }
+    dialogRunId = run.runId;
+    text('confirm-summary', `模型 ${run.modelId}；本次报价 ${run.quote.credits} 算力；有效至 ${new Date(run.quote.expiresAt).toLocaleString()}。`);
+    dialog.showModal();
+};
+button('cancel-confirm').onclick = () => dialog.close();
+button('confirm').onclick = () => { dialog.close(); if (controller.state.quote?.runId === dialogRunId)
+    void controller.confirm(); };
+el('save-asset').onsubmit = async (e) => {
+    e.preventDefault();
+    if (uploading)
+        return;
+    const file = el('file').files?.[0];
+    if (!file) {
+        text('asset-message', '请先选择一个文件。');
+        return;
+    }
+    uploading = true;
+    render(controller.state);
+    text('asset-message', '正在保存本机文件…');
+    try {
+        const r = await api.request('/studio/api/assets', { method: 'POST', headers: { 'Content-Type': file.type, 'X-Studio-Display-Name': encodeURIComponent(file.name) }, body: file });
+        const value = await r.json();
+        if (controller.state.sessionExpired)
+            throw { code: 'STUDIO_SESSION_REQUIRED', message: '请从 CLI 重新打开 Studio' };
+        if (!r.ok)
+            throw Object.assign(new Error(value.error?.message || '保存未成功。'), { code: value.error?.code });
+        el('file').value = '';
+        await controller.refreshAssets({ afterWrite: true });
+        text('asset-message', '');
+        if (view === 'assets' && controller.state.assets.status === 'ready')
+            text('asset-message', '已保存到本机目录。');
+    }
+    catch (error) {
+        text('asset-message', errorText(uiError(error)));
+    }
+    finally {
+        uploading = false;
+        render(controller.state);
+    }
+};
+window.addEventListener('beforeunload', event => { if (canvasDirty || Object.values(controller.state.dirty).some(Boolean) || controller.state.submitBusy || controller.state.saving) {
+    event.preventDefault();
+    event.returnValue = '';
+} });
+document.addEventListener('visibilitychange', () => controller.setSavePageVisible(!document.hidden));
+window.addEventListener('pagehide', () => { outputObserver.disconnect(); assetObserver.disconnect(); controller.disposeSaves(); });
+(async () => {
+    controller.setSavePageVisible(!document.hidden);
+    const launch = new URLSearchParams(location.hash.slice(1)).get('launch');
+    history.replaceState(null, '', '/studio/');
+    if (launch)
+        await api('session/bootstrap', { launch });
+    await controller.init();
+})().catch(error => controller.reportError(error));
+//# sourceMappingURL=app.js.map