Vibe Coding Wallpaper
开始体验
动态场景库 · 001

编程动态壁纸场景

浏览可在线运行的编辑器、终端与智能体工作区壁纸。

aurora-dashboard / feat/command-palette
PROMPT · 0%
智能体推理
明确交互模型键盘导航必须保持快速且可预测。
codex~/projects/aurora-dashboard
feat/command-palette PROMPT
context 18%00s
AGENT MODE
Build a fast command palette with fuzzy search and keyboard navigation.user
receiving request4 files changed · +237 −8 unit tests typecheck Nuxt build
01
自主编程 CLI

深度终端

思考、工具调用、代码修改、失败与验证结果持续向上滚动的全屏自主编程终端。

northstar-dashboard / feat/presence-stack
PROMPT · 0%
智能体推理
明确约束成员在线状态可以变化,但周围的顶部布局不能移动。
CODEX 重构在线成员指示器,同时避免界面布局抖动 PROMPT
PresenceStack.vueTSusePresenceChannel.tsTPresenceStack.test.ts+Ln 24, Col 18•••
1<script setup lang="ts">
2import { computed, onBeforeUnmount } from 'vue'
3import { usePresenceChannel } from '@/composables/usePresenceChannel'
4import type { WorkspaceMember } from '@/types/workspace'
5
6const props = defineProps<{
7 workspaceId: string
8 members: WorkspaceMember[]
9 maxVisible?: number
10}>()
11
12const emit = defineEmits<{
13 select: [member: WorkspaceMember]
14}>()
15
16const maxVisible = computed(() => props.maxVisible ?? 4)
17const { onlineIds, disconnect } = usePresenceChannel(props.workspaceId)
18
19const onlineMembers = computed(() =>
20 props.members
21 .filter((member) => onlineIds.value.has(member.id))
22 .sort((a, b) => a.name.localeCompare(b.name))
23)
24
25+const visibleMembers = computed(() =>
26+ onlineMembers.value.slice(0, maxVisible.value)
27+)
28
29+const overflowCount = computed(() =>
30+ Math.max(0, onlineMembers.value.length - visibleMembers.value.length)
31+)
32
33onBeforeUnmount(disconnect)
34</script>
35
36<template>
37 <TransitionGroup name="presence" tag="div" class="presence-stack">
38+ <button v-for="member in visibleMembers" :key="member.id"
39+ class="avatar" @click="emit('select', member)">
40+ <img :src="member.avatarUrl" :alt="member.name">
41+ <span class="online-dot" />
42+ </button>
43+ <span v-if="overflowCount" class="overflow">+{{ overflowCount }}</span>
44 </TransitionGroup>
45</template>
TERMINALvitest · northstar×

pnpm vitest PresenceStack.test.ts --run

RUNS  tests/components/PresenceStack.test.ts

TS2322
TypeScript

Type 'undefined' is not assignable to type 'WorkspaceMember'

Quick Fix…
Presence stack refactored with stable keyed transitions3 files changed · +42 −11
Hot update appliedPresenceStack.vue · 34ms
⑂ feat/presence-stack*0 errors✓ component tests: 18 passed✓ typecheck: 0 errors✓ layout shift: 0.00 CLS
02
编辑器流

午夜重构

带有微光语法、从容输入与测试通过反馈的沉浸式编辑器场景。

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

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

03
终端智能体

智能体值守

智能体规划任务、编辑文件并交付修复的电影感终端会话。

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'
6
7const props = defineProps<{ workspaceId: string; projectName: string }>()
8const { members, status } = useWorkspacePresence(props.workspaceId)
9
10const connectionLabel = computed(() => {
11 if (status.value === 'connected') return 'Live'
12 if (status.value === 'reconnecting') return 'Reconnecting…'
13 return 'Offline'
14})
15</script>
16
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>
24
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>
32 </div>
33 </header>
34</template>
35
36<style scoped>
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>
⑂ feat/live-collaboratorsTypeScriptUTF-8
Codex task streamPROMPT
TASK

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

Map header and presence API

·Create realtime composable

·Build collaborator stack

·Verify responsive header

·Run production build

Understanding header composition

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
V

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
04
智能体工作区

并行构建

编辑器、Codex 风格任务流与预览面板协同运转的动态工作区。