@clowder-ai/companion 0.1.0-alpha.21 → 0.1.0-alpha.25

package/renderer/reply-letter-controller.mjs

@@ -0,0 +1,343 @@
+import { newestHistoryAnchor, projectReplyBody, selectReplyPresentation } from './reply-letter-state.mjs';
+
+const replyVisibleDuration = text => Math.min(30_000, 6_000 + Math.ceil([...text].length / 8) * 1_000);
+
+/**
+ * Transient presentation state for a Host-owned conversation.
+ *
+ * Inputs are normalized bridge rows. In particular, inputMessageIds must be
+ * supplied by the trusted Host projection; this controller never guesses a
+ * relationship from timestamps, call ids, adjacency or equal text.
+ */
+export class ReplyLetterController {
+  constructor({ render, requestContinuation = () => {}, now = Date.now,
+    schedule = setTimeout, cancel = clearTimeout }) {
+    Object.assign(this, { render, requestContinuation, now });
+    this.schedule = (...args) => Reflect.apply(schedule, globalThis, args);
+    this.cancel = (...args) => Reflect.apply(cancel, globalThis, args);
+    this.mode = 'idle';
+    this.pending = new Map();
+    this.settled = [];
+    this.pairs = new Map();
+    this.history = [];
+    this.draft = null;
+    this.letter = null;
+    this.reply = null;
+    this.retained = false;
+    this.hasNewer = false;
+    this.selectedMessageId = null;
+    this.pauseReasons = new Set();
+    this.requestedContinuations = new Set();
+    this.dismissedReplies = new Set();
+    this.timerHandle = null;
+    this.timerStartedAt = null;
+    this.timerRemainingMs = 0;
+    this.blockedReason = null;
+    this.draftNotice = null;
+  }
+
+  recordDelivery(receipt, text, context = {}) {
+    this.blockedReason = null;
+    if (receipt.delivery !== 'accepted') {
+      this.draft = {
+        text,
+        clientMessageId: receipt.clientMessageId,
+        ...(context.submissionRevision === undefined ? {} : { submissionRevision: context.submissionRevision }),
+        ...(context.scopeRef === undefined ? {} : { scopeRef: context.scopeRef }),
+        settlement: receipt.delivery === 'rejected' ? receipt.reason : 'unconfirmed',
+      };
+      if (this.mode !== 'history') this.mode = 'compose';
+      this.emit();
+      return;
+    }
+    const letter = { text, clientMessageId: receipt.clientMessageId, inputMessageId: receipt.messageId };
+    const known = this.pending.get(receipt.messageId) ?? this.pairs.get(receipt.messageId)?.letter;
+    if (known?.clientMessageId === receipt.clientMessageId) {
+      if (this.draft?.clientMessageId === receipt.clientMessageId) this.draft = null;
+      this.emit();
+      return;
+    }
+    this.pending.set(receipt.messageId, letter);
+    if (context.restored === false || this.draft?.clientMessageId === receipt.clientMessageId) this.draft = null;
+    if (this.mode !== 'history') {
+      this.stopTimer();
+      this.reply = null;
+      this.letter = letter;
+      this.retained = false;
+      this.mode = 'sent';
+    }
+    this.emit();
+  }
+
+  invalidateDraft(value) {
+    this.draft = {
+      text: value.text,
+      clientMessageId: value.clientMessageId,
+      submissionRevision: value.submissionRevision,
+      scopeRef: value.scopeRef,
+      settlement: value.reason ?? 'scope_changed',
+    };
+    if (this.mode !== 'history') this.mode = 'compose';
+    this.emit();
+  }
+
+  setDraftNotice(value) {
+    if (this.draftNotice === value) return;
+    this.draftNotice = value;
+    this.emit();
+  }
+
+  openCompose() {
+    if (this.reply) this.dismissedReplies.add(this.reply.id);
+    this.stopTimer();
+    this.reply = null;
+    this.letter = null;
+    this.mode = 'compose';
+    this.retained = false;
+    this.hasNewer = false;
+    this.selectedMessageId = null;
+    this.pauseReasons.clear();
+    this.emit();
+  }
+
+  loadHistory(rows) {
+    this.history = rows.map(row => ({
+      id: row.id,
+      role: row.role,
+      text: row.text,
+      body: projectReplyBody(row),
+      inputMessageIds: [...(row.inputMessageIds ?? [])],
+      responsePhase: row.responsePhase ?? 'unknown',
+      deliveryReceipt: row.deliveryReceipt ? { ...row.deliveryReceipt } : undefined,
+    }));
+    let restoredLetter = null;
+    for (const row of this.history) {
+      const receipt = row.deliveryReceipt;
+      if (row.role !== 'user' || receipt?.delivery !== 'accepted' || receipt.messageId !== row.id) continue;
+      if (this.pending.has(row.id) || this.pairs.has(row.id)) continue;
+      restoredLetter = {
+        text: row.text,
+        clientMessageId: receipt.clientMessageId,
+        inputMessageId: row.id,
+      };
+      this.pending.set(row.id, restoredLetter);
+    }
+    let newestPair = null;
+    const settledNow = [];
+    for (const row of this.history) {
+      if (row.role !== 'assistant') continue;
+      if (row.responsePhase === 'completed') this.requestMissingBody(row);
+      for (const inputMessageId of row.inputMessageIds) {
+        const pending = this.pending.get(inputMessageId);
+        const existing = this.pairs.get(inputMessageId);
+        if (!pending && !existing) continue;
+        if (row.responsePhase !== 'completed') {
+          if (pending) {
+            const updated = { ...pending, responsePhase: row.responsePhase };
+            this.pending.set(inputMessageId, updated);
+            if (this.letter?.inputMessageId === inputMessageId) this.letter = updated;
+          }
+          continue;
+        }
+        const letter = pending ?? existing.letter;
+        const pair = { inputMessageId, replyId: row.id, letter, reply: this.replyValue(row) };
+        if (!existing) {
+          this.pending.delete(inputMessageId);
+          this.settled.push({ inputMessageId, replyId: row.id });
+          settledNow.push(pair);
+        }
+        this.pairs.set(inputMessageId, pair);
+        newestPair = pair;
+      }
+    }
+
+    const presentationPair = selectReplyPresentation({ mode: this.mode, letter: this.letter,
+      reply: this.reply, settledPairs: settledNow, pairs: this.pairs,
+      dismissedReplies: this.dismissedReplies });
+    if (newestPair && this.mode === 'history') {
+      if (newestPair.replyId !== this.selectedMessageId) this.hasNewer = true;
+    } else if (presentationPair) {
+      const changedReply = this.reply?.id !== presentationPair.replyId;
+      const becameComplete = this.reply?.id === presentationPair.replyId
+        && this.reply.complete === false && presentationPair.reply.complete === true;
+      this.letter = presentationPair.letter;
+      this.reply = presentationPair.reply;
+      this.selectedMessageId = presentationPair.replyId;
+      this.mode = 'reply';
+      if (changedReply) {
+        this.retained = false;
+        this.pauseReasons.clear();
+        this.stopTimer();
+      }
+      if ((changedReply || becameComplete) && presentationPair.reply.complete) {
+        this.timerRemainingMs = replyVisibleDuration(presentationPair.reply.text);
+        this.startTimer();
+      }
+    } else if (this.mode === 'sent') {
+      this.letter = [...this.pending.values()].at(-1) ?? null;
+      if (!this.letter) this.mode = 'idle';
+    } else if (restoredLetter && this.mode === 'idle') {
+      this.letter = restoredLetter;
+      this.mode = 'sent';
+    }
+    this.emit();
+  }
+
+  replyValue(row) {
+    return { id: row.id, text: row.text, complete: row.body.complete,
+      responsePhase: row.responsePhase };
+  }
+
+  requestMissingBody(row) {
+    const reference = row.body.continuation;
+    if (row.body.complete || !reference) {
+      for (const key of this.requestedContinuations) {
+        if (key.startsWith(`${row.id}\u0000`)) this.requestedContinuations.delete(key);
+      }
+      return;
+    }
+    const key = `${row.id}\u0000${reference}`;
+    if (this.requestedContinuations.has(key)) return;
+    this.requestedContinuations.add(key);
+    this.requestContinuation({ messageId: row.id, continuation: reference });
+  }
+
+  releaseContinuation(messageId, continuation) {
+    this.requestedContinuations.delete(`${messageId}\u0000${continuation}`);
+  }
+
+  pause(reason) {
+    if (this.pauseReasons.has(reason)) return;
+    this.pauseReasons.add(reason);
+    if (this.timerHandle !== null) {
+      this.timerRemainingMs = Math.max(0, this.timerRemainingMs - (this.now() - this.timerStartedAt));
+      this.stopTimer(false);
+    }
+    this.emit();
+  }
+
+  resume(reason) {
+    if (!this.pauseReasons.delete(reason)) return;
+    if (this.pauseReasons.size === 0) this.startTimer();
+    this.emit();
+  }
+
+  pin() {
+    if (this.mode !== 'reply') return;
+    this.retained = true;
+    this.stopTimer();
+    this.emit();
+  }
+
+  close() {
+    if (this.reply) this.dismissedReplies.add(this.reply.id);
+    this.stopTimer();
+    this.reply = null;
+    this.retained = false;
+    this.selectedMessageId = null;
+    this.letter = [...this.pending.values()].at(-1) ?? null;
+    this.mode = this.letter ? 'sent' : 'idle';
+    this.emit();
+  }
+
+  withdrawReply(replyId) {
+    let restored = null;
+    for (const [inputMessageId, pair] of this.pairs) {
+      if (pair.replyId !== replyId) continue;
+      restored = { ...pair.letter, responsePhase: 'withdrawn' };
+      this.pairs.delete(inputMessageId);
+      this.pending.set(inputMessageId, restored);
+    }
+    this.settled = this.settled.filter(value => value.replyId !== replyId);
+    this.history = this.history.filter(value => value.id !== replyId);
+    this.dismissedReplies.delete(replyId);
+    for (const key of this.requestedContinuations) {
+      if (key.startsWith(`${replyId}\u0000`)) this.requestedContinuations.delete(key);
+    }
+    if (this.reply?.id === replyId) {
+      this.stopTimer();
+      this.reply = null;
+      this.retained = false;
+      this.selectedMessageId = null;
+      this.letter = restored ?? [...this.pending.values()].at(-1) ?? null;
+      this.mode = this.letter ? 'sent' : 'idle';
+    }
+    this.emit();
+  }
+
+  clearProtected(reason) {
+    this.stopTimer();
+    this.pending.clear();
+    this.settled = [];
+    this.pairs.clear();
+    this.history = [];
+    this.letter = null;
+    this.reply = null;
+    this.retained = false;
+    this.hasNewer = false;
+    this.selectedMessageId = null;
+    this.requestedContinuations.clear();
+    this.dismissedReplies.clear();
+    this.blockedReason = reason;
+    this.mode = this.draft ? 'compose' : 'idle';
+    this.emit();
+  }
+
+  openHistory(messageId = newestHistoryAnchor(this.selectedMessageId, this.settled, this.history)) {
+    this.stopTimer();
+    this.mode = 'history';
+    this.retained = true;
+    this.selectedMessageId = messageId;
+    this.hasNewer = false;
+    this.emit();
+  }
+
+  returnLatest() {
+    this.selectedMessageId = this.settled.at(-1)?.replyId ?? this.history.at(-1)?.id ?? null;
+    this.hasNewer = false;
+    this.emit();
+  }
+
+  startTimer() {
+    if (this.timerHandle !== null || this.timerRemainingMs <= 0 || this.retained
+      || this.mode !== 'reply' || !this.reply?.complete || this.pauseReasons.size > 0) return;
+    this.timerStartedAt = this.now();
+    this.timerHandle = this.schedule(() => {
+      this.timerHandle = null;
+      this.timerStartedAt = null;
+      this.timerRemainingMs = 0;
+      this.close();
+    }, this.timerRemainingMs);
+  }
+
+  stopTimer(reset = true) {
+    if (this.timerHandle !== null) this.cancel(this.timerHandle);
+    this.timerHandle = null;
+    this.timerStartedAt = null;
+    if (reset) this.timerRemainingMs = 0;
+  }
+
+  snapshot() {
+    const elapsed = this.timerHandle === null ? 0 : this.now() - this.timerStartedAt;
+    return {
+      mode: this.mode,
+      draft: this.draft,
+      letter: this.letter,
+      reply: this.reply,
+      retained: this.retained,
+      selectedMessageId: this.selectedMessageId,
+      hasNewer: this.hasNewer,
+      blockedReason: this.blockedReason,
+      draftNotice: this.draftNotice,
+      pendingInputMessageIds: [...this.pending.keys()],
+      settled: this.settled.map(value => ({ ...value })),
+      history: this.history.map(row => ({ ...row, body: { ...row.body }, inputMessageIds: [...row.inputMessageIds] })),
+      timer: {
+        running: this.timerHandle !== null,
+        remainingMs: Math.max(0, this.timerRemainingMs - elapsed),
+      },
+    };
+  }
+
+  emit() { this.render(this.snapshot()); }
+}

