@prsm/realtime 1.0.0 → 1.0.2

package/src/devtools/client/src/style.css

@@ -1,440 +0,0 @@
-:root {
-  --bg: #0a0a0a;
-  --bg-surface: #111111;
-  --bg-raised: #1a1a1a;
-  --bg-hover: #222222;
-  --bg-active: #2a2a2a;
-  --border: #2a2a2a;
-  --border-subtle: #1e1e1e;
-  --text: #d4d4d4;
-  --text-bright: #e8e8e8;
-  --text-muted: #555555;
-  --accent: #34d399;
-  --accent-dim: rgba(52, 211, 153, 0.12);
-  --accent-text: #2dd4a2;
-  --syn-string: #a5d6a7;
-  --syn-number: #4dd0e1;
-  --syn-boolean: #ce93d8;
-  --syn-null: #666666;
-  --syn-key: #b0b0b0;
-  --syn-bracket: #555555;
-}
-
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', 'Cascadia Code', monospace;
-  font-size: 12px;
-  line-height: 1.5;
-  color: var(--text);
-  background: var(--bg);
-  -webkit-font-smoothing: antialiased;
-}
-
-::selection {
-  background: var(--accent-dim);
-  color: var(--accent-text);
-}
-
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--border);
-  border-radius: 3px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: #3a3a3a;
-}
-
-.app {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  overflow: hidden;
-}
-
-.top-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 16px;
-  height: 40px;
-  border-bottom: 1px solid var(--border);
-  background: var(--bg-surface);
-  flex-shrink: 0;
-}
-
-.top-bar-left {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.logo {
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.5px;
-  text-transform: uppercase;
-  color: var(--text-muted);
-}
-
-.logo span {
-  color: var(--accent);
-}
-
-.top-bar-right {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.pulse {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--accent);
-}
-
-.pulse.disconnected {
-  background: #ef4444;
-}
-
-.instance-id {
-  font-size: 10px;
-  color: var(--text-muted);
-}
-
-.tab-bar {
-  display: flex;
-  align-items: center;
-  gap: 0;
-  border-bottom: 1px solid var(--border);
-  background: var(--bg-surface);
-  flex-shrink: 0;
-  padding: 0 16px;
-}
-
-.tab {
-  padding: 8px 16px;
-  font-size: 11px;
-  color: var(--text-muted);
-  cursor: pointer;
-  border-bottom: 2px solid transparent;
-  user-select: none;
-}
-
-.tab:hover {
-  color: var(--text);
-}
-
-.tab.active {
-  color: var(--accent-text);
-  border-bottom-color: var(--accent);
-}
-
-.tab .count {
-  margin-left: 6px;
-  font-size: 10px;
-  color: var(--text-muted);
-}
-
-.tab.active .count {
-  color: var(--accent);
-}
-
-.main {
-  display: flex;
-  flex: 1;
-  overflow: hidden;
-}
-
-.sidebar {
-  width: 280px;
-  min-width: 280px;
-  border-right: 1px solid var(--border);
-  overflow-y: auto;
-  background: var(--bg-surface);
-}
-
-.content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 16px;
-}
-
-.sidebar-section {
-  border-bottom: 1px solid var(--border-subtle);
-}
-
-.sidebar-header {
-  padding: 8px 12px;
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: var(--text-muted);
-  background: var(--bg);
-}
-
-.sidebar-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 6px 12px;
-  cursor: pointer;
-  border-left: 2px solid transparent;
-}
-
-.sidebar-item:hover {
-  background: var(--bg-hover);
-}
-
-.sidebar-item.active {
-  background: var(--accent-dim);
-  border-left-color: var(--accent);
-}
-
-.sidebar-item .label {
-  font-size: 11px;
-  color: var(--text);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.sidebar-item.active .label {
-  color: var(--accent-text);
-}
-
-.sidebar-item .meta {
-  font-size: 10px;
-  color: var(--text-muted);
-  flex-shrink: 0;
-  margin-left: 8px;
-}
-
-.badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 18px;
-  height: 18px;
-  padding: 0 5px;
-  font-size: 10px;
-  border-radius: 9px;
-  background: #1f1f1f;
-  color: #999;
-}
-
-.badge.accent {
-  background: var(--accent-dim);
-  color: var(--accent);
-}
-
-.section {
-  margin-bottom: 20px;
-}
-
-.section-title {
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: var(--text-muted);
-  margin-bottom: 8px;
-}
-
-.card {
-  background: var(--bg-surface);
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.card + .card {
-  margin-top: 8px;
-}
-
-.card-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 12px;
-  background: var(--bg);
-  border-bottom: 1px solid var(--border-subtle);
-  font-size: 11px;
-}
-
-.card-header .name {
-  color: var(--text-bright);
-}
-
-.card-body {
-  padding: 8px 12px;
-}
-
-.kv-row {
-  display: flex;
-  align-items: baseline;
-  padding: 2px 0;
-  font-size: 11px;
-}
-
-.kv-key {
-  color: var(--text-muted);
-  min-width: 100px;
-  flex-shrink: 0;
-}
-
-.kv-value {
-  color: var(--text);
-  word-break: break-all;
-}
-
-.member-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 4px 12px;
-  font-size: 11px;
-  border-bottom: 1px solid var(--border-subtle);
-}
-
-.member-row:last-child {
-  border-bottom: none;
-}
-
-.member-id {
-  color: var(--text);
-  font-size: 11px;
-}
-
-.member-presence {
-  font-size: 10px;
-  color: var(--accent);
-}
-
-.tag {
-  display: inline-block;
-  padding: 1px 6px;
-  font-size: 10px;
-  border-radius: 3px;
-  background: #1f1f1f;
-  color: #999;
-  margin: 1px 2px;
-}
-
-.tag.accent {
-  background: var(--accent-dim);
-  color: var(--accent);
-}
-
-.empty {
-  padding: 24px;
-  text-align: center;
-  color: var(--text-muted);
-  font-size: 11px;
-}
-
-.view-hint {
-  font-size: 11px;
-  color: var(--text-muted);
-  margin-bottom: 12px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid var(--border-subtle);
-}
-
-.no-presence {
-  font-size: 10px;
-  color: #333;
-}
-
-.pattern-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  margin-top: 4px;
-}
-
-.json-view {
-  font-size: 11px;
-  line-height: 1.6;
-  white-space: pre-wrap;
-  word-break: break-all;
-}
-
-.json-view .shiki {
-  background: transparent !important;
-  padding: 0;
-  margin: 0;
-}
-
-.json-view .shiki code {
-  font-family: inherit;
-  font-size: inherit;
-}
-
-.select {
-  background: var(--bg-raised);
-  border: 1px solid var(--border);
-  color: var(--text);
-  font-family: inherit;
-  font-size: 11px;
-  padding: 4px 8px;
-  border-radius: 3px;
-  outline: none;
-  cursor: pointer;
-}
-
-.select:focus {
-  border-color: var(--accent);
-}
-
-.conn-link {
-  cursor: pointer;
-  text-decoration: underline;
-  text-decoration-color: var(--border);
-  text-underline-offset: 2px;
-}
-
-.conn-link:hover {
-  color: var(--accent-text);
-  text-decoration-color: var(--accent);
-}
-
-.exposed-row {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 3px;
-  padding: 4px 12px;
-  border-bottom: 1px solid var(--border-subtle);
-}
-
-.exposed-row:last-child {
-  border-bottom: none;
-}
-
-.exposed-label {
-  font-size: 10px;
-  color: var(--text-muted);
-  min-width: 70px;
-  flex-shrink: 0;
-}
-
-.inline-json .s { color: var(--syn-string); }
-.inline-json .n { color: var(--syn-number); }
-.inline-json .b { color: var(--syn-boolean); }
-.inline-json .null { color: var(--syn-null); }
-.inline-json .k { color: var(--syn-key); }
-.inline-json .p { color: var(--syn-bracket); }

