feat(desktop/transcript): burn down #332 deferred — running-state/Stop, lifecycle overflow, hover actions, timestamps, skeletons, clamp, chrome i18n

Clears the deferred list from the #332 first pass (6a83324):

- Running-state + composer Stop: poll the agent's lifecycle status
  (getAgent, 5s); the status strip gains a running dot + status word, the
  lifecycle bar shows a contextual primary (Stop while running / Resume while
  paused), and the composer's primary action becomes Stop when running with an
  empty draft (typing swaps back to Send).
- Lifecycle-bar overflow: the five always-on buttons collapse to one primary +
  an overflow (⋯) menu (pause/resume/stop + terminate/archive as ConfirmButtons),
  closed on outside-click / Escape.
- Per-message hover actions: copy + quote-into-composer on assistant text and
  director input (quote blockquote-prefixes and pushes to the composer via an
  inject signal). (insert-to-note is an AgentCompanion affordance — N/A in this
  surface, which has no note target.)
- Timestamps: message rows render a relative time (absolute on hover) — the row
  `ts` the hub already emits, finally shown. (Full turn-grouping containers
  remain a heavier follow-up; turn.result dividers + per-row time cover the ask.)
- Skeleton feed: shimmer cards replace the "Loading…" line.
- Collapse rework: long assistant text clamps behind a fade with a Show more/less
  toggle instead of a <details> with a redundant dimmed preview.
