@ailuntz/minilink 0.8.0 → 0.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ailuntz/minilink",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "Use your Codex profiles in the Desktop model menu.",
   "type": "module",
   "license": "MIT AND Apache-2.0",

package/src/picker-client.js

@@ -3,47 +3,72 @@ const token = location.hash.slice(1) || sessionStorage.getItem('picker-token');
 if (token) sessionStorage.setItem('picker-token', token);
 history.replaceState(null, '', '/');
 let state, busy = false;
-const say = (text, error = false) => { $('message').textContent = text; $('message').className = error ? 'error' : ''; };
+const effortNames = { none: '关闭', minimal: '轻量', low: '低', medium: '中', high: '高', xhigh: '更高', ultra: '极高', persistent: '持续', default: '默认' };
+const selectedEffort = () => document.querySelector('input[name="effort"]:checked')?.value;
+const currentThread = () => state?.threads.find(t => t.id === $('thread').value);
+const currentPin = () => currentThread()?.pin || ($('thread').value === 'next' ? state?.next : null);
+const say = (text, error = false) => { $('message').textContent = text; $('message').className = `message${error ? ' error' : ''}`; };
 async function api(path, body) {
-  const response = await fetch(path, { method: body ? 'POST' : 'GET', headers: { Authorization: `Bearer ${token}`, ...(body ? { 'Content-Type': 'application/json' } : {}) }, ...(body ? { body: JSON.stringify(body) } : {}) });
-  const data = await response.json(); if (!response.ok) throw new Error(data.error); return data;
+  let response;
+  try { response = await fetch(path, { method: body ? 'POST' : 'GET', headers: { Authorization: `Bearer ${token}`, ...(body ? { 'Content-Type': 'application/json' } : {}) }, ...(body ? { body: JSON.stringify(body) } : {}) }); }
+  catch { throw new Error('连接已结束，请重新运行 minilink on。'); }
+  if (response.status === 401) throw new Error('入口已失效，请重新运行 minilink on。');
+  const data = await response.json(); if (!response.ok) throw new Error(data.error || '操作未完成，请重试。'); return data;
 }
 function fill(select, options, selected) {
   select.replaceChildren(...options.map(([value, text]) => { const option = document.createElement('option'); option.value = value; option.textContent = text; return option; }));
   if (options.some(([value]) => value === selected)) select.value = selected;
 }