package/src/devtools/client/src/views/ChannelsView.vue

@@ -1,27 +0,0 @@
-<template>
-  <div v-if="!channelEntries.length" class="empty">no channel subscriptions</div>
-  <template v-else>
-    <div class="view-hint">channels with active subscribers on this server instance</div>
-    <div v-for="[channel, subscribers] in channelEntries" :key="channel" class="card">
-      <div class="card-header">
-        <span class="name">{{ channel }}</span>
-        <span class="badge accent">{{ subscribers.length }} {{ subscribers.length === 1 ? 'subscriber' : 'subscribers' }}</span>
-      </div>
-      <div v-for="connId in subscribers" :key="connId" class="member-row">
-        <span class="member-id conn-link" :title="connId" @click="$emit('navigate', connId)">{{ connId.slice(0, 8) }}</span>
-      </div>
-    </div>
-  </template>
-</template>
-
-<script setup>
-import { computed } from 'vue'
-
-const props = defineProps({
-  channels: { type: Object, default: () => ({}) }
-})
-
-defineEmits(['navigate'])
-
-const channelEntries = computed(() => Object.entries(props.channels))
-</script>

package/src/devtools/client/src/views/CollectionsView.vue

@@ -1,61 +0,0 @@
-<template>
-  <div v-if="!collectionEntries.length" class="empty">no collection subscriptions</div>
-  <template v-else>
-    <div class="view-hint">collections with active subscribers - click "records" to see what the resolver returns for that connection</div>
-    <div v-for="[collId, info] in collectionEntries" :key="collId" class="card">
-      <div class="card-header">
-        <span class="name">{{ collId }}</span>
-        <span class="badge accent">{{ Object.keys(info.subscribers).length }} {{ Object.keys(info.subscribers).length === 1 ? 'subscriber' : 'subscribers' }}</span>
-      </div>
-      <div v-for="(sub, connId) in info.subscribers" :key="connId">
-        <div class="card-body" style="border-top: 1px solid var(--border-subtle);">
-          <div class="kv-row">
-            <span class="kv-key conn-link" :title="connId" @click="$emit('navigate', connId)">{{ connId.slice(0, 8) }}</span>
-            <span class="kv-value">v{{ sub.version }}</span>
-            <span
-              class="tag accent"
-              style="margin-left: 8px; cursor: pointer;"
-              @click="toggleRecords(collId, connId)"
-            >{{ loadedRecords[recordKey(collId, connId)] ? 'hide' : 'records' }}</span>
-          </div>
-        </div>
-        <div v-if="loadedRecords[recordKey(collId, connId)]" class="card-body" style="border-top: 1px solid var(--border-subtle); padding-left: 24px;">
-          <div class="section-title">resolved records ({{ loadedRecords[recordKey(collId, connId)].recordIds.length }})</div>
-          <div v-for="rec in loadedRecords[recordKey(collId, connId)].records" :key="rec.id" style="margin-bottom: 8px;">
-            <div style="font-size: 10px; color: var(--text-muted); margin-bottom: 2px;">{{ rec.id }}</div>
-            <JsonView :data="rec.data" />
-          </div>
-          <div v-if="!loadedRecords[recordKey(collId, connId)].records.length" class="empty" style="padding: 8px;">no records</div>
-        </div>
-      </div>
-    </div>
-  </template>
-</template>
-
-<script setup>
-import { computed, reactive } from 'vue'
-import JsonView from '../components/JsonView.vue'
-
-const props = defineProps({
-  collections: { type: Object, default: () => ({}) },
-  fetchRecords: { type: Function, required: true }
-})
-
-defineEmits(['navigate'])
-
-const collectionEntries = computed(() => Object.entries(props.collections))
-const loadedRecords = reactive({})
-
-function recordKey(collId, connId) {
-  return `${collId}::${connId}`
-}
-
-async function toggleRecords(collId, connId) {
-  const key = recordKey(collId, connId)
-  if (loadedRecords[key]) {
-    delete loadedRecords[key]
-    return
-  }
-  loadedRecords[key] = await props.fetchRecords(collId, connId)
-}
-</script>

