@ljwei-stak/dsh-model-route-bot 0.66.4 → 0.67.0

package/modules/bot-runtime/product-overlay/OVERLAY.json

@@ -12,7 +12,7 @@
     {
       "path": "src/client/details-drawer.js",
       "kind": "patched",
-      "summary": "Adds the 电脑操作 (desktop) tab to a 1:1 Bot's drawer and renders DesktopPane in it.",
+      "summary": "Adds the 电脑操作 (desktop) tab to a 1:1 Bot's drawer and renders DesktopPane in it; a thread Session keeps its own transcript, stats, questions and usage, and its name is shown instead of offering to rename the Bot.",
       "base": {
         "commit": "71d344bf193f3f18185f25de3d8e5c483046910a",
         "sha256": "f4917de604dc7c3daf3b4a5267a04c326c9b20aea94bb5e27bfcb6e106396172"
@@ -30,7 +30,7 @@
     {
       "path": "src/client/index.js",
       "kind": "patched",
-      "summary": "Accepts a wrapped TeamSidebar in the sidebar.workspaces slot probe, so the product's own wrapper still counts as the DS Bot team surface.",
+      "summary": "Opens a thread Session as itself in partFor — resolved before the Bot, because a thread Session also resolves to its Bot — keeps homeToMainBot from bouncing an open thread to Main, and refreshes thread projections.",
       "base": {
         "commit": "71d344bf193f3f18185f25de3d8e5c483046910a",
         "sha256": "4fd22b26d817ca3ae5454e5a8042c1c4b806ff4ae78c9e38f90ee5ee3c996b9a"
@@ -53,6 +53,132 @@
         "commit": "71d344bf193f3f18185f25de3d8e5c483046910a",
         "sha256": "3818fea953dc7a766d7dcb738661a448a922f84ac42b8d434ac7fb83e09b9c65"
       }
+    },
+    {
+      "path": "src/client/header.js",
+      "kind": "patched",
+      "summary": "Renders the product conversationAddon after the native header identity, preserving goals, activity and slot component identity, and names the open thread beside its Bot so two contexts of one Bot are never confused.",
+      "base": {
+        "commit": "71d344bf193f3f18185f25de3d8e5c483046910a",
+        "sha256": "2e16b329fcc5e0994066db13fe54558ac70fdd7b4131155c89b7aa04d0c59bab"
+      }
+    },
+    {
+      "path": "src/host/roster.js",
+      "kind": "patched",
+      "summary": "Adds the trusted thread records addThreadSession/renameThread/setThreadArchived (one save each, the Bot model and permission preset applied, no notice or turn), keeps updateBotProfile untouched, and archives thread Sessions on Bot delete.",
+      "base": {
+        "commit": "71d344bf193f3f18185f25de3d8e5c483046910a",
+        "sha256": "0a06730a0ce2ecf6b67d82319ef9b7fc127b3b2c2170b6e50d3d77ce4c866e32"
+      }
+    },
+    {
+      "path": "src/host/store.js",
+      "kind": "patched",
+      "summary": "Indexes a Bot thread Session as another own chat of the same Bot: live threads sit in chatOwners/threadOwners, archived ones in pastOwners with no authority, and threadsOf/threadOf/threadSessionOf/sessionsOfBot are exposed for the product.",
+      "base": {
+        "commit": "71d344bf193f3f18185f25de3d8e5c483046910a",
+        "sha256": "aae02595f97b2337e485f16a84091c9d91d40f6dbdc211350fe3fe0cddf52b19"
+      }
+    },
+    {
+      "path": "src/host/parts.js",
+      "kind": "patched",
+      "summary": "Keeps the part steward off thread Sessions: a thread is not a part chain, so nothing condenses it or hands its input on to the Bot default chat.",
+      "base": {
+        "commit": "71d344bf193f3f18185f25de3d8e5c483046910a",
+        "sha256": "f7a2e272f0296414075d2318d45cf58871fff3a22c1d3035707a75bec77ef619"
+      }
+    },
+    {
+      "path": "src/host/models.js",
+      "kind": "patched",
+      "summary": "Applies a Bot model change to its live thread Sessions as it already does for group Sessions.",
+      "base": {
+        "commit": "71d344bf193f3f18185f25de3d8e5c483046910a",
+        "sha256": "db1424879e28d6252818eccbb4bc763bc87ff355be503abe3f95399aaed869a9"
+      }
+    },
+    {
+      "path": "src/host/usage.js",
+      "kind": "patched",
+      "summary": "Attributes a thread Session usage to its Bot through the shared sessionsOfBot list.",
+      "base": {
+        "commit": "71d344bf193f3f18185f25de3d8e5c483046910a",
+        "sha256": "3d4ff2168d7dfb726c2d5454f36eef58dec1c768b79c2c0c17f4192a34b2bbd7"
+      }
+    },
+    {
+      "path": "src/host/privacy.js",
+      "kind": "patched",
+      "summary": "Covers thread Sessions when a private Bot files are purged.",
+      "base": {
+        "commit": "71d344bf193f3f18185f25de3d8e5c483046910a",
+        "sha256": "370b5adf762714a8b794f2079a8bbfd8f9c63811bf599ecadad80a63a9f12c5a"
+      }
+    },
+    {
+      "path": "src/host/memory.js",
+      "kind": "patched",
+      "summary": "Renews memory for thread Sessions when a Bot memory is archived.",
+      "base": {
+        "commit": "71d344bf193f3f18185f25de3d8e5c483046910a",
+        "sha256": "5e145d02c6c9d8d217b1725ae8bd88483c6a847300d50f107da70575696b7503"
+      }
+    },
+    {
+      "path": "src/host/channel.js",
+      "kind": "patched",
+      "summary": "Projects a Bot threads to the client and refuses input aimed at an archived thread instead of redirecting it to the default chat.",
+      "base": {
+        "commit": "71d344bf193f3f18185f25de3d8e5c483046910a",
+        "sha256": "0e05d9a424b188fe338f7102404a9fb295069d0ece241d63cc4f87be18947d03"
+      }
+    },
+    {
+      "path": "src/client/sources.js",
+      "kind": "patched",
+      "summary": "Indexes thread Sessions in a read-only threadsById map by Session id and thread id, resolves a thread Session to its Bot in byId (never taking a Bot's own chat identity), and exports isOwnChatOf so Bot-scoped surfaces recognise a thread as another own chat of the same Bot.",
+      "base": {
+        "commit": "71d344bf193f3f18185f25de3d8e5c483046910a",
+        "sha256": "1cc04070d1869dcc382efc31fafcff8fda9c3271342896c98355c37299458e1c"
+      }
+    },
+    {
+      "path": "src/client/model-menu.js",
+      "kind": "patched",
+      "summary": "The Bot's model-choice dock belongs to a thread too: it recognises a thread Session as another own chat of the same Bot instead of only the default chat.",
+      "base": {
+        "commit": "71d344bf193f3f18185f25de3d8e5c483046910a",
+        "sha256": "78c28d9459e78ce4ffa9b3edc64d7d2218b02112eaf3b0ae204cf2700321b7a5"
+      }
+    },
+    {
+      "path": "src/client/learning-card.js",
+      "kind": "patched",
+      "summary": "Memory learning proposals are shown for a thread Session, which is another own chat of the same Bot, not only for the default chat.",
+      "base": {
+        "commit": "71d344bf193f3f18185f25de3d8e5c483046910a",
+        "sha256": "29e0ddffc08814b3e9676fb40474ba5ae0702edb1b53267d52e51b4b31be733f"
+      }
+    },
+    {
+      "path": "src/client/secret-card.js",
+      "kind": "patched",
+      "summary": "The secret-request dock waits for a thread Session's own cards, so a tool asking for a secret inside a thread is answered there.",
+      "base": {
+        "commit": "71d344bf193f3f18185f25de3d8e5c483046910a",
+        "sha256": "2ac7d7546918b7104d7af8b71d08a6fc07bdc2aeb4168d3ad26bddf2f9fd4ff5"
+      }
+    },
+    {
+      "path": "src/client/turn-error.js",
+      "kind": "patched",
+      "summary": "A turn failure inside a thread keeps its sign-in and model-move affordances, exactly as the Bot's default chat does.",
+      "base": {
+        "commit": "71d344bf193f3f18185f25de3d8e5c483046910a",
+        "sha256": "4ed1e99fb3fe66be3a55176389e1ab08e282070e23e9e06089a20f6dbec3b59b"
+      }
     }
   ]
 }

