xmuse

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    return renderPane($, e)
  })

async function renderPane($: any, e: any) {
  const { Box, Text, Button, Markdown, Input, Select } = $.ui.resolve(e) as any
  const ui = (await read($, uiAtom)) as XmuseUi
  const conn = await read($, connAtom)
  const view = await read($, viewAtom)
  const more = await read($, moreAtom)

  const notice = ui.notice ? <Text color="red">{ui.notice}</Text> : null

  // --- not in a room: rooms / open / join forms ---
  const preRooms = await cachedRooms($)
  if (conn.status === 'none') {
    return (
      <Box flexDirection="column" gap={1}>
        <Text bold>xmuse：这个会话还没有加入房间</Text>
        <Text bold>本机房间（一键加入，不用邀请码）</Text>
        {roomsList($, preRooms, '')}
        <Button key="rl-refresh" label="刷新房间列表" onPress={() => cachedRooms($, true).then(() => setNotice($, '房间列表已刷新'))} />
        <Text dimColor>开房间：当前会话成为主控（也是房间里的一个成员）。</Text>
        <Input
          key="new-room"
          label="房间名"
          placeholder="xmuse-dev"
          value={ui.newRoom}
          submitLabel="开房间"
          onInput={(v: string) => setUi($, { newRoom: v })}
          onSubmit={() => newRoomFromPane($)}
        />
        <Button key="new-room-go" label="开房间" variant="primary" onPress={() => newRoomFromPane($)} />
        <Text dimColor>加入：粘贴别处生成的邀请码（10 分钟内有效，只能用一次）。</Text>
        <Input
          key="join-code"
          label="邀请码"
          placeholder="K7Q2-9F"
          value={ui.joinCode}
          submitLabel="加入"
          onInput={(v: string) => setUi($, { joinCode: v })}
          onSubmit={() => joinFromPane($)}
        />
        <Button key="join-go" label="加入" onPress={() => joinFromPane($)} />
        {notice}
      </Box>
    )
  }

  const connLine =
    conn.status === 'ok'
      ? null
      : (
          <Box flexDirection="column">
            <Text color="yellow">
              {conn.status === 'down' ? 'hub 连接中断，重试中：' : conn.status === 'stale' ? '会话已变：' : conn.status === 'unauth' ? '令牌失效：' : ''}
              {clip(conn.error, 200)}
            </Text>
            {conn.status === 'stale' ? <Button key="rebind" label="接管：把成员绑定到当前会话" variant="primary" onPress={() => rebindFromPane($)} /> : null}
          </Box>
        )

  if (!view) {
    return (
      <Box flexDirection="column" gap={1}>
        <Text bold>xmuse：已绑定为 {conn.memberId || '?'}，正在从 hub 取数据…</Text>
        {connLine}
        <Button key="leave" label="离开房间" onPress={() => leaveFromPane($)} />
        {notice}
      </Box>
    )
  }

  const meId = view.me.id
  const isHost = view.room.host === meId
  const nApprovals = view.approvals.length
  const nUnread = (view.members.find(m => m.id === meId) || { unread: 0 }).unread

  const tabs = (
    <Box>
      {SECTIONS.map(s => {
        const badge = s.id === 'approvals' && nApprovals ? ` ${nApprovals}` : s.id === 'timeline' && nUnread ? ` ${nUnread}` : ''
        return (
          <Button
            key={'sec-' + s.id}
            label={(ui.section === s.id ? '● ' : '') + s.label + badge}
            variant={ui.section === s.id ? 'primary' : undefined}
            onPress={() => setUi($, { section: s.id })}
          />
        )
      })}
    </Box>
  )

  let body: any = null
  if (ui.section === 'timeline') {
    const threadOptions = [{ value: 'all', label: '全部（按话题/私聊分组）' }].concat(
      view.threads.map(t => ({ value: t.id, label: t.title + (t.unread ? ` (${t.unread})` : '') })),
    )
    const recips = recipientOptions(view, meId)
    const to = recips.some(r => r.value === ui.to) ? ui.to : recips.length ? recips[0].value : ''
    body = (
      <Box flexDirection="column" gap={1}>
        <Select
          key="thread"
          label="查看"
          value={threadOptions.some(o => o.value === ui.thread) ? ui.thread : 'all'}
          options={threadOptions}
          onSelect={(v: string) => setUi($, { thread: v })}
        />
        <Markdown text={renderTimeline(view, more.items, ui.thread)} />
        <Box>
          {more.hasMore || view.timeline_cursor.has_more ? <Button key="older" label="加载更早的" onPress={() => loadOlder($)} /> : null}
          {nUnread ? <Button key="markread" label={`@我的 ${nUnread} 条标为已读`} onPress={() => markRead($)} /> : null}
        </Box>
        {recips.length ? (
          <Box flexDirection="column">
            <Select key="to" label="发给" value={to} options={recips} onSelect={(v: string) => setUi($, { to: v })} />
            <Input
              key="draft"
              label="消息"
              placeholder="可以用 @成员 点名"
              value={ui.draft}
              submitLabel="发送"
              onInput={(v: string) => setUi($, { draft: v, to })}
              onSubmit={() => sendDraft($)}
            />
            <Button key="send" label="发送" variant="primary" onPress={() => setUi($, { to }).then(() => sendDraft($))} />
          </Box>
        ) : (
          <Text dimColor>房间里还没有其他成员，先到「房间」里邀请。</Text>
        )}
      </Box>
    )
  } else if (ui.section === 'members') {
    const others = view.members.map(m => ({ value: m.id, label: m.id }))
    const target = others.some(o => o.value === ui.target) ? ui.target : others.length ? others[0].value : ''
    const privates = view.threads.filter(t => t.private)
    const grpPick = privates.some(t => t.id === ui.grpPick) ? ui.grpPick : privates.length ? privates[0].id : ''
    body = (
      <Box flexDirection="column" gap={1}>
        <Markdown text={renderMembers(view, meId)} />
        {target ? (
          <Box flexDirection="column">
            <Select key="target" label="成员菜单" value={target} options={others} onSelect={(v: string) => setUi($, { target: v })} />
            <Box>
              <Button key="m-pause" label="暂停" onPress={() => setUi($, { target }).then(() => memberAct($, 'pause'))} />
              <Button key="m-resume" label="恢复" onPress={() => setUi($, { target }).then(() => memberAct($, 'resume'))} />
              <Button key="m-host" label="设为主控" onPress={() => setUi($, { target }).then(() => memberAct($, 'transfer_host'))} />
              <Button key="m-remove" label="移出" onPress={() => setUi($, { target }).then(() => memberAct($, 'remove'))} />
              <Button key="m-dm" label="私聊" onPress={() => setUi($, { target }).then(() => dmFromPane($))} />
            </Box>
            <Box>
              <Select
                key="m-edit-role"
                label="改角色"
                value={ui.editRole}
                options={[{ value: '', label: '不改' }].concat(ROLES)}
                onSelect={(v: string) => setUi($, { editRole: v })}
              />
              <Input
                key="m-edit-desc"
                label="改描述"
                placeholder="职责描述（空=不改）"

function roomsList($: any, rooms: RegistryEntry[], current: string) {
  if (!rooms.length) return <Text dimColor>本机没有登记的房间（hub 没启动？登记表目录对吗）</Text>
  return (
    <Box flexDirection="column" gap={1}>
      {rooms.map(r => (
        <Box key={'rl-row-' + r.room_id}>
          <Text>
            {r.room_id === current ? '● ' : ''}{r.name}（{r.room_id}）· {r.dir} · 主控 {r.host || '?'}
            {r.room_id === current ? '（当前）' : ''}{' '}
          </Text>
          {r.room_id === current ? null : (
            <Button key={'rl-go-' + r.room_id} label="加入" variant="primary" onPress={() => joinLocalFromPane($, r.room_id)} />
          )}
        </Box>
      ))}
    </Box>
  )
}

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    return renderBand($, e, next)
  })

async function renderBand($: any, e: any, next: any) {
  if (e.props.hasSurvey) return next(e)
  const view = await read($, viewAtom)
  const conn = await read($, connAtom)
  if (conn.status === 'stale') {
    const { Box, Text, Button } = $.ui.resolve(e) as any
    return (
      <Box>
        <Text color="yellow">xmuse：绑定的是另一个会话 </Text>
        <Button key="open" label="打开" onPress={() => openPane($)} />
      </Box>
    )
  }
  if (!view) return next(e)
  const text = bannerText(view, view.me.id)
  if (!text) return next(e)
  const { Box, Text, Button } = $.ui.resolve(e) as any
  return (
    <Box>
      <Text dimColor>{text} </Text>
      <Button key="open" label="打开" onPress={() => openPane($)} />
    </Box>
  )
}