-function changeModel(effort) {
+function controls() {
+  const thread = currentThread(), available = Boolean(state?.models.length);
+  $('form').setAttribute('aria-busy', String(busy));
+  $('refresh').disabled = busy; $('refresh').dataset.loading = String(busy);
+  $('thread').disabled = busy || !state;
+  $('model').disabled = busy || !available;
+  for (const input of $('effort').querySelectorAll('input')) input.disabled = busy || !available;
+  $('apply').disabled = busy || !available || Boolean(thread && thread.status !== 'idle');
+  $('release').disabled = busy || !currentPin();
+}
+function changeModel(preferred) {
   const model = state.models.find(m => m.model === $('model').value);
-  fill($('effort'), model?.efforts?.length ? model.efforts.map(e => [e.reasoningEffort, e.reasoningEffort]) : [['default', '默认']], effort || model?.effort);
+  const values = model?.efforts?.length ? model.efforts.map(e => e.reasoningEffort) : ['default'];
+  const candidate = preferred ?? model?.effort, selected = values.includes(candidate) ? candidate : values[0];
+  if (values.length > 5) $('effort').dataset.columns = values.length > 6 ? '4' : '3';
+  else delete $('effort').dataset.columns;
+  $('effort').replaceChildren(...values.map(value => {
+    const label = document.createElement('label'), input = document.createElement('input');
+    label.className = 'segment'; input.type = 'radio'; input.name = 'effort'; input.value = value; input.checked = value === selected;
+    label.append(input, document.createTextNode(effortNames[value] || value)); return label;
+  }));
+  controls();
 }
-function changeThread() {
-  const thread = state.threads.find(t => t.id === $('thread').value);
-  const pin = thread?.pin || ($('thread').value === 'next' ? state.next : null);
-  const current = state.models.find(m => m.model === pin?.model);
-  $('details').textContent = thread ? `${thread.cwd || ''}\n${thread.status === 'active' ? '正在回复，请等待完成。' : '任务已载入。'}${pin ? ` 由此页管理：${current?.name || pin.model}` : ' 由 Desktop 菜单管理。'}` : pin ? `下一个新任务将使用 ${current?.name || pin.model}。` : '先在这里选好模型，再回 Desktop 新建任务并发送。';
-  fill($('model'), state.models.map(m => [m.model, m.name]), pin?.model || thread?.model);
-  changeModel(pin?.effort);
-  $('apply').disabled = busy || (thread && thread.status !== 'idle');
-  $('release').disabled = busy || !pin;
+function changeThread(draft) {
+  const thread = currentThread(), pin = currentPin();
+  $('details').textContent = thread ? thread.status !== 'idle' ? '任务正在运行，完成后可切换。' : `${thread.cwd?.split('/').filter(Boolean).pop() || '当前任务'} · ${pin ? '由此页管理' : '由 Desktop 管理'}` : pin ? '已为下一个新任务设置模型。' : '';
+  $('details').title = thread?.cwd || '';
+  fill($('model'), state.models.length ? state.models.map(m => [m.model, m.name]) : [['', '暂无可用模型']], draft?.model || pin?.model || thread?.model);
+  changeModel(draft?.effort ?? pin?.effort);
 }
-async function refresh() {
-  const selected = $('thread').value;
+async function refresh(preserve = false) {
+  const selected = $('thread').value, draft = preserve && { model: $('model').value, effort: selectedEffort() };
   state = await api('/state');
   fill($('thread'), [['next', '下一个新任务'], ...state.threads.map(t => [t.id, t.name.slice(0, 90)])], selected);
-  changeThread();
+  changeThread($('thread').value === selected ? draft : null);
+  if (!state.models.length) say('暂无可用模型，请检查连接后刷新。', true);
 }
 async function action(operation) {
   if (busy) return;
-  busy = true; $('apply').disabled = true; $('release').disabled = true;
-  try { await operation(); } catch (error) { say(error.message || '连接已结束，请重新打开选择页。', true); }
-  finally { busy = false; if (state) changeThread(); }
+  busy = true; controls(); say('');
+  try { await operation(); } catch (error) { say(error.message || '操作未完成，请重试。', true); }
+  finally { busy = false; controls(); }
 }
 $('thread').onchange = () => { changeThread(); say(''); };
-$('model').onchange = () => changeModel();
-$('refresh').onclick = () => action(refresh);
+$('model').onchange = () => { changeModel(); say(''); };
+$('refresh').onclick = () => action(() => refresh(true));
 $('form').onsubmit = event => { event.preventDefault(); action(async () => {
-  await api('/choose', { threadId: $('thread').value, model: $('model').value, effort: $('effort').value === 'default' ? null : $('effort').value });
-  await refresh(); say('已设置。回到 Desktop 继续发送消息即可。');
+  const effort = selectedEffort();
+  await api('/choose', { threadId: $('thread').value, model: $('model').value, effort: effort === 'default' ? null : effort });
+  await refresh(); say('已设置，回到 Desktop 继续。');
 }); };
-$('release').onclick = () => action(async () => { await api('/release', { threadId: $('thread').value }); await refresh(); say('已交回 Desktop 菜单。'); });
+$('release').onclick = () => action(async () => { await api('/release', { threadId: $('thread').value }); await refresh(); say('已交回 Desktop。'); });
 action(refresh);

package/src/picker.html

@@ -1,8 +1,39 @@
 <!doctype html>
-<html lang="zh-CN"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>模型选择 · minilink</title>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<meta name="color-scheme" content="light dark">
+<title>选择模型 · minilink</title>
+<link rel="icon" href="data:,">
 <style>
-:root{color-scheme:light dark;font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#f5f5f3;color:#242623}body{margin:0;padding:56px 20px}main{max-width:640px;margin:auto}header{margin-bottom:32px}.eyebrow{font-size:12px;letter-spacing:.1em;color:#687368}h1{font-size:32px;line-height:1.2;margin:12px 0}p{color:#646d65;margin:12px 0}form{background:#fff;border:1px solid #e2e6df;border-radius:18px;padding:28px;box-shadow:0 8px 28px #18371a08}label{display:block;font-weight:600;font-size:14px;margin:16px 0 7px}label:first-child{margin-top:0}select,button{font:inherit;border-radius:9px}select{width:100%;padding:11px;border:1px solid #cad2c8;background:#fafbf9;color:inherit}button{cursor:pointer;border:0;padding:11px 17px;background:#255b3d;color:white;font-weight:600}button:disabled{opacity:.45;cursor:default}.secondary{background:#eef1ec;color:#425044}nav{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.detail{font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere}.note{font-size:13px;margin:20px 0 0}#message{min-height:26px;margin-top:18px;color:#255b3d}#message.error{color:#ad3434}footer{font-size:12px;color:#778076;margin-top:24px}a{color:inherit}#refresh{float:right;padding:5px 10px;font-size:13px}@media(prefers-color-scheme:dark){:root{background:#171c18;color:#e0e8e1}form{background:#202721;border-color:#394238}p,footer{color:#abb7ad}select{background:#252e27;border-color:#526152}.secondary{background:#364337;color:#d4e0d6}#message{color:#87d6a4}#message.error{color:#ffa0a0}}
+:root{font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif;color:#1d1d1f;background:#f5f5f7;color-scheme:light dark;--surface:#fff;--control:#f5f5f7;--line:#e8e8ed;--muted:#6e6e73;--accent:#007aff;--focus:#007aff55;--selected:#fff;--error:#c9342e;--success:#248a3d}
+*{box-sizing:border-box}body{margin:0;min-height:100svh;display:grid;place-items:center;padding:40px 20px;-webkit-font-smoothing:antialiased}main{width:min(100%,520px)}.panel{padding:26px 28px 22px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 4px 24px #00000004}.toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.brand{font-size:19px;font-weight:650;letter-spacing:-.6px}button,select,input{font:inherit}button{cursor:pointer}button:disabled{cursor:default}button,select{transition:background .15s,box-shadow .15s,opacity .15s}button:focus-visible,select:focus-visible,.segment:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:3px}.refresh{width:30px;height:30px;display:grid;place-items:center;padding:0;border:1px solid var(--line);border-radius:8px;color:var(--muted);background:var(--surface)}.refresh:hover:not(:disabled){background:var(--control);color:inherit}.refresh svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.refresh[data-loading=true] svg{animation:rotate 1s linear infinite}h1{margin:0;font-size:22px;line-height:1.3;font-weight:650;letter-spacing:-.6px}.subtitle{margin:7px 0 22px;color:var(--muted);font-size:13px}.fields{border-top:1px solid var(--line)}.field{padding:15px 0;border-bottom:1px solid var(--line)}.field>label,.effort-title{display:block;margin-bottom:8px;font-size:13px;font-weight:600}.select-wrap{position:relative}.select-wrap svg{position:absolute;right:12px;top:11px;width:16px;height:16px;fill:none;stroke:var(--muted);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}select{appearance:none;-webkit-appearance:none;display:block;width:100%;min-width:0;height:38px;padding:0 34px 0 12px;border:1px solid var(--line);border-radius:8px;background:var(--control);color:inherit;text-overflow:ellipsis}select:disabled{opacity:.5}.details{margin:9px 1px 0;font-size:12px;color:var(--muted);overflow-wrap:anywhere}.details:empty{display:none}.effort-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:62px}.effort-title{margin:0;flex-shrink:0}.segments{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px;padding:3px;border-radius:9px;background:var(--control);max-width:100%;min-width:156px}.segments[data-columns]{display:grid;min-width:198px;grid-template-columns:repeat(4,minmax(0,1fr))}.segments[data-columns="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}.segments[data-columns] .segment{min-width:0;padding-inline:7px}.segment{position:relative;display:flex;align-items:center;justify-content:center;min-height:28px;min-width:46px;flex:1;padding:3px 10px;border-radius:6px;color:var(--muted);font-size:12px;white-space:nowrap;cursor:pointer}.segment input{position:absolute;opacity:0;width:1px;height:1px}.segment:has(input:checked){background:var(--selected);color:#1d1d1f;box-shadow:0 1px 4px #00000012}.segment:has(input:disabled){cursor:default;opacity:.5}.actions{padding-top:22px}.apply{width:100%;min-height:38px;border:0;border-radius:8px;background:var(--accent);color:#fff;font-size:13px;font-weight:600}.apply:hover:not(:disabled){background:#0071e3}.apply:active:not(:disabled){background:#0065cc}.apply:disabled{opacity:.4}.release{display:block;margin:12px auto 0;padding:5px 12px;border:0;border-radius:6px;background:transparent;color:var(--muted);font-size:12px}.release:hover:not(:disabled){color:var(--accent);background:var(--control)}.release:disabled{opacity:.45}.message{margin:14px 0 0;font-size:12px;color:var(--success);text-align:center;overflow-wrap:anywhere}.message:empty{display:none}.message.error{color:var(--error)}footer{margin-top:16px;text-align:center;color:var(--muted);font-size:12px}footer p{margin:0}
+@keyframes rotate{to{transform:rotate(360deg)}}
+@media(max-width:480px){body{padding:24px 16px}.panel{padding:22px 20px 18px}.toolbar{margin-bottom:22px}.effort-row{gap:10px;flex-wrap:wrap}.segments{min-width:144px}.segment{min-width:38px;padding-inline:8px}}
+@media(prefers-color-scheme:dark){:root{background:#161618;color:#f5f5f7;--surface:#242426;--control:#303033;--line:#3a3a3d;--muted:#a1a1a6;--accent:#0a84ff;--focus:#0a84ff77;--selected:#56565b;--error:#ff6961;--success:#6bd68b}.panel{box-shadow:0 8px 32px #00000016}.segment:has(input:checked){color:#fff}.apply:hover:not(:disabled){background:#2994ff}}
+@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
 </style>
-<main><header><button id="refresh" class="secondary" type="button">刷新</button><div class="eyebrow">MINILINK</div><h1>选择下一条回复的模型</h1><p>Desktop 的额度提示挡住菜单时，在这里切换。</p></header>
-<form id="form"><label for="thread">任务</label><select id="thread" required></select><p id="details" class="detail"></p><label for="model">模型</label><select id="model" required></select><label for="effort">推理强度</label><select id="effort" required></select><nav><button id="apply" type="submit">使用此模型</button><button id="release" class="secondary" type="button">交回 Desktop 菜单</button></nav><p class="note">启用后，该任务的模型与推理强度由此页管理，直到交回菜单或退出 Desktop。原生菜单可能仍显示额度提示，以此页的选择为准。</p><div id="message" role="status" aria-live="polite"></div></form>
-<footer>模型和推理选项来自客户端及 profile 指定的目录。此页不改变账户额度。新任务选项只作用于下一次正式创建的本地任务。</footer></main><script src="/picker.js"></script></html>
+</head>
+<body>
+<main>
+<section class="panel" aria-labelledby="title">
+<header>
+<div class="toolbar"><span class="brand">minilink</span><button id="refresh" class="refresh" type="button" aria-label="刷新" title="刷新" disabled><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M16 7A6.3 6.3 0 1 0 16 13M16 3v4h-4"/></svg></button></div>
+<h1 id="title">选择模型</h1><p class="subtitle">为下一条回复选择模型。</p>
+</header>
+<form id="form" aria-busy="true">
+<div class="fields">
+<div class="field"><label for="thread">任务</label><div class="select-wrap"><select id="thread" aria-describedby="details" required disabled><option>正在连接…</option></select><svg viewBox="0 0 16 16" aria-hidden="true"><path d="m4 6 4 4 4-4"/></svg></div><p id="details" class="details"></p></div>
+<div class="field"><label for="model">模型</label><div class="select-wrap"><select id="model" required disabled><option>正在读取模型…</option></select><svg viewBox="0 0 16 16" aria-hidden="true"><path d="m4 6 4 4 4-4"/></svg></div></div>
+<div class="field effort-row"><span id="effort-label" class="effort-title">推理强度</span><div id="effort" class="segments" role="radiogroup" aria-labelledby="effort-label"></div></div>
+</div>
+<div class="actions"><button id="apply" class="apply" type="submit" disabled>使用此模型</button><button id="release" class="release" type="button" disabled>交回 Desktop</button></div>
+<p id="message" class="message" role="status" aria-live="polite"></p>
+</form>
+</section>
+<footer><p>设置后，回到 Desktop 继续。</p></footer>
+</main>
+<script src="/picker.js"></script>
+</body>
+</html>

package/src/picker.mjs

@@ -102,7 +102,7 @@ export class Picker {
     const server = createServer(async (req, res) => {
       const reply = (code, body, type = 'application/json') => {
         res.writeHead(code, { 'content-type': `${type}; charset=utf-8`, 'cache-control': 'no-store', 'x-content-type-options': 'nosniff',
-          'referrer-policy': 'no-referrer', 'content-security-policy': "default-src 'none'; script-src 'self'; style-src 'unsafe-inline'; connect-src 'self'; frame-ancestors 'none'; base-uri 'none'; form-action 'none'" });
+          'referrer-policy': 'no-referrer', 'content-security-policy': "default-src 'none'; script-src 'self'; style-src 'unsafe-inline'; img-src data:; connect-src 'self'; frame-ancestors 'none'; base-uri 'none'; form-action 'none'" });
         res.end(type === 'application/json' ? JSON.stringify(body) : body);
       };
       if (req.headers.host !== new URL(origin).host || (req.headers.origin && req.headers.origin !== origin)) return reply(403, { error: '访问来源不匹配。' });