sync<TitleDim>·manage</TitleDim>

\n \n \n {phase === \"auth\" && (\n

\n sync<TitleDim>·manage</TitleDim>\n Sign in or create an account to manage your sync rooms, tokens, and passkeys.\n \n { setAuthMode(\"signin\"); setError(\"\"); setStatus(\"\"); }}>Sign in\n { setAuthMode(\"register\"); setError(\"\"); setStatus(\"\"); }}>Register\n \n {authMode === \"register\" && (\n

Username e.key === \"Enter\" && doAuth()} />

\n )}\n {authMode === \"register\" ? \"Create account with passkey\" : \"Sign in with passkey\"}\n {status && {status}}\n {error && {error}}\n

\n )}\n\n {phase === \"dashboard\" && (\n <>\n

\n sync<TitleDim>·manage</TitleDim>\n \n {username}\n Sign out\n \n

\n \n setTab(\"rooms\")}>Rooms ({rooms.length})\n setTab(\"tokens\")}>Tokens ({activeTokenCount})\n setTab(\"profile\")}>Profile\n \n

\n\n {/* ── Rooms tab ── */}\n {tab === \"rooms\" && (\n

\n { setRoomSearch(e.target.value); setRoomPage(0); }} style={{ flex: 1, minWidth: \"200px\" }} />\n { setRoomSearch(\"\"); setRoomPage(0); }}>Clear\n setShowCreateRoom(v => !v)} style={{ margin: 0 }}>+ Room\n

\n\n {showCreateRoom && (\n \n \n setNewRoomId(e.target.value)} />\n setNewRoomLabel(e.target.value)} />\n Create\n { setShowCreateRoom(false); setActionError(\"\"); }}>Cancel\n \n {actionError && {actionError}}\n \n )}\n\n

\n {filteredRooms.length} of {rooms.length} rooms\n ·\n {roomsWithAgents} with agents\n

\n\n {pagedRooms.length === 0 ? (\n {rooms.length === 0 ? \"No rooms yet. Click + Room to create one.\" : \"No rooms match your search.\"}\n ) : pagedRooms.map(r => {\n const isOpen = expandedRoom === r.room_id;\n const isOwner = r.access === \"owner\";\n const agentCount = r.agents.length;\n const roleCount = Object.keys(r.roles || {}).length;\n return (\n \n { setExpandedRoom(isOpen ? null : r.room_id); setInviteRoom(null); setActionError(\"\"); }}>\n {isOpen ? \"▾\" : \"▸\"}\n

\n {r.label || r.room_id}\n {r.label && r.label !== r.room_id && {r.room_id}}\n [{r.access}]\n

\n {agentCount > 0 && {agentCount} agent{agentCount > 1 ? \"s\" : \"\"}}\n {roleCount > 0 && · {roleCount} role{roleCount > 1 ? \"s\" : \"\"}}\n

\n e.stopPropagation()}>dashboard\n \n {isOpen && (\n \n {r.agents.length > 0 ? (\n <>\n

Agents

\n {r.agents.map(a => (\n \n {a.name || a.id}\n {a.role}\n ·\n {a.status}\n {a.last_heartbeat && · {timeAgo(a.last_heartbeat.replace(\" \", \"T\") + \"Z\")}}\n \n ))}\n \n ) : (\n

No agents in this room.

\n )}\n\n {isOwner && (\n

\n { e.stopPropagation(); setInviteRoom(inviteRoom === r.room_id ? null : r.room_id); setActionError(\"\"); }}>\n {inviteRoom === r.room_id ? \"cancel invite\" : \"invite user\"}\n \n { e.stopPropagation(); deleteRoom(r.room_id); }}>delete room\n

\n )}\n\n {inviteRoom === r.room_id && (\n

\n \n setInviteUsername(e.target.value)}\n onKeyDown={e => e.key === \"Enter\" && inviteUser(r.room_id)} />\n setInviteRole(e.target.value)}>\n \n \n \n \n \n inviteUser(r.room_id)} style={{ margin: 0 }}>Invite\n \n {actionError && {actionError}}\n

\n )}\n \n )}\n \n );\n })}\n\n {totalRoomPages > 1 && (\n \n roomPage > 0 && setRoomPage(roomPage - 1)}>← Prev\n {roomPage + 1} / {totalRoomPages}\n = totalRoomPages - 1} onClick={() => roomPage < totalRoomPages - 1 && setRoomPage(roomPage + 1)}>Next →\n \n )}\n

\n )}\n\n {/* ── Tokens tab ── */}\n {tab === \"tokens\" && (\n

\n setTokenFilter(\"active\")} style={tokenFilter === \"active\" ? { borderColor: \"var(--accent)\", color: \"var(--fg)\" } : {}}>Active ({activeTokenCount})\n setTokenFilter(\"all\")} style={tokenFilter === \"all\" ? { borderColor: \"var(--accent)\", color: \"var(--fg)\" } : {}}>All ({tokens.length})\n

\n\n {filteredTokens.length === 0 ? (\n No {tokenFilter === \"active\" ? \"active \" : \"\"}tokens. Use device auth or MCP to create tokens.\n ) : filteredTokens.map(t => {\n const st = tokenStatus(t);\n const scopeRoomCount = (t.scope.match(/rooms:/g) || []).length;\n return (\n \n \n

\n {t.label || t.client_id || \"Token\"}\n {st}\n

\n {describeScope(t.scope)}{scopeRoomCount > 5 && ` (${scopeRoomCount} rooms)`}\n \n Created {timeAgo(t.created_at.replace(\" \", \"T\") + \"Z\")}\n {t.expires_at && ` · expires ${new Date(t.expires_at).toLocaleDateString()}`}\n {t.client_id && ` · ${t.client_id.substring(0, 16)}...`}\n \n \n {st === \"active\" && (\n revokeToken(t.id, t.label || t.id)}>revoke\n )}\n \n );\n })}\n

\n )}\n\n {/* ── Profile tab ── */}\n {tab === \"profile\" && (\n <>\n

\n Passkeys\n \n {passkeys.length > 0 ? passkeys.map(p => (\n {p.id}{p.backed_up && synced}\n )) : No passkeys found}\n \n

\n Recovery Tokens\n {recoveryTokens.length === 0 ? (\n No active recovery tokens.\n ) : recoveryTokens.map(t => (\n

\n Created {t.createdAt.split(\"T\")[0]}\n expires {t.expiresAt.split(\"T\")[0]}\n revokeRecovery(t.id)}>revoke\n

\n ))}\n

\n Generate recovery token\n

\n {newRecoveryToken && (\n \n

Copy this token now — it will not be shown again.

\n (e.target as HTMLInputElement).select()} />\n { navigator.clipboard.writeText(newRecoveryToken); toast(\"Recovery token copied\"); }}>copy\n \n )}\n

\n \n )}\n \n )}\n {toastMsg}\n \n \n \n );\n}\n","deleted","label",[180,181,182,161],"frontend","pages","manage","permalink","https://www.val.town/x/c15r/sync/code/frontend/pages/manage/ManagePage.tsx","extension","actionData","errors"]