package/src/devtools/client/src/views/MetadataView.vue

@@ -1,108 +0,0 @@
-<template>
-  <div v-if="detail">
-    <div class="section">
-      <div class="section-title">connection</div>
-      <div class="card">
-        <div class="card-body">
-          <div class="kv-row">
-            <span class="kv-key">id</span>
-            <span class="kv-value">{{ detail.id }}</span>
-          </div>
-          <div class="kv-row">
-            <span class="kv-key">local</span>
-            <span class="kv-value" :style="{ color: detail.local ? 'var(--accent)' : 'var(--text-muted)' }">{{ detail.local }}</span>
-          </div>
-          <div class="kv-row">
-            <span class="kv-key">latency</span>
-            <span class="kv-value">{{ detail.latency !== null ? detail.latency + 'ms' : '-' }}</span>
-          </div>
-          <div class="kv-row">
-            <span class="kv-key">alive</span>
-            <span class="kv-value" :style="{ color: detail.alive ? 'var(--accent)' : 'var(--syn-boolean)' }">{{ detail.alive }}</span>
-          </div>
-          <div class="kv-row" v-if="detail.remoteAddress">
-            <span class="kv-key">address</span>
-            <span class="kv-value">{{ detail.remoteAddress }}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="section">
-      <div class="section-title">metadata</div>
-      <div class="card">
-        <div class="card-body">
-          <JsonView :data="detail.metadata" />
-        </div>
-      </div>
-    </div>
-
-    <div class="section" v-if="detail.rooms?.length">
-      <div class="section-title">rooms ({{ detail.rooms.length }})</div>
-      <div class="pattern-list">
-        <span class="tag accent" v-for="room in detail.rooms" :key="room">{{ room }}</span>
-      </div>
-    </div>
-
-    <div class="section" v-if="detail.channels?.length">
-      <div class="section-title">channels ({{ detail.channels.length }})</div>
-      <div class="pattern-list">
-        <span class="tag accent" v-for="ch in detail.channels" :key="ch">{{ ch }}</span>
-      </div>
-    </div>
-
-    <div class="section" v-if="detail.collections?.length">
-      <div class="section-title">collections ({{ detail.collections.length }})</div>
-      <div class="pattern-list">
-        <span class="tag accent" v-for="col in detail.collections" :key="col.id">{{ col.id }} v{{ col.version }}</span>
-      </div>
-    </div>
-
-    <div class="section" v-if="detail.records?.length">
-      <div class="section-title">record subscriptions ({{ detail.records.length }})</div>
-      <div v-for="rec in detail.records" :key="rec.id" class="kv-row">
-        <span class="kv-key">{{ rec.id }}</span>
-        <span class="kv-value">{{ rec.mode }}</span>
-      </div>
-    </div>
-
-    <div class="section" v-if="detail.presence && Object.keys(detail.presence).length">
-      <div class="section-title">presence state</div>
-      <div v-for="(pstate, room) in detail.presence" :key="room" class="card">
-        <div class="card-header">
-          <span class="name">{{ room }}</span>
-        </div>
-        <div class="card-body">
-          <JsonView :data="pstate" />
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div v-else-if="connections.length">
-    <div class="section-title" style="margin-bottom: 12px;">all connections</div>
-    <div v-for="conn in connections" :key="conn.id" class="card">
-      <div class="card-header">
-        <span class="name">{{ conn.metadata?.name || conn.metadata?.username || conn.id.slice(0, 8) }}</span>
-        <span class="meta" style="font-size: 10px;">
-          <span v-if="conn.latency !== null" style="margin-right: 8px;">{{ conn.latency }}ms</span>
-          <span :style="{ color: conn.alive ? 'var(--accent)' : 'var(--syn-boolean)' }">{{ conn.alive ? 'alive' : 'dead' }}</span>
-        </span>
-      </div>
-      <div class="card-body" v-if="conn.metadata">
-        <JsonView :data="conn.metadata" />
-      </div>
-    </div>
-  </div>
-
-  <div v-else class="empty">no connections</div>
-</template>
-
-<script setup>
-import JsonView from '../components/JsonView.vue'
-
-defineProps({
-  detail: { type: Object, default: null },
-  connections: { type: Array, default: () => [] }
-})
-</script>

