heyquilt 0.3.116 → 0.3.118

package/src/session.js

@@ -391,6 +391,9 @@ export class Session extends EventEmitter {
     // A person's cloud AI: its pass names its person, and it is one of their AI sessions.
     const aiOf = kind === 'agent' && typeof p.of === 'string' && p.of && typeof p.ofName === 'string' && p.ofName.trim() ? p.ofName.trim() : null
     if (name === this.name && kind === this.kind && aiOf === this.aiOf) return
+    // An agent renamed while connected (a cloud AI its person renamed) keeps the name this connection
+    // joined with: the relay drops a presence under another. It takes the new one when it joins again.
+    if (this.conn && this.conn.connected && this.kind === 'agent' && kind === 'agent' && aiOf === this.aiOf && name !== this.name) return
     this.name = name
     this.kind = kind
     this.aiOf = aiOf
@@ -6275,9 +6278,18 @@ export class Session extends EventEmitter {
   /** Whether a name the history gives is this person's: theirs, one of their AI sessions', or their cloud AI's. */
   ownName (name) {
     if (this.isMine(name)) return true
-    if (this.aiOf || !this.conn || !this.conn.awareness) return false
-    for (const [id, st] of this.conn.awareness.getStates()) if (id !== this.doc.clientID && isCloudAi(st) && st.aiOf === this.name && st.name === name) return true
-    return false
+    return !this.aiOf && this.myCloudAiNames().has(name)
+  }
+
+  /**
+   * The names this person's cloud AI has had here ("Juniper", or "<me>'s AI"): seen in the room,
+   * and remembered while it sleeps, so what is written to it stays theirs to read.
+   */
+  myCloudAiNames () {
+    this.cloudNames ||= new Set()
+    if (this.aiOf || !this.conn || !this.conn.awareness) return this.cloudNames
+    for (const [id, st] of this.conn.awareness.getStates()) if (id !== this.doc.clientID && isCloudAi(st) && st.aiOf === this.name && typeof st.name === 'string') this.cloudNames.add(st.name)
+    return this.cloudNames
   }
 
   /**
@@ -6909,7 +6921,7 @@ export class Session extends EventEmitter {
   /** Whether a message is meant for me: a well-formed one that is public, mine, or addressed to me. */
   canSee (msg) {
     // A person also sees what is written to and by their cloud AI ("<me>'s AI"): it is theirs.
-    const mineOrMyAi = (n) => this.isMine(n) || (this.kind !== 'agent' && n === aiName(this.name))
+    const mineOrMyAi = (n) => this.isMine(n) || (this.kind !== 'agent' && (n === aiName(this.name) || this.myCloudAiNames().has(n)))
     return validMessage(msg) && (!msg.to || mineOrMyAi(msg.to) || mineOrMyAi(msg.by))
   }
 

package/src/setup.js

@@ -133,9 +133,11 @@ export const HOOKS_FILE = '.claude/settings.local.json'
 
 /**
  * Puts Quilt's hooks into the project's .claude/settings.local.json, replacing earlier
- * Quilt entries and leaving other hooks and settings alone. Returns true when the file changed.
+ * Quilt entries and leaving other hooks and settings alone. `stop` (an agent of its own) adds the
+ * hook as the AI finishes a turn; without it, a Quilt one left there is taken out (hooks.js
+ * hookSettings). Returns true when the file changed.
  */
-export function installHooks (root) {
+export function installHooks (root, { stop = false } = {}) {
   const file = path.join(root, HOOKS_FILE)
   let prev = ''
   try { prev = fs.readFileSync(file, 'utf8') } catch {}
@@ -144,11 +146,14 @@ export function installHooks (root) {
   if (typeof json !== 'object' || Array.isArray(json)) json = {}
   const hooks = (json.hooks && typeof json.hooks === 'object' && !Array.isArray(json.hooks)) ? json.hooks : {}
   const ours = isQuiltHook
-  for (const [event, entries] of Object.entries(hookSettings())) {
+  const ourEvents = hookSettings(undefined, { stop })
+  if (!stop) ourEvents.Stop = []
+  for (const [event, entries] of Object.entries(ourEvents)) {
     const kept = (Array.isArray(hooks[event]) ? hooks[event] : [])
       .map((e) => (e && Array.isArray(e.hooks) ? { ...e, hooks: e.hooks.filter((h) => !ours(h)) } : e))
       .filter((e) => e && (!Array.isArray(e.hooks) || e.hooks.length))
-    hooks[event] = [...kept, ...entries]
+    if (kept.length || entries.length) hooks[event] = [...kept, ...entries]
+    else delete hooks[event]
   }
   json.hooks = hooks
   const text = JSON.stringify(json, null, 2) + '\n'

package/src/ui/app.css

@@ -2417,21 +2417,14 @@ details.mw + .cp-commit, .mw-head + .cp-commit { margin-top: 8px; }
   .theme-switch button.on, .choice-card:has(input:checked) { background: var(--panel); }
 }
 
-/* ---------- Settings → Your AI: a cloud AI, one card that grows ---------- */
+/* ---------- Settings → Agents: your cloud AI (cloud-ai.js) ---------- */
+/* Before setup an invite card; setting it up takes over the Settings panel (the pop-up's right side, or
+   the page's tab panel) with its own header, steps and footer; set up, its card with what it does. */
 /* The later .pill rule makes pills inline-block, which hides their dot: this one keeps the first rule's shape. */
 .pill.cai-pill { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; font-size: 12px; letter-spacing: 0; vertical-align: middle; background: var(--panel-2); border: 1px solid var(--border); }
 .cai-pill .dot { flex: none; }
-.cloud-ai .sec-intro .cai-pill { margin-left: auto; }
-.cai-body { display: grid; gap: 14px; }
-.cai-body > p { margin: 0; }
-.cai-body .error { margin: 0; }
 .pill.bad { color: var(--bad); } .pill.bad .dot { background: var(--bad); }
 .pill.sleep { color: var(--edit); } .pill.sleep .dot { background: var(--edit); }
-.cai-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
-.cai-tool { display: grid; gap: 6px; justify-items: center; align-content: start; padding: 16px 12px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--panel); text-align: center; }
-.cai-tool b { font-weight: 600; }
-.cai-tool .hint { font-size: 12px; }
-.cai-tool .btn { width: 100%; margin-top: 6px; }
 .cai-logo { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--border); }
 .cai-logo .tool-mark { width: 20px; height: 20px; }
 .cai-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@@ -2447,30 +2440,166 @@ details.mw + .cp-commit, .mw-head + .cp-commit { margin-top: 8px; }
 .cai-code { font-family: var(--mono); font-size: 26px; letter-spacing: .12em; text-align: center; padding: 10px; border-radius: var(--radius); background: var(--panel-2); border: 1px dashed var(--border-strong); user-select: all; }
 .cai-link { font-family: var(--mono); font-size: 12px; color: var(--edit); overflow-wrap: anywhere; padding: 8px 10px; border-radius: 4px; background: var(--panel-2); user-select: all; }
 .cai-paste .input:disabled, .cai-paste .btn:disabled { opacity: .55; }
-.cai-who { display: flex; align-items: center; gap: 12px; }
-.cai-who .grow { flex: 1; min-width: 0; display: grid; }
-.cai-who .grow b { font-weight: 600; }
-.cai-sessions { display: grid; gap: 6px; }
-.cai-sess { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 4px; background: var(--panel-2); font-size: 13px; }
-.cai-sess .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.cai-kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
-.cai-kv > div { padding: 10px 12px; border-radius: var(--radius); background: var(--panel-2); min-width: 0; }
-.cai-kv b { display: block; font-size: 18px; font-weight: 600; }
-.cai-kv span { font-size: 12px; color: var(--muted); }
-.cai-meter { height: 8px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
-.cai-meter i { display: block; height: 100%; background: var(--ok); border-radius: 999px; }
-.cai-meter.over i { background: var(--warn); }
-.cai-sep { border: 0; border-top: 1px dashed var(--border); margin: 0; }
-.cai-form { display: grid; gap: 14px; }
-.cai-form > .field { margin-bottom: 0; }
 .cai-confirm { display: grid; gap: 10px; padding: 12px; border-radius: var(--radius); border: 1px dashed color-mix(in srgb, var(--bad) 55%, var(--border)); background: color-mix(in srgb, var(--bad) 6%, var(--panel)); }
 .cai-confirm p { margin: 0; font-size: 13px; }
+.cloud-ai .sec-intro .cai-pill { margin-left: auto; }
+
+/* before setup: the invite (stitched patch, three facts that stack when the card is narrow) */
+.settings-sec.cloud-ai:has(> .ai-invite) { padding: 0; }
+.ai-invite { container-type: inline-size; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; padding: 26px 26px 24px; }
+.ai-patch { width: 76px; height: 76px; border-radius: 16px; display: grid; place-items: center; position: relative; color: var(--muted); background: repeating-linear-gradient(45deg, transparent 0 7px, color-mix(in srgb, var(--text) 4%, transparent) 7px 8px), var(--panel-2); }
+.ai-patch::after { content: ""; position: absolute; inset: 6px; border: 1.5px dashed var(--border-strong); border-radius: 11px; }
+.ai-patch svg { width: 26px; height: 26px; }
+.ai-invite h2 { margin: 0 0 4px; font-size: 18px; letter-spacing: -0.015em; }
+.ai-invite p { margin: 0; color: var(--muted); font-size: 13.5px; }
+.ai-invite > .error { grid-column: 1 / -1; }
+.ai-facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
+.ai-fact { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; padding: 14px 16px; background: var(--panel); }
+.ai-fact + .ai-fact { border-left: 1px solid var(--border); }
+.ai-fact i, .ai-row > i { display: grid; place-items: center; background: var(--panel-2); color: var(--text); font-style: normal; }
+.ai-fact i { width: 28px; height: 28px; border-radius: 8px; }
+.ai-fact i svg, .ai-row > i svg { width: 16px; height: 16px; }
+.ai-fact b { display: block; font-size: 13px; font-weight: 600; }
+.ai-fact span { font-size: 12px; color: var(--muted); line-height: 1.45; }
+.ai-invite-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; }
+.ai-invite-foot .grow { flex: 1; color: var(--muted); font-size: 12.5px; }
+@container (max-width: 620px) {
+  .ai-facts { grid-template-columns: minmax(0, 1fr); }
+  .ai-fact { align-items: center; padding: 11px 14px; }
+  .ai-fact + .ai-fact { border-left: 0; border-top: 1px solid var(--border); }
+  .ai-fact b { display: inline; margin-right: 6px; }
+}
+
+/* the setup: header (back, title, step count, step bar), body, footer */
+.ai-flow-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
+.ai-flow-head .back { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; color: var(--muted); background: none; border: 0; padding: 4px 6px; margin-left: -6px; border-radius: 6px; cursor: pointer; }
+.ai-flow-head .back:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
+.ai-flow-head .back svg { width: 14px; height: 14px; }
+.ai-flow-head .sep { width: 1px; height: 16px; background: var(--border-strong); flex: none; }
+.ai-flow-head h4 { margin: 0; font-size: 15px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ai-flow-head .count { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.ss-main.ai-flow .ai-flow-head .count { margin-right: 34px; }
+.ai-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
+.ai-steps li { display: grid; gap: 7px; font-size: 12px; color: var(--faint); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ai-steps li::before { content: ""; height: 3px; border-radius: 3px; background: var(--border); }
+.ai-steps li.done { color: var(--muted); }
+.ai-steps li.done::before { background: var(--text); opacity: .55; }
+.ai-steps li.now { color: var(--text); font-weight: 600; }
+.ai-steps li.now::before { background: var(--accent); }
+.ss-main.ai-flow #settings-body { padding: 0; }
+.ai-flow-body { display: grid; gap: 26px; padding: 26px 28px 28px; align-content: start; }
+.ai-flow-foot { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 24px; border-top: 1px solid var(--border); background: var(--canvas); }
+.ai-flow-foot .grow { flex: 1; min-width: 0; font-size: 12.5px; color: var(--muted); }
+.ai-flow-foot .grow .error { margin: 0; }
+.ai-flow-foot .btn.primary { min-width: 132px; }
+.ai-page-flow { border: 1px solid var(--border); border-radius: 14px; background: var(--canvas); }
+.ai-page-flow > .ss-head { padding: 18px 24px 14px; }
+.ai-page-flow > .ai-flow-foot { border-radius: 0 0 14px 14px; }
+
+/* the AI as people will see it, filling in as it is set up */
+.ai-card { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); box-shadow: var(--shadow); min-width: 0; }
+.ai-card .avatar { width: 56px; height: 56px; font-size: 22px; box-shadow: 0 0 0 4px var(--panel), 0 0 0 5px var(--border); }
+.ai-card .who { flex: 1; min-width: 0; display: grid; gap: 3px; }
+.ai-card .name { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
+.ai-card .name b { font-size: 20px; font-weight: 650; letter-spacing: -0.015em; overflow-wrap: anywhere; }
+.ai-tag { font-size: 11.5px; font-weight: 600; color: var(--muted); background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 1px 9px; white-space: nowrap; }
+.ai-card .sub { font-size: 13px; color: var(--muted); }
+.ai-card .sub.now { color: var(--text); margin-top: 4px; }
+.ai-card .at { font-family: var(--mono); font-size: 12px; color: var(--accent); }
+.ai-card.compact { padding: 12px 16px; gap: 12px; box-shadow: none; }
+.ai-card.compact .avatar { width: 38px; height: 38px; font-size: 15px; box-shadow: none; }
+.ai-card.compact .who { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 14px; }
+.ai-card.compact .name { flex-wrap: nowrap; }
+.ai-card.compact .name b { font-size: 16px; }
+.ai-card.compact .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+/* a question */
+.ai-q { display: grid; gap: 16px; min-width: 0; }
+.ai-q > header h3 { margin: 0 0 4px; font-size: 19px; letter-spacing: -0.015em; }
+.ai-q > header p { margin: 0; color: var(--muted); font-size: 13.5px; }
+.ai-sub { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); margin-bottom: -6px; }
+.ai-q .input.ai-name { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; padding: 12px 14px; }
+.ai-chips { display: flex; flex-wrap: wrap; gap: 8px; }
+.ai-chip { font: inherit; font-size: 13px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--panel); color: var(--text); cursor: pointer; }
+.ai-chip:hover { border-color: var(--text); }
+.ai-chip.on { background: var(--text); color: var(--bg); border-color: var(--text); }
+.ai-colors { display: flex; flex-wrap: wrap; gap: 10px; }
+.ai-color { width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
+.ai-color.on { box-shadow: 0 0 0 3px var(--canvas), 0 0 0 5px var(--text); }
+.ai-color:focus-visible, .ai-chip:focus-visible, .ai-tool:focus-visible, .ai-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.ai-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
+.ai-tool { position: relative; display: grid; gap: 10px; justify-items: start; padding: 18px 18px 16px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--panel); cursor: pointer; text-align: left; font: inherit; color: var(--text); min-width: 0; }
+.ai-tool:hover { border-color: var(--text); }
+.ai-tool .cai-logo { width: 42px; height: 42px; border-radius: 10px; }
+.ai-tool .cai-logo .tool-mark { width: 22px; height: 22px; }
+.ai-tool b { font-size: 15px; font-weight: 600; }
+.ai-tool .hint { font-size: 12.5px; margin-top: -6px; }
+.ai-tool .tick { position: absolute; top: 14px; right: 14px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--border-strong); display: grid; place-items: center; color: var(--bg); }
+.ai-tool .tick svg { width: 12px; height: 12px; }
+.ai-tool.on { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
+.ai-tool.on .tick { background: var(--text); border-color: var(--text); }
+.ai-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
+.ai-pair .field, .ai-q .field.ai-rules { margin: 0; }
+
+/* what it does: a grouped list (setup and the card) */
+.ai-list { border: 1px solid var(--border); border-radius: 12px; background: var(--panel); overflow: hidden; }
+.ai-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 15px 18px; }
+.ai-row + .ai-row { border-top: 1px solid var(--border); }
+.ai-row > i { width: 34px; height: 34px; border-radius: 9px; }
+.ai-row b { display: block; font-size: 13.5px; font-weight: 600; }
+.ai-row .hint { display: block; font-size: 12.5px; line-height: 1.45; }
+.ai-row.wide { grid-template-columns: 34px minmax(0, 1fr); }
+.ai-row.wide .ctl { grid-column: 2; }
+.ai-row.wide .seg { width: 100%; }
+.ai-always { font-size: 12px; font-weight: 600; color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
+.ai-switch { position: relative; width: 40px; height: 24px; border-radius: 999px; background: var(--border-strong); border: 0; padding: 0; flex: none; cursor: pointer; }
+.ai-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--panel); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s; }
+.ai-switch.on { background: var(--ok); }
+.ai-switch.on::after { transform: translateX(16px); }
+
+/* sessions */
+.ai-sess { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 18px; cursor: pointer; }
+.ai-sess + .ai-sess { border-top: 1px solid var(--border); }
+.ai-sess.off { cursor: default; }
+.ai-sess.off b, .ai-sess.off .hint { opacity: .75; }
+.ai-sess input { width: 17px; height: 17px; margin: 0; accent-color: var(--text); }
+.ai-sess b { display: block; font-size: 13.5px; font-weight: 600; }
+.ai-sess .hint { font-size: 12.5px; }
+.ai-sess.static { grid-template-columns: 8px minmax(0, 1fr) auto; cursor: default; padding: 11px 18px; }
+.ai-on { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
+.ai-faces { display: flex; }
+.ai-faces .avatar { width: 24px; height: 24px; font-size: 10px; background: var(--border-strong); color: var(--text); box-shadow: 0 0 0 2px var(--panel); }
+.ai-faces .avatar + .avatar { margin-left: -6px; }
+
+/* the sign-in, and what was chosen */
+.ai-signin { display: grid; gap: 16px; padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
+.ai-signin-again { display: flex; }
+.ai-review { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: 12px; background: var(--panel); overflow: hidden; }
+.ai-review > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 13px 18px; min-width: 0; }
+.ai-review > div:nth-child(odd) { border-right: 1px solid var(--border); }
+.ai-review > div:nth-child(n+3) { border-top: 1px solid var(--border); }
+.ai-review span { font-size: 11.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
+.ai-review b { grid-column: 1; font-size: 13.5px; font-weight: 500; }
+.ai-change { grid-row: 1 / span 2; grid-column: 2; align-self: center; font: inherit; font-size: 12.5px; color: var(--muted); background: none; border: 0; padding: 2px 4px; text-decoration: underline; cursor: pointer; }
+.ai-change:hover { color: var(--text); }
+
+/* set up: its card */
+.ai-run { display: grid; gap: 18px; }
+.ai-run > p, .ai-run .error { margin: 0; }
+.ai-asleep { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; background: var(--panel-2); }
+.ai-asleep .hint { flex: 1; }
+.ai-meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
+.ai-meters > div { padding: 12px 16px; background: var(--panel); display: grid; gap: 2px; min-width: 0; }
+.ai-meters > div + div { border-left: 1px solid var(--border); }
+.ai-meters b { font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
+.ai-meters span { font-size: 12px; color: var(--muted); }
 @media (max-width: 640px) {
-  .cai-tools, .cai-two { grid-template-columns: minmax(0, 1fr); }
-  .cai-kv { gap: 6px; }
-  .cai-kv > div { padding: 8px 10px; }
-  .cai-kv b { font-size: 16px; }
-  .cai-who { flex-wrap: wrap; }
+  .ai-tools, .ai-pair, .ai-review, .cai-two { grid-template-columns: minmax(0, 1fr); }
+  .ai-review > div:nth-child(odd) { border-right: 0; }
+  .ai-review > div + div { border-top: 1px solid var(--border); }
+  .ai-steps li { font-size: 0; gap: 0; }
+  .ai-flow-body { padding: 18px 16px 20px; }
+  .ai-invite { grid-template-columns: minmax(0, 1fr); }
 }
 
 /* Sandbox keys: an agent's Keys table (sandbox-keys.js, mockup option A), opened from its card in Settings › Agents. */
@@ -2748,3 +2877,5 @@ body.has-asks .ws { height: calc(100vh - var(--update-bar, 0px) - var(--asks-bar
 .task-nopickup-x { margin-left: 2px; opacity: .55; font-weight: 700; }
 .task-nopickup:hover .task-nopickup-x, .task-nopickup:focus-visible .task-nopickup-x { opacity: 1; }
 .task-nopickup:hover, .task-nopickup:focus-visible { background: color-mix(in srgb, var(--warn) 20%, transparent); outline: none; }
+/* A cloud AI's own name in chat, then whose AI it is ("Juniper  Daniel's AI"). */
+.msg .head .ai-tag { font-size: 10.5px; padding: 0 7px; }