- Chrome i18n: the transcript's tool verbs, labels, and the code-block copy
  button route through i18n (en + zh). (RunReport i18n stays part of #318.)

quoteToComposer is useCallback-stable so it doesn't defeat EventCard's memo
(#311). Build (tsc + vite) + lint-desktop-tokens clean. Not device-tested.

Co-Authored-By: Claude Opus 4.8 <[email protected]>

Author: Ubuntu

desktop/src/i18n/index.ts

@@ -252,6 +252,27 @@ const en: Dict = {
   'tx.tokOut': 'out',
   'tx.new': 'new',
   'tx.latest': 'Latest',
+  'tx.more': 'More actions',
+  'tx.copy': 'Copy',
+  'tx.copied': 'Copied',
+  'tx.quote': 'Quote',
+  'tx.showMore': 'Show more',
+  'tx.showLess': 'Show less',
+  'tx.arguments': 'Arguments',
+  'tx.result': 'Result',
+  'tx.errorLabel': 'Error',
+  'tx.denied': 'Denied',
+  'tx.thinking': 'Thinking…',
+  'tx.session': 'Session',
+  'tx.done': 'Done',
+  'tx.verb.ran': 'Ran',
+  'tx.verb.read': 'Read',
+  'tx.verb.wrote': 'Wrote',
+  'tx.verb.edited': 'Edited',
+  'tx.verb.searched': 'Searched',
+  'tx.verb.listed': 'Listed',
+  'tx.verb.fetched': 'Fetched',
+  'tx.now': 'now',
   'composer.attach': 'Attach file or image',
   'composer.unsupported': '{name}: unsupported file type',
   'composer.readFailed': '{name}: could not read file',
@@ -1504,6 +1525,27 @@ const zh: Dict = {
   'tx.tokOut': '输出',
   'tx.new': '新',
   'tx.latest': '最新',
+  'tx.more': '更多操作',
+  'tx.copy': '复制',
+  'tx.copied': '已复制',
+  'tx.quote': '引用',
+  'tx.showMore': '展开',
+  'tx.showLess': '收起',
+  'tx.arguments': '参数',
+  'tx.result': '结果',
+  'tx.errorLabel': '错误',
+  'tx.denied': '已拒绝',
+  'tx.thinking': '思考中…',
+  'tx.session': '会话',
+  'tx.done': '完成',
+  'tx.verb.ran': '运行',
+  'tx.verb.read': '读取',
+  'tx.verb.wrote': '写入',
+  'tx.verb.edited': '编辑',
+  'tx.verb.searched': '搜索',
+  'tx.verb.listed': '列出',
+  'tx.verb.fetched': '获取',
+  'tx.now': '刚刚',
   'composer.attach': '附加文件或图片',
   'composer.unsupported': '{name}：不支持的文件类型',
   'composer.readFailed': '{name}：无法读取文件',

desktop/src/styles/partials/04-library-nav.css

@@ -926,6 +926,12 @@ button.small,
   color: var(--text-muted);
   background: var(--surface-sunken, var(--bg));
 }
+.transcript-status .ts-state {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-s4);
+  text-transform: capitalize;
+}
 .transcript-status .ts-model {
   color: var(--text-secondary);
   font-weight: 600;

desktop/src/styles/partials/05-transcript-boards.css

@@ -494,6 +494,155 @@
   color: var(--text-muted);
   font-style: italic;
 }
+
+/* #332 clamp long assistant text behind a fade + a Show more/less toggle
+   (rec 11). */
+.ev-clamp-body {
+  position: relative;
+}
+.ev-clamp:not(.expanded) .ev-clamp-body {
+  max-height: 15em;
+  overflow: hidden;
+  -webkit-mask-image: linear-gradient(to bottom, black 72%, transparent);
+  mask-image: linear-gradient(to bottom, black 72%, transparent);
+}
+.ev-clamp-toggle {
+  margin-top: var(--spacing-s4);
+  padding: 0;
+  background: none;
+  border: none;
+  color: var(--accent-text);
+  cursor: pointer;
+  font-size: var(--font-size-label);
+  font-weight: 600;
+}
+.ev-clamp-toggle:hover {
+  text-decoration: underline;
+}
+
+/* #332 message footer — a relative timestamp (absolute on hover) + hover-revealed
+   actions (copy / quote). */
+.ev-meta {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-s8);
+  margin-top: var(--spacing-s4);
+  min-height: 18px;
+}
+.ev--user .ev-meta {
+  justify-content: flex-end;
+}
+.ev-time {
+  font-size: var(--font-size-label);
+  color: var(--text-muted);
+  font-variant-numeric: tabular-nums;
+}
+.ev-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-s2);
+  opacity: 0;
+  transition: opacity 0.12s var(--ease);
+}
+.ev:hover .ev-actions,
+.ev-actions:focus-within {
+  opacity: 1;
+}
+.ev-act {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  border-radius: var(--radius-xs);
+}
+.ev-act:hover {
+  background: var(--hover);
+  color: var(--text);
+}
+
+/* #332 lifecycle overflow menu — a dropdown off the ⋯ button. */
+.life-overflow {
+  position: relative;
+  display: inline-flex;
+}
+.life-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  z-index: 20;
+  min-width: 150px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 4px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--sh-3);
+}
+.life-menu button {
+  text-align: left;
+  justify-content: flex-start;
+  background: none;
+  border: none;
+  box-shadow: none;
+  padding: var(--spacing-s4) var(--spacing-s8);
+  font-size: var(--font-size-caption);
+  border-radius: var(--radius-sm);
+}
+.life-menu button:hover {
+  background: var(--hover);
+}
+
+/* #332 composer Stop-while-running — the primary action turns destructive. */
+.composer .composer-stop {
+  background: var(--danger);
+  color: var(--accent-ink);
+}
+
+/* #332 skeleton feed — shimmer cards instead of a "Loading…" line (rec 14). */
+.feed-skeleton {
+  flex: 1 1 0;
+  min-height: 0;
+  overflow: hidden;
+  padding-top: var(--spacing-s8);
+}
+.sk-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-s8);
+  padding: var(--spacing-s4) 0;
+}
+.sk-line {
+  height: 12px;
+  border-radius: var(--radius-sm);
+  background: linear-gradient(90deg, var(--surface), var(--hover), var(--surface));
+  background-size: 200% 100%;
+  animation: sk-shimmer 1.3s ease-in-out infinite;
+}
+.sk-line.w40 {
+  width: 40%;
+}
+.sk-line.w60 {
+  width: 60%;
+}
+.sk-line.w90 {
+  width: 90%;
+}
+@keyframes sk-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
 .ev-input .ev-from {
   display: inline-block;
   color: var(--color-terminal-yellow);