package/src/devtools/client/src/views/RecordsView.vue

@@ -1,30 +0,0 @@
-<template>
-  <div v-if="!recordEntries.length" class="empty">no record subscriptions</div>
-  <template v-else>
-    <div class="view-hint">records being watched by at least one connection, and their subscription mode</div>
-    <div v-for="[recordId, info] in recordEntries" :key="recordId" class="card">
-      <div class="card-header">
-        <span class="name">{{ recordId }}</span>
-        <span class="badge accent">{{ Object.keys(info.subscribers).length }} {{ Object.keys(info.subscribers).length === 1 ? 'subscriber' : 'subscribers' }}</span>
-      </div>
-      <div class="card-body">
-        <div v-for="(mode, connId) in info.subscribers" :key="connId" class="kv-row">
-          <span class="kv-key conn-link" :title="connId" @click="$emit('navigate', connId)">{{ connId.slice(0, 8) }}</span>
-          <span class="tag" :class="mode === 'full' ? 'accent' : ''">{{ mode }}</span>
-        </div>
-      </div>
-    </div>
-  </template>
-</template>
-
-<script setup>
-import { computed } from 'vue'
-
-const props = defineProps({
-  records: { type: Object, default: () => ({}) }
-})
-
-defineEmits(['navigate'])
-
-const recordEntries = computed(() => Object.entries(props.records))
-</script>

package/src/devtools/client/src/views/RoomsView.vue

@@ -1,39 +0,0 @@
-<template>
-  <div v-if="!rooms.length" class="empty">no rooms</div>
-  <template v-else>
-    <div class="view-hint">active rooms, their members, and each member's presence state</div>
-    <div v-for="room in rooms" :key="room.name" class="card">
-      <div class="card-header">
-        <span class="name">{{ room.name }}</span>
-        <span class="badge accent">{{ room.members.length }} {{ room.members.length === 1 ? 'member' : 'members' }}</span>
-      </div>
-      <div v-for="memberId in room.members" :key="memberId" class="member-row">
-        <span class="member-id conn-link" :title="memberId" @click="$emit('navigate', memberId)">{{ memberId.slice(0, 8) }}</span>
-        <span class="member-presence" v-if="room.presence[memberId]">
-          {{ formatPresence(room.presence[memberId]) }}
-        </span>
-        <span class="no-presence" v-else>no presence</span>
-      </div>
-    </div>
-  </template>
-</template>
-
-<script setup>
-defineProps({
-  rooms: { type: Array, default: () => [] }
-})
-
-defineEmits(['navigate'])
-
-function formatPresence(state) {
-  if (typeof state === 'string') return state
-  if (typeof state === 'object' && state !== null) {
-    const keys = Object.keys(state)
-    if (keys.length <= 3) {
-      return keys.map(k => `${k}: ${JSON.stringify(state[k])}`).join(', ')
-    }
-    return `{${keys.length} fields}`
-  }
-  return String(state)
-}
-</script>