mirror of
https://github.com/Termix-SSH/Termix.git
synced 2026-08-29 18:31:33 +00:00
feat: collaboration rooms with switchable presenter (#1328)
* feat: add collaboration rooms with switchable presenter Rooms are a group of members watching one stage - the live SSH/RDP/VNC session the current presenter shares. Any member can take over the stage; the host can invite, force-stop and end the meeting. Stages reuse session_shares (new room share type), so gating, recording, expiry and the global sharing toggle all apply unchanged. * feat: add stage control handoff to collaboration rooms The presenter or host can grant any member write access to the live stage and take it back; members can raise a hand to ask. SSH flips the participant's permission on the live gate; RDP/VNC re-mint the viewer's join token. Control clears on every stage switch. * feat: guest links, role invites and invite awareness for collab rooms - Anonymous guest link per room (host toggles/rotates), followed by polling the public resolve endpoint; SSH guests join over the terminal WS with roomGuestToken, guac guests get read-only join tokens - Invite by role (expands to current members, snapshot semantics) - Toast when a room you were invited to appears - Stale stages are cleared lazily when the presenter is gone - Telnet presenting, expired-tab fallback, documented single-instance and guac-kick limits - Tests for the collab routes, room hub, share access and control flip * fix: keep remote desktop collaboration read-only
This commit is contained in:
ZacharyZcR
@@ -80,6 +80,9 @@ const AlertManager = lazy(() =>
|
||||
const SshToolsPanel = lazy(() =>
|
||||
import("@/sidebar/SshToolsPanel").then((m) => ({ default: m.SshToolsPanel })),
|
||||
);
|
||||
const CollabPanel = lazy(() =>
|
||||
import("@/sidebar/CollabPanel").then((m) => ({ default: m.CollabPanel })),
|
||||
);
|
||||
const SnippetsPanel = lazy(() =>
|
||||
import("@/sidebar/SnippetsPanel").then((m) => ({ default: m.SnippetsPanel })),
|
||||
);
|
||||
@@ -1572,6 +1575,7 @@ export function AppShell({
|
||||
serialConfig?: SerialConfig;
|
||||
joinSharedSessionId?: string | null;
|
||||
joinShareId?: string | null;
|
||||
collabRoomId?: string;
|
||||
},
|
||||
) {
|
||||
const tabId = `${host.name}-${type}-${Date.now()}`;
|
||||
@@ -1617,6 +1621,7 @@ export function AppShell({
|
||||
initialFilePath,
|
||||
initialPath,
|
||||
serialConfig,
|
||||
collabRoomId: restore?.collabRoomId,
|
||||
},
|
||||
];
|
||||
}
|
||||
@@ -1652,6 +1657,7 @@ export function AppShell({
|
||||
initialFilePath,
|
||||
initialPath,
|
||||
serialConfig,
|
||||
collabRoomId: restore?.collabRoomId,
|
||||
},
|
||||
];
|
||||
});
|
||||
@@ -1769,6 +1775,52 @@ export function AppShell({
|
||||
return id;
|
||||
}
|
||||
|
||||
// Invite awareness: rooms are discovered by polling, so a room that has
|
||||
// never been shown to this browser gets one toast with an Open action.
|
||||
useEffect(() => {
|
||||
const SEEN_KEY = "termix:collab-rooms-seen";
|
||||
let cancelled = false;
|
||||
const check = async () => {
|
||||
try {
|
||||
const { listCollabRooms } = await import("@/api/collab-api");
|
||||
const { rooms } = await listCollabRooms();
|
||||
if (cancelled) return;
|
||||
let seen: string[] = [];
|
||||
try {
|
||||
seen = JSON.parse(localStorage.getItem(SEEN_KEY) ?? "[]");
|
||||
} catch {
|
||||
seen = [];
|
||||
}
|
||||
const seenSet = new Set(seen);
|
||||
const fresh = rooms.filter((room) => !seenSet.has(room.id));
|
||||
if (fresh.length === 0) return;
|
||||
localStorage.setItem(
|
||||
SEEN_KEY,
|
||||
JSON.stringify([...seenSet, ...fresh.map((room) => room.id)]),
|
||||
);
|
||||
// The first poll after login only records what already exists.
|
||||
if (seen.length === 0) return;
|
||||
for (const room of fresh) {
|
||||
if (room.ownerUserId === userId) continue;
|
||||
toast(t("collab.invitedTo", { name: room.name }), {
|
||||
action: {
|
||||
label: t("collab.openRoom"),
|
||||
onClick: () => setRailView("collab"),
|
||||
},
|
||||
});
|
||||
}
|
||||
} catch {
|
||||
/* next poll */
|
||||
}
|
||||
};
|
||||
void check();
|
||||
const timer = setInterval(() => void check(), 60_000);
|
||||
return () => {
|
||||
cancelled = true;
|
||||
clearInterval(timer);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const openSingletonTab = useCallback(
|
||||
// --- tmux-monitor --- (added optional `host` so tmux_monitor can open
|
||||
// with a preselected host; existing callers are unaffected)
|
||||
@@ -2595,6 +2647,57 @@ export function AppShell({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{railView === "collab" && (
|
||||
<div className="flex-1 min-h-0 overflow-y-auto">
|
||||
<CollabPanel
|
||||
onOpenRoom={(room) => {
|
||||
const roomHost: Host = {
|
||||
id: `collab-${room.id}`,
|
||||
name: room.name,
|
||||
username: "",
|
||||
ip: "",
|
||||
port: 0,
|
||||
folder: "",
|
||||
online: false,
|
||||
cpu: null,
|
||||
ram: null,
|
||||
lastAccess: new Date().toISOString(),
|
||||
authType: "none",
|
||||
enableTerminal: false,
|
||||
enableCommandHistory: false,
|
||||
enableTunnel: false,
|
||||
enableFileManager: false,
|
||||
enableDocker: false,
|
||||
enableProxmox: false,
|
||||
enableProxmoxStats: false,
|
||||
enableTmuxMonitor: false,
|
||||
enableTerminalToolbar: false,
|
||||
enableSsh: false,
|
||||
enableRdp: false,
|
||||
enableVnc: false,
|
||||
enableTelnet: false,
|
||||
sshPort: 22,
|
||||
rdpPort: 3389,
|
||||
vncPort: 5900,
|
||||
telnetPort: 23,
|
||||
serverTunnels: [],
|
||||
quickActions: [],
|
||||
};
|
||||
openTab(roomHost, "collab", {
|
||||
instanceId:
|
||||
typeof crypto.randomUUID === "function"
|
||||
? crypto.randomUUID()
|
||||
: `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`,
|
||||
restoredSessionId: null,
|
||||
savedLabel: room.name,
|
||||
collabRoomId: room.id,
|
||||
});
|
||||
if (isMobile) setSidebarOpen(false);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{railView === "session-logs" && (
|
||||
<div className="relative flex-1 min-h-0 flex flex-col">
|
||||
<SessionLogsPanel />
|
||||
|
||||
@@ -0,0 +1,194 @@
|
||||
import axios from "axios";
|
||||
import { authApi, handleApiError } from "@/main-axios";
|
||||
import { resolveApiBaseUrl } from "@/api/session-sharing-api";
|
||||
|
||||
export interface CollabRoom {
|
||||
id: string;
|
||||
name: string;
|
||||
ownerUserId: string;
|
||||
persistent: boolean;
|
||||
presenterUserId: string | null;
|
||||
stageProtocol: string | null;
|
||||
stageHostId: number | null;
|
||||
stageShareId: string | null;
|
||||
guestLinkToken: string | null;
|
||||
createdAt: string;
|
||||
endedAt: string | null;
|
||||
}
|
||||
|
||||
export interface CollabRoomMember {
|
||||
userId: string;
|
||||
username: string;
|
||||
roomRole: string;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export interface CollabOnlineUser {
|
||||
userId: string;
|
||||
username: string;
|
||||
}
|
||||
|
||||
export interface CollabStage {
|
||||
presenterUserId: string | null;
|
||||
protocol: "ssh" | "rdp" | "vnc" | "telnet" | null;
|
||||
hostId: number | null;
|
||||
shareId: string | null;
|
||||
sessionId?: string;
|
||||
controllerUserId?: string | null;
|
||||
connectParams?: { token: string };
|
||||
}
|
||||
|
||||
export interface CollabRoomDetail {
|
||||
room: CollabRoom;
|
||||
me: string;
|
||||
isHost: boolean;
|
||||
members: CollabRoomMember[];
|
||||
online: CollabOnlineUser[];
|
||||
stage: CollabStage;
|
||||
controllerUserId: string | null;
|
||||
}
|
||||
|
||||
export async function listCollabRooms(): Promise<{ rooms: CollabRoom[] }> {
|
||||
try {
|
||||
const response = await authApi.get("/collab/rooms");
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
throw handleApiError(error, "list collab rooms");
|
||||
}
|
||||
}
|
||||
|
||||
export async function createCollabRoom(
|
||||
name: string,
|
||||
persistent: boolean,
|
||||
): Promise<{ room: CollabRoom }> {
|
||||
try {
|
||||
const response = await authApi.post("/collab/rooms", { name, persistent });
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
throw handleApiError(error, "create collab room");
|
||||
}
|
||||
}
|
||||
|
||||
export async function getCollabRoom(roomId: string): Promise<CollabRoomDetail> {
|
||||
try {
|
||||
const response = await authApi.get(`/collab/rooms/${roomId}`);
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
throw handleApiError(error, "get collab room");
|
||||
}
|
||||
}
|
||||
|
||||
export async function inviteCollabMembers(
|
||||
roomId: string,
|
||||
targets: { userIds?: string[]; roleIds?: number[] },
|
||||
): Promise<void> {
|
||||
try {
|
||||
await authApi.post(`/collab/rooms/${roomId}/members`, targets);
|
||||
} catch (error) {
|
||||
throw handleApiError(error, "invite collab members");
|
||||
}
|
||||
}
|
||||
|
||||
export async function removeCollabMember(
|
||||
roomId: string,
|
||||
userId: string,
|
||||
): Promise<void> {
|
||||
try {
|
||||
await authApi.delete(`/collab/rooms/${roomId}/members/${userId}`);
|
||||
} catch (error) {
|
||||
throw handleApiError(error, "remove collab member");
|
||||
}
|
||||
}
|
||||
|
||||
export async function presentCollabStage(
|
||||
roomId: string,
|
||||
input: { protocol: string; sessionId: string; hostId: number },
|
||||
): Promise<{ stage: CollabStage }> {
|
||||
try {
|
||||
const response = await authApi.post(
|
||||
`/collab/rooms/${roomId}/present`,
|
||||
input,
|
||||
);
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
throw handleApiError(error, "start presenting");
|
||||
}
|
||||
}
|
||||
|
||||
export async function stopCollabStage(roomId: string): Promise<void> {
|
||||
try {
|
||||
await authApi.post(`/collab/rooms/${roomId}/stop`);
|
||||
} catch (error) {
|
||||
throw handleApiError(error, "stop presenting");
|
||||
}
|
||||
}
|
||||
|
||||
export async function getCollabStage(
|
||||
roomId: string,
|
||||
): Promise<{ stage: CollabStage | null }> {
|
||||
try {
|
||||
const response = await authApi.get(`/collab/rooms/${roomId}/stage`);
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
throw handleApiError(error, "resolve collab stage");
|
||||
}
|
||||
}
|
||||
|
||||
export async function setCollabStageControl(
|
||||
roomId: string,
|
||||
userId: string | null,
|
||||
): Promise<void> {
|
||||
try {
|
||||
await authApi.post(`/collab/rooms/${roomId}/control`, { userId });
|
||||
} catch (error) {
|
||||
throw handleApiError(error, "change stage control");
|
||||
}
|
||||
}
|
||||
|
||||
export async function requestCollabStageControl(roomId: string): Promise<void> {
|
||||
try {
|
||||
await authApi.post(`/collab/rooms/${roomId}/control/request`);
|
||||
} catch (error) {
|
||||
throw handleApiError(error, "request stage control");
|
||||
}
|
||||
}
|
||||
|
||||
export async function endCollabRoom(roomId: string): Promise<void> {
|
||||
try {
|
||||
await authApi.post(`/collab/rooms/${roomId}/end`);
|
||||
} catch (error) {
|
||||
throw handleApiError(error, "end collab room");
|
||||
}
|
||||
}
|
||||
|
||||
export async function setCollabGuestLink(
|
||||
roomId: string,
|
||||
enabled: boolean,
|
||||
): Promise<{ guestLinkToken: string | null }> {
|
||||
try {
|
||||
const response = await authApi.post(`/collab/rooms/${roomId}/guest-link`, {
|
||||
enabled,
|
||||
});
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
throw handleApiError(error, "update guest link");
|
||||
}
|
||||
}
|
||||
|
||||
export interface CollabGuestStage {
|
||||
protocol: "ssh" | "rdp" | "vnc" | "telnet";
|
||||
shareId: string;
|
||||
wsPath?: string;
|
||||
connectParams?: { token: string };
|
||||
}
|
||||
|
||||
/** Anonymous: guests poll this to follow the presenter. Throws on 404/429. */
|
||||
export async function resolveCollabGuestStage(
|
||||
token: string,
|
||||
): Promise<{ roomName: string; stage: CollabGuestStage | null }> {
|
||||
const baseUrl = await resolveApiBaseUrl();
|
||||
const response = await axios.get(
|
||||
`${baseUrl}/collab/guest/${encodeURIComponent(token)}`,
|
||||
);
|
||||
return response.data;
|
||||
}
|
||||
@@ -35,7 +35,7 @@ const isDev = (): boolean =>
|
||||
// truth, so a share link opened there always resolves against it --
|
||||
// joining a session hosted on someone else's remote server isn't
|
||||
// supported from the desktop app today.
|
||||
async function resolveApiBaseUrl(): Promise<string> {
|
||||
export async function resolveApiBaseUrl(): Promise<string> {
|
||||
if (isDev()) {
|
||||
const protocol = window.location.protocol === "https:" ? "https" : "http";
|
||||
return `${protocol}://localhost:30001`;
|
||||
|
||||
@@ -0,0 +1,107 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { AlertCircle, Presentation } from "lucide-react";
|
||||
import { GuacamoleDisplay } from "@/features/guacamole/GuacamoleDisplay.tsx";
|
||||
import { GuestTerminalView } from "@/features/session-sharing/SharedSessionView";
|
||||
import {
|
||||
resolveCollabGuestStage,
|
||||
type CollabGuestStage,
|
||||
} from "@/api/collab-api";
|
||||
|
||||
const POLL_MS = 5000;
|
||||
|
||||
/**
|
||||
* Anonymous guest page for a collab room (?view=collab-guest&token=...).
|
||||
* Guests have no account and no event channel, so they poll the public
|
||||
* resolve endpoint and remount the viewer whenever the stage share changes.
|
||||
*/
|
||||
export default function CollabGuestView() {
|
||||
const { t } = useTranslation();
|
||||
const token = new URLSearchParams(window.location.search).get("token");
|
||||
const [roomName, setRoomName] = useState<string | null>(null);
|
||||
const [stage, setStage] = useState<CollabGuestStage | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const stageShareIdRef = useRef<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!token) {
|
||||
setError(t("collab.guest.linkInvalid"));
|
||||
return;
|
||||
}
|
||||
let cancelled = false;
|
||||
const poll = async () => {
|
||||
try {
|
||||
const result = await resolveCollabGuestStage(token);
|
||||
if (cancelled) return;
|
||||
setRoomName(result.roomName);
|
||||
setError(null);
|
||||
const nextShareId = result.stage?.shareId ?? null;
|
||||
// Tokens are minted per resolve; only swap the viewer on a real change.
|
||||
if (nextShareId !== stageShareIdRef.current) {
|
||||
stageShareIdRef.current = nextShareId;
|
||||
setStage(result.stage);
|
||||
}
|
||||
} catch {
|
||||
if (!cancelled) setError(t("collab.guest.linkInvalid"));
|
||||
}
|
||||
};
|
||||
void poll();
|
||||
const timer = setInterval(() => void poll(), POLL_MS);
|
||||
return () => {
|
||||
cancelled = true;
|
||||
clearInterval(timer);
|
||||
};
|
||||
}, [token, t]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex flex-col h-screen w-screen"
|
||||
style={{ backgroundColor: "var(--bg-base)", color: "var(--foreground)" }}
|
||||
>
|
||||
<div className="flex items-center gap-2 px-3 py-2 border-b border-border text-sm">
|
||||
<Presentation className="size-4 text-muted-foreground" />
|
||||
<span className="font-semibold">
|
||||
{roomName ?? t("collab.guest.title")}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{t("sessionSharing.guestView.readOnlyBadge")}
|
||||
</span>
|
||||
</div>
|
||||
<div className="relative flex-1 min-h-0">
|
||||
{error ? (
|
||||
<Note icon={<AlertCircle className="size-8" />} text={error} />
|
||||
) : !stage ? (
|
||||
<Note
|
||||
icon={<Presentation className="size-8" />}
|
||||
text={t("collab.guest.waiting")}
|
||||
/>
|
||||
) : stage.protocol === "ssh" ? (
|
||||
<GuestTerminalView
|
||||
key={stage.shareId}
|
||||
share={{ permissionLevel: "read-only" }}
|
||||
wsQuery={`roomGuestToken=${encodeURIComponent(token ?? "")}`}
|
||||
/>
|
||||
) : stage.connectParams?.token ? (
|
||||
<GuacamoleDisplay
|
||||
key={stage.shareId}
|
||||
connectionConfig={{
|
||||
token: stage.connectParams.token,
|
||||
protocol: stage.protocol,
|
||||
type: stage.protocol,
|
||||
}}
|
||||
isVisible
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Note({ icon, text }: { icon: React.ReactNode; text: string }) {
|
||||
return (
|
||||
<div className="flex h-full flex-col items-center justify-center gap-3 text-muted-foreground">
|
||||
{icon}
|
||||
<p className="text-sm">{text}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,760 @@
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
AlertCircle,
|
||||
Crown,
|
||||
Hand,
|
||||
Link2,
|
||||
Loader2,
|
||||
MonitorUp,
|
||||
MousePointerClick,
|
||||
Presentation,
|
||||
Square,
|
||||
UserPlus,
|
||||
} from "lucide-react";
|
||||
import { Button } from "@/components/button";
|
||||
import { Badge } from "@/components/badge";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/dialog";
|
||||
import { Terminal } from "@/features/terminal/Terminal";
|
||||
import { CommandHistoryProvider } from "@/features/terminal/command-history/CommandHistoryContext";
|
||||
import { GuacamoleDisplay } from "@/features/guacamole/GuacamoleDisplay.tsx";
|
||||
import { getGuacamoleTokenFromHost } from "@/api/guacamole-api";
|
||||
import { getSSHHosts, getUserList, type SSHHostWithStatus } from "@/main-axios";
|
||||
import { getRoles } from "@/api/rbac-api";
|
||||
import type { Role } from "@/main-axios";
|
||||
import { getBasePath } from "@/lib/base-path";
|
||||
import { isElectron } from "@/lib/electron";
|
||||
import { getErrorMessage } from "@/lib/error-message";
|
||||
import {
|
||||
endCollabRoom,
|
||||
getCollabRoom,
|
||||
getCollabStage,
|
||||
inviteCollabMembers,
|
||||
presentCollabStage,
|
||||
requestCollabStageControl,
|
||||
setCollabGuestLink,
|
||||
setCollabStageControl,
|
||||
stopCollabStage,
|
||||
type CollabRoomDetail,
|
||||
type CollabStage,
|
||||
} from "@/api/collab-api";
|
||||
|
||||
const PING_INTERVAL_MS = 30000;
|
||||
const POLL_FALLBACK_MS = 15000;
|
||||
|
||||
// Mirrors SharedSessionView's construction (dev/electron/prod); authentication
|
||||
// rides on the jwt cookie the way every terminal WS connection does.
|
||||
function roomEventsWsUrl(): string {
|
||||
const isDev =
|
||||
!isElectron() &&
|
||||
process.env.NODE_ENV === "development" &&
|
||||
(window.location.port === "3000" ||
|
||||
window.location.port === "5173" ||
|
||||
window.location.port === "");
|
||||
if (isDev) {
|
||||
return `${window.location.protocol === "https:" ? "wss" : "ws"}://localhost:30002`;
|
||||
}
|
||||
if (isElectron()) {
|
||||
return "ws://127.0.0.1:30002";
|
||||
}
|
||||
const wsProtocol = window.location.protocol === "https:" ? "wss" : "ws";
|
||||
return `${wsProtocol}://${window.location.host}${getBasePath()}/ssh/websocket/`;
|
||||
}
|
||||
|
||||
type PresentDraft =
|
||||
| { protocol: "ssh"; host: SSHHostWithStatus }
|
||||
| {
|
||||
protocol: "rdp" | "vnc" | "telnet";
|
||||
host: SSHHostWithStatus;
|
||||
token: string;
|
||||
guacamoleConnectionId: string;
|
||||
};
|
||||
|
||||
export function CollabRoomTab({
|
||||
roomId,
|
||||
isVisible,
|
||||
}: {
|
||||
roomId?: string;
|
||||
isVisible: boolean;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const [detail, setDetail] = useState<CollabRoomDetail | null>(null);
|
||||
const [stage, setStage] = useState<CollabStage | null>(null);
|
||||
const [ended, setEnded] = useState(false);
|
||||
const [draft, setDraft] = useState<PresentDraft | null>(null);
|
||||
const [presentOpen, setPresentOpen] = useState(false);
|
||||
const [inviteOpen, setInviteOpen] = useState(false);
|
||||
const [hosts, setHosts] = useState<SSHHostWithStatus[]>([]);
|
||||
const [users, setUsers] = useState<Array<{ id: string; username: string }>>(
|
||||
[],
|
||||
);
|
||||
const [inviteSelection, setInviteSelection] = useState<Set<string>>(
|
||||
new Set(),
|
||||
);
|
||||
const [roles, setRoles] = useState<Role[]>([]);
|
||||
const [roleSelection, setRoleSelection] = useState<Set<number>>(new Set());
|
||||
const draftRef = useRef<PresentDraft | null>(null);
|
||||
draftRef.current = draft;
|
||||
const stageKeyRef = useRef<string | null>(null);
|
||||
|
||||
const refresh = useCallback(async () => {
|
||||
if (!roomId) return;
|
||||
try {
|
||||
const nextDetail = await getCollabRoom(roomId);
|
||||
setDetail(nextDetail);
|
||||
// Presenting locally? The local session is the stage - don't join it.
|
||||
if (
|
||||
nextDetail.stage.shareId &&
|
||||
nextDetail.stage.presenterUserId !== nextDetail.me
|
||||
) {
|
||||
// A guac viewer reconnects whenever its token changes, so the stage
|
||||
// is only re-resolved when the share or my control actually changed.
|
||||
const stageKey = `${nextDetail.stage.shareId}:${
|
||||
nextDetail.controllerUserId === nextDetail.me
|
||||
}`;
|
||||
if (stageKeyRef.current !== stageKey) {
|
||||
stageKeyRef.current = stageKey;
|
||||
const { stage: resolved } = await getCollabStage(roomId);
|
||||
setStage(resolved);
|
||||
}
|
||||
} else if (!nextDetail.stage.shareId) {
|
||||
stageKeyRef.current = null;
|
||||
setStage(null);
|
||||
// The stage was cleared elsewhere; stop presenting locally too.
|
||||
if (draftRef.current) setDraft(null);
|
||||
}
|
||||
} catch {
|
||||
setEnded(true);
|
||||
}
|
||||
}, [roomId]);
|
||||
|
||||
useEffect(() => {
|
||||
void refresh();
|
||||
}, [refresh]);
|
||||
|
||||
// Live room events, with slow polling as the fallback path.
|
||||
useEffect(() => {
|
||||
if (!roomId) return;
|
||||
let ws: WebSocket | null = null;
|
||||
let pingTimer: ReturnType<typeof setInterval> | null = null;
|
||||
let cancelled = false;
|
||||
|
||||
try {
|
||||
ws = new WebSocket(roomEventsWsUrl());
|
||||
ws.onopen = () => {
|
||||
ws?.send(
|
||||
JSON.stringify({ type: "collab_subscribe", data: { roomId } }),
|
||||
);
|
||||
pingTimer = setInterval(() => {
|
||||
if (ws?.readyState === WebSocket.OPEN) {
|
||||
ws.send(JSON.stringify({ type: "ping" }));
|
||||
}
|
||||
}, PING_INTERVAL_MS);
|
||||
};
|
||||
ws.onmessage = (event) => {
|
||||
if (cancelled) return;
|
||||
let msg: { type?: string; roomId?: string };
|
||||
try {
|
||||
msg = JSON.parse(event.data);
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
if (msg.roomId !== roomId) return;
|
||||
switch (msg.type) {
|
||||
case "collab_online":
|
||||
case "collab_members_changed":
|
||||
case "collab_stage_changed":
|
||||
case "collab_control_changed":
|
||||
void refresh();
|
||||
break;
|
||||
case "collab_control_requested": {
|
||||
const request = msg as unknown as {
|
||||
userId: string;
|
||||
username?: string;
|
||||
};
|
||||
handleControlRequestRef.current?.(
|
||||
request.userId,
|
||||
request.username ?? "?",
|
||||
);
|
||||
break;
|
||||
}
|
||||
case "collab_room_ended":
|
||||
setEnded(true);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
} catch {
|
||||
/* polling still covers us */
|
||||
}
|
||||
|
||||
const pollTimer = setInterval(() => void refresh(), POLL_FALLBACK_MS);
|
||||
return () => {
|
||||
cancelled = true;
|
||||
if (pingTimer) clearInterval(pingTimer);
|
||||
clearInterval(pollTimer);
|
||||
ws?.close();
|
||||
};
|
||||
}, [roomId, refresh]);
|
||||
|
||||
const me = detail?.me;
|
||||
const isHost = detail?.isHost ?? false;
|
||||
const controllerUserId = detail?.controllerUserId ?? null;
|
||||
const presenterUserId = detail?.stage.presenterUserId ?? null;
|
||||
const iAmPresenter = !!me && presenterUserId === me;
|
||||
const onlineIds = new Set(detail?.online.map((user) => user.userId));
|
||||
const presenterName = detail?.members.find(
|
||||
(member) => member.userId === presenterUserId,
|
||||
)?.username;
|
||||
|
||||
const handleControlRequestRef = useRef<
|
||||
((userId: string, username: string) => void) | null
|
||||
>(null);
|
||||
handleControlRequestRef.current = (userId, username) => {
|
||||
if (!roomId) return;
|
||||
const mayGrant = isHost || iAmPresenter;
|
||||
if (!mayGrant || userId === me) return;
|
||||
toast(t("collab.controlRequestedBy", { name: username }), {
|
||||
action: {
|
||||
label: t("collab.grant"),
|
||||
onClick: () => void setCollabStageControl(roomId, userId),
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
async function changeControl(targetId: string | null) {
|
||||
if (!roomId) return;
|
||||
try {
|
||||
await setCollabStageControl(roomId, targetId);
|
||||
} catch (error) {
|
||||
toast.error(getErrorMessage(error));
|
||||
}
|
||||
}
|
||||
|
||||
async function openPresentDialog() {
|
||||
setPresentOpen(true);
|
||||
if (hosts.length === 0) {
|
||||
try {
|
||||
setHosts(await getSSHHosts({ includeStatus: false }));
|
||||
} catch (error) {
|
||||
toast.error(getErrorMessage(error));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function choosePresent(
|
||||
host: SSHHostWithStatus,
|
||||
protocol: "ssh" | "rdp" | "vnc" | "telnet",
|
||||
) {
|
||||
if (!roomId) return;
|
||||
setPresentOpen(false);
|
||||
try {
|
||||
if (protocol === "ssh") {
|
||||
setDraft({ protocol, host });
|
||||
return;
|
||||
}
|
||||
const response = await getGuacamoleTokenFromHost(
|
||||
Number(host.id),
|
||||
protocol,
|
||||
);
|
||||
if (!response.guacamoleConnectionId) {
|
||||
toast.error(t("collab.stageLoading"));
|
||||
return;
|
||||
}
|
||||
setDraft({
|
||||
protocol,
|
||||
host,
|
||||
token: response.token,
|
||||
guacamoleConnectionId: response.guacamoleConnectionId,
|
||||
});
|
||||
} catch (error) {
|
||||
toast.error(getErrorMessage(error));
|
||||
}
|
||||
}
|
||||
|
||||
async function registerStage(
|
||||
protocol: string,
|
||||
sessionId: string,
|
||||
hostId: number,
|
||||
) {
|
||||
if (!roomId) return;
|
||||
try {
|
||||
await presentCollabStage(roomId, { protocol, sessionId, hostId });
|
||||
void refresh();
|
||||
} catch (error) {
|
||||
toast.error(getErrorMessage(error));
|
||||
setDraft(null);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleStop() {
|
||||
if (!roomId) return;
|
||||
try {
|
||||
await stopCollabStage(roomId);
|
||||
setDraft(null);
|
||||
void refresh();
|
||||
} catch (error) {
|
||||
toast.error(getErrorMessage(error));
|
||||
}
|
||||
}
|
||||
|
||||
async function handleEnd() {
|
||||
if (!roomId) return;
|
||||
try {
|
||||
await endCollabRoom(roomId);
|
||||
setDraft(null);
|
||||
if (!detail?.room.persistent) setEnded(true);
|
||||
void refresh();
|
||||
} catch (error) {
|
||||
toast.error(getErrorMessage(error));
|
||||
}
|
||||
}
|
||||
|
||||
async function openInviteDialog() {
|
||||
setInviteOpen(true);
|
||||
setInviteSelection(new Set());
|
||||
setRoleSelection(new Set());
|
||||
try {
|
||||
const [userResult, roleResult] = await Promise.all([
|
||||
getUserList(),
|
||||
getRoles().catch(() => ({ roles: [] as Role[] })),
|
||||
]);
|
||||
setUsers(
|
||||
userResult.users.map((user) => ({
|
||||
id: user.userId,
|
||||
username: user.username,
|
||||
})),
|
||||
);
|
||||
setRoles(roleResult.roles);
|
||||
} catch (error) {
|
||||
toast.error(getErrorMessage(error));
|
||||
}
|
||||
}
|
||||
|
||||
async function handleGuestLink(enabled: boolean) {
|
||||
if (!roomId) return;
|
||||
try {
|
||||
await setCollabGuestLink(roomId, enabled);
|
||||
void refresh();
|
||||
} catch (error) {
|
||||
toast.error(getErrorMessage(error));
|
||||
}
|
||||
}
|
||||
|
||||
function guestLinkUrl(token: string) {
|
||||
return `${window.location.origin}${window.location.pathname}?view=collab-guest&token=${token}`;
|
||||
}
|
||||
|
||||
async function handleInvite() {
|
||||
if (!roomId || (inviteSelection.size === 0 && roleSelection.size === 0))
|
||||
return;
|
||||
try {
|
||||
await inviteCollabMembers(roomId, {
|
||||
userIds: Array.from(inviteSelection),
|
||||
roleIds: Array.from(roleSelection),
|
||||
});
|
||||
toast.success(t("collab.invited"));
|
||||
setInviteOpen(false);
|
||||
void refresh();
|
||||
} catch (error) {
|
||||
toast.error(getErrorMessage(error));
|
||||
}
|
||||
}
|
||||
|
||||
if (!roomId) {
|
||||
return (
|
||||
<div className="flex flex-1 h-full items-center justify-center">
|
||||
<div className="flex flex-col items-center gap-2 text-muted-foreground">
|
||||
<Presentation className="size-8" />
|
||||
<p className="text-sm">{t("collab.reopenFromPanel")}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (ended) {
|
||||
return (
|
||||
<div className="flex flex-1 h-full items-center justify-center">
|
||||
<div className="flex flex-col items-center gap-2 text-muted-foreground">
|
||||
<AlertCircle className="size-8" />
|
||||
<p className="text-sm">{t("collab.roomEnded")}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const memberIds = new Set(detail?.members.map((member) => member.userId));
|
||||
const invitableUsers = users.filter((user) => !memberIds.has(user.id));
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full min-h-0">
|
||||
{/* Header: roster + controls */}
|
||||
<div className="flex items-center gap-2 px-3 py-2 border-b border-border flex-wrap">
|
||||
<Presentation className="size-4 text-muted-foreground shrink-0" />
|
||||
<span className="text-sm font-semibold truncate">
|
||||
{detail?.room.name}
|
||||
</span>
|
||||
<div className="flex items-center gap-1 flex-wrap flex-1 min-w-0">
|
||||
{detail?.members.map((member) => {
|
||||
const canToggleControl =
|
||||
(isHost || iAmPresenter) &&
|
||||
detail?.stage.protocol === "ssh" &&
|
||||
!!detail?.stage.shareId &&
|
||||
member.userId !== presenterUserId;
|
||||
const hasControl = member.userId === controllerUserId;
|
||||
const badge = (
|
||||
<Badge
|
||||
key={canToggleControl ? undefined : member.userId}
|
||||
variant={hasControl ? "default" : "outline"}
|
||||
className="text-[10px] gap-1"
|
||||
>
|
||||
<span
|
||||
className={`size-1.5 rounded-full ${onlineIds.has(member.userId) ? "bg-green-500" : "bg-muted-foreground/30"}`}
|
||||
/>
|
||||
{member.username}
|
||||
{member.roomRole === "host" && <Crown className="size-2.5" />}
|
||||
{member.userId === presenterUserId && (
|
||||
<MonitorUp className="size-2.5 text-red-500" />
|
||||
)}
|
||||
{hasControl && <MousePointerClick className="size-2.5" />}
|
||||
</Badge>
|
||||
);
|
||||
return canToggleControl ? (
|
||||
<button
|
||||
key={member.userId}
|
||||
type="button"
|
||||
title={t(
|
||||
hasControl ? "collab.revokeControl" : "collab.grantControl",
|
||||
)}
|
||||
onClick={() =>
|
||||
void changeControl(hasControl ? null : member.userId)
|
||||
}
|
||||
>
|
||||
{badge}
|
||||
</button>
|
||||
) : (
|
||||
badge
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 shrink-0">
|
||||
{isHost && (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="h-7 text-xs"
|
||||
onClick={() => void openInviteDialog()}
|
||||
>
|
||||
<UserPlus className="size-3.5 mr-1" />
|
||||
{t("collab.invite")}
|
||||
</Button>
|
||||
)}
|
||||
{!!detail?.stage.shareId &&
|
||||
detail.stage.protocol === "ssh" &&
|
||||
!iAmPresenter &&
|
||||
!draft && (
|
||||
<Button
|
||||
size="sm"
|
||||
variant={controllerUserId === me ? "default" : "outline"}
|
||||
className="h-7 text-xs"
|
||||
onClick={() =>
|
||||
controllerUserId === me
|
||||
? void changeControl(null)
|
||||
: void requestCollabStageControl(roomId).catch((error) =>
|
||||
toast.error(getErrorMessage(error)),
|
||||
)
|
||||
}
|
||||
>
|
||||
<Hand className="size-3.5 mr-1" />
|
||||
{controllerUserId === me
|
||||
? t("collab.releaseControl")
|
||||
: t("collab.requestControl")}
|
||||
</Button>
|
||||
)}
|
||||
{(iAmPresenter || draft || (isHost && presenterUserId)) && (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="h-7 text-xs"
|
||||
onClick={() => void handleStop()}
|
||||
>
|
||||
<Square className="size-3.5 mr-1" />
|
||||
{t("collab.stopPresenting")}
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
size="sm"
|
||||
className="h-7 text-xs"
|
||||
onClick={() => void openPresentDialog()}
|
||||
>
|
||||
<MonitorUp className="size-3.5 mr-1" />
|
||||
{presenterUserId && !iAmPresenter
|
||||
? t("collab.takeOver")
|
||||
: t("collab.present")}
|
||||
</Button>
|
||||
{isHost && (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
className="h-7 text-xs"
|
||||
onClick={() => void handleEnd()}
|
||||
>
|
||||
{t("collab.endRoom")}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isHost && (
|
||||
<div className="flex items-center gap-2 px-3 py-1.5 border-b border-border text-[11px] text-muted-foreground">
|
||||
<Link2 className="size-3.5" />
|
||||
<span className="flex-1 truncate">
|
||||
{detail?.room.guestLinkToken
|
||||
? t("collab.guestLinkOn")
|
||||
: t("collab.guestLinkOff")}
|
||||
</span>
|
||||
{detail?.room.guestLinkToken && (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="h-6 text-[10px]"
|
||||
onClick={() => {
|
||||
void navigator.clipboard
|
||||
.writeText(guestLinkUrl(detail.room.guestLinkToken!))
|
||||
.then(() => toast.success(t("collab.linkCopied")));
|
||||
}}
|
||||
>
|
||||
{t("collab.copyLink")}
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
size="sm"
|
||||
variant={detail?.room.guestLinkToken ? "destructive" : "outline"}
|
||||
className="h-6 text-[10px]"
|
||||
onClick={() => void handleGuestLink(!detail?.room.guestLinkToken)}
|
||||
>
|
||||
{t("collab.guestLink")}:{" "}
|
||||
{detail?.room.guestLinkToken ? "ON" : "OFF"}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Stage */}
|
||||
<div className="relative flex-1 min-h-0">
|
||||
{draft ? (
|
||||
draft.protocol === "ssh" ? (
|
||||
<CommandHistoryProvider>
|
||||
<Terminal
|
||||
hostConfig={{
|
||||
...draft.host,
|
||||
id: Number(draft.host.id),
|
||||
ip: draft.host.ip,
|
||||
port: draft.host.port,
|
||||
username: draft.host.username,
|
||||
instanceId: `collab-present-${roomId}`,
|
||||
}}
|
||||
isVisible={isVisible}
|
||||
disableAutoFocus={false}
|
||||
onSessionReady={(sessionId) =>
|
||||
void registerStage("ssh", sessionId, Number(draft.host.id))
|
||||
}
|
||||
/>
|
||||
</CommandHistoryProvider>
|
||||
) : (
|
||||
<GuacamoleDisplay
|
||||
connectionConfig={{
|
||||
token: draft.token,
|
||||
protocol: draft.protocol,
|
||||
type: draft.protocol,
|
||||
}}
|
||||
isVisible={isVisible}
|
||||
onConnect={() =>
|
||||
void registerStage(
|
||||
draft.protocol,
|
||||
draft.guacamoleConnectionId,
|
||||
Number(draft.host.id),
|
||||
)
|
||||
}
|
||||
onError={(err) => {
|
||||
toast.error(err);
|
||||
setDraft(null);
|
||||
}}
|
||||
/>
|
||||
)
|
||||
) : stage && stage.protocol && !iAmPresenter ? (
|
||||
<>
|
||||
{presenterName && (
|
||||
<div className="absolute top-2 left-2 z-20 rounded px-2 py-0.5 text-[10px] bg-background/80 border border-border">
|
||||
{t("collab.presenterLabel", { name: presenterName })}
|
||||
</div>
|
||||
)}
|
||||
{stage.protocol === "ssh" ? (
|
||||
<CommandHistoryProvider>
|
||||
<Terminal
|
||||
hostConfig={{
|
||||
id: stage.hostId ?? undefined,
|
||||
name: detail?.room.name ?? "stage",
|
||||
ip: "",
|
||||
port: 0,
|
||||
username: "",
|
||||
authType: "none",
|
||||
instanceId: `collab-view-${roomId}-${stage.shareId}`,
|
||||
joinShareId: stage.shareId,
|
||||
joinSharedSessionId: stage.sessionId ?? null,
|
||||
}}
|
||||
isVisible={isVisible}
|
||||
disableAutoFocus
|
||||
/>
|
||||
</CommandHistoryProvider>
|
||||
) : stage.connectParams?.token ? (
|
||||
<GuacamoleDisplay
|
||||
key={stage.connectParams.token}
|
||||
connectionConfig={{
|
||||
token: stage.connectParams.token,
|
||||
protocol: stage.protocol,
|
||||
type: stage.protocol,
|
||||
}}
|
||||
isVisible={isVisible}
|
||||
/>
|
||||
) : (
|
||||
<CenteredNote text={t("collab.stageLoading")} />
|
||||
)}
|
||||
</>
|
||||
) : iAmPresenter && !draft ? (
|
||||
<CenteredNote text={t("collab.youArePresenting")} />
|
||||
) : (
|
||||
<CenteredNote text={t("collab.emptyStage")} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Present dialog */}
|
||||
<Dialog open={presentOpen} onOpenChange={setPresentOpen}>
|
||||
<DialogContent className="max-h-[70vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{t("collab.presentTitle")}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="flex flex-col gap-1">
|
||||
{hosts.length === 0 && (
|
||||
<div className="flex justify-center py-4">
|
||||
<Loader2 className="size-4 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
)}
|
||||
{hosts.map((host) => {
|
||||
const protocols: Array<"ssh" | "rdp" | "vnc" | "telnet"> = [];
|
||||
if (host.enableTerminal || host.enableSsh) protocols.push("ssh");
|
||||
if (host.enableRdp) protocols.push("rdp");
|
||||
if (host.enableVnc) protocols.push("vnc");
|
||||
if (host.enableTelnet) protocols.push("telnet");
|
||||
if (protocols.length === 0) return null;
|
||||
return (
|
||||
<div
|
||||
key={host.id}
|
||||
className="flex items-center gap-2 px-2 py-1.5 border border-border"
|
||||
>
|
||||
<span className="flex-1 text-xs truncate">{host.name}</span>
|
||||
{protocols.map((protocol) => (
|
||||
<Button
|
||||
key={protocol}
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="h-6 text-[10px] uppercase"
|
||||
onClick={() => void choosePresent(host, protocol)}
|
||||
>
|
||||
{protocol}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Invite dialog */}
|
||||
<Dialog open={inviteOpen} onOpenChange={setInviteOpen}>
|
||||
<DialogContent className="max-h-[70vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{t("collab.inviteTitle")}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="flex flex-col gap-1">
|
||||
{roles.length > 0 && (
|
||||
<span className="text-[9px] font-semibold uppercase tracking-widest text-muted-foreground">
|
||||
{t("collab.roles")}
|
||||
</span>
|
||||
)}
|
||||
{roles.map((role) => (
|
||||
<label
|
||||
key={role.id}
|
||||
className="flex items-center gap-2 px-2 py-1.5 text-xs border border-border cursor-pointer"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={roleSelection.has(role.id)}
|
||||
onChange={(e) => {
|
||||
setRoleSelection((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (e.target.checked) next.add(role.id);
|
||||
else next.delete(role.id);
|
||||
return next;
|
||||
});
|
||||
}}
|
||||
/>
|
||||
{role.displayName || role.name}
|
||||
</label>
|
||||
))}
|
||||
<span className="text-[9px] font-semibold uppercase tracking-widest text-muted-foreground">
|
||||
{t("collab.users")}
|
||||
</span>
|
||||
{invitableUsers.map((user) => (
|
||||
<label
|
||||
key={user.id}
|
||||
className="flex items-center gap-2 px-2 py-1.5 text-xs border border-border cursor-pointer"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={inviteSelection.has(user.id)}
|
||||
onChange={(e) => {
|
||||
setInviteSelection((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (e.target.checked) next.add(user.id);
|
||||
else next.delete(user.id);
|
||||
return next;
|
||||
});
|
||||
}}
|
||||
/>
|
||||
{user.username}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setInviteOpen(false)}>
|
||||
{t("common.cancel")}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => void handleInvite()}
|
||||
disabled={inviteSelection.size === 0 && roleSelection.size === 0}
|
||||
>
|
||||
{t("collab.invite")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CenteredNote({ text }: { text: string }) {
|
||||
return (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<p className="text-sm text-muted-foreground">{text}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -118,12 +118,12 @@ function CenteredMessage({
|
||||
);
|
||||
}
|
||||
|
||||
function GuestTerminalView({
|
||||
export function GuestTerminalView({
|
||||
share,
|
||||
linkToken,
|
||||
wsQuery,
|
||||
}: {
|
||||
share: ResolvedShareLink;
|
||||
linkToken: string;
|
||||
share: Pick<ResolvedShareLink, "permissionLevel">;
|
||||
wsQuery: string;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const { instance: terminal, ref: xtermRef } = useXTerm();
|
||||
@@ -153,9 +153,7 @@ function GuestTerminalView({
|
||||
resolveTerminalWsBaseUrl().then((baseWsUrl) => {
|
||||
if (cancelled) return;
|
||||
const separator = baseWsUrl.includes("?") ? "&" : "?";
|
||||
ws = new WebSocket(
|
||||
`${baseWsUrl}${separator}shareToken=${encodeURIComponent(linkToken)}`,
|
||||
);
|
||||
ws = new WebSocket(`${baseWsUrl}${separator}${wsQuery}`);
|
||||
wsRef.current = ws;
|
||||
|
||||
ws.onopen = () => {
|
||||
@@ -215,7 +213,7 @@ function GuestTerminalView({
|
||||
};
|
||||
// Deliberately runs once terminal mounts - share/token/permission are stable for the view's lifetime.
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [terminal, linkToken]);
|
||||
}, [terminal, wsQuery]);
|
||||
|
||||
return (
|
||||
<div className="relative w-full h-full">
|
||||
@@ -357,7 +355,10 @@ export default function SharedSessionView() {
|
||||
share &&
|
||||
linkToken &&
|
||||
(share.protocol === "ssh" ? (
|
||||
<GuestTerminalView share={share} linkToken={linkToken} />
|
||||
<GuestTerminalView
|
||||
share={share}
|
||||
wsQuery={`shareToken=${encodeURIComponent(linkToken)}`}
|
||||
/>
|
||||
) : (
|
||||
<GuestGuacamoleView share={share} />
|
||||
))}
|
||||
|
||||
@@ -131,6 +131,8 @@ interface SSHTerminalProps {
|
||||
onOpenTab?: (type: TabType) => void;
|
||||
/** False when this terminal sits in an unfocused split pane. */
|
||||
isFocusedPane?: boolean;
|
||||
/** Fires when the backend reports the created session id (collab presenting). */
|
||||
onSessionReady?: (sessionId: string) => void;
|
||||
}
|
||||
|
||||
const ALTERNATE_SCREEN_SEQUENCE = /\x1b\[\?(47|1047|1049)([hl])/g;
|
||||
@@ -154,6 +156,7 @@ const TerminalInner = forwardRef<TerminalHandle, SSHTerminalProps>(
|
||||
{
|
||||
hostConfig,
|
||||
isVisible,
|
||||
onSessionReady,
|
||||
splitScreen = false,
|
||||
onClose,
|
||||
onTitleChange,
|
||||
@@ -1936,6 +1939,7 @@ const TerminalInner = forwardRef<TerminalHandle, SSHTerminalProps>(
|
||||
}
|
||||
} else if (msg.type === "sessionCreated") {
|
||||
sessionIdRef.current = msg.sessionId;
|
||||
onSessionReady?.(msg.sessionId);
|
||||
if (hostConfig.instanceId) {
|
||||
import("@/main-axios").then(({ patchOpenTab }) => {
|
||||
patchOpenTab(hostConfig.instanceId!, {
|
||||
|
||||
@@ -662,6 +662,7 @@
|
||||
"aiNote": "Nothing is sent anywhere until you add a provider and send a message."
|
||||
},
|
||||
"nav": {
|
||||
"collab": "Meetings",
|
||||
"home": "Home",
|
||||
"terminal": "Terminal",
|
||||
"localTerminal": "Local Terminal",
|
||||
@@ -1806,6 +1807,59 @@
|
||||
"join": "Join",
|
||||
"sharedSessionLabel": "{{hostName}} (shared)"
|
||||
},
|
||||
"collab": {
|
||||
"createRoom": "New room",
|
||||
"roomName": "Room name",
|
||||
"persistentRoom": "Persistent room",
|
||||
"persistentRoomHint": "Persistent rooms stay listed after the meeting ends and can be reused.",
|
||||
"noRooms": "No rooms yet. Create one to start a meeting.",
|
||||
"openRoom": "Open",
|
||||
"endRoom": "End meeting",
|
||||
"leaveRoom": "Leave",
|
||||
"deleteMember": "Remove",
|
||||
"invite": "Invite",
|
||||
"inviteTitle": "Invite members",
|
||||
"members": "Members",
|
||||
"online": "online",
|
||||
"hostBadge": "Host",
|
||||
"presenterBadge": "Presenting",
|
||||
"present": "Present",
|
||||
"presentTitle": "Take the stage",
|
||||
"presentHost": "Host",
|
||||
"presentProtocol": "Protocol",
|
||||
"stopPresenting": "Stop presenting",
|
||||
"takeOver": "Take over",
|
||||
"emptyStage": "Nobody is presenting. Take the stage to share a session.",
|
||||
"stageLoading": "Connecting to the stage...",
|
||||
"stageEnded": "The presentation ended",
|
||||
"roomEnded": "This meeting has ended",
|
||||
"presenterLabel": "{{name}} is presenting",
|
||||
"guestLink": "Guest link",
|
||||
"guestLinkOn": "Guest link is on. Anyone with the link can watch the stage.",
|
||||
"guestLinkOff": "Guest link is off.",
|
||||
"copyLink": "Copy link",
|
||||
"linkCopied": "Link copied",
|
||||
"roles": "Roles",
|
||||
"users": "Users",
|
||||
"invitedTo": "You were invited to \"{{name}}\"",
|
||||
"guest": {
|
||||
"title": "Meeting",
|
||||
"waiting": "Waiting for the presenter...",
|
||||
"linkInvalid": "This guest link is invalid or the meeting has ended"
|
||||
},
|
||||
"reopenFromPanel": "This meeting tab expired. Reopen the room from the Meetings panel.",
|
||||
"requestControl": "Request control",
|
||||
"releaseControl": "Release control",
|
||||
"grantControl": "Give control",
|
||||
"revokeControl": "Take back control",
|
||||
"controlRequestedBy": "{{name}} asked for control",
|
||||
"grant": "Grant",
|
||||
"controlBadge": "In control",
|
||||
"youArePresenting": "You are presenting in another tab. Stop presenting to hand the stage over.",
|
||||
"created": "Room created",
|
||||
"invited": "Members invited",
|
||||
"roomTab": "Meeting"
|
||||
},
|
||||
"sessionSharing": {
|
||||
"guestView": {
|
||||
"loading": "Connecting to shared session...",
|
||||
|
||||
@@ -27,6 +27,7 @@ import {
|
||||
Plug,
|
||||
ScrollText,
|
||||
Sparkles,
|
||||
Presentation,
|
||||
Workflow,
|
||||
} from "lucide-react";
|
||||
import { lazy, Suspense } from "react";
|
||||
@@ -57,6 +58,11 @@ const loadTerminalFeature = () =>
|
||||
default: m.Terminal,
|
||||
}));
|
||||
const TerminalFeature = lazy(loadTerminalFeature);
|
||||
const CollabRoomTab = lazy(() =>
|
||||
import("@/features/collab/CollabRoomTab").then((m) => ({
|
||||
default: m.CollabRoomTab,
|
||||
})),
|
||||
);
|
||||
const LocalTerminal = lazy(() =>
|
||||
import("@/features/local-terminal/LocalTerminal").then((m) => ({
|
||||
default: m.LocalTerminal,
|
||||
@@ -318,6 +324,8 @@ export function tabIcon(type: TabType) {
|
||||
return <LayoutGrid className="size-3.5" />;
|
||||
case "fleet-inventory":
|
||||
return <Boxes className="size-3.5" />;
|
||||
case "collab":
|
||||
return <Presentation className="size-3.5" />;
|
||||
case "termix-id":
|
||||
return <Fingerprint className="size-3.5" />;
|
||||
case "alerts":
|
||||
@@ -615,6 +623,11 @@ export function renderTabContent(
|
||||
<FleetInventoryTab fleetId={tab.fleetId} isVisible={isVisible} />,
|
||||
);
|
||||
|
||||
case "collab":
|
||||
return withTabSuspense(
|
||||
<CollabRoomTab roomId={tab.collabRoomId} isVisible={isVisible} />,
|
||||
);
|
||||
|
||||
case "termix-id":
|
||||
return withTabSuspense(
|
||||
<PanelTabFrame>
|
||||
|
||||
@@ -32,7 +32,8 @@ export type RailView =
|
||||
| "automations"
|
||||
| "ai"
|
||||
| "fleets"
|
||||
| "workspaces";
|
||||
| "workspaces"
|
||||
| "collab";
|
||||
|
||||
export type HideableRailView =
|
||||
| Exclude<RailView, "user-profile" | "admin-settings">
|
||||
|
||||
@@ -0,0 +1,173 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { toast } from "sonner";
|
||||
import { Loader2, Plus, Presentation, RefreshCw } from "lucide-react";
|
||||
import { Button } from "@/components/button";
|
||||
import { Input } from "@/components/input";
|
||||
import { Badge } from "@/components/badge";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/dialog";
|
||||
import {
|
||||
createCollabRoom,
|
||||
listCollabRooms,
|
||||
type CollabRoom,
|
||||
} from "@/api/collab-api";
|
||||
import { getErrorMessage } from "@/lib/error-message";
|
||||
|
||||
export function CollabPanel({
|
||||
onOpenRoom,
|
||||
}: {
|
||||
onOpenRoom: (room: CollabRoom) => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const [rooms, setRooms] = useState<CollabRoom[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [createOpen, setCreateOpen] = useState(false);
|
||||
const [name, setName] = useState("");
|
||||
const [persistent, setPersistent] = useState(false);
|
||||
const [creating, setCreating] = useState(false);
|
||||
|
||||
const refresh = useCallback(async () => {
|
||||
try {
|
||||
const result = await listCollabRooms();
|
||||
setRooms(result.rooms);
|
||||
} catch {
|
||||
/* the list stays as-is */
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
void refresh();
|
||||
}, [refresh]);
|
||||
|
||||
async function handleCreate() {
|
||||
if (!name.trim()) return;
|
||||
setCreating(true);
|
||||
try {
|
||||
const { room } = await createCollabRoom(name.trim(), persistent);
|
||||
toast.success(t("collab.created"));
|
||||
setCreateOpen(false);
|
||||
setName("");
|
||||
setPersistent(false);
|
||||
await refresh();
|
||||
onOpenRoom(room);
|
||||
} catch (error) {
|
||||
toast.error(getErrorMessage(error));
|
||||
} finally {
|
||||
setCreating(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-2 p-2">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Button
|
||||
size="sm"
|
||||
className="h-7 text-xs flex-1"
|
||||
onClick={() => setCreateOpen(true)}
|
||||
>
|
||||
<Plus className="size-3.5 mr-1" />
|
||||
{t("collab.createRoom")}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="h-7 px-2"
|
||||
onClick={() => void refresh()}
|
||||
>
|
||||
<RefreshCw className="size-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex justify-center py-6">
|
||||
<Loader2 className="size-4 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : rooms.length === 0 ? (
|
||||
<p className="text-xs text-muted-foreground px-1 py-4 text-center">
|
||||
{t("collab.noRooms")}
|
||||
</p>
|
||||
) : (
|
||||
<div className="flex flex-col gap-1">
|
||||
{rooms.map((room) => (
|
||||
<button
|
||||
key={room.id}
|
||||
type="button"
|
||||
onClick={() => onOpenRoom(room)}
|
||||
className="flex items-center gap-2 px-2 py-1.5 text-left border border-border hover:bg-muted/50"
|
||||
>
|
||||
<Presentation className="size-3.5 shrink-0 text-muted-foreground" />
|
||||
<span className="flex-1 text-xs truncate">{room.name}</span>
|
||||
{room.presenterUserId && (
|
||||
<span className="size-1.5 rounded-full bg-red-500 shrink-0" />
|
||||
)}
|
||||
{room.persistent && (
|
||||
<Badge variant="outline" className="text-[9px] px-1 py-0">
|
||||
{t("collab.persistentRoom")}
|
||||
</Badge>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Dialog open={createOpen} onOpenChange={setCreateOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{t("collab.createRoom")}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="flex flex-col gap-3">
|
||||
<Input
|
||||
placeholder={t("collab.roomName")}
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") void handleCreate();
|
||||
}}
|
||||
/>
|
||||
<label className="flex items-start gap-2 text-xs cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="mt-0.5"
|
||||
checked={persistent}
|
||||
onChange={(e) => setPersistent(e.target.checked)}
|
||||
/>
|
||||
<span>
|
||||
<span className="font-medium">
|
||||
{t("collab.persistentRoom")}
|
||||
</span>
|
||||
<br />
|
||||
<span className="text-muted-foreground">
|
||||
{t("collab.persistentRoomHint")}
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setCreateOpen(false)}
|
||||
disabled={creating}
|
||||
>
|
||||
{t("common.cancel")}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => void handleCreate()}
|
||||
disabled={creating || !name.trim()}
|
||||
>
|
||||
{creating && <Loader2 className="size-3.5 mr-1 animate-spin" />}
|
||||
{t("common.create")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -19,6 +19,7 @@ import {
|
||||
User,
|
||||
Workflow,
|
||||
Zap,
|
||||
Presentation,
|
||||
type LucideIcon,
|
||||
} from "lucide-react";
|
||||
import { isElectron } from "@/lib/electron";
|
||||
@@ -83,6 +84,12 @@ export const RAIL_ITEMS: RailItemDef[] = [
|
||||
separatorAfter: true,
|
||||
rightDockable: true,
|
||||
},
|
||||
{
|
||||
id: "collab",
|
||||
icon: Presentation,
|
||||
labelKey: "nav.collab",
|
||||
separatorAfter: true,
|
||||
},
|
||||
{
|
||||
id: "quick-connect",
|
||||
icon: Zap,
|
||||
|
||||
@@ -48,6 +48,7 @@ describe("RAIL_ITEMS", () => {
|
||||
"credentials",
|
||||
"termix-id",
|
||||
"connections",
|
||||
"collab",
|
||||
"quick-connect",
|
||||
"serial",
|
||||
"ssh-tools",
|
||||
|
||||
Reference in New Issue
Block a user