package/renderer/reply-letter-state.mjs

@@ -0,0 +1,38 @@
+export const projectReplyBody = row => ({
+  revision: row.body?.revision ?? '',
+  complete: row.body?.complete === true,
+  continuation: row.body?.continuation ?? null,
+});
+
+function newestSettledPair(settledPairs, dismissedReplies, inputMessageId) {
+  for (let index = settledPairs.length - 1; index >= 0; index -= 1) {
+    const pair = settledPairs[index];
+    if (dismissedReplies.has(pair.replyId)) continue;
+    if (inputMessageId !== undefined && pair.inputMessageId !== inputMessageId) continue;
+    return pair;
+  }
+  return undefined;
+}
+
+/** Only a newly settled relevant reply, or the reply already on screen, may take presentation focus. */
+export function selectReplyPresentation({ mode, letter, reply, settledPairs, pairs, dismissedReplies }) {
+  if (mode === 'compose' || mode === 'history') return undefined;
+  if (mode === 'sent') {
+    if (!letter) return undefined;
+    return newestSettledPair(settledPairs, dismissedReplies, letter.inputMessageId);
+  }
+  const freshPair = newestSettledPair(settledPairs, dismissedReplies);
+  if (mode === 'idle' || (mode === 'reply' && freshPair)) return freshPair;
+  if (mode !== 'reply' || !reply) return undefined;
+  for (const pair of pairs.values()) {
+    if (pair.replyId === reply.id) return pair;
+  }
+  return undefined;
+}
+
+export function newestHistoryAnchor(selectedMessageId, settled, history) {
+  if (selectedMessageId !== null) return selectedMessageId;
+  const settledReplyId = settled.at(-1)?.replyId;
+  if (settledReplyId !== undefined) return settledReplyId;
+  return history.at(-1)?.id ?? null;
+}

