◇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

Editor Flow

Midnight Refactor

VS Code inspiredTypeScriptFocus

relay-realtime / fix/socket-reconnect

PROMPT · 0%

AGENT REASONING

Form the first hypothesisA reconnect timer may survive route teardown.

◉relay-realtimeStop duplicate websocket reconnects after route changes

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

❯

Terminal Agent

Agent on Call

Claude Code inspiredAgent loopTerminal

orbit-workspace / feat/live-collaborators

PROMPT · 0%

AGENT REASONING

Break down the featurePresence state, avatar UI, and header integration can move independently.

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

Add realtime collaborators to the project header

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

Agent Workspace

Parallel Build

Codex inspiredMulti-panelBuild mode

Turn your browser into a living coding scene.

Pick a flow. Make it yours.

Deep Terminal

Midnight Refactor

Agent on Call

Ship together,without losing flow.

Parallel Build

Ship together,
without losing flow.