package/modules/bot-runtime/product-overlay/base/src/client/header.js

@@ -0,0 +1,244 @@
+import { createElement as h, Fragment, useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { currentPart, latestMemoryChange } from './text.js'
+import { ArrowUpIcon, CloseIcon, ArrowDownIcon, GoalIcon, MemoryIcon } from './icons.js'
+import { botState, BotAvatar, RoomAvatar } from './mark.js'
+import { ActivityIndicator } from './activity-row.js'
+import { clockLabel, openingTurn, unseenSince } from './cells.js'
+import { GoalIsland, goalView } from './goal.js'
+import { viewBottom } from './motion.js'
+import { t } from './i18n.js'
+
+// -------------------------------------------------------------------------
+// Conversation header
+
+// The pill's tail: a → that springs in on hover, flipping to ← while details are open.
+const GoArrow = () => h('svg', { width: 14, height: 14, viewBox: '-12 -12 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2.2, strokeLinecap: 'round', strokeLinejoin: 'round', 'aria-hidden': true }, h('path', { d: 'M-7 0H7M2 -5L7 0L2 5' }))
+
+// How long the pill says "Memory updated" after the change reaches this window.
+const MEMORY_NOTICE_MS = 3_200
+const noNews = select => select({})
+
+// True while the latest memory change of the Bots in this conversation is news.
+function useMemoryNotice(ids, useMemoryNews) {
+  const seen = useMemoryNews(map => Math.max(0, ...ids.map(id => map?.[id]?.seen ?? 0)))
+  const [shown, setShown] = useState(false)
+  useEffect(() => {
+    const left = seen + MEMORY_NOTICE_MS - Date.now()
+    setShown(seen > 0 && left > 0)
+    if (seen === 0 || left <= 0) return undefined
+    const timer = setTimeout(() => setShown(false), left)
+    return () => clearTimeout(timer)
+  }, [seen])
+  return shown
+}
+
+// The notice the pill stretches to show. Its width is measured, so the pill's spring
+// runs between two real widths.
+function MemoryNotice({ shown }) {
+  const inner = useRef(null)
+  const [width, setWidth] = useState(0)
+  const label = t('Memory updated')
+  useLayoutEffect(() => { if (shown) setWidth(inner.current?.scrollWidth ?? 0) }, [label, shown])
+  return h('span', { className: 'bt-pill-mem', 'aria-hidden': true, style: { '--bt-mem-w': `${width}px` } },
+    h('span', { className: 'bt-pill-mem-in', ref: inner }, h('span', { className: 'bt-pill-mem-ico' }, h(MemoryIcon)), label))
+}
+
+export function HeaderPill({ sessionId, useRoster, useSessions, useSessionStatus, useSession, useActivity, useMemoryNews, useTurnClock, useUi, useLive, useWork, useStore, useConversationViews, selectView, actions }) {
+  const roster = useRoster(value => value)
+  const selectedView = useStore?.(state => state.view)
+  const away = useConversationViews?.(views => views.some(view => view.id === selectedView && view.id !== 'chat')) === true
+    && typeof selectView === 'function'
+  const title = useSessions(list => list.byId[sessionId]?.displayTitle ?? list.byId[sessionId]?.title ?? '')
+  const firstTurns = useSessions((list) => {
+    const outline = list.projectionsBySession?.[sessionId]?.values?.turnOutline ?? list.byId[sessionId]?.projectionValues?.turnOutline
+    return Array.isArray(outline) ? outline.slice(0, 8).map(entry => entry.turn).join(',') : ''
+  })
+  const hiddenTurns = roster.exchangeTurns?.[sessionId]
+  const visit = useUi(state => state.visits?.[sessionId])
+  // The opening separator has no turn before it, so the transcript column draws it,
+  // unless the opening is unread: then the first trigger draws it under the divider.
+  const opening = useTurnClock((state) => {
+    const first = openingTurn(state[sessionId], firstTurns, hiddenTurns)
+    return first && !unseenSince(visit, first.start) ? clockLabel(first.start) : ''
+  })
+  useEffect(() => {
+    if (opening) document.body.style.setProperty('--bt-first-sep', JSON.stringify(opening))
+    else document.body.style.removeProperty('--bt-first-sep')
+    return () => document.body.style.removeProperty('--bt-first-sep')
+  }, [opening])
+  const running = useSessionStatus(map => map.get(sessionId)?.running === true)
+  const owner = roster.byId[sessionId]?.id ?? sessionId
+  const doing = useActivity(map => map[owner])
+  const bot = roster.byId[sessionId]
+  const room = roster.roomsById[sessionId]
+  const goal = room?.goal
+  const goalCompose = useUi(state => state.goalCompose === sessionId)
+  const goalOpen = useUi(state => state.goalOpen === sessionId)
+  // The island's live faces: who is at work in this group right now. Non-group
+  // chats subscribe to a constant so their header does not redraw on work.
+  const roomWorkKey = useWork?.(work => (room ? JSON.stringify(work.rooms?.[sessionId] ?? []) : '')) ?? '[]'
+  const roomWork = room ? JSON.parse(roomWorkKey || '[]') : []
+  const view = goal ? goalView(goal, { roster, roomWork }) : null
+  const goalShown = room !== undefined && !away && goal !== undefined
+  const detailsOpen = useUi(state => state.details === sessionId)
+  const name = bot?.name ?? room?.name ?? ''
+  const useNews = useMemoryNews ?? noNews
+  const memoryIds = bot ? [bot.id] : room ? [room.id, ...room.members] : []
+  const notice = useMemoryNotice(memoryIds, useNews)
+  // While the notice shows, the pill opens the memory that changed: a Bot's, or the group's.
+  const changed = useNews(map => latestMemoryChange(map, memoryIds))
+  // The composer placeholder is not localizable per Session, so CSS reads it from here.
+  useEffect(() => {
+    document.body.style.setProperty('--bt-placeholder', JSON.stringify(name ? t('Message {name}', { name }) : t('Message')))
+  }, [name, t('Message')])
+  // The unread label under a pending steering bubble reads its text from here.
+  useEffect(() => {
+    document.body.style.setProperty('--bt-steer-unread', JSON.stringify(t('Not read yet')))
+  }, [t('Not read yet')])
+  useEffect(() => {
+    actions.beginVisit(sessionId)
+    return () => actions.endVisit(sessionId)
+  }, [sessionId])
+  // Group chats have no voice mode, so the composer CSS needs to know the Session kind.
+  useEffect(() => {
+    if (room) document.body.dataset.btRoom = ''
+    else delete document.body.dataset.btRoom
+    return () => { delete document.body.dataset.btRoom }
+  }, [Boolean(room)])
+  const memoryNotice = !away && notice && changed !== null && roster.memory !== false
+  const showGoal = room !== undefined && !away && (goal !== undefined || goalCompose)
+  // The goal island pads the transcript so its pod does not cover the first message.
+  useEffect(() => {
+    if (showGoal) document.body.dataset.btGoal = ''
+    else delete document.body.dataset.btGoal
+    return () => { delete document.body.dataset.btGoal }
+  }, [showGoal])
+  const pill = h('button', {
+    type: 'button', className: 'bt-pill', 'aria-expanded': away ? undefined : detailsOpen, 'data-memory': memoryNotice ? 'updated' : undefined,
+    'aria-label': away ? t('Back to chat') : memoryNotice ? t('Memory updated. Open {name}\'s memory', { name: roster.byId[changed]?.name ?? name }) : t('View conversation details'),
+    title: away ? name : undefined,
+    onClick: () => (away ? selectView('chat') : memoryNotice ? actions.openMemory(changed) : actions.toggleDetails(sessionId)),
+  },
+    bot ? h(BotAvatar, { bot, size: 24, state: botState(running, doing, roster.questions?.[currentPart(bot)] !== undefined), badge: false })
+      : room ? h(RoomAvatar, { room, roster, size: 24 }) : null,
+    goalShown
+      ? h('span', { className: 'bt-pill-swap' },
+        h('span', { className: 'bt-pill-goal' }, h('span', { className: 'bt-pill-ico', 'aria-hidden': true }, h(GoalIcon)), h('span', { className: 'bt-pill-title' }, view.title)),
+        h('span', { className: 'bt-pill-name' }, name))
+      : h('span', { className: 'bt-pill-name' }, away ? t('Back to chat') : bot?.name ?? room?.name ?? (title || t('New chat'))),
+    goalShown && view?.number !== undefined ? h('span', { className: 'bt-pill-count' }, `${view.number}/${view.count}`) : null,
+    h(MemoryNotice, { shown: memoryNotice }),
+    h('span', { className: 'bt-pill-go', 'aria-hidden': true }, h(GoArrow)))
+  return h('div', { className: 'bt-head' },
+    showGoal ? h(GoalIsland, { room, goal, view, open: goalOpen, composing: goalCompose, roomWork, roster, actions, pill }) : pill,
+    h('span', { className: 'bt-sr', role: 'status' }, memoryNotice ? t('Memory updated') : ''),
+    h(NewMessagePills, { key: sessionId, sessionId, useSessions, useUi, useTurnClock }),
+    h(ActivityIndicator, { key: `activity:${sessionId}`, sessionId, useRoster, useSessionStatus, useSession, useLive, useWork, actions }))
+}
+
+// New-message pills. "N new messages ↓" takes Back to bottom's place when
+// replies land while the user is scrolled up; "N new messages ↑" points at an unread
+// divider above the viewport until it has been seen. The shell shows Back to bottom
+// only while unpinned, so its presence is the pinned signal.
+function useTranscriptView() {
+  const [view, setView] = useState(null)
+  useEffect(() => {
+    let frame = 0
+    let watched = null
+    const observer = new MutationObserver(() => schedule())
+    const measure = () => {
+      frame = 0
+      const scroller = document.querySelector('[data-conversation-scroll]')
+      if (scroller !== watched) {
+        observer.disconnect()
+        watched = scroller
+        if (scroller) observer.observe(scroller, { childList: true, subtree: true })
+      }
+      if (!scroller) { setView(null); return }
+      const box = scroller.getBoundingClientRect()
+      const headerBottom = document.querySelector('header[class*="_header"]')?.getBoundingClientRect().bottom ?? box.top + 50
+      const sep = scroller.querySelector('.bt-new-sep')
+      let divider = null
+      if (sep) {
+        const at = sep.getBoundingClientRect()
+        divider = at.bottom <= headerBottom ? 'above' : at.top >= box.bottom ? 'below' : 'in-view'
+      }
+      const composer = parseFloat(getComputedStyle(scroller).getPropertyValue('--dsh-composer-height')) || 152
+      const next = {
+        unpinned: scroller.querySelector('[class*="_toBottomSlot"]>button') !== null,
+        divider,
+        center: Math.round(box.left + box.width / 2),
+        top: Math.round(headerBottom + 8),
+        bottom: Math.round(viewBottom() - box.bottom + composer + 8),
+      }
+      setView(prev => (prev && Object.keys(next).every(key => prev[key] === next[key]) ? prev : next))
+    }
+    const schedule = () => { if (!frame) frame = requestAnimationFrame(measure) }
+    document.addEventListener('scroll', schedule, true)
+    window.addEventListener('resize', schedule)
+    window.visualViewport?.addEventListener('resize', schedule)
+    window.visualViewport?.addEventListener('scroll', schedule)
+    schedule()
+    return () => {
+      cancelAnimationFrame(frame)
+      observer.disconnect()
+      document.removeEventListener('scroll', schedule, true)
+      window.removeEventListener('resize', schedule)
+      window.visualViewport?.removeEventListener('resize', schedule)
+      window.visualViewport?.removeEventListener('scroll', schedule)
+    }
+  }, [])
+  return view
+}
+
+function NewMessagePills({ sessionId, useSessions, useUi, useTurnClock }) {
+  const replies = useSessions((list) => {
+    const outline = list.projectionsBySession?.[sessionId]?.values?.turnOutline ?? list.byId[sessionId]?.projectionValues?.turnOutline
+    return Array.isArray(outline) ? outline.reduce((count, entry) => count + (entry.response ? 1 : 0), 0) : 0
+  })
+  const visit = useUi(state => state.visits?.[sessionId])
+  const unread = useTurnClock((state) => {
+    if (typeof visit?.seen !== 'number') return 0
+    let count = 0
+    for (const entry of Object.values(state[sessionId] ?? {})) {
+      if (entry.first !== undefined && entry.first > visit.seen && entry.first <= visit.entered) count += 1
+    }
+    return count
+  })
+  const view = useTranscriptView()
+  const unpinned = view?.unpinned === true
+  const [release, setRelease] = useState({ base: null, dismissed: false })
+  const [above, setAbove] = useState({ seen: false, dismissed: false })
+  useEffect(() => { setRelease({ base: unpinned ? replies : null, dismissed: false }) }, [unpinned])
+  useEffect(() => { if (view?.divider === 'in-view') setAbove(state => (state.seen ? state : { ...state, seen: true })) }, [view?.divider])
+  const fresh = release.base === null ? 0 : replies - release.base
+  const showDown = unpinned && fresh > 0 && !release.dismissed
+  const showUp = view?.divider === 'above' && !above.seen && !above.dismissed
+  useEffect(() => {
+    const scroller = document.querySelector('[data-conversation-scroll]')
+    if (!scroller) return undefined
+    scroller.toggleAttribute('data-bt-news', showDown)
+    return () => scroller.removeAttribute('data-bt-news')
+  }, [showDown])
+  if (!view || (!showDown && !showUp)) return null
+  const label = count => (count === 1 ? t('1 new message') : count > 0 ? t('{count} new messages', { count }) : t('New messages'))
+  const pill = (direction, count, style, onJump, onDismiss) => h('div', { className: 'bt-news', 'data-direction': direction, style },
+    h('button', { type: 'button', className: 'bt-news-jump', onClick: onJump },
+      h('span', { className: 'bt-news-ico' }, h(direction === 'up' ? ArrowUpIcon : ArrowDownIcon)), label(count)),
+    h('button', {
+      type: 'button', className: 'bt-news-x', 'aria-label': t('Dismiss new messages'),
+      onClick: (event) => { event.stopPropagation(); onDismiss() },
+    }, h(CloseIcon)))
+  const toLatest = () => {
+    const scroller = document.querySelector('[data-conversation-scroll]')
+    const back = scroller?.querySelector('[class*="_toBottomSlot"]>button')
+    if (back) back.click()
+    else scroller?.scrollTo({ top: scroller.scrollHeight, behavior: 'smooth' })
+  }
+  const toDivider = () => document.querySelector('[data-conversation-scroll] .bt-new-sep')?.scrollIntoView({ block: 'center', behavior: 'smooth' })
+  return createPortal(h(Fragment, null,
+    showUp ? pill('up', unread, { left: view.center, top: view.top }, toDivider, () => setAbove(state => ({ ...state, dismissed: true }))) : null,
+    showDown ? pill('down', fresh, { left: view.center, bottom: view.bottom }, toLatest, () => setRelease(state => ({ ...state, dismissed: true }))) : null),
+  document.body)
+}

package/modules/bot-runtime/product-overlay/base/src/client/learning-card.js

@@ -0,0 +1,202 @@
+import { createElement as h, useId, useMemo, useRef, useState } from 'react'
+import { useTurnFacts } from './btw.js'
+import { editLines, lineDiff, proposalPlacement } from './learning-card-model.js'
+import { currentPart } from './text.js'
+import { t } from './i18n.js'
+import { CheckIcon, MemoryIcon, PencilIcon } from './icons.js'
+import { spring, SPRING_TAP } from './motion.js'
+
+const failedAnswers = new Map()
+
+function ProposalCard({ proposal, initialError = '', onFailure, onResolved, actions }) {
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState(initialError)
+  const busyRef = useRef(false)
+  const titleId = useId()
+  const answer = approve => {
+    if (busyRef.current) return
+    busyRef.current = true
+    setBusy(true)
+    setError('')
+    void Promise.resolve().then(() => actions.learningAnswer(proposal.id, approve))
+      .then(() => onResolved(proposal.id), failure => {
+        const message = failure?.message ?? String(failure)
+        setError(message)
+        onFailure(proposal, message)
+      })
+      .finally(() => {
+        busyRef.current = false
+        setBusy(false)
+      })
+  }
+  const update = proposal.action === 'update'
+  const rows = useMemo(() => lineDiff(update ? proposal.previous?.content : '', proposal.content), [update, proposal.previous?.content, proposal.content])
+  if (proposal.kind === 'agents') {
+    const blocks = proposal.edits.map(edit => [
+      ...(edit.op === 'add' ? [] : editLines(edit.old)).map(line => ({ kind: 'removed', line })),
+      ...(edit.op === 'remove' ? [] : editLines(edit.text)).map(line => ({ kind: 'added', line })),
+    ])
+    return h('section', { className: 'bt-q bt-learning-card', role: 'group', 'aria-labelledby': titleId, 'aria-busy': busy },
+      h(ProposalHead, { titleId, icon: PencilIcon, title: t('AGENTS.md update') }),
+      h(FileBox, { name: 'AGENTS.md', path: proposal.folder, state: proposal.exists === false ? 'Added' : 'Modified', blocks }),
+      proposal.edits.map((edit, index) => edit.why ? h('p', { className: 'bt-learning-why', key: index }, edit.why) : null),
+      error ? h('div', { className: 'bt-learning-error', role: 'alert' }, error) : null,
+      h(ProposalFoot, { busy, answer }))
+  }
+  const oldDetail = update && typeof proposal.previous?.description === 'string' && proposal.previous.description !== proposal.description ? proposal.previous.description : undefined
+  return h('section', { className: 'bt-q bt-learning-card', role: 'group', 'aria-labelledby': titleId, 'aria-busy': busy },
+    h(ProposalHead, { titleId, title: proposal.name, kind: t(update ? 'Skill update' : 'New skill'), detail: proposal.description, oldDetail }),
+    h(FileBox, { name: 'SKILL.md', path: `skills/${proposal.name}`, state: update ? 'Updated' : 'Added', blocks: [rows] }),
+    proposal.why ? h('p', { className: 'bt-learning-why' }, proposal.why) : null,
+    error ? h('div', { className: 'bt-learning-error', role: 'alert' }, error) : null,
+    h(ProposalFoot, { busy, answer }))
+}
+
+function ProposalHead({ titleId, icon = MemoryIcon, title, kind, detail, oldDetail }) {
+  return h('div', { className: 'bt-q-head' },
+    h('span', { className: 'bt-learning-icon', 'aria-hidden': true }, h(icon)),
+    h('div', { className: 'bt-q-text' },
+      h('p', { className: 'bt-q-title', id: titleId }, title),
+      kind ? h('div', { className: 'bt-q-detail' }, kind) : null,
+      oldDetail ? h('p', { className: 'bt-learning-description bt-learning-old' }, h('del', null, oldDetail)) : null,
+      detail ? h('p', { className: 'bt-learning-description' }, detail) : null),
+    h('span', { className: 'bt-q-badge bt-learning-status' }, h('span', { className: 'bt-learning-dot', 'aria-hidden': true }), t('Awaiting approval')))
+}
+
+function ProposalFoot({ busy, answer }) {
+  return h('div', { className: 'bt-q-foot bt-learning-foot' },
+    h('button', { type: 'button', className: 'bt-learning-btn bt-learning-decline', disabled: busy, onClick: () => answer(false) }, t('Decline')),
+    h('button', { type: 'button', className: 'bt-learning-btn bt-learning-approve', disabled: busy, onClick: () => answer(true) },
+      h(CheckIcon), t('Approve')))
+}
+
+const COLLAPSE_ROWS = 8
+const SIGNS = { added: '+', removed: '\u2212', same: '' }
+
+function FileBox({ name, path, state, blocks }) {
+  const [open, setOpen] = useState(false)
+  const all = blocks.flat()
+  const added = all.filter(row => row.kind === 'added').length
+  const removed = all.filter(row => row.kind === 'removed').length
+  const folds = all.length > COLLAPSE_ROWS
+  const shut = folds && !open
+  return h('div', { className: 'bt-learning-file' },
+    h('div', { className: 'bt-learning-filehead' },
+      h('span', { className: 'bt-learning-name' }, name),
+      path ? h('span', { className: 'bt-learning-path' }, path) : null,
+      h('span', { className: 'bt-learning-spacer' }),
+      added > 0 ? h('span', { className: 'bt-learning-plus' }, `+${added}`) : null,
+      removed > 0 ? h('span', { className: 'bt-learning-minus' }, `\u2212${removed}`) : null,
+      h('span', { className: `bt-learning-state bt-learning-state-${state.toLowerCase()}` }, t(state))),
+    h('div', { className: shut ? 'bt-learning-code bt-learning-shut' : 'bt-learning-code' },
+      blocks.map((rows, blockIndex) => [
+        blockIndex > 0 ? h('div', { className: 'bt-learning-gap', key: `gap-${blockIndex}` }) : null,
+        ...rows.map((row, rowIndex) => h('div', { className: `bt-learning-row bt-learning-${row.kind}`, key: `${blockIndex}-${rowIndex}` },
+          h('span', { className: 'bt-learning-num', 'aria-hidden': true }, row.number ?? ''),
+          h('span', { className: 'bt-learning-sign', 'aria-hidden': true }, SIGNS[row.kind]),
+          h('span', { className: 'bt-learning-text' }, row.line || '\u00a0'))),
+      ])),
+    folds ? h('div', { className: shut ? 'bt-learning-morebar bt-learning-morebar-shut' : 'bt-learning-morebar' },
+      h('button', { type: 'button', className: 'bt-learning-more', 'aria-expanded': open, onClick: () => setOpen(!open) },
+        t(open ? 'Show less' : 'Show all {count} lines', { count: all.length }))) : null)
+}
+
+function LearningProposals({ turn, dock, sessionId, useRoster, actions }) {
+  const roster = useRoster(value => value)
+  const facts = useTurnFacts(sessionId, actions)
+  const [failed, setFailed] = useState({})
+  const bot = roster.byId?.[sessionId]
+  if (!bot || currentPart(bot) !== sessionId) return null
+  const proposals = roster.learning?.[bot.id] ?? []
+  const visible = [...proposals]
+  for (const entry of Object.values(failed)) {
+    if (entry.proposal.botId === bot.id && !proposals.some(proposal => proposal.id === entry.proposal.id)) visible.push(entry.proposal)
+  }
+  for (const entry of failedAnswers.values()) {
+    if (entry.proposal.botId === bot.id && !proposals.some(proposal => proposal.id === entry.proposal.id)
+      && !visible.some(proposal => proposal.id === entry.proposal.id)) visible.push(entry.proposal)
+  }
+  const cards = visible.filter(proposal => {
+    const placement = proposalPlacement(proposal, facts?.turns)
+    return dock ? placement.kind === 'dock' : placement.kind === 'turn' && placement.turn === turn?.turn
+  })
+  if (cards.length === 0) return null
+  const onFailure = (proposal, error) => {
+    failedAnswers.set(proposal.id, { proposal, error })
+    setFailed(current => ({ ...current, [proposal.id]: { proposal, error } }))
+  }
+  const onResolved = id => setFailed(current => {
+    failedAnswers.delete(id)
+    if (!(id in current)) return current
+    const next = { ...current }
+    delete next[id]
+    return next
+  })
+  return h('div', { className: dock ? 'bt-learning-stack bt-learning-dock' : 'bt-learning-stack' }, cards.map(proposal => h('div', { className: 'bt-q-inline', key: proposal.id },
+    h(ProposalCard, {
+      proposal,
+      initialError: failed[proposal.id]?.error ?? failedAnswers.get(proposal.id)?.error,
+      onFailure,
+      onResolved,
+      actions,
+    }))))
+}
+
+export function LearningTurnTail(props) {
+  return h(LearningProposals, { ...props, dock: false })
+}
+
+export function LearningDock(props) {
+  return h(LearningProposals, { ...props, dock: true })
+}
+
+export const LEARNING_CSS = `
+.bt-learning-stack{display:flex;flex-direction:column;gap:4px}
+.bt-learning-dock{width:100%;max-width:var(--dsh-chat-content-width,748px);margin:0 auto;box-sizing:border-box}
+.bt-learning-card .bt-q-head{gap:12px}
+.bt-learning-icon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:var(--bt-hover);color:var(--bt-ink-2)}
+.bt-learning-icon svg{width:18px;height:18px}
+.bt-learning-description{margin:6px 0 0;font-size:13px;line-height:19px;color:var(--bt-ink)}
+.bt-learning-old{color:var(--bt-ink-3)}
+.bt-learning-status{display:inline-flex;align-items:center;gap:6px;border-style:solid;border-color:color-mix(in srgb,var(--bt-star) 35%,transparent);color:color-mix(in srgb,var(--bt-star) 80%,var(--bt-ink))}
+.bt-learning-dot{width:6px;height:6px;border-radius:50%;background:var(--bt-star)}
+.bt-learning-file{border-radius:12px;overflow:hidden;background:color-mix(in srgb,var(--bt-ink) 2.5%,var(--bt-card));box-shadow:inset 0 0 0 1px var(--bt-q-rule)}
+.bt-learning-filehead{display:flex;align-items:center;gap:8px;min-width:0;padding:8px 12px;box-shadow:inset 0 -1px 0 var(--bt-q-rule-2);font-size:12px;line-height:18px}
+.bt-learning-name{flex:none;font-weight:600;color:var(--bt-ink)}
+.bt-learning-path{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--bt-ink-3)}
+.bt-learning-spacer{flex:1}
+.bt-learning-plus,.bt-learning-minus{flex:none;font-weight:600;font-variant-numeric:tabular-nums}
+.bt-learning-plus{color:var(--bt-green)}
+.bt-learning-minus{color:var(--bt-danger)}
+.bt-learning-state{flex:none;height:20px;padding:0 8px;border-radius:999px;font-size:11px;line-height:20px;font-weight:500;background:var(--bt-hover);color:var(--bt-ink-2)}
+.bt-learning-state-added{background:color-mix(in srgb,var(--bt-green) 13%,transparent);color:color-mix(in srgb,var(--bt-green) 70%,var(--bt-ink))}
+.bt-learning-code{padding:6px 0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:20px;color:var(--bt-ink)}
+.bt-learning-shut{max-height:172px;overflow:hidden}
+.bt-learning-row{display:grid;grid-template-columns:36px 16px 1fr}
+.bt-learning-num{padding-right:6px;text-align:right;color:var(--bt-ink-3);font-variant-numeric:tabular-nums;user-select:none}
+.bt-learning-sign{text-align:center;user-select:none}
+.bt-learning-text{min-width:0;padding-right:12px;white-space:pre-wrap;overflow-wrap:anywhere}
+.bt-learning-added{background:color-mix(in srgb,var(--bt-green) 9%,transparent)}
+.bt-learning-added .bt-learning-sign{color:var(--bt-green)}
+.bt-learning-removed{background:color-mix(in srgb,var(--bt-danger) 7%,transparent)}
+.bt-learning-removed .bt-learning-sign{color:var(--bt-danger)}
+.bt-learning-removed .bt-learning-text{color:var(--bt-ink-2)}
+.bt-learning-gap{height:1px;margin:6px 12px;background:var(--bt-q-rule)}
+.bt-learning-morebar{display:flex;justify-content:center;padding:4px 0 8px}
+.bt-learning-morebar-shut{position:relative;margin-top:-36px;padding-top:28px;background:linear-gradient(transparent,color-mix(in srgb,var(--bt-ink) 2.5%,var(--bt-card)) 60%)}
+.bt-learning-more{height:24px;padding:0 10px;border:0;border-radius:999px;background:var(--bt-card);box-shadow:inset 0 0 0 1px var(--bt-q-edge);font:inherit;font-size:12px;color:var(--bt-ink-2);cursor:pointer;transition:background-color .12s ease,color .12s ease}
+.bt-learning-more:hover{background:var(--bt-hover);color:var(--bt-ink)}
+.bt-learning-more:focus-visible{outline:2px solid var(--bt-accent);outline-offset:2px}
+.bt-learning-why{margin:0;font-size:12px;line-height:17px;color:var(--bt-ink-2)}
+.bt-learning-btn{flex:none;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 16px;border:0;border-radius:999px;font:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .12s ease,opacity .12s ease,${spring(SPRING_TAP, 'scale')}}
+.bt-learning-btn svg{width:15px;height:15px}
+.bt-learning-decline{background:transparent;box-shadow:inset 0 0 0 1px var(--bt-line-2);color:var(--bt-ink)}
+.bt-learning-decline:hover:not(:disabled){background:var(--bt-hover)}
+.bt-learning-approve{padding-left:13px;background:var(--bt-accent);color:var(--bt-accent-ink)}
+.bt-learning-approve:hover:not(:disabled){opacity:.86}
+.bt-learning-btn:disabled{opacity:.45;cursor:default}
+.bt-learning-btn:active:not(:disabled){scale:.96}
+.bt-learning-btn:focus-visible{outline:2px solid var(--bt-accent);outline-offset:2px}
+@media (prefers-reduced-motion:reduce){.bt-learning-btn{transition:background-color .12s ease,opacity .12s ease}.bt-learning-btn:active:not(:disabled){scale:none}}
+.bt-learning-error{font-size:12px;line-height:16px;color:var(--bt-danger)}
+`