package/renderer/reply-letter-view.mjs

@@ -0,0 +1,103 @@
+const phaseLabel = phase => ({
+  processing: '正在回复',
+  failed: '回复失败 · 已发送的消息仍在聊天中',
+  interrupted: '回复中断 · 已发送的消息仍在聊天中',
+  canceled: '回复已取消 · 已发送的消息仍在聊天中',
+  withdrawn: '回复已撤回 · 已发送的消息仍在聊天中',
+}[phase] ?? '已发送');
+
+const draftStatus = settlement => ({
+  unconfirmed: '发送结果未确认',
+  scope_changed: '原聊天已变化 · 这条消息没有重发',
+  pending_limit: '待确认消息已达 32 条 · 这条没有发送',
+  draft_changed: '草稿已在别处变化 · 请核对后再发送',
+  unsupported_draft: '当前草稿含附件或过长 · 请回 Cat Café 继续编辑',
+  conflict: '草稿已在别处变化 · 本地输入仍保留',
+  readonly: '当前草稿含附件或过长 · 请回 Cat Café 继续编辑',
+  permission_required: '聊天权限已撤销 · 本地输入仍保留',
+  unavailable: '草稿暂未同步 · 本地输入仍保留',
+}[settlement] ?? '');
+
+/** DOM projection for compose → sent letter → complete reply → retained history. */
+export class ReplyLetterView {
+  constructor({ document, controller, retry, schedule = setTimeout, cancel = clearTimeout }) {
+    this.$ = id => document.getElementById(id);
+    Object.assign(this, { controller, retry });
+    this.schedule = (...args) => Reflect.apply(schedule, globalThis, args);
+    this.cancel = (...args) => Reflect.apply(cancel, globalThis, args);
+    this.bind();
+  }
+
+  bind() {
+    const card = this.$('reply-card');
+    card.addEventListener('pointerenter', () => this.controller.pause('hover'));
+    card.addEventListener('pointerleave', () => this.controller.resume('hover'));
+    card.addEventListener('focusin', () => this.controller.pause('focus'));
+    card.addEventListener('focusout', event => {
+      if (!event.relatedTarget || !card.contains?.(event.relatedTarget)) this.controller.resume('focus');
+    });
+    const pauseScroll = () => {
+      this.controller.pause('scroll');
+      if (this.scrollTimer !== undefined) this.cancel(this.scrollTimer);
+      this.scrollTimer = this.schedule(() => {
+        this.scrollTimer = undefined;
+        this.controller.resume('scroll');
+      }, 500);
+      this.scrollTimer?.unref?.();
+    };
+    card.addEventListener('wheel', pauseScroll);
+    card.addEventListener('scroll', pauseScroll);
+    card.addEventListener('pointerdown', () => this.controller.pause('pointer'));
+    card.addEventListener('pointerup', () => this.controller.resume('pointer'));
+    card.addEventListener('pointercancel', () => this.controller.resume('pointer'));
+    this.$('reply-retain').onclick = () => this.controller.pin();
+    this.$('reply-close').onclick = () => this.controller.close();
+    this.$('reply-history-open').onclick = () => this.controller.openHistory();
+    this.$('reply-return-latest').onclick = () => this.controller.returnLatest();
+    this.$('reply-retry').onclick = () => { if (this.value?.draft) this.retry(this.value.draft); };
+  }
+
+  render(value) {
+    this.value = value;
+    const compose = value.mode === 'compose' || value.mode === 'history';
+    const history = value.mode === 'history';
+    this.$('compose').hidden = !compose;
+    this.$('chat-history-header').hidden = !history;
+    this.$('chat-transcript').hidden = !history;
+    this.$('chat-scope').hidden = !history;
+    this.$('reply-sent').hidden = value.mode !== 'sent';
+    this.$('reply-card').hidden = value.mode !== 'reply';
+    this.$('reply-return-latest').hidden = !history || !value.hasNewer;
+
+    const retrying = value.mode === 'compose' && value.draft?.settlement === 'unconfirmed';
+    this.$('reply-retry').hidden = !retrying;
+    this.$('chat-status').textContent = value.draft ? draftStatus(value.draft.settlement)
+      : value.draftNotice ? draftStatus(value.draftNotice)
+      : value.blockedReason === 'permission_required' ? '聊天权限已撤销' : '';
+    if (value.draft) {
+      const input = this.$('message');
+      if (!input.value || input.value === this.lastRenderedDraft) input.value = value.draft.text;
+      this.lastRenderedDraft = value.draft.text;
+    }
+
+    if (value.letter) {
+      this.$('reply-letter-text').textContent = value.letter.text;
+      this.$('reply-input-text').textContent = value.letter.text;
+      this.$('reply-sent-status').textContent = phaseLabel(value.letter.responsePhase);
+    }
+    if (value.reply) {
+      this.$('reply-body').textContent = value.reply.text;
+      this.$('reply-body-status').textContent = value.reply.complete ? '' : '正在载入完整回复…';
+    } else {
+      this.$('reply-body').textContent = '';
+      this.$('reply-body-status').textContent = '';
+    }
+
+    const canRetain = value.mode === 'reply' && value.reply?.complete === true && !value.retained;
+    this.$('reply-retain').hidden = !canRetain;
+    this.$('reply-close').hidden = value.mode !== 'reply' || !value.retained;
+    this.$('reply-retain').dataset.running = String(canRetain && value.timer.running);
+    this.$('reply-retain').style.setProperty('--reply-visible-ms', `${value.timer.remainingMs}ms`);
+    this.$('chat').dataset.replyMode = value.mode;
+  }
+}

