dsh-agent-office 4.2.0 → 4.6.0

package/panel-src/main.js

@@ -13,6 +13,7 @@ import faceDizzy from './assets/exp-dizzy.png'
 import faceSurprised from './assets/exp-surprised.png'
 import faceThinking from './assets/exp-thinking.png'
 import faceLoved from './assets/exp-loved.png'
+import faceSlits from './assets/exp-slits.png'
 
 const API = '/agent-office/api/state'
 const FLOOR_GAP = 4.0
@@ -285,7 +286,7 @@ function applyThemeFrame() {
   for (const material of cityMats) material.color.copy(NIGHT_THEME.city).lerp(DAY_THEME.city, mix)
   const neonMaterial = neonSign?.material
   if (neonMaterial) neonMaterial.opacity = NIGHT_THEME.neon + (DAY_THEME.neon - NIGHT_THEME.neon) * mix
-  for (const item of themeLights) item.light.intensity = item.night + (item.day - item.night) * mix
+  for (const item of [...themeLights, ...annexLights]) item.light.intensity = item.night + (item.day - item.night) * mix
 }
 
 function syncThemeByClock(immediate = false) {
@@ -350,6 +351,7 @@ const FACE_SRC = {
   surprised: faceSurprised,
   thinking: faceThinking,
   loved: faceLoved,
+  slits: faceSlits,
 }
 const faceTextures = {}
 const faceLoader = new THREE.TextureLoader()
@@ -359,13 +361,15 @@ for (const [name, src] of Object.entries(FACE_SRC)) {
   faceTextures[name] = texture
 }
 const CUSTOM_FACE_KEY = 'agent-office-custom-face'
+const GLASS_KEY = 'agent-office-ui-opacity'
 let customFaceTexture = null
+let customFaceData = ''
 const FACE_FOR_STATUS = {
   working: 'happy',
   need_me: 'surprised',
   stuck: 'dizzy',
   done: 'loved',
-  resting: 'sleepy',
+  resting: 'slits',
 }
 const zTexture = (() => {
   const canvas = document.createElement('canvas')
@@ -384,6 +388,63 @@ const zTexture = (() => {
   return texture
 })()
 
+
+const sweatTexture = (() => {
+  const canvas = document.createElement('canvas')
+  canvas.width = 64
+  canvas.height = 96
+  const ctx = canvas.getContext('2d')
+  ctx.clearRect(0, 0, 64, 96)
+  ctx.fillStyle = '#bfeaff'
+  ctx.beginPath()
+  ctx.moveTo(32, 8)
+  ctx.bezierCurveTo(46, 30, 55, 48, 55, 62)
+  ctx.bezierCurveTo(55, 79, 45, 89, 32, 89)
+  ctx.bezierCurveTo(19, 89, 9, 79, 9, 62)
+  ctx.bezierCurveTo(9, 48, 18, 30, 32, 8)
+  ctx.fill()
+  ctx.fillStyle = 'rgba(255,255,255,.85)'
+  ctx.beginPath()
+  ctx.ellipse(23, 58, 5, 9, -0.35, 0, Math.PI * 2)
+  ctx.fill()
+  const texture = new THREE.CanvasTexture(canvas)
+  texture.colorSpace = THREE.SRGBColorSpace
+  return texture
+})()
+
+const scribbleTexture = (() => {
+  const canvas = document.createElement('canvas')
+  canvas.width = 256
+  canvas.height = 160
+  const ctx = canvas.getContext('2d')
+  ctx.clearRect(0, 0, 256, 160)
+  const strokes = [
+    [[34, 92], [64, 34], [92, 112], [124, 40], [154, 108], [186, 48], [224, 96]],
+    [[48, 54], [92, 78], [60, 126], [126, 92], [172, 124], [208, 66]],
+    [[78, 24], [104, 66], [144, 26], [168, 74], [208, 32]],
+  ]
+  ctx.lineCap = 'round'
+  ctx.lineJoin = 'round'
+  for (const pass of [{ color: 'rgba(255,255,255,.18)', width: 13 }, { color: '#0b0d10', width: 8 }]) {
+    ctx.strokeStyle = pass.color
+    ctx.lineWidth = pass.width
+    for (const points of strokes) {
+      ctx.beginPath()
+      ctx.moveTo(points[0][0], points[0][1])
+      for (let i = 1; i < points.length - 1; i += 2) {
+        const [cx, cy] = points[i]
+        const [x, y] = points[i + 1]
+        ctx.quadraticCurveTo(cx, cy, x, y)
+      }
+      ctx.stroke()
+    }
+  }
+  const texture = new THREE.CanvasTexture(canvas)
+  texture.colorSpace = THREE.SRGBColorSpace
+  return texture
+})()
+const OVERLOAD_COLOR = new THREE.Color(0xff5a5a)
+
 const floorTexture = (() => {
   const canvas = document.createElement('canvas')
   canvas.width = canvas.height = 256
@@ -414,7 +475,7 @@ function disposeGroup(group) {
     if (object.material) {
       const materials = Array.isArray(object.material) ? object.material : [object.material]
       for (const material of materials) {
-        if (material.map && material.map !== glowTexture && material.map !== shadowTexture && material.map !== floorTexture) material.map.dispose()
+        if (material.map && material.map !== glowTexture && material.map !== shadowTexture && material.map !== floorTexture && material.map !== sweatTexture && material.map !== scribbleTexture) material.map.dispose()
         material.dispose()
       }
     }
@@ -456,6 +517,25 @@ function robotFor(agent, index = 0, sitY = 0) {
   face.position.y = baseY
   group.add(face)
 
+  // 正常工作：大汗淋漓；长时间工作：红温 + 头顶乱线
+  const sweat = []
+  for (let i = 0; i < 4; i++) {
+    const mat = new THREE.SpriteMaterial({ map: sweatTexture, transparent: true, opacity: 0, depthWrite: false, toneMapped: false, color: 0xbfeaff })
+    const drop = new THREE.Sprite(mat)
+    drop.scale.set(0.095, 0.145, 1)
+    drop.visible = false
+    group.add(drop)
+    sweat.push({ sprite: drop, phase: i / 4, x: i % 2 === 0 ? -0.27 : 0.27, drift: i < 2 ? -0.04 : 0.04 })
+  }
+  const scribbleGlow = new THREE.Sprite(new THREE.SpriteMaterial({ map: glowTexture, color: 0xff4a4a, transparent: true, opacity: 0, depthWrite: false, blending: THREE.AdditiveBlending }))
+  scribbleGlow.scale.set(1.0, 0.62, 1)
+  scribbleGlow.position.set(0, baseY + 1.55, 0.03)
+  group.add(scribbleGlow)
+  const scribble = new THREE.Sprite(new THREE.SpriteMaterial({ map: scribbleTexture, transparent: true, opacity: 0, depthWrite: false, toneMapped: false }))
+  scribble.scale.set(0.84, 0.5, 1)
+  scribble.position.set(0, baseY + 1.55, 0.04)
+  group.add(scribble)
+
   // 猫咪上下浮动的 GSAP 循环（用统一相位对象驱动，tick 里再乘幅度）
   const motion = { bob: 0.5 }
   if (!reduceMotion) {
@@ -567,7 +647,7 @@ function robotFor(agent, index = 0, sitY = 0) {
   group.userData = {
     agentId: agent.id,
     index,
-    parts: { face, faceMat, ring, glow, badge, label, zzz, ripples, motion, seatShadow, shadow, tint, baseY },
+    parts: { face, faceMat, ring, glow, badge, label, zzz, ripples, motion, seatShadow, shadow, tint, baseY, sweat, scribble, scribbleGlow },
   }
   return group
 }
@@ -1099,7 +1179,7 @@ function buildFloor(team, index, teamAgents) {
 
   // 彩色货架（参考原版的彩色格子）
   const shelf = new THREE.Group()
-  shelf.position.set(-W / 2 + 0.26, 0, -0.4)
+  shelf.position.set(-W / 2 + 0.38, 0, -0.4)
   shelf.rotation.y = Math.PI / 2
   const shelfMat = new THREE.MeshStandardMaterial({ color: 0x1b2430, roughness: 0.7, metalness: 0.3 })
   for (const y of [0.5, 1.15, 1.8]) {
@@ -1215,6 +1295,10 @@ function applyCustomFaceToAll() {
     parts.faceMat.color.set(customFaceTexture ? 0xffffff : parts.tint ?? 0xffffff)
     parts.faceMat.needsUpdate = true
   }
+  if (selectedId !== null) {
+    const entry = agentsById.get(selectedId)
+    if (entry) renderCard(entry.agent)
+  }
 }
 
 function loadCustomFace() {
@@ -1222,9 +1306,11 @@ function loadCustomFace() {
   try { data = localStorage.getItem(CUSTOM_FACE_KEY) ?? '' } catch {}
   if (!data) {
     customFaceTexture = null
+    customFaceData = ''
     applyCustomFaceToAll()
     return
   }
+  customFaceData = data
   faceLoader.load(data, texture => {
     texture.colorSpace = THREE.SRGBColorSpace
     customFaceTexture = texture
@@ -1232,8 +1318,20 @@ function loadCustomFace() {
   })
 }
 
+function applyGlassSetting() {
+  let raw = ''
+  try { raw = localStorage.getItem(GLASS_KEY) ?? '' } catch {}
+  const value = Number.parseFloat(raw)
+  if (Number.isFinite(value)) {
+    document.documentElement.style.setProperty('--glass-alpha', String(Math.min(0.98, Math.max(0.5, value / 100))))
+  } else {
+    document.documentElement.style.removeProperty('--glass-alpha')
+  }
+}
+
 window.addEventListener('storage', event => {
   if (event.key === CUSTOM_FACE_KEY) loadCustomFace()
+  if (event.key === GLASS_KEY) applyGlassSetting()
 })
 let usage = { tokens_week: 0, tokens_today: 0 }
 let selectedId = null
@@ -1258,8 +1356,8 @@ function globalPose(floorsCount) {
   const height = Math.max(0, (floorsCount - 1) * FLOOR_GAP)
   const centerX = ((floorsCount - 1) * OFFSET_X) / 2
   const centerZ = ((floorsCount - 1) * OFFSET_Z) / 2
-  const dist = (13.5 + floorsCount * 2.5) * viewScale()
-  const target = new THREE.Vector3(centerX, height / 2 + 1.2, centerZ)
+  const dist = (19 + floorsCount * 3) * viewScale()
+  const target = new THREE.Vector3(centerX + 3.6, height / 2 + 1.0, centerZ + 0.8)
   return {
     target,
     position: new THREE.Vector3(centerX + dist * 0.42, target.y + dist * 0.82, centerZ + dist * 0.9),
@@ -1302,6 +1400,8 @@ function setFloorFocus(index) {
     for (const child of floor.children) child.robot.userData.parts.label.visible = visible
   }
   neonSign.visible = !focused
+  if (annex) annex.visible = !focused
+  if (mcpGroup) mcpGroup.visible = !focused
   const chip = $('#focusChip')
   if (focused) {
     const floor = floors.find(item => item.index === index)
@@ -1409,7 +1509,7 @@ function renderChecks() {
   ]
   const done = checks.filter(item => item.ok).length
   $('#checkScore').textContent = `${done}/${checks.length}`
-  $('#checkBody').innerHTML = checks.map(item => `<div class="check ${item.ok ? 'ok' : ''}"><i>✓</i><span>${item.text}</span></div>`).join('')
+  $('#checkBody').innerHTML = checks.map(item => `<div class="check ${item.ok ? 'ok' : ''}"><i><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3.5 8.5l3 3 6-6"/></svg></i><span>${item.text}</span></div>`).join('')
 }
 
 function renderMeter() {
@@ -1432,31 +1532,36 @@ function renderFeed() {
     }).join('')
 }
 
+let cardHideTimer = null
+
 function renderCard(agent) {
   const card = $('#card')
   if (agent === null) {
-    card.classList.remove('show')
+    if (!card.classList.contains('show') || card.classList.contains('is-out')) return
+    card.classList.add('is-out')
+    clearTimeout(cardHideTimer)
+    cardHideTimer = setTimeout(() => card.classList.remove('show', 'is-out'), 160)
     return
   }
+  clearTimeout(cardHideTimer)
+  card.classList.remove('is-out')
   card.classList.add('show')
   const status = STATUS[agent.status] ?? STATUS.resting
   const floor = floors.find(item => item.team === agent.team)
   $('#cardTeam').textContent = floor === undefined ? agent.team : `楼层 ${floor.index + 1} · ${agent.team}`
   const glyphEl = $('#cardGlyph')
   glyphEl.textContent = ''
-  glyphEl.style.backgroundImage = `url(${faceDefault})`
+  glyphEl.style.backgroundImage = `url(${customFaceData || faceDefault})`
   glyphEl.style.backgroundSize = '82% 82%'
   glyphEl.style.backgroundRepeat = 'no-repeat'
   glyphEl.style.backgroundPosition = 'center'
-  glyphEl.style.backgroundColor = `${agent.color}22`
-  glyphEl.style.border = `1px solid ${agent.color}66`
+  glyphEl.style.backgroundColor = customFaceData ? 'transparent' : `${agent.color}22`
+  glyphEl.style.border = customFaceData ? '1px solid var(--line-2)' : `1px solid ${agent.color}66`
   $('#cardName').textContent = agent.name
   $('#cardSub').textContent = agent.schedule
   const statusEl = $('#cardStatus')
   statusEl.textContent = `● ${status.label}`
-  statusEl.style.color = status.color
-  statusEl.style.borderColor = status.color + '66'
-  statusEl.style.background = status.color + '18'
+  statusEl.dataset.status = agent.status
   $('#cardRuns').textContent = String(agent.runs_today ?? 0)
   $('#cardShare').textContent = `${Math.round(agent.usage_pct || 0)}%`
   $('#cardTokens').textContent = fmt(agent.tokens_today || 0)
@@ -1482,6 +1587,351 @@ function teamList(list) {
   return teams.slice(0, 4)
 }
 
+
+/* ------------------------------------------------------------------ *
+ * 右侧 Annex：教室布局（讲台 + 通用/备考/题库三席）
+ * ------------------------------------------------------------------ */
+const ANNEX_X = 9.6
+const ANNEX_Z = 0.3
+const ANNEX_W = 7.2
+const ANNEX_D = 6.0
+let annex = null
+let annexLights = []
+let mcpCurve = null
+let mcpBeads = []
+let mcpDashes = []
+let mcpGroup = null
+let mcpSign = null
+let sciFiIcons = []
+
+function buildAnnex() {
+  annex = new THREE.Group()
+  annex.position.set(ANNEX_X, 0, ANNEX_Z)
+  annex.scale.setScalar(0.84)
+  scene.add(annex)
+
+  const wood = new THREE.MeshStandardMaterial({ color: 0x2a2119, roughness: 0.72, metalness: 0.2 })
+  const dark = new THREE.MeshStandardMaterial({ color: 0x17212b, roughness: 0.5, metalness: 0.5 })
+  const metal = new THREE.MeshStandardMaterial({ color: 0x334654, roughness: 0.35, metalness: 0.75 })
+  const glass = new THREE.MeshStandardMaterial({ color: 0x8fc8ff, transparent: true, opacity: 0.06, roughness: 0.08, metalness: 0.1, depthWrite: false, side: THREE.DoubleSide })
+  const cyan = new THREE.MeshBasicMaterial({ color: 0x7fd7ff, toneMapped: false })
+  const warm = new THREE.MeshBasicMaterial({ color: 0xffcf9a, toneMapped: false })
+  const box = (w, h, d, mat, x, y, z, parent = annex) => {
+    const mesh = new THREE.Mesh(new THREE.BoxGeometry(w, h, d), mat)
+    mesh.position.set(x, y, z)
+    parent.add(mesh)
+    return mesh
+  }
+
+  // 地板 / 边线
+  box(ANNEX_W, 0.3, ANNEX_D, wood, 0, -0.15, 0)
+  const top = new THREE.Mesh(new THREE.PlaneGeometry(ANNEX_W - 0.18, ANNEX_D - 0.18), new THREE.MeshStandardMaterial({ map: floorTexture, roughness: 0.8, metalness: 0.25 }))
+  top.rotation.x = -Math.PI / 2
+  top.position.y = 0.012
+  annex.add(top)
+  const edge = new THREE.LineSegments(
+    new THREE.EdgesGeometry(new THREE.BoxGeometry(ANNEX_W + 0.04, 0.34, ANNEX_D + 0.04)),
+    new THREE.LineBasicMaterial({ color: 0x8fd4ff, transparent: true, opacity: 0.75 }),
+  )
+  annex.add(edge)
+
+  // 玻璃外墙（正面留空）
+  box(ANNEX_W, 2.35, 0.05, glass, 0, 1.18, -ANNEX_D / 2 + 0.08)
+  box(0.05, 2.35, ANNEX_D, glass, -ANNEX_W / 2 + 0.08, 1.18, 0)
+  box(0.05, 2.35, ANNEX_D, glass, ANNEX_W / 2 - 0.08, 1.18, 0)
+  for (const [x, z] of [[-ANNEX_W / 2 + 0.08, -ANNEX_D / 2 + 0.08], [ANNEX_W / 2 - 0.08, -ANNEX_D / 2 + 0.08], [-ANNEX_W / 2 + 0.08, ANNEX_D / 2 - 0.08], [ANNEX_W / 2 - 0.08, ANNEX_D / 2 - 0.08]]) {
+    box(0.09, 2.45, 0.09, dark, x, 1.22, z)
+  }
+  box(ANNEX_W, 0.06, 0.06, metal, 0, 2.38, -ANNEX_D / 2 + 0.08)
+  box(0.06, 0.06, ANNEX_D, metal, -ANNEX_W / 2 + 0.08, 2.38, 0)
+  box(0.06, 0.06, ANNEX_D, metal, ANNEX_W / 2 - 0.08, 2.38, 0)
+  box(ANNEX_W - 1.0, 0.025, 0.02, cyan, 0, 2.31, -ANNEX_D / 2 + 0.16)
+
+  // 教室布局：讲台在后墙，三张工位面朝讲台
+  // 1) 通用工位
+  function addDesk(x, z, matTop = wood) {
+    const g = new THREE.Group()
+    g.position.set(x, 0, z)
+    box(1.16, 0.055, 0.62, matTop, 0, 0.72, 0, g)
+    for (const [lx, lz] of [[-0.5, -0.24], [0.5, -0.24], [-0.5, 0.24], [0.5, 0.24]]) {
+      box(0.055, 0.7, 0.055, dark, lx, 0.36, lz, g)
+    }
+    box(0.62, 0.4, 0.045, dark, 0, 0.95, -0.18, g)
+    const screen = new THREE.Mesh(new THREE.PlaneGeometry(0.54, 0.3), cyan)
+    screen.position.set(0, 0.95, -0.155)
+    g.add(screen)
+    box(0.5, 0.055, 0.06, warm, 0, 0.76, 0.3, g)
+    // 椅子（面向讲台 -z）
+    box(0.42, 0.06, 0.4, dark, 0, 0.45, 0.55, g)
+    box(0.42, 0.5, 0.06, dark, 0, 0.7, 0.75, g)
+    const stem = new THREE.Mesh(new THREE.CylinderGeometry(0.025, 0.025, 0.42, 8), metal)
+    stem.position.set(0, 0.22, 0.55)
+    g.add(stem)
+    const base = new THREE.Mesh(new THREE.CylinderGeometry(0.23, 0.23, 0.03, 16), dark)
+    base.position.set(0, 0.02, 0.55)
+    g.add(base)
+    annex.add(g)
+  }
+  addDesk(-2.35, 0.85)
+
+  // 2) 备考隔间（产品里的学习空间）
+  const booth = new THREE.Group()
+  booth.position.set(0, 0, 0.85)
+  box(1.55, 1.78, 0.04, glass, 0, 0.9, -0.66, booth)
+  box(0.04, 1.78, 1.28, glass, -0.76, 0.9, 0, booth)
+  box(0.04, 1.78, 1.28, glass, 0.76, 0.9, 0, booth)
+  box(1.58, 0.06, 0.06, metal, 0, 1.79, -0.66, booth)
+  box(0.06, 0.06, 1.32, metal, -0.76, 1.79, 0, booth)
+  box(0.06, 0.06, 1.32, metal, 0.76, 1.79, 0, booth)
+  box(0.74, 0.055, 0.44, wood, 0, 0.7, -0.2, booth)
+  box(0.56, 0.34, 0.04, dark, 0, 0.93, -0.4, booth)
+  const boothScreen = new THREE.Mesh(new THREE.PlaneGeometry(0.48, 0.25), cyan)
+  boothScreen.position.set(0, 0.93, -0.375)
+  booth.add(boothScreen)
+  box(0.42, 0.06, 0.38, dark, 0, 0.44, 0.2, booth)
+  box(0.42, 0.5, 0.06, dark, 0, 0.69, 0.4, booth)
+  const boothLamp = new THREE.Mesh(new THREE.SphereGeometry(0.05, 10, 10), warm)
+  boothLamp.position.set(0.5, 1.34, -0.32)
+  booth.add(boothLamp)
+  annex.add(booth)
+
+  // 3) 题库工位：科幻桌面 + 浮动 OCR / 数据库 / 试卷投影
+  const sci = new THREE.Group()
+  sci.position.set(2.35, 0, 0.85)
+  box(1.16, 0.07, 0.62, metal, 0, 0.72, 0, sci)
+  for (const [lx, lz] of [[-0.5, -0.24], [0.5, -0.24], [-0.5, 0.24], [0.5, 0.24]]) {
+    box(0.05, 0.7, 0.05, dark, lx, 0.36, lz, sci)
+  }
+  // 全息桌屏
+  const holoCanvas = document.createElement('canvas')
+  holoCanvas.width = 256
+  holoCanvas.height = 128
+  const hctx = holoCanvas.getContext('2d')
+  hctx.clearRect(0, 0, 256, 128)
+  hctx.strokeStyle = 'rgba(110,220,255,.7)'
+  hctx.lineWidth = 2
+  for (let x = 0; x <= 256; x += 24) {
+    hctx.beginPath(); hctx.moveTo(x, 0); hctx.lineTo(x, 128); hctx.stroke()
+  }
+  for (let y = 0; y <= 128; y += 24) {
+    hctx.beginPath(); hctx.moveTo(0, y); hctx.lineTo(256, y); hctx.stroke()
+  }
+  hctx.fillStyle = 'rgba(120,230,255,.16)'
+  hctx.fillRect(16, 22, 224, 20)
+  hctx.fillRect(16, 62, 150, 10)
+  hctx.fillRect(16, 86, 190, 10)
+  const holoTexture = new THREE.CanvasTexture(holoCanvas)
+  holoTexture.colorSpace = THREE.SRGBColorSpace
+  const holo = new THREE.Mesh(new THREE.PlaneGeometry(0.86, 0.42), new THREE.MeshBasicMaterial({ map: holoTexture, transparent: true, opacity: 0.55, depthWrite: false, toneMapped: false, side: THREE.DoubleSide }))
+  holo.position.set(0, 1.08, -0.08)
+  holo.rotation.x = -0.18
+  sci.add(holo)
+  box(0.5, 0.055, 0.06, cyan, 0, 0.76, 0.3, sci)
+  // 椅子
+  box(0.42, 0.06, 0.4, dark, 0, 0.45, 0.55, sci)
+  box(0.42, 0.5, 0.06, dark, 0, 0.7, 0.75, sci)
+  const sciStem = new THREE.Mesh(new THREE.CylinderGeometry(0.025, 0.025, 0.42, 8), metal)
+  sciStem.position.set(0, 0.22, 0.55)
+  sci.add(sciStem)
+  const sciBase = new THREE.Mesh(new THREE.CylinderGeometry(0.23, 0.23, 0.03, 16), dark)
+  sciBase.position.set(0, 0.02, 0.55)
+  sci.add(sciBase)
+  annex.add(sci)
+  const halo = new THREE.Mesh(
+    new THREE.RingGeometry(0.4, 0.44, 48),
+    new THREE.MeshBasicMaterial({ color: 0x6fdcff, transparent: true, opacity: 0.35, side: THREE.DoubleSide, depthWrite: false, blending: THREE.AdditiveBlending }),
+  )
+  halo.rotation.x = -Math.PI / 2
+  halo.position.set(2.35, 1.58, 0.98)
+  annex.add(halo)
+
+  // 浮动图标：OCR 相机 / 数据库 / 试卷（billboard，远看也清楚）
+  const iconCanvas = (draw) => {
+    const canvas = document.createElement('canvas')
+    canvas.width = canvas.height = 160
+    const ctx = canvas.getContext('2d')
+    ctx.clearRect(0, 0, 160, 160)
+    ctx.strokeStyle = '#9fe7ff'
+    ctx.fillStyle = '#9fe7ff'
+    ctx.lineWidth = 7
+    ctx.lineCap = 'round'
+    ctx.lineJoin = 'round'
+    ctx.shadowColor = 'rgba(80,200,255,.9)'
+    ctx.shadowBlur = 10
+    draw(ctx)
+    const texture = new THREE.CanvasTexture(canvas)
+    texture.colorSpace = THREE.SRGBColorSpace
+    return texture
+  }
+  const iconSprite = (texture, x, y, z, scale = 0.4) => {
+    const sprite = new THREE.Sprite(new THREE.SpriteMaterial({ map: texture, transparent: true, depthWrite: false, toneMapped: false }))
+    sprite.scale.set(scale, scale, 1)
+    sprite.position.set(2.35 + x, y, 0.85 + z)
+    annex.add(sprite)
+    sprite.userData.baseY = y
+    sprite.userData.phase = sciFiIcons.length * 0.9
+    sciFiIcons.push(sprite)
+    return sprite
+  }
+
+  const ocrTexture = iconCanvas(ctx => {
+    ctx.beginPath(); ctx.roundRect(32, 44, 78, 58, 10); ctx.stroke()
+    ctx.beginPath(); ctx.arc(73, 73, 17, 0, Math.PI * 2); ctx.stroke()
+    ctx.beginPath(); ctx.arc(73, 73, 6, 0, Math.PI * 2); ctx.fill()
+    ctx.fillRect(42, 34, 22, 10)
+    ctx.font = '700 15px ui-monospace, Menlo, monospace'
+    ctx.textAlign = 'center'
+    ctx.fillText('OCR', 80, 128)
+  })
+  const dbTexture = iconCanvas(ctx => {
+    for (let i = 0; i < 3; i++) {
+      const y = 48 + i * 24
+      ctx.beginPath(); ctx.ellipse(80, y, 28, 9, 0, 0, Math.PI * 2); ctx.stroke()
+      ctx.beginPath(); ctx.moveTo(52, y); ctx.lineTo(52, y + 22); ctx.stroke()
+      ctx.beginPath(); ctx.moveTo(108, y); ctx.lineTo(108, y + 22); ctx.stroke()
+      ctx.beginPath(); ctx.ellipse(80, y + 22, 28, 9, 0, 0, Math.PI * 2); ctx.stroke()
+    }
+    ctx.font = '700 15px ui-monospace, Menlo, monospace'
+    ctx.textAlign = 'center'
+    ctx.fillText('DB', 80, 140)
+  })
+  const paperTexture = iconCanvas(ctx => {
+    ctx.beginPath(); ctx.roundRect(46, 28, 68, 92, 5); ctx.stroke()
+    ctx.beginPath(); ctx.moveTo(98, 28); ctx.lineTo(114, 44); ctx.lineTo(98, 44); ctx.closePath(); ctx.stroke()
+    for (let i = 0; i < 5; i++) {
+      ctx.beginPath(); ctx.moveTo(60, 54 + i * 13); ctx.lineTo(100, 54 + i * 13); ctx.stroke()
+    }
+    ctx.font = '700 15px ui-monospace, Menlo, monospace'
+    ctx.textAlign = 'center'
+    ctx.fillText('EXAM', 80, 142)
+  })
+
+  iconSprite(ocrTexture, -0.5, 2.08, 0.12, 0.48)
+  iconSprite(dbTexture, 0, 2.2, 0.12, 0.48)
+  iconSprite(paperTexture, 0.5, 2.08, 0.12, 0.48)
+
+  // 讲台（教室最前面，背靠后墙，面向三张工位）
+  const podium = new THREE.Group()
+  podium.position.set(0, 0, -1.95)
+  box(1.35, 0.14, 0.95, dark, 0, 0.07, 0, podium)
+  const lectern = box(0.7, 0.98, 0.5, wood, 0, 0.56, 0, podium)
+  lectern.rotation.x = -0.04
+  const topPlate = box(0.86, 0.06, 0.58, metal, 0, 1.08, 0, podium)
+  topPlate.rotation.x = -0.16
+  const panel = new THREE.Mesh(new THREE.PlaneGeometry(0.46, 0.26), cyan)
+  panel.position.set(0, 0.64, 0.256)
+  podium.add(panel)
+  const mic = new THREE.Mesh(new THREE.CylinderGeometry(0.014, 0.014, 0.36, 6), metal)
+  mic.position.set(0.2, 1.22, 0.02)
+  mic.rotation.z = -0.22
+  podium.add(mic)
+  const micHead = new THREE.Mesh(new THREE.SphereGeometry(0.04, 10, 10), cyan)
+  micHead.position.set(0.24, 1.4, 0.02)
+  podium.add(micHead)
+  annex.add(podium)
+  // 讲台后的黑板/示教板
+  box(3.3, 1.25, 0.04, dark, 0, 1.55, -2.86)
+  box(3.1, 0.03, 0.05, cyan, 0, 2.18, -2.83)
+
+  // 室内灯
+  const lightWarm = new THREE.PointLight(0xffd8b0, 2.6, 11, 2)
+  lightWarm.position.set(0, 2.15, 0.4)
+  annex.add(lightWarm)
+  annexLights.push({ light: lightWarm, night: 2.6, day: 1.1 })
+  const lightCool = new THREE.PointLight(0x8fc8ff, 1.8, 10, 2)
+  lightCool.position.set(0, 2.3, -1.8)
+  annex.add(lightCool)
+  annexLights.push({ light: lightCool, night: 1.8, day: 0.8 })
+
+  // 区域标签
+  const tag = (text, x, y, z) => {
+    const el = document.createElement('div')
+    el.className = 'officeTag'
+    el.textContent = text
+    const obj = new CSS2DObject(el)
+    obj.position.set(x, y, z)
+    annex.add(obj)
+  }
+  tag('讲台', 0, 1.9, -1.95)
+  tag('通用', -2.35, 1.45, 0.85)
+  tag('备考', 0, 2.0, 0.85)
+  tag('题库', 2.35, 1.27, 0.85)
+
+  // MCP 虚线 + 流光 + 暂未接通标牌
+  mcpGroup = new THREE.Group()
+  scene.add(mcpGroup)
+  mcpCurve = new THREE.CatmullRomCurve3([
+    new THREE.Vector3(4.55, 2.55, 0.35),
+    new THREE.Vector3(5.15, 3.35, 0.55),
+    new THREE.Vector3(5.8, 3.05, 0.8),
+    new THREE.Vector3(6.58, 2.3, 1.14),
+  ])
+  const pts = mcpCurve.getPoints(90)
+  const cableGeo = new THREE.BufferGeometry().setFromPoints(pts)
+  const cable = new THREE.Line(cableGeo, new THREE.LineDashedMaterial({
+    color: 0x2f7fff, dashSize: 0.2, gapSize: 0.16, transparent: true, opacity: 0.9,
+  }))
+  cable.computeLineDistances()
+  mcpGroup.add(cable)
+
+  // 沿曲线流动的短划，形成可见的“流光”
+  const dashGeo = new THREE.BoxGeometry(0.18, 0.05, 0.05)
+  const dashMat = new THREE.MeshBasicMaterial({ color: 0x2f7fff, transparent: true, opacity: 0.95, depthWrite: false, toneMapped: false })
+  for (let i = 0; i < 8; i++) {
+    const dash = new THREE.Mesh(dashGeo, dashMat)
+    mcpGroup.add(dash)
+    mcpDashes.push({ mesh: dash, phase: i / 8 })
+  }
+
+  const beadGeo = new THREE.SphereGeometry(0.042, 8, 8)
+  const beadMat = new THREE.MeshBasicMaterial({ color: 0x66b8ff, transparent: true, opacity: 0.95, depthWrite: false, toneMapped: false })
+  for (let i = 0; i < 9; i++) {
+    const bead = new THREE.Mesh(beadGeo, beadMat)
+    mcpGroup.add(bead)
+    mcpBeads.push({ mesh: bead, phase: i / 9 })
+  }
+
+  const signCanvas = document.createElement('canvas')
+  signCanvas.width = 512
+  signCanvas.height = 160
+  const sctx = signCanvas.getContext('2d')
+  sctx.clearRect(0, 0, 512, 160)
+  sctx.fillStyle = 'rgba(5,16,28,.88)'
+  sctx.beginPath()
+  sctx.roundRect(6, 6, 500, 148, 24)
+  sctx.fill()
+  sctx.strokeStyle = 'rgba(84,168,255,.55)'
+  sctx.lineWidth = 2
+  sctx.stroke()
+  sctx.strokeStyle = '#54a8ff'
+  sctx.lineWidth = 13
+  sctx.lineCap = 'round'
+  const drawX = (cx, cy, size) => {
+    sctx.beginPath(); sctx.moveTo(cx - size, cy - size); sctx.lineTo(cx + size, cy + size); sctx.stroke()
+    sctx.beginPath(); sctx.moveTo(cx + size, cy - size); sctx.lineTo(cx - size, cy + size); sctx.stroke()
+  }
+  drawX(58, 70, 19)
+  drawX(454, 70, 19)
+  sctx.fillStyle = '#d8efff'
+  sctx.textAlign = 'center'
+  sctx.font = '700 58px ui-monospace, Menlo, monospace'
+  sctx.fillText('MCP', 256, 89)
+  sctx.fillStyle = 'rgba(120,190,255,.82)'
+  sctx.font = '500 22px ui-monospace, Menlo, monospace'
+  sctx.fillText('暂未接通', 256, 128)
+  const signTex = new THREE.CanvasTexture(signCanvas)
+  signTex.colorSpace = THREE.SRGBColorSpace
+  mcpSign = new THREE.Sprite(new THREE.SpriteMaterial({ map: signTex, transparent: true, depthWrite: false, toneMapped: false }))
+  mcpSign.position.set(5.6, 4.55, 1.18)
+  mcpSign.scale.set(3.35, 1.05, 1)
+  mcpGroup.add(mcpSign)
+
+  const signGlow = new THREE.Sprite(new THREE.SpriteMaterial({ map: glowTexture, color: 0x3f9dff, transparent: true, opacity: 0.24, blending: THREE.AdditiveBlending, depthWrite: false }))
+  signGlow.position.copy(mcpSign.position)
+  signGlow.scale.set(4.4, 1.8, 1)
+  mcpGroup.add(signGlow)
+}
+
 function rebuild(list) {
   for (const [, entry] of agentsById) {
     const motion = entry.robot?.userData?.parts?.motion
@@ -1510,6 +1960,8 @@ function rebuild(list) {
   neonSign.position.set((teams.length - 1) * OFFSET_X * 0.5, height + 5.2, (teams.length - 1) * OFFSET_Z * 0.5)
   selectedId = null
   focusFloor = null
+  if (annex) annex.visible = true
+  if (mcpGroup) mcpGroup.visible = true
   $('#focusChip').hidden = true
   const pose = globalPose(teams.length)
   controls.target.copy(pose.target)
@@ -1615,6 +2067,28 @@ function tick() {
   const t = clock.getElapsedTime()
   requestAnimationFrame(tick)
   applyThemeFrame()
+  if (mcpCurve && mcpBeads.length > 0) {
+    const flow = clock.getElapsedTime()
+    for (const bead of mcpBeads) {
+      const p = mcpCurve.getPointAt((flow * 0.11 + bead.phase) % 1)
+      bead.mesh.position.copy(p)
+      bead.mesh.scale.setScalar(0.75 + 0.35 * Math.sin(flow * 5 + bead.phase * 18))
+    }
+    const axis = new THREE.Vector3(1, 0, 0)
+    const point = new THREE.Vector3()
+    const tangent = new THREE.Vector3()
+    for (const dash of mcpDashes) {
+      const t = (flow * 0.075 + dash.phase) % 1
+      mcpCurve.getPointAt(t, point)
+      mcpCurve.getTangentAt(t, tangent)
+      dash.mesh.position.copy(point)
+      dash.mesh.quaternion.setFromUnitVectors(axis, tangent.normalize())
+    }
+    if (mcpSign) mcpSign.position.y = 4.55 + Math.sin(flow * 0.9) * 0.04
+    for (const icon of sciFiIcons) {
+      icon.position.y = icon.userData.baseY + Math.sin(flow * 2.2 + icon.userData.phase) * 0.04
+    }
+  }
 
   const focusedTeam = focusFloor === null ? null : floors.find(floor => floor.index === focusFloor)?.team
   for (const [id, entry] of agentsById) {
@@ -1628,6 +2102,13 @@ function tick() {
     const working = status === 'working'
     const sleeping = status === 'resting'
     const phase = (id.charCodeAt(2) || 0) * 0.7
+    const nowMs = Date.now()
+    if (working) {
+      if (!entry.workingSince) entry.workingSince = nowMs
+    } else {
+      entry.workingSince = 0
+    }
+    const overloaded = working && entry.workingSince > 0 && nowMs - entry.workingSince > LOAD_WARN_MS
     const amp = working ? 0.09 : 0.055
     const bob = reduceMotion ? 0 : (parts.motion.bob * 2 - 1) * amp
     parts.face.position.y = parts.baseY + bob
@@ -1638,7 +2119,7 @@ function tick() {
     }
 
     // 表情只随状态切换；有自定义猫咪图片时优先使用
-    const expr = FACE_FOR_STATUS[status] ?? 'default'
+    const expr = overloaded ? 'dizzy' : (FACE_FOR_STATUS[status] ?? 'default')
     if (customFaceTexture) {
       if (parts.faceMat.map !== customFaceTexture) {
         parts.faceMat.map = customFaceTexture
@@ -1650,18 +2131,41 @@ function tick() {
         parts.faceMat.map = faceTextures[expr]
         parts.faceMat.needsUpdate = true
       }
-      parts.faceMat.color.copy(parts.tint)
+      parts.faceMat.color.copy(parts.tint).lerp(OVERLOAD_COLOR, overloaded ? 0.55 : 0)
+    }
+
+    // 正常工作：汗滴；长时间工作：红温乱线
+    const sweaty = working && !overloaded
+    for (const drop of parts.sweat) {
+      drop.sprite.visible = sweaty
+      if (!sweaty) continue
+      const p = (t * 0.55 + drop.phase) % 1
+      drop.sprite.position.set(drop.x + Math.sin(t * 2 + drop.phase * 8) * drop.drift, parts.baseY + 0.26 - p * 0.34, 0.12)
+      drop.sprite.material.opacity = Math.sin(p * Math.PI) * 0.92
+      drop.sprite.scale.set(0.085 + p * 0.03, 0.13 + p * 0.05, 1)
+    }
+    parts.scribble.visible = overloaded
+    parts.scribbleGlow.visible = overloaded
+    if (overloaded) {
+      const jitter = Math.sin(t * 17 + phase) * 0.012
+      parts.scribble.position.set(jitter, parts.baseY + 1.55 + Math.sin(t * 3.2 + phase) * 0.03, 0.04)
+      parts.scribble.rotation = Math.sin(t * 6 + phase) * 0.08
+      parts.scribble.material.opacity = 0.96
+      parts.scribbleGlow.position.copy(parts.scribble.position)
+      parts.scribbleGlow.position.z = 0.02
+      parts.scribbleGlow.material.opacity = 0.26 + Math.sin(t * 8 + phase) * 0.08
     }
 
     // 呼吸/浮动
     const breathe = sleeping ? 1 + Math.sin(t * 1.5 + phase) * 0.02 : 1 + Math.sin(t * 2.2 + phase) * 0.012
     parts.face.scale.set(0.6 * breathe, 0.6 * breathe, 1)
 
-    const statusColor = STATUS[status]?.color ?? STATUS.resting.color
+    const statusColor = overloaded ? '#ff5a5a' : (STATUS[status]?.color ?? STATUS.resting.color)
     parts.ring.material.color.set(statusColor)
     parts.glow.material.color.set(statusColor)
     parts.ring.rotation.z = status === 'stuck' ? t * 2.6 : 0
-    const ringPulse = working ? 1 + Math.sin(t * 3.4 + phase) * 0.08
+    const ringPulse = overloaded ? 1 + Math.sin(t * 6.5 + phase) * 0.12
+      : working ? 1 + Math.sin(t * 3.4 + phase) * 0.08
       : status === 'need_me' ? 1 + Math.sin(t * 5 + phase) * 0.1 : 1
     parts.ring.scale.setScalar(ringPulse * (id === selectedId ? 1.24 : 1))
     for (let k = 0; k < parts.ripples.length; k++) {
@@ -1673,7 +2177,8 @@ function tick() {
       ripple.scale.setScalar(1 + p * 1.1)
       ripple.material.opacity = (1 - p) * 0.3
     }
-    parts.glow.material.opacity = working ? 0.34 + Math.sin(t * 3.4 + phase) * 0.1
+    parts.glow.material.opacity = overloaded ? 0.38 + Math.sin(t * 6.5 + phase) * 0.08
+      : working ? 0.34 + Math.sin(t * 3.4 + phase) * 0.1
       : status === 'need_me' ? 0.32 : status === 'stuck' ? 0.32 : 0.14
 
     // 空闲睡觉：飘 Z
@@ -1855,6 +2360,8 @@ window.__NS = {
 rebuild([])
 $('#offline').classList.add('show')
 $('#offline').textContent = '正在读取本机会话…'
+buildAnnex()
+applyGlassSetting()
 loadCustomFace()
 poll()
 setInterval(poll, 2000)