◇PresenceStack.vue●TSusePresenceChannel.ts●TPresenceStack.test.ts+Ln 24, Col 18▯•••

src › components › presence › PresenceStack.vueoutline · setup

<script setup lang="ts">
import { computed, onBeforeUnmount } from 'vue'
import { usePresenceChannel } from '@/composables/usePresenceChannel'
import type { WorkspaceMember } from '@/types/workspace'
const props = defineProps<{
  workspaceId: string
  members: WorkspaceMember[]
  maxVisible?: number
}>()
const emit = defineEmits<{
  select: [member: WorkspaceMember]
}>()
const maxVisible = computed(() => props.maxVisible ?? 4)
const { onlineIds, disconnect } = usePresenceChannel(props.workspaceId)
const onlineMembers = computed(() =>
  props.members
    .filter((member) => onlineIds.value.has(member.id))
    .sort((a, b) => a.name.localeCompare(b.name))
)
+const visibleMembers = computed(() =>
+  onlineMembers.value.slice(0, maxVisible.value)
+)
+const overflowCount = computed(() =>
+  Math.max(0, onlineMembers.value.length - visibleMembers.value.length)
+)
onBeforeUnmount(disconnect)
</script>
<template>
  <TransitionGroup name="presence" tag="div" class="presence-stack">
+    <button v-for="member in visibleMembers" :key="member.id"
+      class="avatar" @click="emit('select', member)">
+      <img :src="member.avatarUrl" :alt="member.name">
+      <span class="online-dot" />
+    </button>
+    <span v-if="overflowCount" class="overflow">+{{ overflowCount }}</span>
  </TransitionGroup>
</template>

TERMINALvitest · northstar×

❯ pnpm vitest PresenceStack.test.ts --run

RUNS tests/components/PresenceStack.test.ts

✓

Presence stack refactored with stable keyed transitions3 files changed · +42 −11

Hot update appliedPresenceStack.vue · 34ms

编辑器流

午夜重构

VS Code 灵感TypeScript专注

relay-realtime / fix/socket-reconnect

PROMPT · 0%

智能体推理

提出初始假设重连计时器可能在路由销毁后仍然存活。

◉relay-realtime修复路由切换后 WebSocket 重复重连的问题

codex · agent mode

codex fix duplicate reconnect after route change

Mapping websocket lifecycle and teardown paths

Searched scheduleReconnect and dispose

Read realtime-client.ts118 lines

Read realtime-client.test.ts204 lines

pnpm vitest realtime-client --run

Expected connect once, received twice1 failed

Reconnect timer survives component disposal

Patch timer cleanup and close listener+14 −3

Add route-unmount regression coverage+22

pnpm vitest realtime-client --run

12 tests passed in 684ms

TypeScript: 0 errors

Ready to ship2 files changed

✓

Reconnect lifecycle fixed and covered by regression tests2 files changed · +36 −3

❯

终端智能体

智能体值守

Claude Code 灵感智能体循环终端

orbit-workspace / feat/live-collaborators

PROMPT · 0%

智能体推理

拆分功能在线状态、头像界面和顶部集成可以独立推进。

WorkspaceHeader.vue prompt

◇WorkspaceHeader.vueTSuseWorkspacePresence.tsTSpresence.ts

1<script setup lang="ts">

2import { computed } from 'vue'

3import { Bell, ChevronDown, Search } from 'lucide-vue-next'

4import { useWorkspacePresence } from '@/composables/useWorkspacePresence'

5import PresenceStack from '@/components/presence/PresenceStack.vue'

7const props = defineProps<{ workspaceId: string; projectName: string }>()

8const { members, status } = useWorkspacePresence(props.workspaceId)

10const connectionLabel = computed(() => {

11 if (status.value === 'connected') return 'Live'

12 if (status.value === 'reconnecting') return 'Reconnecting…'

13 return 'Offline'

14})

15</script>

17<template>

18 <header class="workspace-header">

19 <div class="project-identity">

20 <span class="project-mark">V</span>

21 <div><small>WORKSPACE</small><strong>{{ projectName }}</strong></div>

22 <ChevronDown :size="14" />

23 </div>

25 <div class="header-actions">

26 <button class="search"><Search :size="15" /> Search project</button>

27 <span class="connection" :data-status="status">

28 <i /> {{ connectionLabel }}

29 </span>

30 <PresenceStack :members="members" :max-visible="4" />

31 <button aria-label="Notifications"><Bell :size="16" /></button>

37.workspace-header { display:flex; align-items:center; justify-content:space-between; }

38.connection[data-status="connected"] i { background:#49d7a6; }

39.header-actions { display:flex; align-items:center; gap:12px; }

40</style>

Codex task streamPROMPT

TASK

在项目顶部加入实时协作成员状态

Map header and presence API

·Create realtime composable

·Build collaborator stack

·Verify responsive header

·Run production build

Understanding header composition

Located workspace state and member types

Read WorkspaceHeader.vue and presence API

Created useWorkspacePresence.ts

Created PresenceStack.vue

Member avatarUrl may be undefined

Added avatar fallback and accessible label

Property 'avatarUrl' does not exist on type 'WorkspaceMember'

localhost:7001 / workspace HMR

LIVE PROJECTOrbit Workspace

PROJECT OVERVIEW

Ship together,
without losing flow.

Realtime changes, focused conversations, and a shared sense of progress.

AKMRJLPSCYNO6 collaborators online

working alone

6 collaborators online

↖agent

✓

Realtime collaborator presence shipped to the workspace headerproduction build · 842ms

智能体工作区

并行构建

Codex 灵感多面板构建模式

让浏览器变成一幅 会呼吸的编程场景。

选择一种心流，再把它变成你的。

深度终端

午夜重构

智能体值守

Ship together,without losing flow.

并行构建

让浏览器变成一幅会呼吸的编程场景。

Ship together,
without losing flow.