package/renderer/style.css

@@ -94,8 +94,44 @@ button:disabled { opacity: .45; cursor: default; }
 .call-status-line { min-height: 24px; display: flex; align-items: center; gap: 7px; white-space: nowrap; }
 .call-status-line strong { font-size: 13px; font-weight: 600; }
 .call-status-line span:not(.status-dot) { color: var(--desktop-muted); font-size: 12px; }
-.status-dot { width: 8px; height: 8px; flex: none; border-radius: 999px; background: var(--desktop-success); }
-[data-connection-state="recovering"] .status-dot { background: var(--desktop-warning); }
+.status-dot {
+  --call-status-color: var(--desktop-success);
+  position: relative;
+  isolation: isolate;
+  z-index: 0;
+  width: 8px;
+  height: 8px;
+  flex: none;
+  border-radius: 999px;
+  background: var(--call-status-color);
+}
+.status-dot::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  background: var(--call-status-color);
+  opacity: 0;
+  pointer-events: none;
+  transform: scale(1);
+}
+[data-connection-state="connected"] .status-dot::after,
+[data-connection-state="recovering"] .status-dot::after { animation: call-status-breathe 2s ease-out infinite; }
+[data-connection-state="recovering"] .status-dot { --call-status-color: var(--desktop-warning); }
+[data-connection-state="connecting"] .status-dot,
+[data-connection-state="idle"] .status-dot { --call-status-color: var(--desktop-muted); }
+@keyframes call-status-breathe {
+  from { opacity: .38; transform: scale(1); }
+  to { opacity: 0; transform: scale(3); }
+}
+.call-meeting { min-width: 0; margin: 3px 0 0 15px; display: flex; align-items: center; gap: 5px; color: var(--desktop-muted); font-size: 12px; line-height: 1.35; }
+.call-context > .call-meeting { grid-column: 1 / -1; margin: 0; }
+.meeting-status-dot { width: 7px; height: 7px; flex: none; border-radius: 999px; background: var(--desktop-success); }
+.call-meeting[data-tone="quiet"] .meeting-status-dot { background: var(--desktop-muted); }
+.call-meeting[data-tone="warning"] .meeting-status-dot { background: var(--desktop-warning); }
+.meeting-label { flex: none; white-space: nowrap; }
+.meeting-source { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .call-work { margin: 3px 0 0 15px; color: var(--desktop-muted); font-size: 12px; }
 .call-share-context { display: flex; align-items: center; gap: 7px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--desktop-line); }
 .call-share-context > span, .call-share-line > span { display: grid; gap: 1px; min-width: 0; }
@@ -132,6 +168,7 @@ button:disabled { opacity: .45; cursor: default; }
 .call-context > small { grid-column: 2 / 4; }
 .call-share-line { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; padding-top: 6px; border-top: 1px solid var(--desktop-line); min-width: 0; }
 .call-context-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
+.call-context-inline-actions { grid-column: 4; grid-row: 1; }
 .call-context-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 9px; white-space: nowrap; }
 #menu .call-context { margin: -8px -8px 5px; }
 .menu-footer { flex: none; display: flex; align-items: center; gap: 2px; margin: 4px -8px -8px; border-top: 1px solid var(--desktop-line); padding: 4px; }
@@ -150,17 +187,47 @@ button:disabled { opacity: .45; cursor: default; }
 .work-overview-row span { color: var(--desktop-muted); font-size: 10px; }
 #work-notice { margin: 0; padding: 3px 11px 7px; color: var(--desktop-muted); font-size: 10px; }
 #chat { width: 400px; max-height: 500px; display: flex; flex-direction: column; overflow: hidden; }
-#chat header { padding: 7px 9px 7px 15px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--cafe-border-subtle); }
-#chat header button { font-size: 12px; color: var(--cafe-text-secondary); }
+#chat[data-reply-mode="compose"] { width: 340px; }
+#chat[data-reply-mode="sent"] { width: 210px; background: transparent; box-shadow: none; }
+#chat[data-reply-mode="reply"] { width: 370px; }
+#chat-history-header { padding: 7px 9px 7px 15px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--cafe-border-subtle); }
+#chat-history-header button { font-size: 12px; color: var(--cafe-text-secondary); }
 #chat-transcript { height: 230px; overflow: auto; padding: 14px; line-height: 1.7; font-size: 13px; }
 #chat-transcript p { margin: 0 0 10px; overflow-wrap: anywhere; white-space: pre-wrap; }
 #chat-transcript p:not(.empty) { width: fit-content; max-width: 92%; padding: 7px 10px; border-radius: 9px; }
 #chat-transcript p.user { margin-left: auto; background: var(--desktop-rail); }
 #chat-transcript p.assistant { margin-right: auto; background: var(--desktop-work); border: 1px solid var(--desktop-line); }
 .empty { color: var(--cafe-text-muted); font-size: 13px; }
-#compose { display: flex; align-items: flex-end; padding: 10px; gap: 8px; border-top: 1px solid var(--cafe-border-subtle); }
-#message { resize: none; border: 0; min-width: 0; flex: 1; background: transparent; padding: 5px; color: inherit; line-height: 1.5; }
-#chat small { color: var(--cafe-text-muted); font-size: 10px; padding: 0 14px 10px; }
+#compose { display: flex; align-items: center; padding: 10px; gap: 8px; border-top: 1px solid var(--cafe-border-subtle); }
+#chat[data-reply-mode="compose"] #compose { border: 0; }
+#message { resize: none; border: 1px solid var(--desktop-line-strong); border-radius: 8px; min-width: 0; height: 34px; flex: 1; background: var(--desktop-paper); padding: 6px 9px; color: inherit; line-height: 1.5; }
+.chat-feedback { min-height: 0; display: flex; align-items: center; gap: 8px; padding: 0 12px 8px; color: #8f4730; }
+.chat-feedback small { flex: 1; font-size: 11px; }
+.chat-feedback button { color: #8f4730; font-size: 11px; }
+#chat-connection-status, #chat-scope { color: var(--cafe-text-muted); font-size: 10px; padding: 0 14px 10px; }
+.reply-sent { align-items: center; gap: 9px; border-radius: 10px; background: var(--desktop-paper); box-shadow: 0 8px 24px #18171524; padding: 9px 11px; }
+.reply-sent:not([hidden]) { display: flex; }
+.reply-sent > svg { width: 36px; height: 27px; flex: none; overflow: visible; }
+.reply-sent > svg rect { fill: var(--desktop-paper); stroke: var(--desktop-ink); stroke-width: 1.5; }
+.reply-sent > svg path { fill: none; stroke: var(--desktop-ink); stroke-width: 1.5; stroke-linejoin: round; }
+.reply-sent > span { min-width: 0; display: grid; gap: 2px; }
+.reply-sent strong { font-size: 12px; font-weight: 600; }
+.reply-sent small { overflow: hidden; color: var(--desktop-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
+.reply-card { position: relative; max-height: 500px; overflow-y: auto; padding: 12px 14px 10px; }
+.reply-head { display: flex; align-items: flex-start; gap: 8px; }
+.reply-input-text { min-width: 0; flex: 1; color: var(--desktop-muted); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
+.reply-ring, .reply-close { width: 24px; height: 24px; flex: none; display: grid; place-items: center; padding: 0; color: var(--desktop-muted); }
+.reply-ring svg { width: 18px; height: 18px; transform: rotate(-90deg); }
+.reply-ring circle { fill: none; stroke-width: 1.5; }
+.reply-ring-track { stroke: var(--desktop-line-strong); }
+.reply-ring-progress { stroke: var(--desktop-ink); stroke-linecap: round; stroke-dasharray: 40.84; stroke-dashoffset: 0; }
+.reply-ring[data-running="true"] .reply-ring-progress { animation: reply-countdown var(--reply-visible-ms) linear forwards; }
+.reply-close { font-size: 20px; line-height: 1; }
+.reply-body { margin-top: 7px; color: var(--desktop-ink); font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; white-space: pre-wrap; }
+.reply-body-status { display: block; margin-top: 6px; color: var(--desktop-muted); font-size: 11px; }
+.reply-history-open { margin-top: 8px; padding: 3px 0; color: var(--desktop-muted); font-size: 11px; }
+.reply-return-latest { position: absolute; right: 12px; bottom: 59px; z-index: 1; border: 1px solid var(--desktop-line) !important; background: var(--desktop-paper) !important; box-shadow: 0 2px 8px #1817151a; color: #8f4730; font-size: 11px; }
+@keyframes reply-countdown { to { stroke-dashoffset: 40.84; } }
 .call-transcript { width: 420px; height: 210px; display: flex; flex-direction: column; overflow: hidden; }
 .call-transcript[data-expanded="true"] { height: 500px; }
 .transcript-call-context { flex: none; grid-template-columns: auto minmax(0, 1fr) auto; gap: 5px; padding: 7px 8px; }
@@ -238,7 +305,7 @@ button:disabled { opacity: .45; cursor: default; }
 .settings-empty { padding: 16px; }
 .sr-only { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
 @media (prefers-reduced-motion: reduce) {
-  #pet, #indicators button, #living-sit [data-layer], #pet[data-action="idle"] #living-sit [data-layer] { animation: none; }
+  #pet, #indicators button, [data-connection-state] .status-dot::after, .reply-ring[data-running="true"] .reply-ring-progress, #living-sit [data-layer], #pet[data-action="idle"] #living-sit [data-layer] { animation: none; }
   #living-sit [data-layer="closed"] { opacity: 0; }
 }
 #pet[data-skin="yanyan-codex"] { background-image: url("./skins/yanyan-codex.webp"); }